设计

一项统一的设计能力，可在单次运行中生成高保真交互式原型及可直接用于工程实现的规格说明。所有输出同时具备可视化成果与精确工程规范的双重属性。

产出内容

无论输入形式如何，始终同步生成设计交付物及浏览器实测证据：

如何使用该能力

1. 识别你的运行环境（harness）。 阅读对应参考文档一次：

• Claude Code（AskUserQuestion、SendUserFile、Claude Preview MCP）→ 阅读 references/claude.md
• Cursor（AskQuestion、cursor-ide-browser MCP）→ 阅读 references/cursor.md
• Codex Agent（functions.*、Codex Browser）→ 阅读 references/codex.md

2. 加载核心方法论。 阅读 system-prompt.md —— 包含 L1→L4 流水线、质量规则与输出生成指南。

3. 判定输入类型。 阅读对应处理器文档：

• 文本描述 → input-handlers/text.md
• 截图 / 图像 → input-handlers/screenshot.md
• Sketch 文件（.sketch）→ input-handlers/sketch.md
• Figma URL → input-handlers/figma.md

4. 加载设计系统。 采用三层堆叠结构：通用层（universal）→ 标准层（standard）→ 品牌层（brand）。按顺序加载，后加载的层覆盖先加载的层。

第 1 层 —— 通用层（渐进式加载）：

核心操作：

• 将 tokens.css 与 component-tokens.css 直接复制到输出目录，不预加载其全部内容；仅在需要时按需查询特定 token 定义。
• 仅阅读一次 component-routing.md，作为回退绑定门控（fallback binding gate）。

仅当当前决策需要时才加载：

• 选中通用组件 → components.md
• Token 语义未解析 → usage-guidelines.md
• 页面骨架未确定 → layout-patterns.md
• 使用具体交互模式 → interaction-patterns.md
• 仅涉及 apple-hig → macos-patterns.md
• 出现硬编码平台/SVG/预览常量 → token-exceptions.md
• 出现功能图标或模拟平台 Chrome → icon-policy.md
• 仅涉及相关失败模式 → anti-examples.md
• 视觉交付前 → critic-checklist.md 与 visual-critic.md

第 2 层 —— 设计标准 Profile（当用户指定标准，或平台隐含标准时加载）：

• 先读取 design-system/profiles/registry.json，将用户指定的标准按忽略大小写、合并空白的方式匹配唯一 profile_id 或 alias；遇到未知或冲突情形时阻断流程，不进行猜测。
• 匹配成功后，先读取 profile.json 及其 ，严格依据 tier/capabilities 字段加载内容，禁止通过目录结构推测能力。根入口处禁止硬编码新增 profile 的文件清单。
• Tier 1：读取 semantic/token-map.json、semantic/unmapped-tokens.json 与 tokens.css；组件与布局复用 universal 层，未映射语义必须阻断并确认。
• Tier 2：在 Tier 1 基础上加载 routing/component-routing.md 及当前平台 registry；Profile 组件路由为权威来源。
• Tier 3：进一步加载 、深度组件规格、templates 和 runtime；Ant Design、Arco Design 属于 Tier 3。
• 请求的平台必须存在于 profile.platforms 中。仅当 Profile 显式声明对应 capability 时，才要求 component registry、templates 或 runtime。
• Ant Design 旧路径 design-system/standards/ant-design 仅作兼容入口；新增规范仅允许进入 design-system/profiles//。

当用户提供 W3C Design Tokens 或 Style Dictionary JSON 时，创建 Tier 1 profile：

node scripts/create-profile.mjs --profile  --name "" 
  --tokens  --register

生成前务必审阅 semantic/unmapped-tokens.json。不得将不完整的 profile 提升为 stable 状态，亦不得在无用户输入前提下推断未解析的语义角色。

第 3 层 —— 品牌层（当用户指定品牌时加载）：

• 先读取 design-system/brand/index.md，再检查 design-system/brand// 下是否存在匹配的品牌 tokens，并覆盖标准层默认值。

5. 执行流水线。 按照 system-prompt.md 依次执行：L1 → 场景引擎（Scene Engine）→ 设计系统加载 → 绑定门控（binding gate）→ L2 → L3 → L4 → 输出。

6. 验证与交付。 使用 Node >= 22 运行：agents/run-pipeline.mjs --strict-measure。P0/P1 级测量（含图标来源/渲染/对齐失败）任一不通过即阻断验收。根据你的 harness 参考文档：通过 HTTP 提供服务，人工检查实测截图，修复错误后重新运行，最终发送文件 + URL。

输出位置

所有文件均输出至 designs// 目录下：

designs//
├── preview.html
├── annotated.html
├── tokens.css
├── spec.json
├── assumptions.log
├── preview.measure-report.json
├── preview.measured.png
└── acceptance.spec.mjs

调用示例

设计一个商品详情页，移动端，有加购栏和图文详情

从这张截图还原规格，输出给 AI coding 工具用

用 Example Brand 设计系统，设计一个入职申请表单页面

用 Ant Design，设计一个移动端 H5 商品列表页，支持筛选和排序

用 Ant Design，设计一个 PC 后台数据报表页面，含图表和数据表格