核心用法
Stitch Design 是一个基于 Google Stitch SDK 的 AI 驱动界面设计技能，通过命令行工具 scripts/stitch.mjs 提供完整的 UI 设计工作流：
主要功能模块：
- 生成设计 (`generate`)：从文本提示创建全新界面，支持 desktop/mobile/tablet 设备指定
- 编辑设计 (`edit`)：针对现有屏幕进行精准修改，如调整颜色、添加组件
- 变体探索 (`variants`)：生成 1-5 个设计变体，支持三种创意范围（refine/explore/reimagine）和五个可控维度（layout/color_scheme/images/text_font/text_content）
- 项目/屏幕管理：创建项目、列出所有项目、查看项目内所有屏幕
- 导出功能：获取 HTML 源码、PNG 截图或完整打包
关键工作流原则：
1. 必须预先阅读 references/prompt-guide.md，使用 Prompt Framework（Context→Structure→Aesthetic→Constraints）转换用户输入
2. 组件设计必须显式声明"standalone UI component"以隔离生成
3. 采用迭代循环：Anchor→Inject→Tune→Fix，每次编辑需明确"不得改变"的锚点元素
4. 所有操作自动保存到 runs/<timestamp>/ 目录，含 HTML、PNG 和元数据
显著优点：
- 背靠 Google Gemini 模型（Pro/Flash），生成质量稳定
- 变体系统精细，可针对性调整特定视觉维度
- 状态自动追踪（
latest-screen.json），减少用户输入负担 - 输出为真实可运行的 HTML/CSS/JS，非静态图片
- 支持手绘草图到数字设计的转化路径
潜在缺点与局限：
- SDK 无图像上传能力：草图、参考图必须先通过 Stitch Web UI 上传，无法直接通过技能处理
- 内容幻觉问题：Stitch 会自主添加未请求的文案、标签、徽章，必须人工审核
- 全屏生成倾向：默认生成完整页面布局，组件设计需显式覆盖
- 操作耗时：生成/编辑/变体需 1-5 分钟，虽支持自动恢复轮询，但实时性有限
- Figma 导出非原生：需手动复制粘贴，CLI 仅输出 HTML
适合人群：
- 产品设计师、前端开发者需要快速生成 UI 原型
- 无设计背景的开发者需要"文字到界面"的转化
- 需要批量探索设计方向（A/B 变体）的团队
- 已有手绘草图需要数字化精修的场景
常规风险：
- API 密钥安全：STITCH_API_KEY 需妥善保管，避免泄露
- 生成内容合规性：AI 可能生成含敏感元素的设计，需人工审核
- 知识产权模糊性：生成代码和设计的版权归属需参考 Google Stitch 服务条款
- 依赖外部服务：完全依赖 Google Stitch 服务可用性和定价策略