mcpField
S
stitch-design

stitch-design

github.com/nguyenthienthanh设计与 UI2548 次安装今天更新
代码仓库

关于 stitch-design

stitch-design 是使用 Google Stitch AI 生成 UI 布局的技能，面向设计和前端工作流。它既可通过可选的 Stitch MCP 服务直接生成，也可采用手动提示词与导出流程，并说明静态设计的限制。

主要功能

  1. 01根据文本提示生成屏幕
  2. 02编辑屏幕并创建变体
  3. 03创建和应用设计系统
  4. 04获取屏幕 HTML 与截图
  5. 05使用五类设计的提示词模板
  6. 06处理手动导出的 HTML 和 CSS

适用场景

  1. 01起草仪表盘或落地页布局
  2. 02制作移动端、电商或表单设计
  3. 03在多个屏幕间维护设计令牌
  4. 04将截图作为实现参考交接

MCP 相关

配置 Stitch API 密钥后，可通过可选的远程 Stitch MCP 服务生成和编辑设计并获取输出。若未配置该服务或认证，则采用手动提示词与导出工作流。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nguyenthienthanh/aura-frog --skill stitch-design

安装后在 Claude Code 中输入/stitch-design确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
design-checklist.md
export-guide.md
prompt-templates.md

详细介绍

供 AI 消费的参考文档。 已针对 Claude 在执行期间读取进行优化。 面向人类的说明：参见 docs/architecture/HIERARCHICAL_PLANNING.md 或 docs/getting-started/，具体视主题而定。

技能：Google Stitch 设计

使用 Google Stitch AI（https://stitch.withgoogle.com）生成 UI 设计，由 Gemini 提供支持。

stitch_info[1]{engine,limits,quota}:
  Gemini (Flash draft / Pro final),"static layouts only — no hover/animation/state; not pixel-perfect",~350 gen/month free (MCP shares this)

两条集成路径 —— 配置了 MCP 时优先使用 MCP，否则回退到手动粘贴：

paths[2]{path,when,how}:
  MCP (automated),"stitch server enabled in .mcp.json + STITCH_API_KEY set","call tools directly — no copy-paste"
  Manual (fallback),"no Stitch MCP / no auth / hit quota","generate prompt → user pastes into stitch.withgoogle.com → ingest export"

路径 A —— Stitch MCP（自动化）

stitch MCP 是一个需主动启用且未随附的远程 http 服务 —— 它不在 .mcp.json 中 （"disabled": true 标志不起作用；Claude Code 会忽略它并照常启动该服务，因此要让某个服务保持关闭，就只能不把它写进去）。将该条目添加到你自己项目的 .mcp.json 中 —— 代码片段见 docs/operations/MCP_GUIDE.md § Optional Servers —— 并设置 STITCH_API_KEY（在 Stitch → Settings 中创建密钥）以启用直接生成。相较 OAuth，优先使用 API 密钥认证（OAuth 令牌每小时过期，需要在客户端手动刷新）。

⚠️ 首次连接时进行验证。 下面的端点（https://stitch.googleapis.com/mcp）、请求头名称和确切的 工具名称来自 2026 年中的调研，未能经过充分的对抗性验证。在信任它们之前，先列出该服务的工具 （让 Agent “列出 Stitch 项目”或检查工具 schema），并与 https://stitch.withgoogle.com/docs/mcp/setup 进行核对。如果名称不一致，请使用 真实的名称 —— 不要凭空捏造。如果服务无法访问，则退回路径 B。

MCP 工作流
mcp_workflow[6]{step,action,tool}:
  1,Read design SoT,".claude/design/design-system.md (if present) → seed the prompt"
  2,Generate screens,"generate_screen_from_text (modelId GEMINI_3_FLASH for drafts)"
  3,Iterate,"edit_screens / generate_variants on selected screen IDs"
  4,Seed design system,"create_design_system / apply_design_system (foundational tokens)"
  5,Pull outputs,"fetch screen HTML + download screenshot PNG per screen"
  6,Persist + handoff,"merge design.md → .claude/design/design-system.md; save PNGs as vision-loop targets"
  • 模型选择： 用 GEMINI_3_FLASH 起草（便宜、迭代快）；仅在最终稿时切换到 Pro 模型。 每次生成都会消耗每月约 350 次的免费配额 —— 记录你消耗了多少次， 不要把配额浪费在会被丢弃的草稿上。
  • 设计系统工具（create_design_system、update_design_system、list_design_systems、 apply_design_system）是 Agent 驱动构建/维护 Stitch 设计系统的路径，可让设计在多个屏幕之间保持 一致 —— 将其同步到 .claude/design/design-system.md（参见 rules/agent/design-system-persistence.md）。
  • 截图至关重要： 保存每个屏幕的 PNG —— 当 Claude 实现真正的（可交互）UI 时，它们会成为 design-vision-loop 技能的参考目标。
Stitch 的局限决定了交接方式

Stitch 输出的是静态布局 —— 没有悬停状态、动画、表单校验或状态管理，并且 不保证像素级精确。因此 Stitch 负责布局 + 外观；前端 Agent 负责 行为、交互性、动效、无障碍。要分别说明这些内容 —— 不要指望 Stitch 提供它们。

路径 B —— 手动（回退方案）

在 MCP 不可用时使用。未改变的复制粘贴流程：

workflow[5]{step,action,output}:
  1,Gather requirements,Requirements doc
  2,Generate prompt,Optimized Stitch prompt
  3,Create review doc,.claude/workflow/stitch-design-review-*.md
  4,Guide user,Instructions + link
  5,Process export,Component code
  1. 收集需求 —— 应用类型（仪表盘/落地页/移动端/电商/表单）、受众、主题、关键功能、品牌。
  2. 生成提示词 —— 从 references/prompt-templates.md 加载对应应用类型的模板；填写内容。
  3. 创建评审文档 —— .claude/workflow/stitch-design-review-{project-name}.md，包含规格 + 检查清单。
  4. 引导用户 —— 可直接复制粘贴的提示词、Stitch 链接、导出指导（Figma 粘贴 vs HTML/CSS）。
  5. 处理导出内容 —— 审查 HTML/CSS，提取 token → .claude/design/design-system.md，按约定生成组件。

设计类型

design_types[5]{type,use_case,template}:
  dashboard,Admin panels; analytics,references/prompt-templates.md#dashboard
  landing,Marketing; product pages,references/prompt-templates.md#landing
  mobile,iOS/Android screens,references/prompt-templates.md#mobile
  ecommerce,Product; cart; checkout,references/prompt-templates.md#ecommerce
  forms,Multi-step wizards,references/prompt-templates.md#forms

相关文件

  • references/prompt-templates.md - 按类型优化的提示词（两条路径均使用）
  • references/design-checklist.md - 详细审查清单
  • references/export-guide.md - 从 Stitch 导出（手动路径）

另见： rules/agent/design-system-persistence.md（持久化 Stitch 输出）、skills/design-vision-loop/SKILL.md （对照 Stitch 屏幕 PNG 验证已实现的 UI）。Google 还开源了 stitch-skills （google-labs-code/stitch-skills）——可选更深入的工作流，按其 README 安装；此处未捆绑。

评论

支持 Markdown