狸想岛 · AI 实战学习社区

🎯 学什么：不是让 AI 画图，而是让 AI 像一个资深设计师那样研究、推理、提案——从产品定位到字体选型到色彩系统到 DESIGN.md 产出。六阶段完整工作流 + 10 种美学方向分类 + 字体黑名单 + AI Slop 反模式。核心洞察：(1) Phase 3（完整提案）是整流程的灵魂——一次性提出六大维度；(2) Layer 3（第一性原理）是差异化的关键——发现品类常规设计"反而是错的"的地方；(3) 品味记忆的置信度衰减机制（每周衰减 5%）防止"品味化石症"——6 个月前的最爱不如上周的新宠权重高。 💡 难易度：⭐⭐⭐⭐ | ⏱️ 预计时间：40 分钟

[!quote]- 📖 原Skill精要 技能名称：design-consultation 核心功能：设计系统咨询——理解你的产品、研究行业生态、提出完整设计系统（美学、字体、色彩、布局、间距、动效），生成字体+色彩预览页。创建 DESIGN.md 作为项目的设计真相来源。 所属体系：gstack 虚拟工程团队 协作关系：新项目设计体系从零搭建。已有网站推断设计体系请用 [[L6-05-设计计划评审|plan-design-review]]

1. 课程概览

💡 白话小课堂：设计系统就好比你家的装修风格规范——规定了用哪个牌子的地板、什么颜色的墙面、多高的踢脚线。没有设计系统：按钮圆角有的 4px 有的 8px，绿色某处表示"成功"另一处表示"品牌色"。有设计系统：视觉一致性一以贯之，AI 可以读懂 DESIGN.md 并在后续所有设计 Skill 中基于同一套约束运行。

2. 为什么需要设计系统

Why Design Systems?

每个产品都有设计——问题是有意识的还是下意识的。

没有设计系统： → 按钮有的圆角 4px 有的 8px，因为两个开发者用了不同的习惯 → 绿色在某处表示"成功"，在另一处表示"品牌色"，用户困惑 → 下次改版时不知道哪些是刻意的选择、哪些是历史的偶然

有设计系统： → 视觉一致性一以贯之（professionalism by constraint） → 设计决策可以被复用，不是每次从头猜 → AI 可以读懂 DESIGN.md，未来的 /design-review、/design-shotgun 都基于同一套约束运行

design-consultation 的使命：把"我觉得好看"变成"这套系统是自洽的"。

3. 六阶段工作流

design-consultation 遵循一个完整的设计交付流程：

Phase 0: 预检 — 不重复造轮子

→ 检查是否已有 DESIGN.md → 如果有 → 询问：更新/重做/取消 → 读取项目 README、package.json 获取产品上下文 → 查找 office-hours 输出（如果有，产品定位已定义好）

Phase 1: 产品上下文 — 理解你造的是什么

→ 确认产品是什么、面向谁、在什么领域 → 确认项目类型：web app / dashboard / marketing site / 内部工具 → 询问是否要做竞品研究（浏览器截图 + WebSearch） → 追问"记忆点"：用户看完第一眼后应该记住什么？

Phase 2: 研究 — 三层知识分析

→ Layer 1（经典）：这个品类所有产品共享的设计模式 → Layer 2（流行）：搜索结果和设计话语中正在发生什么 → Layer 3（第一性）：这个产品的用户有什么特殊性，以至于该品类的常规设计反而是错的？ → 输出：浓缩为 5-10 句的情境总结

Phase 3: 完整提案 — 灵魂所在

→ 一次性提出完整的六大维度：美学方向、装饰级别、布局方法、色彩方案（含 hex）、字体系列（含角色）、间距基准、动效策略 → SAFE/RISK 分解：哪些是品类基线（玩安全的）、哪些是刻意冒险（让产品有自己的脸）

Phase 4: 深钻 — 只在用户要求时

→ 字体深钻：3-5 个具体候选，解释各自的感情色彩 → 色彩深钻：2-3 个调色板选项，解释色彩理论推理 → 每个深钻就是一次 AskUserQuestion，焦点单一

Phase 5: 预览 — 让用户看到，不是读到

→ 如果设计二进制可用 → AI 生成设计模型图 → 如果不可用 → HTML 预览页面（含字体样品、色板、模拟页面） → 必经：比较板反馈循环（评分→提交→确认）

Phase 6: 写入 DESIGN.md — 持久化设计真理

