前端设计师

前端设计师

核心理念

避免 AI 味，追求独特性。

AI 生成的界面往往有明显的"AI 味"：过度使用渐变、圆角过大、配色单调、布局雷同。 本 skill 的目标是打破这种模式，创造有品味、有个性的设计。

设计原则

1. 拒绝模板化

❌ 避免                          ✅ 追求
─────────────────────────────────────────────────
蓝紫渐变背景                     单色或微妙的色彩变化
超大圆角 (20px+)                 精确的圆角 (4-8px)
居中对称布局                     不对称、有张力的布局
通用图标库                       定制图形或无图标
"现代感"卡片堆叠                 有层次的信息架构

2. 色彩哲学

/* ═══════════════════════════════════════════════════════════════
 * 色彩不是装饰，是信息
 * ═══════════════════════════════════════════════════════════════ */

/* 主色调：克制使用，仅用于关键交互 */
--primary: #1a1a1a;        /* 深色系更显高级 */
--accent: #0066ff;         /* 点缀色，少即是多 */

/* 灰度系统：建立层次感 */
--gray-50: #fafafa;
--gray-100: #f5f5f5;
--gray-200: #e5e5e5;
--gray-300: #d4d4d4;
--gray-400: #a3a3a3;
--gray-500: #737373;
--gray-600: #525252;
--gray-700: #404040;
--gray-800: #262626;
--gray-900: #171717;

3. 排版法则

/* ═══════════════════════════════════════════════════════════════
 * 排版是设计的骨架
 * ═══════════════════════════════════════════════════════════════ */

/* 字体选择：系统字体优先，避免 Google Fonts 的同质化 */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

/* 中文字体：思源黑体或系统默认 */
font-family: "Source Han Sans SC", "Noto Sans SC", "PingFang SC", sans-serif;

/* 字号系统：基于 4px 网格 */
--text-xs: 12px;
--text-sm: 14px;
--text-base: 16px;
--text-lg: 18px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;

/* 行高：紧凑但可读 */
line-height: 1.5;          /* 正文 */
line-height: 1.2;          /* 标题 */

4. 间距系统

/* ═══════════════════════════════════════════════════════════════
 * 间距创造呼吸感
 * ═══════════════════════════════════════════════════════════════ */

/* 基于 4px 的间距系统 */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;

/* 组件内间距：紧凑 */
padding: var(--space-3) var(--space-4);

/* 区块间距：宽松 */
margin-bottom: var(--space-8);

5. 交互细节

/* ═══════════════════════════════════════════════════════════════
 * 微交互体现品质
 * ═══════════════════════════════════════════════════════════════ */

/* 过渡：快速但不突兀 */
transition: all 0.15s ease;

/* 悬停：微妙的变化 */
.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 点击：即时反馈 */
.button:active {
  transform: translateY(0);
}

/* 焦点：清晰的视觉指示 */
.input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent);
}

布局模式

不对称布局

留白艺术

/* 大量留白 = 高级感 */
.hero {
  padding: 120px 0;        /* 不要怕空 */
  max-width: 600px;        /* 限制宽度 */
}

.section {
  margin: 80px 0;          /* 区块间大间距 */
}

组件示例

按钮

  确认

  取消

卡片

  标题
  描述文字

检查清单

生成 HTML 前，检查以下要点：

• [ ] 是否避免了渐变背景？
• [ ] 圆角是否控制在 8px 以内？
• [ ] 是否有足够的留白？
• [ ] 配色是否克制（主色不超过 3 种）？
• [ ] 字体大小是否遵循系统？
• [ ] 交互是否有微妙的反馈？
• [ ] 布局是否有层次感？

反面教材

  欢迎使用
  开启您的精彩旅程
  立即开始

问题分析：

1. 渐变背景 → 俗气
2. 超大圆角 → 幼稚
3. 过重阴影 → 浮夸
4. 居中布局 → 无聊
5. 空洞文案 → 无意义

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: laborany
• Source: laborany/laborany
• License: MIT
• Homepage: https://laborany.github.io

Install and usage instructions live in the source repository linked above.