stitch::generate-design作者 Google Labs

Stitch Generate Design Skill.

Claude Code 和 Codex 的 UI 设计 skill：根据文本或参考图片在 Stitch 中生成、编辑和变化屏幕。

Web & UI
设计文件

google-labs-code/stitch-skills · plugins/stitch-design/skills/generate-design/SKILL.mdSKILL.md

--- name: stitch::generate-design description: - Generate new screens from text prompts or images, edit existing screens with prompts and design system tokens, and generate design variants using Stitch MCP. Includes prompt enhancement pipeline, design mappings, professional UI/UX terminology, design tokens and theme system capabilities. --- ## 🎨 Prompt Enhancement Pipeline ## Steps ## 💡 Tips

前言和章节标题读取自 2026-09-14 的上游文件 · 完整 10,959 字符

01 功能说明

stitch::generate-design Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物，均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

该 skill 通过四种流程驱动 Stitch MCP：从文字生成新界面、根据图片或原型重建、编辑现有界面，以及生成变体。在任何生成或编辑调用之前，它都会运行一个 prompt 增强流水线，解析项目和设计系统，将含糊的措辞替换为其设计映射中的 UI/UX 术语，并使用带有 PLATFORM 与 PAGE STRUCTURE 部分的模板，围绕布局、内容与结构来格式化 prompt。

视觉样式保留在项目层级，因此生成 prompt 中不得携带十六进制颜色值、字体或圆角数值。每次调用后都会展示 AI 反馈，产物下载至 .stitch/designs。

它产出什么

生成界面的 HTML 与截图，下载到 .stitch/designs 目录中。
outputComponents 中返回的 AI 文字描述与建议，展示给用户。
针对所选方向的变体界面，每批一到五个。

查看示例提示词 ↗

工作方式

01
首先增强 Prompt
该流水线是强制性的，并非可选：agent 必须先重写用户的请求，才能调用 Stitch 的生成或编辑工具。
02
检查项目已有的样式设定
如果项目已经拥有设计系统，颜色、字体与圆角会在项目层级应用，因此增强后的 prompt 必须完全不涉及视觉样式。
03
以「平台 + 页面结构」格式化 Prompt
新界面遵循一个模板：先说明整体用途，然后是 PLATFORM，接着是从 Header 到 Footer 编号的 PAGE STRUCTURE。
04
从四种流程中选择一种
在调用任何工具之前，请求会被路由到「从文字生成」「从图片生成」「编辑」或「生成变体」之一。

02 找到适合场景

何时使用 stitch::generate-design Skill

在 Claude Code 或 Codex 中，当任务涉及此类 UI 设计时，请使用 stitch::generate-design skill。适用范围和限制取自该 skill 自己的文件。

适合场景

根据页面的文字描述，从零开始新建一个界面。
根据你已有的图片、截图或原型进行重建。
对项目中已存在的某个界面进行有针对性的修改。
为已有界面探索其他布局、配色方案或文案。

了解边界

在设计系统存在之前，它不会生成界面：如果项目还没有设计系统，工作会先交给 manage-design-system skill 处理。
上传图片不是在这里完成的；图片首先通过 upload skill 变成界面内容，之后才通过编辑进行优化。

需要提供的信息

输入这是增强流水线重写为结构化 Stitch prompt 的内容。
目标项目Agent 会通过 id 查找项目，只有在没有合适项目存在时才会创建一个新项目。
用于编辑或生成变体的界面编辑和变体都需要 projectId 和 screenId，可通过列出或获取界面来找到。

03 Skill 内部

stitch::generate-design Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 6 条具体指令、默认值与边界——文件中真正改变结果的那部分。

生成 Prompt 中不得泄露主题信息
绝不要在生成 prompt 中放入十六进制代码、字体名称或颜色角色；设计系统负责处理所有视觉样式和重复冲突。
十六进制代码仅在编辑时使用
在编辑 prompt 中，允许使用精确的十六进制值来进行精准的颜色匹配，这是生成 prompt 禁令唯一不适用的地方。
始终展示 outputComponents
在任何 Stitch 工具调用之后，Agent 必须向用户展示返回的 Text Description 和 Suggestions，而不仅仅是生成的界面。
优先编辑而非重新生成
完全重新生成仅用于修正根本性的布局错误；其他所有情况都应通过有针对性的编辑来完成。
编辑后覆盖本地副本
更新后的 HTML 和截图 URL 会重新下载并覆盖之前的文件，以确保本地文件反映最新的编辑内容。
保持 .stitch/metadata.json 同步
下载资源后，元数据会随着变更的界面标题或新的界面 ID 一起更新；该文件会跟踪所有界面、设备类型和设计系统信息。

