Stitch 设计品味 — 语义化设计系统技能

概述

此技能生成针对 Google Stitch 屏幕生成优化的 DESIGN.md 文件。它将经过实战检验的反垃圾前端工程指令转化为 Stitch 原生的语义设计语言——描述性的、自然语言的规则，并配以精确的数值，使 Stitch 的 AI 代理能够解读并生成高级、非通用的界面。

生成的 DESIGN.md 作为唯一真实来源，用于提示 Stitch 生成符合精心策划的、高能动性设计语言的新屏幕。Stitch 通过“视觉描述”以及特定的颜色值、字体规范和组件行为来解读设计。

前置条件

• 通过 labs.google.com/stitch 访问 Google Stitch
• 可选：Stitch MCP 服务器，用于与 Cursor、Antigravity 或 Gemini CLI 进行程序化集成

目标

生成一个 DESIGN.md 文件，其中包含：

1. 视觉氛围 — 情绪、密度和设计理念
2. 色彩校准 — 中性色、强调色以及带有十六进制代码的禁用模式
3. 字体架构 — 字体栈、层级缩放比例和反模式
4. 组件行为 — 按钮、卡片、输入框及其交互状态
5. 布局原则 — 网格系统、间距理念、响应式策略
6. 动效理念 — 动画引擎规格、弹性物理、持续的微交互
7. 反模式 — 明确列出被禁止的 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 时，禁止使用居中的首屏区域 — 强制使用分屏、左对齐或非对称留白
• 禁止使用通用的“三个等宽卡片横向排列”功能行 — 使用两列之字形、非对称网格或水平滚动
• CSS 网格优先于弹性盒计算 — 从不使用 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）
• 无霓虹/外发光阴影
• 无过度饱和的强调色
• 无大标题上的过度渐变文本
• 无自定义鼠标光标
• 无重叠元素 — 始终保持清晰的空间分隔
• 无三列等宽卡片布局
• 无通用名称（“张三”、“某公司”、“连接器”）
• 无假整数值（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) — 唯一的行动号召、活动状态、焦点环颜色
(最多 1 种强调色。饱和度 < 80%。无紫色/霓虹。)

## 3. 字体规则
- **展示字体:** [字体名称] — 字距紧凑，尺度可控，通过字重建立层次结构
- **正文字体:** [字体名称] — 行距宽松，最大宽度 65ch，中性辅助色
- **等宽字体:** [字体名称] — 用于代码、元数据、时间戳、高密度数字
- **禁用字体:** Inter，高端语境中的通用系统字体。仪表盘中禁用衬线字体。

## 4. 组件样式
* **按钮:** 扁平，无外发光。活动状态有触感 -1px 下移。主要按钮使用强调色填充，次要按钮使用幽灵/轮廓样式。
* **卡片:** 大圆角 (2.5rem)。微弱的漫反射阴影。仅在投影服务于层次结构时使用。高密度布局：用顶部边框分隔线替代。
* **输入框:** 标签在上，错误提示在下。焦点环使用强调色。无浮动标签。
* **加载器:** 匹配确切布局尺寸的骨架闪烁效果。无圆形旋转器。
* **空状态:** 有构图、有插图的组合 — 不仅仅是“无数据”文本。

## 5. 布局原则
(网格优先的响应式架构。首屏区域使用非对称分割。
在 768px 以下严格折叠为单列。最大宽度约束。
无弹性盒百分比计算。充足的内边距。)

## 6. 动效与交互
(所有交互元素使用弹簧物理。交错级联揭示。
活动仪表盘组件上的持续微循环。仅使用硬件加速的
变换。CPU 密集型动画使用隔离的客户端组件。)

## 7. 反模式 (禁用项)
(明确列出禁止的模式列表：无表情符号，无 Inter，无纯黑色，
无霓虹光晕，无三列等宽网格，无 AI 文案陈词滥调，
无通用占位符名称，无损坏的图片链接。)

最佳实践

• 描述性： “深炭墨色 (#18181B)” — 而不仅仅是“深色文本”
• 功能性： 解释每个元素的用途
• 一致性： 在整个文档中使用相同的术语
• 精确性： 在括号中包含精确的十六进制代码、rem 值、像素值
• 有主见： 这不是一个中立的模板——它强制执行特定的高级审美

成功技巧

1. 从氛围开始——在详细设计令牌之前先理解整体感觉
2. 寻找模式——识别一致的间距、尺寸和样式
3. 语义化思考——根据用途而非仅仅外观来命名颜色
4. 考虑层次结构——记录视觉权重如何传达重要性
5. 编码禁令——反模式与规则本身同样重要

需避免的常见陷阱

• 使用未翻译的技术行话（例如用“大圆角”而不是“rounded-xl”）
• 省略十六进制代码或仅使用描述性名称
• 忘记设计元素的功能角色
• 氛围描述过于模糊
• 忽略反模式列表——这些是使输出高级的关键
• 默认为通用的“安全”设计，而不是强制执行精心策划的审美