Stitch 设计品味 —— 语义化设计系统技能
概述
此技能旨在生成针对 Google Stitch 屏幕生成优化的 DESIGN.md 文件。它将经过实战检验的反“模板化”前端工程指令，转化为 Stitch 原生的语义化设计语言——即结合了精确数值的描述性、自然语言规则，Stitch 的 AI 代理可以据此解析并生成高级、非通用型界面。
生成的 DESIGN.md 作为单一事实源，用于提示 Stitch 生成符合精心策划、高自主性设计语言的新屏幕。Stitch 通过基于特定颜色值、排版规格和组件行为的 “视觉描述” 来解读设计。
先决条件
- 访问 Google Stitch (labs.google/stitch)
- （可选）Stitch MCP 服务器，用于与 Cursor、Antigravity 或 Gemini CLI 进行编程式集成
目标
生成一个编码了以下内容的 DESIGN.md 文件：
- 视觉氛围 —— 情绪气质、信息密度和设计理念
- 色彩校准 —— 包含十六进制色码的中性色、强调色和禁用模式
- 排版架构 —— 字体堆栈、层级缩放比例和反模式
- 组件行为 —— 按钮、卡片、输入框及其交互状态
- 布局原则 —— 网格系统、间距理念、响应式策略
- 动效理念 —— 动画引擎规格、弹簧物理、永久微交互
- 反模式 —— 明确列出被禁止的 AI 设计陈词滥调
分析与合成指南
1. 定义氛围
评估目标项目的意图。从品味谱系中使用富有表现力的形容词：
- 密度： “画廊般通透” (1–3) → “日常应用平衡” (4–7) → “驾驶舱密集” (8–10)
- 变化： “可预测的对称” (1–3) → “偏移的不对称” (4–7) → “艺术般的混乱” (8–10)
- 动效： “静态克制” (1–3) → “流畅 CSS” (4–7) → “电影级编排” (8–10)
默认基线：变化 8，动效 6，密度 4。根据用户描述的氛围动态调整。
2. 映射调色板
为每种颜色提供：描述性名称 + 十六进制色码 + 功能角色。
强制约束：
- 最多 1 种强调色。饱和度低于 80%
- “AI 紫色/蓝色霓虹”美学被严格禁止 —— 无紫色按钮光晕，无霓虹渐变
- 使用绝对中性基础色（锌色/板岩色）搭配高对比度的单一强调色
- 整个输出坚持使用一个调色板 —— 不允许冷/暖灰色波动
- 永不要使用纯黑色 (
#000000) —— 使用次黑色、锌色-950 或木炭色
3. 建立排版规则
- 显示/标题： 字间距紧凑，缩放有度。不张扬。通过字重和颜色建立层级，而非仅靠巨大的字号
- 正文： 宽松的行高，每行最多 65 个字符
- 字体选择： 在高级/创意上下文中禁止使用
Inter。强制使用具有独特特征的字体：Geist、Outfit、Cabinet Grotesk或Satoshi - 衬线字体禁令： 禁止使用通用衬线字体（
Times New Roman、Georgia、Garamond、Palatino）。如果需要在编辑/创意上下文中使用衬线字体，则只能使用特征明显的现代衬线字体：Fraunces、Gambarino、Editorial New或Instrument Serif。在仪表盘或软件 UI 中始终禁用衬线字体 - 仪表盘约束： 仅使用无衬线字体配对（
Geist+Geist Mono或Satoshi+JetBrains Mono） - 高密度覆盖： 当密度超过 7 时，所有数字必须使用等宽字体
4. 定义英雄区域
英雄区域是第一印象，必须具有创意性、引人注目且绝不千篇一律：
- 内联图像排版： 直接在标题的词语或字母之间嵌入小的、上下文相关的照片或视觉元素。图像以排版高度内联放置，使用圆角，充当视觉标点符号。这是标志性的创意技巧
- 无重叠： 文本绝不能与图像或其他文本重叠。每个元素都占据自身清晰的空间区域
- 无填充文本： “滚动探索”、“向下滑动”、滚动箭头图标、弹跳的 V 形符号均被禁止。内容应自然吸引用户
- 不对称结构： 当变化值超过 4 时，禁用居中的英雄区域布局
- 行动号召克制： 最多一个主要行动号召按钮。没有次要的“了解更多”链接
5. 描述组件样式
针对每种组件类型，描述形状、颜色、阴影深度和交互行为：
- 按钮： 激活状态有触觉按压反馈。无霓虹外发光。无自定义鼠标光标
- 卡片： 仅当阴影能够传达层级关系时才使用。阴影色调与背景色一致。对于高密度布局，用顶部边框分隔线或负空间替代卡片
- 输入框/表单： 标签在输入框上方，帮助文本可选，错误文本在下方。标准间距
- 加载状态： 与布局尺寸匹配的骨架屏加载器 —— 无通用圆形旋转动画
- 空状态： 构图完整的组合，指示如何填充数据
- 错误状态： 清晰的内联错误报告
6. 定义布局原则
- 无重叠元素 —— 每个元素都占据自身清晰的空间区域。无绝对定位的内容堆叠
- 当变化值超过 4 时，禁用居中的英雄区域 —— 强制使用分屏、左对齐或不对称空白
- 禁止使用通用的“3 张等宽卡片水平排列”的功能行 —— 使用 2 列锯齿形、不对称网格或水平滚动
- 使用 CSS Grid 而非 Flexbox 数学运算 —— 永不要使用
calc()百分比技巧 - 使用最大宽度约束（例如，居中的 1400px）来包裹布局
- 全高部分必须使用
min-h-[100dvh]—— 永不要使用h-screen（iOS Safari 会有灾难性的页面跳动）
7. 定义响应式规则
每个设计必须跨越所有视口工作：
- 移动优先折叠 (< 768px)： 所有多列布局都折叠为单列。无例外
- 无水平滚动： 移动设备上的水平溢出是致命错误
- 排版缩放： 标题通过
clamp()缩放。正文字体最小值1rem/14px - 触摸目标： 所有交互元素的最小触摸目标为
44px - 图片行为： 内联排版图片（词语之间的照片）在移动设备上堆叠在标题下方
- 导航： 桌面水平导航折叠为简洁的移动菜单
- 间距： 垂直区块间距按比例缩小（
clamp(3rem, 8vw, 6rem)）
8. 编码动效理念
- 弹簧物理默认值：
stiffness: 100, damping: 20—— 高级、有质感的体验。无线性缓动 - 永久微交互： 每个活跃组件应具有无限循环状态（脉冲、打字机、浮动、闪烁）
- 交错编排： 从不立即挂载列表 —— 使用级联延迟实现瀑布式揭示
- 性能： 仅通过
transform和opacity进行动画处理。永不要对top、left、width、height进行动画处理。仅在固定的伪元素上使用颗粒/噪点滤镜
9. 列出反模式（AI 特征）
将这些编码为 DESIGN.md 中明确的“永不做”规则：
- 任何地方都不使用表情符号
- 不使用
Inter字体 - 不使用通用衬线字体（
Times New Roman、Georgia、Garamond）—— 仅在需要时使用特征明显的现代衬线字体 - 不使用纯黑色 (
#000000) - 不使用霓虹/外发光阴影
- 不使用过度饱和的强调色
- 不在大标题上使用过多的渐变文本
- 不使用自定义鼠标光标
- 始终保证元素不重叠 —— 清晰的空间分离
- 不使用 3 列等宽卡片布局
- 不使用通用名称（“John Doe”、“Acme”、“Nexus”）
- 不使用虚假的整数（
99.99%、50%） - 不使用 AI 文案写作陈词滥调（“提升”、“无缝”、“释放”、“下一代”）
- 无填充 UI 文本：“滚动探索”、“向下滑动”、滚动箭头、弹跳的 V 形符号
- 无失效的 Unsplash 链接 —— 使用
picsum.photos或 SVG 头像 - 无居中的英雄区域（适用于高变化值的项目）
输出格式（DESIGN.md 结构）
# 设计系统：[项目标题]
## 1. 视觉主题与氛围
（对情绪、密度、变化和动效强度的富有表现力的描述。
例如：“一种克制的、画廊般通透的界面，具有自信的不对称布局
和流畅的弹簧物理动效。氛围是临床而温暖的 —— 就像一个
光线充足的建筑工作室。”）
## 2. 调色板与角色
- **画布白** (#F9FAFB) — 主要背景表面
- **纯色表面** (#FFFFFF) — 卡片和容器填充
- **炭黑墨水** (#18181B) — 主要文本，锌色-950 深度
- **柔和钢色** (#71717A) — 次要文本、描述、元数据
- **低语边框** (rgba(226,232,240,0.5)) — 卡片边框，1px 结构线
- **[强调色名称]** (#XXXXXX) — 单一强调色，用于 CTA、活动状态、焦点环
（最多 1 种强调色。饱和度 < 80%。无紫色/霓虹色。）
## 3. 排版规则
- **显示文本：** [字体名称] — 字间距紧凑，缩放有度，字重驱动层级
- **正文：** [字体名称] — 宽松行高，最大 65ch 宽，中性次要颜色
- **等宽字体：** [字体名称] — 用于代码、元数据、时间戳、高密度数字
- **禁用：** 在高级上下文中禁用 Inter、通用系统字体。在仪表盘中禁用衬线字体。
## 4. 组件样式
* **按钮：** 平面，无外发光。激活时触觉 -1px 位移。主要按钮使用强调色填充，次要按钮使用幽灵/轮廓样式。
* **卡片：** 大方圆角 (2.5rem)。模糊的低语阴影。仅在阴影传达层级时使用。高密度时：替换为顶部边框分隔线。
* **输入框：** 标签在上方，错误提示在下方。焦点环使用强调色。无浮动标签。
* **加载器：** 与确切布局尺寸匹配的骨架闪烁效果。无圆形旋转动画。
* **空状态：** 构图完整的组合 —— 不仅仅是“无数据”文本。
## 5. 布局原则
（Grid 优先的响应式架构。英雄区域使用不对称分割。
768px 以下严格折叠为单列。最大宽度包含。
无 Flexbox 百分比计算。充足的内部填充。）
## 6. 动效与交互
（所有交互元素使用弹簧物理。交错级联揭示效果。
活跃仪表盘组件上的永久微循环。仅使用硬件加速的
变换。CPU 密集型动画使用隔离的客户端组件。）
## 7. 反模式（禁用）
（明确列出禁止的模式：无表情符号，无 Inter，无纯黑色，
无霓虹发光，无 3 列等宽网格，无 AI 文案写作陈词滥调，
无通用占位名称，无失效的图片链接。）
最佳实践
- 描述性： “深炭黑墨水 (#18181B)” —— 不仅仅是“深色文本”
- 功能性： 解释每个元素的用途
- 一致性： 整个文档使用相同的术语
- 精确性： 包括确切的十六进制色码、rem 值、像素值（括号内）
- 有主见： 这不是一个中立的模板 —— 它强制执行一种特定的、高级的美学
成功秘诀
- 从氛围开始 —— 在详细说明标记之前理解设计感
- 寻找模式 —— 识别一致的间距、大小和样式
- 语义化思考 —— 按用途而非仅凭外观命名颜色
- 考虑层级 —— 记录视觉重量如何传达重要性
- 编码禁令 —— 反模式与规则本身同样重要
应避免的常见陷阱
- 不加解释地使用技术行话（例如，“rounded-xl” 而不是“大方圆角”)
- 省略十六进制色码或仅使用描述性名称
- 忘记设计元素的功能角色
- 氛围描述过于模糊
- 忽略反模式列表 —— 正是这些使得输出变得高级
- 默认使用通用的“安全”设计，而非强制执行精心策划的美学