04 投入使用

在 Claude Code 或 Codex 中安装 stitch::generate-design

一条 npx skills add 命令，然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 stitch::generate-design 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行；安装程序会询问要把它添加到哪个 Agent。

Terminal

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::generate-design

用于 plugins/stitch-design/skills/generate-design/SKILL.md 的通用 skills CLI 形式；具体仓库可能会记录自己的路径。

给 Skill 一个首次 UI 设计任务

使用你自己的内容和约束调整此提示，然后在 Claude Code 或 Codex 中运行它。

Example prompt

This is a dashboard mockup — recreate it with a proper data table, sidebar navigation, and chart widgets.

来源：SKILL.md 示例（原文照录）。

检查首次结果

SKILL.md 本身如何描述正确的结果：

查看输出的界面，确认所请求的更改确实已生效。
如果结果不完全符合预期，请继续使用编辑流程，而不是重新生成；如果还需要进一步打磨，可用新的具体 prompt 重复此过程。
在生成之前，先确认该项目是否已存在设计系统。

在 OpenDesign 中，通过 SKILL.md 链接导入 stitch::generate-design：Plugins → Add → Skill → Import from link，然后在顶部栏中选择它。

下载 OpenDesign 阅读快速入门

05 开源、可追溯

来源、许可与验证

本页面事实的来源，以及最后检查时间。

Author: Google Labs
Repository: github.com/google-labs-code/stitch-skills 分支 main
Skill 文件: plugins/stitch-design/skills/generate-design/SKILL.md 验证时记录的内容校验和；提交 0337446
License: Apache-2.0 来自 LICENSE。
仓库星标数: 8,304 2026-09-14 为整个 google-labs-code/stitch-skills 仓库拍摄的 GitHub 快照，该仓库在此目录中包含 12 个 skills。不是 stitch::generate-design 的评分或使用计数。
已由 OpenDesign 验证: 2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序（检查日期 2026-08-28）；本页面未记录实际运行。

SKILL.md 内部

🎨 提示词增强流水线分析上下文、替换模糊措辞、构建提示词结构、呈现 AI 洞察
步骤模式选择，以及文本、图像、编辑和变体流程及其工具调用
💡 提示注重结构、内容优先、迭代打磨、避免主题外溢、聚焦式修改
📚 参考资料设计映射、提示关键词，以及一个前后对比的增强提示词示例

Skill 自身的描述

"- 通过文本提示或图像生成新界面，使用提示和设计系统 token 编辑现有界面，并使用 Stitch MCP 生成设计变体。包括提示增强管道、设计映射、专业 UI/UX 术语、design token 和主题系统功能。"

SKILL.md 文件中的前言描述。完整文件约 10,959 字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 stitch::generate-design Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md，而非某次实际运行的记录。

使用前需要配置工具名称吗？

该 skill 会调用诸如 list_projects、generate_screen_from_text 和 edit_screens 等 Stitch MCP 工具，其自身说明中提到 MCP 工具前缀的处理方式应遵循你的系统提示词。也就是说，前缀约定来自你的设置，而不是该 skill 本身。

变体与编辑有何区别？

编辑会改变你已有的画面；变体则通过 generate_variants 工具围绕它探索替代方案。你可以用 creativeRange 来把控方向——REFINE 表示微调，EXPLORE 表示均衡探索，REIMAGINE 表示大胆重构——并可缩小关注方面，留空则表示全部方面。

可以从截图或原型图而不是文字描述开始吗？

可以。图像会交给 upload-to-stitch skill 放入项目中，之后 Agent 会找到新的 screenId，并通过描述需要调整或重建内容的编辑提示词来完善设计。

Stitch Generate Design

在真实 UI 设计任务中运行 stitch::generate-design。

下载 OpenDesign，从其 SKILL.md 链接导入 stitch::generate-design，粘贴上方的提示，在结果出来之前先阅读计划。

下载 OpenDesign 浏览所有 skills

终端

npx skills add https://github.com/google-labs-code/stitch-skills --skill stitch::generate-design