跳转到使用指南
enhance-prompt作者 Google Labs

Enhance Prompt Skill.

一个用于 UI 设计的 Claude Code 和 Codex skill:将模糊的 UI 想法改写为精良的、针对 Stitch 优化的提示词。

  • Web & UI
google-labs-code/stitch-skills · plugins/stitch-utilities/skills/enhance-prompt/SKILL.mdSKILL.md
--- name: enhance-prompt description: Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results. --- ## Prerequisites ## When to Use This Skill ## Enhancement Pipeline ## Output Options ## Examples ## Tips for Best Results
前置数据和章节标题读取自上游文件,日期 2026-09-14 · 完整内容 6,618 字符

01 功能说明

enhance-prompt Skill 在 Claude Code 与 Codex 中的作用

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

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

以 skill 自身的术语

这个 skill 把粗略的 UI 想法转化为适合 Stitch 生成的 prompt。它以 Stitch Prompt Engineer 的角色工作,检查输入中是否缺少平台、页面类型、结构、视觉风格、颜色和组件信息,然后把模糊的措辞改写为具体的组件名称,强化情绪形容词,将内容归入编号区块,并将每种颜色格式化为名称、十六进制码和功能角色。

如果项目中有 DESIGN.md,其调色板、字体排印和组件样式会被整合进一个 DESIGN SYSTEM(必需)区块;如果没有,则会给出提示,指向 design-md skill。输出默认是可复制的文本,或者是一个文件,例如供 stitch-loop 使用的 next-prompt.md。

它产出什么

  • 一段增强后的 prompt,开头是关于页面用途与氛围的一句话描述,随后是设计系统区块与编号的页面结构。
  • 一个可选的 next-prompt.md 文件,供 stitch-loop skill 使用。
  • 一个可选文件,使用用户自定义的文件名。
查看示例提示词 ↗

工作方式

  1. 01
    检查原始输入

    该 skill 会依据六个要素检查用户的 prompt:平台、页面类型、结构、视觉风格、颜色和组件。

  2. 02
    引入设计系统

    它会在当前项目中查找 DESIGN.md,并读取其中的设计系统区块,以便在新 prompt 中复用调色板、字体排印和组件样式。

  3. 03
    应用增强技巧

    模糊的措辞会变为具名组件,形容词会被强化为一种情绪,内容会被组织进编号区块,颜色则会用描述性名称、十六进制值和角色来书写。

  4. 04
    按固定顺序格式化输出

    结果开头是关于页面用途与氛围的一句话描述,接着是 DESIGN SYSTEM(必需)区块,然后是编号的 Page Structure。

02 找到适合场景

何时使用 enhance-prompt Skill

当工作是此类 UI 设计时,在 Claude Code 或 Codex 中使用 enhance-prompt skill。下面的适用范围和限制取自该 skill 自己的文件。

适合场景

  • 在发送给 Stitch 之前打磨一段 UI prompt。
  • 重新处理一段已经产生较差生成结果的 prompt。
  • 为一个简单想法添加设计系统一致性。
  • 将模糊的概念转化为可执行的结构化 prompt。

了解边界

  • 将若干互不相关的改动打包进一个编辑请求是明确不鼓励的做法;编辑应逐次处理一项改动。
  • 过度设计是一种反模式:当用户想要的是简单的东西时,增强程度应与该意图保持一致。

需要提供的信息

  • 粗略的想法或已有的 prompt一个模糊的 UI 生成想法,或表现不佳的 prompt,是该 skill 用来改写的原始材料。
  • 项目的 DESIGN.md(如果存在)会从当前项目中读取该文件,以便将其配色、字体和组件样式带入新的 prompt。

03 Skill 内部

enhance-prompt Skill 给 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 7 条具体指令、默认值与限制——正是文件中真正改变结果的部分。

  1. 先查看 Stitch 指南

    在增强任何内容之前,先查阅官方的 Stitch prompting 文档,因为其中的建议可以覆盖此 skill 内置的模式。

  2. 将 DESIGN.md 重构为必需区块

    当存在 DESIGN.md 时,其内容不会原样引用;而是被重新格式化为输出中标题为 DESIGN SYSTEM (REQUIRED) 的一个区块。

  3. 覆盖缺少 DESIGN.md 的情况

    如果没有 DESIGN.md,增强后的 prompt 末尾会附上一条说明,引导用户使用 design-md skill 以获得一致的多屏设计。

  4. 以固定模式书写颜色

    每种颜色都以描述性名称、括号内的十六进制代码以及其功能角色来表达,绝不使用裸色块或模糊的形容词。

  5. 对页面区块编号

    页面内容会被归入编号区块,以便 Stitch 读取层次结构,而不是留作一段散文式的文字。

  6. 默认输出文本

    除非用户另有要求,否则将增强后的 prompt 以可复制的文本形式返回;写入文件是可选项。

  7. 在有针对性的编辑中保留其余内容

    当请求是编辑而非新页面时,prompt 必须说明只做所述的改动,其余现有元素保持不变。