→ 如果用了 $D extract → 从模型图中提取精确的色值和字体 → 否则 → 以 Phase 3 的提案为主 → 结构：产品上下文、美学方向、字体（含加载策略和比例尺）、色彩（含语义色和暗色模式策略）、间距、布局、动效、决策日志

🔑 核心秘诀：Phase 3 是整流程的灵魂。

4. 设计代理的知识储备

design-consultation 的 Agent 内置了一套结构化的设计知识——不是"我觉得它好看"，而是有分类、有选择、有约束：

美学方向分类（10 种）

极致简约 — 只有字体和留白，零装饰，现代主义
极大化混沌 — 层次密集，图案丰富，Y2K 与当代交融
复古未来 — 显示器光晕、像素网格、暖色等宽字体
奢华/精致 — 衬线字体，高对比，贵金属色调
俏皮/玩具 — 圆角、弹跳动效、鲜明原色，亲和有趣
编辑/杂志 — 强烈的字体层级，不对称网格，引用块
粗野/原始 — 暴露的结构，系统字体，无打磨感
装饰艺术 — 几何精确，金属点缀，对称，装饰边框
有机/自然 — 泥土色调，圆润形态，手绘质感
工业/实用 — 功能优先，数据密集，等宽字体点缀

字体黑名单（绝不推荐）

Papyrus, Comic Sans, Lobster, Impact, Jokerman, Bleeding Cowboys, Permanent Marker, Bradley Hand

过度使用的字体（不作为主要推荐）

Inter, Roboto, Arial, Helvetica, Open Sans, Lato, Montserrat, Poppins, Space Grotesk

AI 懒人模式反模式（绝不能出现在提案中）

紫色/紫罗兰渐变为默认强调色
三列功能网格（彩色圆形图标 + 标题 + 描述）
一切居中布局
统一的泡泡圆角
渐变按钮作为主要 CTA
通用库存照片式 Hero
system-ui 作为主字体（"放弃了排版"的信号）

⚠️ 避坑指南：字体黑名单和过度使用列表不是审美判断，而是数据驱动的——这些字体要么是公认的设计灾难（Comic Sans），要么已经被过度使用到让产品"看起来像 500 个其他产品一样"（Inter, Roboto）。使用它们就意味着放弃了视觉差异化。

5. 跨模型设计审查

design-consultation 的一个重要特性是多模型设计意见：

外部设计声音

→ Codex 设计声音：用 codex exec 生成独立的设计方向提案 → Claude 子代理：生成"会惊艳用户"的设计方向 → 合并要点：

三方共识：这是最可靠的决策锚点
真正分歧：让用户在创意备选中选择
"Codex 建议了 X，而我提出 Z——原因是……"

品味记忆（跨会话持久化）

→ 持久品味画像：$HOME/.gstack/projects/{slug}/taste-profile.json

按维度存储：fonts, colors, layouts, aesthetics
每个条目有 approved_count, rejected_count, last_seen
信心分每周衰减 5%（6 个月前的最爱不如上周的新宠权重高）

→ 冲突处理：当前请求与持久品味矛盾时 → 明确告知用户 "你的品味画像强烈偏好极简，但这次你要俏皮的方向——我照做，但要更新品味画像，还是当一次性特例？"

6. 设计预览的两种路径

Path A: AI 设计模型（如果有 gstack designer 二进制）

→ $D variants --brief "..." --count 3 → 生成 3 个视觉方向 → $D check → 质量闸门：合格才进入比较板 → $D compare + $D serve → 交互式比较板（浏览器中打分、评论、混搭） → feedback.json → 用户提交的选择和评语 → $D extract → 从获选的模型图中提取精确的设计 token

Path B: HTML 预览页（降级方案）

→ 单一自包含 HTML 文件（零框架依赖） → 加载 Google Fonts / Bunny Fonts → 展示产品名称作为 Hero 标题（不是 Lorem Ipsum） → 字体样本区：每个候选字体在实际角色中展示 → 色板区：色块 + hex 值 + UI 组件渲染 → 真实产品模拟：根据产品类型渲染 2-3 个真实页面布局 → 明暗模式切换（CSS 自定义属性 + JS 按钮） → 响应式：任意屏幕宽度都好看

7. 连贯性验证

当用户调整提案中的某个部分时，Agent 会做连贯性检测：

不匹配检测

→ 粗野主义美学 + 丰富动效 → "注意：粗野主义通常配最小动效。你的组合不寻常——如果是故意的就很好，想让我推荐更适合的动效吗？"

→ 丰富色彩 + 克制装饰 → "大胆的调色板配合最小装饰是可以的，但色彩会承担很大比重。想让我推荐支持这个调色板的装饰吗？"

