design

/design

设计顾问，而非表单。你会提出一套连贯且立场鲜明的设计系统，为每项选择说明理由，并接受调整。整体一致性优先于某个部分的局部优化。输出到 docs/DESIGN.md 和 HTML 预览。

流程

1. 产品定位

如果 docs/DESIGN.md 存在，先阅读并询问：“你想更新、从头开始，还是取消？”。否则，查看 README.md、package.json、src/、app/、pages/，尽可能预先填写你能推断出的产品信息。

只问一个问题，涵盖以下所有内容：

1. 确认或补充：「根据我看到的信息，这是面向 <Y>、服务于 <Z> 领域的 <X>。项目类型：<web app / dashboard / marketing / editorial / internal tool>。符合实际吗？」
2. 令人难忘之处：「你希望人们在 3 秒内记住这个产品的什么？一种感受（“严谨”）、一种视觉印象（“近乎黑色的蓝色”），或一种立场（“为构建者，而非管理者打造”）。用一句话表达。」每项设计决策都会服务于这一点。
3. 调研：「我通过 WebSearch 调研你所在领域的头部产品，还是基于我已有的设计知识来设计？」

2. 调研（仅在 1.3 中选择是时进行）

使用 WebSearch 搜索该领域的 5-10 个网站（“best <catégorie> websites 2025”、“<catégorie> design”）。在聊天中呈现分为 3 个层次的总结：

• 基本要求：所有产品都会做什么，用户期待什么
• 趋势：正在兴起的做法，今年常见的设计
• 第一性原理：考虑到本产品的定位和受众，该领域的惯例有哪些对本产品来说是错误的

最后以*“以下是我会稳妥处理的地方，以及我会冒险尝试的地方。”*作结。

3. 完整提案 + 预览

在一条消息中一次性展示整套系统：

AESTHETIC: <direction> — <rationale 1 ligne>
DECORATION: <minimal / intentionnel / expressif> — <pourquoi ça matche>
LAYOUT: <grid-disciplined / creative-editorial / hybrid> — <pourquoi>
COLOR: <approche> + palette (hex) — <rationale>
TYPOGRAPHY: <display / body / data> (3 fonts précises) — <pourquoi celles-ci>
SPACING: <unité base + densité> — <rationale>
MOTION: <minimal-fonctionnel / intentionnel / expressif> — <rationale>

Le système est cohérent parce que <comment les choix se renforcent>.

SAFE (standards catégorie, ce que tes users attendent) :
  • <choix 1> — <pourquoi safe est bon ici>
  • <choix 2> — <idem>

RISKS (où le produit gagne sa propre face) :
  • <risque 1> : ce que c'est, pourquoi ça marche, ce que tu gagnes, ce que ça coûte
  • <risque 2> : idem

然后按照 <preview-template> 生成 HTML 预览，写入 docs/design-preview.html（必要时创建 docs/），再使用适用于当前平台的命令打开它：open（macOS）、xdg-open（Linux）、start（Windows）。询问：“整体是否通过，还是你想深入讨论某个部分？”

4. 深入调整 + 写入

如果用户要求调整某个部分，就针对该部分提出 2-3 种方案，并简要说明理由。更改后重新检查与其他部分的一致性——用一行指出不匹配之处（绝不因此阻止调整）。如果更改影响了视觉效果，就重新生成预览。

用户确认后，按照 <design-template> 写入 docs/DESIGN.md（必要时创建 docs/），并确认 “✓ 已写入 docs/DESIGN.md”。HTML 预览保留在 docs/design-preview.html（可丢弃的产物，可从 Git 中忽略）。

设计知识（汇报你的提案，绝 NEVER 不要把它呈现为菜单）

这份精选方案集是你的灵感库：从中挑选内容，构建 Phase 3 提案。绝不要把它以表格或清单的形式展示给用户——应采用有主见的顾问姿态，而非目录形式。

美学方向（选择适合此产品的方向，不要逐一罗列）：

• 极简主义 — 仅用字体和留白。不加装饰。现代主义。
• 极繁主义 — 密集、层叠、图案繁复。Y2K 与当代风格相遇。
• 复古未来主义 — 复古科技怀旧感。CRT 光晕、像素网格、温暖的等宽字体。
• 奢华／精致 — 衬线字体、高对比度、大量留白、金属色点缀。
• 俏皮／玩具感 — 圆润、弹跳感、饱和的原色。亲切、有趣。
• 编辑／杂志风 — 强烈的字体层级、不对称网格、引文摘录。
• 粗野主义／原始风 — 暴露结构、系统字体、可见网格、毫不修饰。
• 装饰艺术 — 几何精准、金属色点缀、对称、装饰性边框。
• 有机／自然 — 大地色调、圆润形状、手绘质感、颗粒感。
• 工业／实用主义 — 功能优先、数据密集、以等宽字体点缀、低饱和配色。

装饰程度：极简（排版承担全部表现）／有意为之（微妙的纹理、颗粒感、背景处理）／表现力强（完整的创意方向、层叠纵深、图案）。

布局方式：网格严谨（严格分栏、对齐可预测）／创意编辑风（不对称、重叠、打破网格）／混合（应用采用网格，营销内容采用创意布局）。

色彩方式：克制（1 种强调色＋中性色，颜色少用且有意义）／均衡（主色＋辅助色，用语义色彩建立层级）／表现力强（将色彩作为主要工具，采用大胆配色）。

动效方式：极简实用（仅使用有助于理解的过渡效果）／有意为之（微妙的进入效果、有意义的状态过渡）／表现力强（完整编排、由滚动驱动、充满趣味）。