04 投入使用

在 Claude Code 或 Codex 中安装 enhance-prompt

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

将 enhance-prompt 添加到 Claude Code、Codex 或您的 Agent

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

Terminal
npx skills add https://github.com/google-labs-code/stitch-skills --skill enhance-prompt

针对 plugins/stitch-utilities/skills/enhance-prompt/SKILL.md 的通用 skills CLI 形式;该仓库可能会记录其自身的路径。

给 Skill 一个首次 UI 设计任务

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

Example prompt
make me a login page

来源:SKILL.md 示例(原文照录)。

检查首次结果

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

  • 该 prompt 包含一个 DESIGN SYSTEM (REQUIRED) 区块,依次列出 platform、theme、background、primary accent 和 text primary。
  • 每种颜色都以描述性名称、十六进制代码和功能角色呈现。
  • 页面内容以带编号的区块呈现,例如带导航的页头,而不是松散的描述。
  • 不会留下模糊的组件用词;对按钮的请求会变成一个主要行动号召按钮。
  • 设计系统模块始终存在,因为一致性正是让多页输出保持统一的关键。
  • 对于定向编辑,prompt 会精确指出位置、样式、占位内容、行为和宽度,而不是重新描述整个页面。

在 OpenDesign 中,enhance-prompt 已内置:Plugins → Skills,在顶部栏选择即可。

05 开源、可追溯

来源、许可与验证

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

Skill 文件
plugins/stitch-utilities/skills/enhance-prompt/SKILL.md 验证时记录的内容校验和;commit 0337446
License
Apache-2.0 来自 LICENSE。
仓库星标数
8,304 GitHub 快照拍摄于 2026-09-14,来自整个 google-labs-code/stitch-skills 仓库,该仓库在此目录中包含 12 个 skill。不是 enhance-prompt 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可证文本和星标数。已捆绑在 OpenDesign 主版本中(检查于 2026-08-28);此页面尚未记录实际运行。

SKILL.md 内部

  1. 前提条件在使用增强功能前,请先查阅官方 Stitch 提示指南,因为它可能会取代这些模式。
  2. 何时使用此 Skill四种触发场景:润色 prompt、修复不理想的结果、增加设计一致性、将模糊的概念结构化。
  3. 增强流程四个步骤:评估缺口、检查 DESIGN.md、应用关键词、氛围、结构与色彩技巧,然后进行格式化。
  4. 输出选项默认输出文本供复制;也可选择写入 next-prompt.md 或用户指定的文件。
  5. 示例一个模糊的登录页请求,以及一个定向添加搜索栏的编辑,两者均附有完整的增强输出。
  6. 获得最佳效果的建议五条提醒,涵盖具体性、用户意图、编号结构、设计系统的纳入以及单项变更编辑。
Skill 自身的描述
「将模糊的 UI 想法转化为经过优化的 Stitch 提示词。增强具体性,添加 UI/UX 关键词,注入设计系统上下文,并为更好的生成结果构建输出结构。」

SKILL.md 中的 front-matter 描述。完整文件约 6,618 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 enhance-prompt Skill 的常见问题

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

使用此 skill 前是否需要先有 DESIGN.md?

不需要。该 skill 只会在当前项目中查找是否存在此文件。如果没有,增强后的 prompt 结尾会提示你使用 design-md skill 创建一个,以便所有生成的页面共享同一套视觉语言。

最终生成的 prompt 实际是什么样子?

一行描述页面用途与氛围的文字,一个包含平台、主题、背景和强调色 token 的“设计系统(必需)”模块,然后是带编号的页面结构。结构部分会列出每个区域,例如页头、主视觉和页脚。

它会把 prompt 保存到某处,还是只展示出来?

默认情况下,它会以文本形式返回增强后的 prompt 供你复制。如果你要求生成文件,它可以为 stitch-loop skill 写入 next-prompt.md,或你指定的文件名。

此 skill 需要哪些工具?

它声明 Read 和 Write 为允许使用的工具,这涵盖了读取 DESIGN.md 以及写入可选的 prompt 文件。

Enhance Prompt

在真实 UI 设计任务上运行 enhance-prompt。

enhance-prompt skill 内置于 OpenDesign 中。下载应用,在 Plugins → Skills 中选择该 skill,粘贴上述 prompt,并在结果之前阅读计划。

终端
npx skills add https://github.com/google-labs-code/stitch-skills --skill enhance-prompt