用途
stitch-prompt-engineer 用于增强、润色或修复 Stitch UI 生成提示词。当提示词效果不佳、颜色不一致、组件显得通用或布局在多屏之间断裂时，可用该技能对提示词进行结构化改写。
主要能力
- 补充 UI/UX 关键词，将模糊表述升级为具体 UI 词汇。
- 注入设计系统 token，颜色一律使用「描述性名称（#hexcode）」表示角色，而非颜色名。
- 结构化页面层级，使用编号的 Page Structure 描述各区块。
- 规范输出格式，包含页面目的单行描述、DESIGN SYSTEM（REQUIRED）区块与 Page Structure。
- 支持针对性编辑：给出 UI 中的精确位置、含 hex 的样式规格，并声明「Context: This is a targeted edit. Make only this change.」
- 默认以文本返回增强后的提示词；用户要求文件输出时写入 next-prompt.md（供 stitch-loop 技能使用）。
使用方式
单屏与多页的决策
- 若涉及多个屏幕：在项目根目录查找 DESIGN.md。找到则读取，并将设计系统区块以「DESIGN SYSTEM (REQUIRED)」形式包含；未找到则先用
stitch-design-system技能创建。 - 若为单屏：跳过 DESIGN.md，直接进行增强。
增强前的评估清单
识别缺失项：
- 平台：询问或从上下文推断。
- 页面类型：推断（如「landing page」「form」）。
- 结构：添加编号区块。
- 视觉风格：添加氛围形容词。
- 颜色：添加 hex 编码的设计 token。
- 组件：用 UI 词汇替换模糊名词。
词汇升级示例
- 「menu at the top」→「navigation bar with logo and menu items」
- 「button」→「primary call-to-action button」
- 「list of items」→「card grid layout」或「vertical list with thumbnails」
- 「form」→「form with labeled input fields and submit button」
- 「picture area」→「hero section with full-width image」
- 「modern」→「clean, minimal, with generous whitespace」
- 「professional」→「sophisticated, trustworthy, with subtle shadows」
- 「dark mode」→「dark theme with high-contrast accents on deep backgrounds」
输出结构
- 页面目的与氛围的单行描述。
- DESIGN SYSTEM (REQUIRED)：平台、主题、背景、主强调色、主文本色、按钮、卡片等，均含 hex。
- Page Structure：编号列出各区块及描述。
针对性编辑
包含 UI 中的精确位置、含 hex 的样式规格，并声明「Context: This is a targeted edit. Make only this change.」。
适用场景
- Stitch UI 生成提示词效果不理想，需要增强或修复。
- 多页面项目需要跨屏一致的设计系统 token。
- 需要将模糊的界面描述改写为具体 UI 词汇与结构。
- 需要对现有提示词做局部、精确的编辑。
限制与约束
- 绝不将颜色输出为颜色名（如「blue」「green」），必须使用「描述性名称（#hexcode）」表示角色。
- 多页面项目绝不跳过 DESIGN.md，一致性需要跨屏的显式 token。
- 绝不将不相关的增强合并到一次处理中，布局改动与颜色改动应分开提出。
- 绝不忽略过时的 DESIGN.md，需在继续前向用户指出冲突。
- 绝不在未理解意图时进行增强，模糊提示词往往意味着目标不清，而非仅措辞不佳。
- 绝不假设平台，若「web」与「mobile」不明确则询问。
故障排查
- 输出与提示词不符：添加编号区块结构以建立视觉层级。
- 颜色应用不一致：创建或引用含显式 hex token 的 DESIGN.md。
- 布局跨屏断裂：显式添加「mobile-first」或「desktop-first」。
- 组件显得通用：用具体氛围形容词替换「modern」。
- 增强后效果仍差：回到 DESIGN.md，先验证一致性。