在 Google Stitch 中生成新屏幕前，用语义化…

需要为 Google Stitch 屏幕生成一份可被 AI 解释的语义设计规则 DESIGN.md，以统一视觉、色彩、排版、布局、动效并避免 AI 通用化设计时使用。

适用场景

解决思路

1. 使用 StitchMCP、Read、Write 工具生成并写入 `DESIGN.md`，将其作为提示 Google Stitch 生成新屏幕的单一事实来源。
2. 用 Stitch 能解释的“Visual Descriptions”加精确数值来组织规则，使 AI agent 可据此产出 premium、非通用界面。
3. 在 `DESIGN.md` 中编码七类内容：视觉氛围、颜色校准、排版架构、组件行为、布局原则、动效哲学、反模式。
4. 定义氛围：评估目标项目意图，从品味频谱中选择有感染力的形容词。
5. 密度按 1–3 映射为 “Art Gallery Airy”，4–7 映射为 “Daily App Balanced”，8–10 映射为 “Cockpit Dense”。
6. 变体/不对称按 1–3 映射为 “Predictable Symmetric”，4–7 映射为 “Offset Asymmetric”，8–10 映射为 “Artsy Chaotic”。
7. 动效按 1–3 映射为 “Static Restrained”，4–7 映射为 “Fluid CSS”，8–10 映射为 “Cinematic Choreography”。
8. 默认基线：Creativity 9、Variance 8、Motion 6、Density 5；根据用户描述的 vibe 动态调整。
9. 映射调色板：每个颜色都提供描述性名称 + Hex 色码 + 功能角色。
10. 强制约束：最多 1 个强调色；饱和度低于 80%。
11. 严格禁止 AI 紫/蓝霓虹美学：不要紫色按钮辉光，不要霓虹渐变。
12. 使用绝对中性基色（Zinc/Slate）搭配高对比的单一强调色。
13. 整个输出坚持同一套调色板，不要冷暖灰来回波动。
14. 永远不要用纯黑（`#000000`）；改用 Off-Black、Zinc-950 或 Charcoal。
15. 建立排版规则：Display/Headlines 使用 track-tight、受控尺度，不要尖叫；通过字重和颜色建立层级，而不只是巨大字号。
16. Body 使用放松的行高，每行最多 65 个字符。
17. 字体选择：premium/creative 场景禁用 `Inter`；强制使用有个性的字体：`Geist`、`Outfit`、`Cabinet Grotesk` 或 `Satoshi`。
18. 衬线字体禁令：通用衬线字体（`Times New Roman`、`Georgia`、`Garamond`、`Palatino`）禁用；若 editorial/creative 需要衬线，只能用有辨识度的现代衬线：`Fraunces`、`Gambarino`、`Editorial New` 或 `Instrument Serif`。
19. Dashboard 或软件 UI 中始终禁用衬线字体。
20. Dashboard 约束：只使用无衬线配对（`Geist` + `Geist Mono` 或 `Satoshi` + `JetBrains Mono`）。
21. 高密度覆盖：当 density 超过 7，所有数字必须使用 Monospace。
22. 定义 Hero 区域：Hero 是第一印象，必须 creative、striking、绝不通用。
23. 内联图像排版：把小型上下文照片或视觉元素直接嵌在标题的词或字母之间；图片以文字高度内联、圆角，充当视觉标点。这是标志性创意技术。
24. 禁止重叠：文字绝不能与图片或其他文字重叠；每个元素占据自己干净的独立空间区域。
25. 禁止填充文字：“Scroll to explore”、“Swipe down”、滚动箭头图标、弹跳 chevrons 全部禁用；内容应自然吸引用户。
26. 非对称结构：当 variance 超过 4，禁用居中 Hero 布局。
27. CTA 克制：最多一个主 CTA，不要次级 “Learn more” 链接。
28. 描述组件样式：对每种组件描述形状、颜色、阴影深度和交互行为。
29. Buttons：active 状态有触觉按压反馈；不要霓虹外发光；不要自定义鼠标光标。
30. Cards：只有当 elevation 能传达层级时才使用；阴影染向背景色相；高密度布局中，用 border-top 分隔线或留白替代卡片。
31. Inputs/Forms：label 放在输入框上方，helper text 可选，error text 放在下方；使用标准间距。
32. Loading States：使用与布局尺寸匹配的 skeletal loaders，不要通用圆形 spinner。
33. Empty States：使用有构图的 composition，说明如何填充数据。
34. Error States：清晰、内联的错误报告。
35. 定义布局原则：元素不重叠；每个元素占据自己清晰的空间区域；不要绝对定位内容堆叠。
36. 当 variance 超过 4，禁用居中 Hero；强制 Split Screen、Left-Aligned 或 Asymmetric Whitespace。
37. 禁用通用的“3 equal cards horizontally” feature row；改用 2-column Zig-Zag、asymmetric grid 或 horizontal scroll。
38. 使用 CSS Grid 而不是 Flexbox 数学；绝不用 `calc()` 百分比 hack。
39. 用 max-width 约束容器布局（例如 1400px 居中）。
40. 全高 section 必须使用 `min-h-[100dvh]`，绝不用 `h-screen`（iOS Safari 会灾难性跳动）。
41. 定义响应式规则：每个设计必须在所有 viewport 工作。
42. 移动优先折叠（< 768px）：所有多列布局折叠为单列，无例外。
43. 禁止横向滚动：移动端横向溢出是严重失败。
44. 排版缩放：标题通过 `clamp()` 缩放；正文最小 `1rem`/`14px`。
45. 触摸目标：所有交互元素最小 `44px` 点击目标。
46. 图片行为：内联排版图片（词间照片）在移动端堆叠到标题下方。
47. 导航：桌面横向 nav 折叠为干净的移动菜单。
48. 间距：垂直 section 间隔按比例缩小（`clamp(3rem, 8vw, 6rem)`）。
49. 编码动效哲学。
50. Spring Physics 默认：`stiffness: 100, damping: 20`，提供 premium、有重量感的效果；不要线性缓动。
51. 持续微交互：每个 active 组件都应有无限循环状态（Pulse、Typewriter、Float、Shimmer）。
52. 交错编排：绝不要瞬间挂载列表；使用 cascade delays 做瀑布式 reveal。
53. 性能：只通过 `transform` 和 `opacity` 做动画；绝不动画 `top`、`left`、`width`、`height`；grain/noise filters 只放在 fixed pseudo-elements 上。
54. 列出 Anti-Patterns（AI Tells），并在 `DESIGN.md` 中编码为显式 “NEVER DO” 规则。
55. 禁止任何地方使用 emojis。
56. 禁止 `Inter` 字体。
57. 禁止通用衬线字体（`Times New Roman`、`Georgia`、`Garamond`）；如需要，只用有辨识度的现代衬线。
58. 禁止纯黑（`#000000`）。
59. 禁止霓虹/外发光阴影。
60. 禁止过饱和强调色。
61. 禁止在大标题上使用过度渐变文字。
62. 禁止自定义鼠标光标。
63. 禁止重叠元素；始终保持干净空间分隔。
64. 禁止 3 列等宽卡片布局。
65. 禁止通用名称（“John Doe”、“Acme”、“Nexus”）。
66. 禁止虚假的取整数字（`99.99%`、`50%`）。
67. 禁止捏造数据或统计：绝不生成用户未明确提供的指标、性能数字、正常运行时间百分比、响应时间或任何数据；“99.98% UPTIME SLA”、“124ms AVG. RESPONSE”、“18.5k DEPLOY CYCLES” 是 AI 编造填充物；如果没有真实数据，用清楚的占位标签如 `[metric]`，而不是编数字。
68. 禁止虚假系统/指标 section：“SYSTEM PERFORMANCE METRICS”、“KEY STATISTICS”、“BY THE NUMBERS” 等填满编造数据的 dashboard cards。
69. 禁止 `LABEL // YEAR` 格式：“SYSTEM // 2024”、“METRICS // 2025” 是懒惰 AI 惯例，不是真正设计排版。
70. 禁止 AI 文案陈词滥调（“Elevate”、“Seamless”、“Unleash”、“Next-Gen”）。
71. 禁止填充 UI 文本：“Scroll to explore”、“Swipe down”、滚动箭头、弹跳 chevrons。
72. 禁止失效的 Unsplash 链接；使用 `picsum.photos` 或 SVG avatars。
73. 禁止居中 Hero section（针对高 variance 项目）。
74. 按输出格式生成 `DESIGN.md`：`# Design System: [Project Title]`。
75. 包含 `## 1. Visual Theme & Atmosphere`：用有感染力描述写 mood、density、variance、motion intensity。
76. 包含 `## 2. Color Palette & Roles`：列出 Canvas White (#F9FAFB) 主背景、Pure Surface (#FFFFFF) 卡片/容器填充、Charcoal Ink (#18181B) 主文本/Zinc-950 深度、Muted Steel (#71717A) 次级文本/描述/元数据、Whisper Border (rgba(226,232,240,0.5)) 卡片边框/1px 结构线、[Accent Name] (#XXXXXX) CTA/active/focus ring 的单一强调色；最多 1 个强调色，饱和度 < 80%，不要紫色/霓虹。
77. 包含 `## 3. Typography Rules`：Display 用 [Font Name] track-tight 受控尺度 weight-driven hierarchy；Body 用 [Font Name] 放松行高 65ch max-width 中性次级色；Mono 用 [Font Name] 处理代码、元数据、时间戳、高密度数字；禁用 Inter、premium 场景通用系统字体，dashboard 禁用 serif。
78. 包含 `## 4. Component Stylings`：Buttons 扁平无外发光，active 时 tactile -1px translate，primary 用 accent fill，secondary 用 ghost/outline；Cards 大圆角（2.5rem）、diffused whisper shadow，仅当 elevation 服务层级，高密度用 border-top 分隔线替代；Inputs label above error below，focus ring 用 accent color，不用 floating labels；Loaders 用匹配精确布局尺寸的 skeletal shimmer，不用圆形 spinner；Empty States 用有构图的 illustrated composition，不只是 “No data” 文字。
79. 包含 `## 5. Layout Principles`：Grid-first responsive architecture，Hero 用 asymmetric splits，严格在 768px 以下单列折叠，max-width containment，不用 flexbox 百分比数学，慷慨内部 padding。
80. 包含 `## 6. Motion & Interaction`：所有交互元素用 spring physics，staggered cascade reveals，active dashboard 组件用 perpetual micro-loops，仅硬件加速 transforms，CPU 重的动画隔离到 Client Components。
81. 包含 `## 7. Anti-Patterns (Banned)`：显式列出禁止模式：no emojis、no Inter、no pure black、no neon glows、no 3-column equal grids、no AI copywriting clichés、no generic placeholder names、no broken image links。
82. 最佳实践：描述性强，例如 “Deep Charcoal Ink (#18181B)” 而不是 “dark text”。
83. 最佳实践：功能性，解释每个元素用途。
84. 最佳实践：一致性，全文档使用同一术语。
85. 最佳实践：精确，包含精确 hex 色码、rem 值、像素值（放在括号中）。
86. 最佳实践：有主见；这不是中性模板，而是强制特定 premium 美学。
87. 成功技巧：从氛围开始，先理解 vibe 再细化 tokens。
88. 成功技巧：寻找模式，识别一致的 spacing、sizing 和 styling。
89. 成功技巧：语义思考，按用途而非外观命名颜色。
90. 成功技巧：考虑层级，记录视觉重量如何传达重要性。
91. 成功技巧：编码禁令，反模式与规则一样重要。
92. 避免常见陷阱：使用技术黑话但不翻译（例如 “rounded-xl” 而不是 “generously rounded corners”）。
93. 避免常见陷阱：省略 hex 色码或只用描述性名称。
94. 避免常见陷阱：忘记设计元素的功能角色。
95. 避免常见陷阱：氛围描述太模糊。
96. 避免常见陷阱：忽略 anti-pattern 列表——它们让输出 premium。
97. 避免常见陷阱：默认使用通用“安全”设计，而不是强制 curated 美学。

适用边界 · 注意事项

• 没有 Google Stitch 访问权限，或不需要通过 Stitch/StitchMCP 生成屏幕时，不适用。
• 项目已有必须严格遵循的品牌规范或设计系统，不能接受这套强主见的 premium 美学覆盖时，不适用。
• 只需要中性、通用、无风格倾向的 UI 模板，或目标不是 premium/creative 界面时，不适用。