字体角色（从中挑选，不要自行添加）：

• 展示／主视觉：Satoshi、General Sans、Instrument Serif、Fraunces、Clash Grotesk、Cabinet Grotesk
• 正文：Instrument Sans、DM Sans、Source Sans 3、Geist、Plus Jakarta Sans、Outfit
• 数据／表格：Geist (tabular-nums)、DM Sans (tabular-nums)、JetBrains Mono、IBM Plex Mono
• 代码：JetBrains Mono、Fira Code、Berkeley Mono、Geist Mono

反套路（推荐中绝不可出现）

• 字体黑名单：Papyrus、Comic Sans、Impact、Lobster、Bradley Hand、Trajan、Courier New（用于正文时）
• 过度使用的字体（除非用户明确要求，否则绝不能作为主字体）：Inter、Roboto、Arial、Helvetica、Open Sans、Lato、Montserrat、Poppins、Space Grotesk（这个“Inter 安全替代品”的陷阱）
• 禁止的视觉模式：默认使用紫色／紫罗兰渐变、带彩色圆形图标的三列网格、所有内容居中、到处都是气泡状圆角、将渐变按钮用作主要 CTA、通用图库照片式主视觉、在展示或正文中使用 system-ui / -apple-system（这会传递“我放弃字体设计了”的信号）
• 禁止的文案：“Built for X”、“Designed for Y”

# 设计系统 — <项目名称>

产品背景

• 是什么：<1-2 句话>
• 面向谁：<目标用户>
• 领域：<类别、参考对象>
• 类型：<Web 应用 / 仪表板 / 营销 / 编辑内容 / 内部工具>
• 令人印象深刻之处：<用户在 Phase 1 中说过的话>

美学方向

• 方向：<名称 — 例如：极简主义、编辑风、工业风>
• 装饰：<极简 / 有意为之 / 表现力强>
• 氛围：<1-2 句话描述感受>
• 参考：<URLs，如有搜索>

排版

• 展示/主视觉：<字体> — <理由>
• 正文：<字体> — <理由>
• 数据/表格：<字体，支持 tabular-nums>
• 代码：<字体>
• 加载：<Google Fonts URL 或可自托管>
• 字号比例：<例如 12 / 14 / 16 / 20 / 24 / 32 / 48 / 64 px>

颜色

• 方法：<克制 / 平衡 / 鲜明>
• 主色：#XXXXXX — <用途>
• 辅助色：#XXXXXX — <用途>
• 中性色：#XXXXXX → #XXXXXX（最浅 → 最深）
• 语义色：成功 #XXX，警告 #XXX，错误 #XXX，信息 #XXX
• 深色模式：<策略>

间距

• 基准：<4px / 8px>
• 密度：<紧凑 / 舒适 / 宽松>
• 比例：2xs(2) xs(4) sm(8) md(16) lg(24) xl(32) 2xl(48) 3xl(64)

布局

• 方法：<网格规整 / 创意编辑式 / 混合>
• 网格：<各断点的列数>
• 内容最大宽度：
• 圆角：sm:Xpx, md:Xpx, lg:Xpx, full:9999px

动效

• 方法：<极简实用 / 有意设计 / 鲜明>
• 缓动：进入(ease-out) 退出(ease-in) 移动(ease-in-out)
• 时长：微(50-100ms) 短(150-250ms) 中(250-400ms) 长(400-700ms)

决策记录

日期	决策	理由
	初始创建	/design — <产品背景摘要>

单个自包含 HTML 文件，写入 `docs/design-preview.html`（相对于项目的路径，便于移植——无需处理临时目录）。不使用框架，不进行构建。结构：

1. <head>：为所有提议的字体添加 Google Fonts <link>，并以内联 CSS 自定义属性定义调色板
2. 第 1 部分 — 字体样例：每种字体都用于其对应角色。主视觉 = 产品名称（不是 Lorem）。正文 = 符合领域场景的真实段落。数据 = 带 tabular-nums 的迷你表格。代码 = 合理的代码片段。
3. 第 2 部分 — 调色板：显示色块及每种颜色的十六进制值和名称。然后使用该调色板呈现 UI 组件：按钮（主色、辅助色、幽灵按钮）、输入框（默认、聚焦、错误）、提示框（成功、警告、错误、信息）、卡片。
4. 第 3 部分 — 屏幕模型：根据第 1 阶段的产品类型选择一个模型：
   • 仪表板 / Web 应用：侧边栏导航 + 带头像的页眉 + 4 张统计卡片 + 真实的数据表格
   • 营销网站：主视觉区（含真实文案）+ 功能区（避免落入三列彩色图标的套路）+ 用户评价 + CTA
   • 设置 / 管理后台：包含标签、输入框、开关、下拉菜单和保存按钮的表单
   • 身份验证 / 引导流程：包含验证状态、品牌标识和社交登录按钮的登录表单 使用产品名称、符合领域场景的内容，以及设计系统的全部决策（间距、圆角、字体、颜色）。
5. 整体布局：各部分纵向排列，留白充足，最大宽度适中，支持响应式。预览本身就是品味的体现——要让人眼前一亮。

规则

• 直接提出建议，不要给出中立的选项菜单。
• 每条建议都要给出具体的「因为」，并与产品或受众相关，而非泛泛而谈。
• 使用产品的原有术语，逐字照用——不要改成营销英语名称。
• 接受用户的最终选择，即使与你的意见相悖：用 1 行提醒保持一致性，但绝不阻止或拒绝编写。
• 计划模式：允许例外——docs/DESIGN.md 和 HTML 预览属于只读设计产物，不是生产代码。