→ 创意编辑布局 + 数据密集型产品 → "编辑式布局很美，但会与数据密度冲突。想让我展示混合方案如何兼顾两者吗？"

核心原则

永远接受用户的最终选择。在有连贯性问题时轻推，但不阻止。你是在建议，不是在审批。

8. 结构拆解：设计系统咨询 Skill 模板

设计系统咨询型 Skill 模板

核心特征

→ 管理对象 = 从零到完整设计语言体系（DESIGN.md） → 核心原则 = 六阶段工作流 + 三层知识分析 + SAFE/RISK 分解 → 关键设计 = 10 种美学分类 + 字体黑名单/过度使用列表 + 品味记忆衰减

通用结构

Six-Phase Workflow（六阶段工作流）

Phase 0: 预检（不重复造轮子）
Phase 1: 产品上下文（产品定位 + 记忆点）
Phase 2: 研究（经典/流行/第一性三层知识）
Phase 3: 完整提案（六大维度 + SAFE/RISK）
Phase 4: 深钻（字体/色彩候选，仅在要求时）
Phase 5: 预览（AI 模型图或 HTML 预览页）
Phase 6: 写入 DESIGN.md（持久化设计真理）

Knowledge Base（知识储备）

10 种美学方向分类 + 字体黑名单 + 过度使用列表 + AI Slop 反模式
跨模型设计声音（Codex + Claude 子代理）
品味记忆：taste-profile.json + 每周 5% 置信度衰减

Coherence Validation（连贯性验证）

美学+动效/色彩+装饰/布局+产品类型的不匹配检测
核心原则：轻推但不阻止，永远接受用户的最终选择

9. 电商案例：为 DTC 护肤品牌构建设计系统

🛒 实战案例：一个DTC成分护肤品牌在抖音和小红书同时开店，还运营着独立站、微信小程序和线下快闪店。四个渠道的设计各自为政——独立站是白色极简风、抖音店是橙色大促风、小程序是深蓝商务风、快闪店是工业实验室风——同一个品牌看起来像四个品牌。品牌负责人说"用户从直播间跳转到小程序下单，视觉断裂率导致38%的用户中途放弃（对比同品类均值25%）"。

design-consultation通过五阶段工作流搭建统一设计系统：

Phase 1产品上下文：品牌核心主张——"透明、科学、诚实"，目标用户25-35岁成分党女性，竞品The Ordinary/Paula's Choice。用户核心记忆点——"这个品牌不骗我"。这意味着设计系统不能走"纯欲风"（小红书主流）或"大牌感"（溢价暗示）——必须走"数据驱动"路线。

Phase 2三层研究：Layer 1经典——护肤品类设计常识（大量留白、产品图大、信息层级像药品说明书）。Layer 2流行——实验室美学（琥珀瓶、滴管、白色瓷砖背景）+分子图风格。Layer 3第一性——护肤品类的设计有什么是错的？"太多品牌用白色背景——看起来都一样"、"太多花/水/叶子的'纯净'视觉隐喻——成分党要的是数据不是意境"。差异化机会点：用工科/实验室的视觉语言（暖灰实验报告纸底色、等宽字体做成分数据、分子结构图作唯一装饰）。

Phase 3完整提案：设计系统命名**"科学极简"（Scientific Minimalism）**。字体系统——展示DM Serif Display（科学期刊标题感）、正文IBM Plex Sans（高可读性中性）、数据IBM Plex Mono（成分表/pH值/百分比）。色彩系统——主色#1A1A2E深蓝黑（实验室严肃感）、强调色#00C9A7薄荷绿（化学成分色）、背景#F7F7F2暖灰白（实验报告纸）、语义色（成功/警告/错误）。SAFE选择（符合品类基线）——大量留白、产品图大清晰。RISK选择（差异化）——等宽字体做数据标注、实验报告风格（可能对非成分党显得严肃）、分子结构图装饰（可能被误解为药品）。

Phase 4设计Token：建立了从品牌色到卡片圆角到阴影层级到间距基准为8px的完整Token系统，输出为design-tokens.json——四个渠道的前端通过Style Dictionary自动生成各平台变量（CSS Variables/React Native/Tailwind Config/微信小程序WXSS），保证品牌色#1A1A2E在所有渠道呈现相同色值（之前四个渠道的"蓝色"有四个不同的Hex值）。

Phase 5预览+验证：生成了HTML预览页（成分表实验报告、产品标本标签卡片、品牌宣言首页），并通过连贯性验证——科学极简+等宽字体数据=品牌主张与视觉一致，暖灰背景+薄荷绿强调=不冰冷（温暖的科学），分子结构图作装饰=内容本身成为视觉资产。

