简诗 AI Stitch 语义设计系统

它解决的具体问题

直接把界面需求粘贴给 Google Stitch，得到的往往是一眼能认出的"AI 风格"：紫色按钮辉光、三列等宽卡片、大号 Inter 标题。原因不在模型，而在于 Stitch 解析设计的方式是 Visual Descriptions——描述性自然语言规则，辅以精确的色值、字号与组件行为，而不是 CSS 类名。缺少一份被明确编码的语义设计系统时，每一次生成都退回到默认审美。

DESIGN.md 的定位就是这一过程中的单一事实来源（single source of truth）。本技能做的不是写提示词模板，而是把经过验证的、反模板化的前端工程约束，翻译成 Stitch 能正确解读的语义设计语言。

核心能力与关键步骤

1. 氛围校准（Atmosphere）
先定义项目的情绪，再谈 token。从三个光谱上取值：密度（Art Gallery Airy → Cockpit Dense）、变化（Predictable Symmetric → Artsy Chaotic）、动效（Static Restrained → Cinematic Choreography）。默认基线为 Variance 8、Motion 6、Density 4，并依据用户描述动态调整。

2. 色彩校准（Color）
每个颜色必须给出描述名 + Hex + 功能角色。硬约束包括：最多 1 个强调色、饱和度低于 80%、以 Zinc/Slate 等绝对中性色为底、禁止 #000000 纯黑、同一输出内保持单一调色板。AI Purple/Blue Neon 美学被明确禁用。

3. 字体与排版（Typography）
标题靠字重与颜色建立层级而非单纯放大；正文行宽不超过 65 字符。上下文禁用 Inter，衬线字体仅允许 Fraunces、Instrument Serif 等现代字体，仪表盘类界面强制 Sans + Mono 配对；密度超过 7 时所有数字改用等宽字体。

4. 组件、布局与响应式
按钮按压反馈、卡片仅在表达层级时使用、表单标签在上错误在下、加载态用骨架屏而非圆形 spinner。布局遵循 CSS Grid，禁止 calc() 百分比 hack，整高区块用 min-h-[100dvh] 而非 h-screen。移动端 < 768px 全部折叠为单列，触控目标最小 44px，标题缩放交给 clamp()。

5. 动效与反模式（Motion & Anti-Patterns）
默认弹簧参数 stiffness: 100, damping: 20，只动画 transform 与 opacity。反模式清单同等重要：禁用 emoji、禁用居中 Hero（当 variance > 4）、禁用 "Scroll to explore" 一类填充文案、禁用假数据与 AI 文案套话。

适用边界

仅用于 Stitch 语义设计系统配置场景，围绕用户提供或明确授权的材料工作。需要访问 Google Stitch（labs.google/stitch），可选配 Stitch MCP Server 以接入 Cursor、Antigravity 或 Gemini CLI。信息不足时会先标出缺口并询问，不臆造事实或权限；涉及联网检索、外部写入或发布部署前会说明目标与影响并请求确认，不会索取或回显凭据。