设计系统生成

概览

设计系统生成分两步：先生成 design-system.md（人类可读的规范文档）， 再将其转化为 globals.css 中的 Tailwind v4 CSS 变量。 后续所有 section 生成时都会读取这两个文件作为上下文。

// 主路径编排（与设计系统相关的部分）
analyze_project_requirement  ∥ infer_design_intent   // 第一层并行
plan_project
generate_project_design_system   // Style Reference Markdown
apply_project_design_tokens      // 先于一切页面写入
architect_scaffold_agent → page_implement_agent ×M → chrome_optimize_agent

生成流程

generate_project_design_system 的核心输入来自 infer_design_intent 的自然语言摘要（若 analyze 已带 experience.designIntent 亦可作为回退），并可叠加用户在前端选择的 styleGuide（截断至 1200 字符）。

// experience.designIntent 示例
{
  mood: ["energetic", "trustworthy"],
  colorDirection: "dark background with electric blue accent",
  style: "modern SaaS",
  keywords: ["performance", "developer-first", "minimal"]
}

LLM 根据这些语义信号生成完整的 design-system.md（Style Reference 格式），包含：

Token 写入

apply_project_design_tokens 步骤读取 design-system.md， 提取已有的 globals.css 内容，然后写入 Tailwind v4 格式的 CSS 变量：

/* globals.css — Tailwind v4 @theme block (semantic tokens) */
@theme inline {
  --color-parchment: #fcfbf8;
  --color-charcoal: #1c1c1c;
  --color-linen-border: #eceae4;

  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;

  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.4px;

  --spacing-16: 16px;
  --radius-card: 16px;
  --shadow-subtle: oklch(0 0 0 / 0.25) 0px 0px 0px 0.5px inset;
}

整文件重写（保留结构意图）

模型会收到完整的设计系统 Markdown以及当前的 app/globals.css（过长会首尾截断）。输出应为完整的globals.css，而非局部补丁；提示词要求保留 import、基础层样式等模板结构。

向下传播

设计系统通过两条只读快照传播给每个 page_implement_agent： 完整的 design-system.md，以及在 Agent user 消息中附带的 globals.css 全文（或截断说明）。Modify Agent 启动时同样读取 design-system， 以便用户口头修改 token 时有单一事实来源。

修改时的一致性

修改 Agent 在启动时也会读取 design-system.md 作为上下文的一部分。 当用户说「把按钮颜色改成品牌色」时，Agent 应查 Style Reference 中的 token 名称（如 --color-charcoal），而不是硬编码 hex。

Skill 覆盖

用户在 prompt 中输入 /minimal、/bold 等命令时， skill 内容会作为 styleGuide 注入 generate_project_design_system 步骤：

// styleGuide 注入（截断到 1200 字符）
const systemPrompt = [
  basePrompt,
  styleGuide
    ? `

## Style Guide Override
${styleGuide.slice(0, 1200)}`
    : "",
].join("");

Skill 的视觉方向会影响设计系统的生成结果。例如 /glassmorphism 会让 LLM 生成半透明背景色和毛玻璃效果相关的 CSS 变量，而 /brutalist 会 生成高对比度、无圆角的 token 组合。