第 3 章：视觉设计 — 从概念到看得见的界面

你将学到什么

• 用 /design-consultation 建立设计系统（颜色、字体、间距）
• 用 /design-shotgun 一次生成多个 UI 方案对比
• 用 /design-html 把设计稿转成可用的 HTML/CSS
• 用 /design-review 自动审查视觉质量

3.1 为什么设计系统先行

开发一个应用就像盖房子。你不会直接开始砌砖——先有图纸，再打地基，最后才砌墙。

设计系统就是 UI 的"图纸"。它定义了：

• 颜色： 主色是什么、背景色是什么、错误提示用什么颜色
• 字体： 标题用多大、正文用多大、行间距多少
• 间距： 组件之间的距离、内边距、外边距
• 组件： 按钮长什么样、输入框长什么样、卡片长什么样

先定义好这些，后面写代码时不用每次纠结"这个按钮应该圆角多大"。

3.2 /design-consultation — 建立设计系统

命令语法

/design-consultation

实战：为 NoteFlow 创建设计系统

在 Claude Code 中输入：

/design-consultation

项目：NoteFlow 在线记事本
风格：简洁、现代、专注内容
参考：Notion 的简洁感、Apple Notes 的清爽感
目标用户：个人用户，需要一个不干扰写作的界面

Claude 会做什么：

1. 分析你的项目需求
2. 生成完整的设计系统定义
3. 包含颜色方案、字体排版、间距系统、组件样式

你可能得到的设计系统：

/* 颜色系统 */
:root {
  /* 主色 — 沉稳的深蓝灰 */
  --color-primary: #1e293b;
  --color-primary-light: #334155;

  /* 背景 — 温暖的浅灰 */
  --color-bg: #fafaf9;
  --color-bg-card: #ffffff;
  --color-bg-hover: #f5f5f4;

  /* 文字 */
  --color-text: #1c1917;
  --color-text-secondary: #78716c;
  --color-text-muted: #a8a29e;

  /* 功能色 */
  --color-accent: #2563eb;
  --color-success: #16a34a;
  --color-danger: #dc2626;
  --color-warning: #d97706;

  /* 边框 */
  --color-border: #e7e5e4;
  --color-border-focus: #2563eb;
}

/* 字体系统 */
--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", "Fira Code", monospace;

/* 字号 */
--text-xs: 0.75rem;    /* 12px — 辅助信息 */
--text-sm: 0.875rem;   /* 14px — 次要文字 */
--text-base: 1rem;     /* 16px — 正文 */
--text-lg: 1.125rem;   /* 18px — 小标题 */
--text-xl: 1.25rem;    /* 20px — 标题 */
--text-2xl: 1.5rem;    /* 24px — 大标题 */

/* 间距系统（4px 基准） */
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */

/* 圆角 */
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;

/* 阴影 */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);

3.3 /design-shotgun — 生成多个方案对比

设计系统定了"规矩"，但具体怎么布局还有多种可能。/design-shotgun 一次生成 4-6 个布局方案，让你对比选择。

命令语法

/design-shotgun [描述]

实战：生成 NoteFlow 布局方案

/design-shotgun NoteFlow 主页面布局

需要展示：
1. 笔记列表（左侧或上方）
2. 编辑区域（右侧或下方）
3. 搜索栏
4. 分类筛选
5. 新建按钮

设计系统已定义（见上方 CSS 变量）。

你会看到什么：

Claude 会在浏览器中生成多个布局变体。典型方案：

方案 A：左右分栏        方案 B：三栏布局
┌──────┬─────────┐     ┌───┬──────┬────────┐
│ 笔记  │         │     │分 │ 笔记  │        │
│ 列表  │  编辑区  │     │类 │ 列表  │ 编辑区  │
│      │         │     │栏 │      │        │
└──────┴─────────┘     └───┴──────┴────────┘

方案 C：单栏全屏        方案 D：卡片网格
┌────────────────┐     ┌─────┬─────┐
│ 搜索栏          │     │ 📝  │ 📝  │
├────────────────┤     │笔记1 │笔记2 │
│ 当前笔记内容    │     ├─────┼─────┤
│                │     │ 📝  │ 📝  │
│                │     │笔记3 │笔记4 │
└────────────────┘     └─────┴─────┘

如何选择： 考虑 NoteFlow 的使用场景——用户需要边看列表边编辑，方案 A（左右分栏）最合适。

3.4 /design-html — 设计稿转代码

选好方案后，用 /design-html 把它转成真正的 HTML/CSS。

命令语法

/design-html [描述]

实战：生成 NoteFlow 主页面

/design-html NoteFlow 主页面

布局：左右分栏（方案 A）
- 左栏：笔记列表，顶部搜索栏，底部新建按钮
- 右栏：编辑区域，标题输入+内容文本框
- 使用已定义的 CSS 变量设计系统
- 响应式：手机端变为上下布局

产出： Claude 生成完整的 HTML 文件，包含 CSS 和基本结构。你可以直接在浏览器中打开预览。

3.5 /design-review — 自动视觉审查

有代码了，但质量怎么样？/design-review 会像设计师一样审查你的界面。

命令语法

/design-review

如果项目正在运行（npm run dev），Claude 会直接在浏览器中查看你的页面。

实战：审查 NoteFlow 界面

/design-review http://localhost:5173

审查维度：

flowchart LR
    A[设计审查] --> B[排版]
    A --> C[颜色]
    A --> D[间距]
    A --> E[一致性]
    A --> F[响应式]

    B --> B1[标题层级清晰？]
    B --> B2[行间距舒适？]
    C --> C1[对比度足够？]
    C --> C2[配色和谐？]
    D --> D1[元素对齐？]
    D --> D2[留白合理？]
    E --> E1[按钮风格统一？]
    E --> E2[间距规律一致？]
    F --> F1[手机端可用？]
    F --> F2[平板端适配？]

你可能得到的审查结果：

审查评分：7/10

通过项：

• 颜色系统一致，CSS 变量使用正确
• 间距遵循 4px 基准
• 字体层级清晰

需修复：

1. 笔记列表项的 hover 状态缺少（hover 时应有背景色变化）
2. 搜索栏在窄屏幕下溢出容器
3. 编辑区域的高度没有撑满可用空间

自动修复中...

审查完发现问题后，/design-review 可以自动修复这些问题，逐个 commit。

3.6 gstack 设计阶段的完整流程

flowchart TB
    A["/design-consultation
定义设计系统"] --> B["/design-shotgun
生成布局方案"]
    B --> C{选择方案}
    C --> D["/design-html
生成 HTML/CSS"]
    D --> E["/design-review
视觉审查"]
    E --> F{有问题？}
    F -- 是 --> G["自动修复"]
    G --> E
    F -- 否 --> H["设计稿完成 ✅"]

    style A fill:#eef2ff,stroke:#4f46e5
    style H fill:#dcfce7,stroke:#16a34a

动手做

1. 运行 /design-consultation，为 NoteFlow 定义设计系统
2. 运行 /design-shotgun，生成布局方案，选择你喜欢的
3. 运行 /design-html，把选中的方案转成 HTML
4. 启动 npm run dev，运行 /design-review 审查

本章小结

核心原则： 先定规矩（设计系统），再做布局（方案对比），最后转代码（HTML）。每一步都有审查，确保质量。