Stitch 设计规范生成助手

Stitch 设计规范生成助手

这个 Skill 能做什么

为 Google Stitch 项目编写结构化设计规范，明确语义令牌、排版、布局、组件、动效和性能边界。

完成任务时重点处理：

• 语义设计令牌与组件意图
• 非对称布局、字体、色彩和微交互
• 生成约束、性能与响应式规则

最终目标不是堆出一份看似完整的内容，而是交付能够直接使用、继续修改并清楚验收的结果。

什么时候使用

• 需要让生成式界面工具持续产出一致、可维护且不过度模板化的页面。
• 用户需要为 Google Stitch 项目编写结构化设计规范，明确语义令牌、排版、布局、组件、动效和性能边界。
• 任务需要同时控制语义设计令牌与组件意图、非对称布局、字体、色彩和微交互。

如果产品方向未定时先提供两套规范草案并说明差异，先处理前置条件，不要直接假装任务已经完成。

开始前需要什么

优先收集：

1. 产品目标、用户任务与页面范围 2. 代码仓库、技术栈和现有组件 3. 品牌资料、参考方向与禁用模式 4. 响应式、可访问性、性能和测试约束 5. 产品定位、页面类型、品牌与内容样例 6. Stitch 工程、期望输出和已有 DESIGN.md

信息不必一次问完。先检查用户已经提供的材料，只追问会明显改变结果的问题。

执行步骤

1. 提炼产品气质

把品牌感受转成可执行的字体、色彩和空间规则。

2. 定义语义令牌

使用角色命名颜色、字体、间距、边界和层级。

3. 规定布局逻辑

明确容器、网格、非对称变化和响应式转换。

4. 描述组件行为

覆盖默认、悬停、焦点、加载、错误和空状态。

5. 设置动效与性能边界

限定属性、时长、数量和硬件加速策略。

6. 编写生成检查

建立必须遵守、禁止使用和交付前自检条目。

输出格式

至少交付以下内容：

• **设计规范文件**：适合 Stitch 读取的完整 DESIGN.md
• **令牌与组件表**：语义变量、状态和使用示例
• **生成检查表**：禁止模式、响应式、性能和验收要求

所有文件使用能说明内容和版本的名称。若任务包含执行动作，还要记录执行状态、验证结果和可继续处理的材料。

完整示例

用户要生成文化活动网站；规范使用编辑排版、非对称图片与低饱和功能色，并明确禁用通用渐变卡片。

合理处理顺序：

1. 提炼产品气质 2. 定义语义令牌 3. 规定布局逻辑 4. 描述组件行为 5. 设置动效与性能边界 6. 编写生成检查

交付时应重点展示设计规范文件、令牌与组件表、生成检查表，并说明尚未验证的部分。

质量检查清单

• [ ] 核心用户任务比修改前更容易发现和完成
• [ ] 组件、字体、颜色和间距形成一致系统
• [ ] 手机、平板、桌面和关键交互状态均已检查
• [ ] 功能、性能、SEO 和可访问性没有意外回退
• [ ] 规则使用语义目的而不是只列固定数值
• [ ] 设计规范覆盖真实内容、长文本和关键状态

信息不足时怎么处理

• 不能运行项目时只做静态审计，并明确未验证项目。
• 需求冲突时优先保护核心任务和现有业务功能。
• 产品方向未定时先提供两套规范草案并说明差异。