实施结果：设计系统落地后，跨渠道视觉一致性评分从3.2/10提升到8.7/10，直播间到小程序的视觉断裂率从38%降到14%（接近行业均值），用户在四个渠道间的品牌认知一致性从"像四个品牌"改善为"在哪都是同一个品牌"。

🔑 启示：多店铺多渠道的电商品牌不需要每个渠道"各有特色"——用户期待的是跨渠道的品牌一致性。设计系统不是在做一个"好看的规范文档"，而是在消除每次品牌接触点的认知摩擦。

10. 掌握检验

Q1：在六阶段工作流中，Phase 0（预检）的核心作用是什么？

A) 立即开始生成设计方案
B) 检查是否已有 DESIGN.md，避免重复造轮子
C) 自动生成预览 HTML 页面
D) 运行跨模型设计审查

Q2：三层知识分析中，Layer 3（第一性原理）试图解决什么问题？

A) 这个品类所有产品的共享设计模式
B) 当前设计趋势中最流行的是什么
C) 这个产品的用户有什么特殊性，以至于品类常规设计反而是错的
D) AI 生成的通用设计模板有哪些

Q3：在护肤品牌案例中，Layer 3 分析发现了什么关键洞察？这个洞察如何直接影响了 Phase 3 的美学方向选择？

Q4：SAFE/RISK 分解为什么是 Phase 3 的核心？在护肤品牌案例中，"实验报告风格"被归为 RISK。请分析：这个 RISK 选择是在"冒什么险"，以及它可能带来的"奖赏"是什么？

Q5：字体黑名单和"过度使用"列表的判断依据不同。请分别解释这两个列表背后的逻辑。

Q6：品味记忆的置信度衰减机制（每周衰减 5%）解决了什么问题？如果没有这个衰减，品味画像会患上什么"病症"？

Q7：在连贯性验证中，当用户选择了矛盾组合时，Agent 的态度是"轻推但不阻止"。请解释这个设计哲学。

11. 答案

点击查看答案

Q1：B —— Phase 0 的核心价值是"不重复造轮子"。

Q2：C —— Layer 3 是差异化层。

Q3：关键洞察："太多护肤品用白色背景，看起来都一样"以及"成分党不买账花朵叶子意象，他们要的是数据"。这导致了美学方向从通用"Clean Beauty 极简"转向"科学极简（Scientific Minimalism）"——浅灰实验报告底色、等宽字体展示数据、分子结构图作为装饰。

Q4：冒的险：①对非成分党用户可能显得"冷淡"；②等宽字体在传统护肤品营销中从未出现。可能的奖赏：①在品类中独树一帜；②"数据展示"成为品牌资产——成分党会因为可验证性和透明感而信任你；③差异化记忆点——消费者记不住第 50 个白色护肤品品牌，但记得"那个像实验报告的护肤品牌"。

Q5：黑名单逻辑——数据驱动的"公认灾难"：这些字体要么因为被滥用导致语义污染，要么因为设计品质问题不适合现代 UI。过度使用列表逻辑——数据驱动的"差异化丧失"：Inter 和 Roboto 本身是好字体，但被如此广泛使用以至于使用它们就意味着"看起来像 500 个其他产品一样"。两个列表解决不同问题：黑名单防止"糟糕的设计"，过度使用列表防止"无个性的设计"。

Q6：解决的是"品味僵化"问题。如果没有衰减机制，6 个月前一时喜欢的一个色彩偏好会被永久锁定在画像中，即使用户的品味已经进化。衰减机制承认品味是流动的——上周的新宠比 6 个月前的最爱更有参考权重。没有衰减会患上"品味化石症"。

Q7：设计哲学核心：Agent 是顾问，不是审批人。"永远接受用户的最终选择"意味着承认创意决策的终极权威在人类手中。拒绝矛盾的组合会剥夺用户的创造性探索权——历史上有太多"理论上矛盾但实践中惊艳"的设计。轻推包含两个层次：①指出矛盾让用户意识到这不是常规选择；②提供替代建议。用户确认"故意的"之后，Agent 转向"如何让这个矛盾组合有效"而非"为什么不选更安全的"。

（6/7 通过）

12. 延伸阅读

[[L6-10-设计审计与修复|下一课：设计审计与修复 —— 像X光一样扫描你产品的UI问题]]

L6-09：设计系统咨询 —— 从零搭建专业级设计语言体系