Enhance Prompt for Stitch 是一项提示词增强技能,扮演“Stitch 提示词工程师”的角色,负责把粗糙或含糊的 UI 生成想法转化为经过优化的提示词,以获得更好的 Stitch 生成效果。
【前置要求】 在增强提示词之前,应先查阅官方 Stitch 文档以获取最新最佳实践:Stitch Effective Prompting Guide(https://stitch.withgoogle.com/docs/learn/prompting/)。该指南包含的最新建议可能取代或补充本技能中的模式。
【使用时机】 当用户有以下需求时启用:把 UI 提示词发送给 Stitch 前进行润色;改进产生较差结果的提示词;为简单想法加入设计系统一致性;把模糊概念整理成可执行的提示词。
【增强流程】 第 1 步:评估输入。检查提示词中缺失的内容,包括平台(web、mobile、desktop)、页面类型(landing page、dashboard、form)、结构(编号的区块/组件)、视觉风格(形容词、情绪、氛围)、颜色(具体值或角色)、组件(UI 专用术语)。若缺失,则根据上下文补充或询问。
第 2 步:检查 DESIGN.md。在当前项目中查找 DESIGN.md 文件:若存在,读取文件提取设计系统块,包含调色板、字体排版和组件样式,并在输出中格式化为“DESIGN SYSTEM (REQUIRED)”区块;若不存在,则在增强提示词末尾添加提示,建议使用 design-md 技能创建 DESIGN.md 文件,以确保所有生成页面共享相同视觉语言。
第 3 步:应用增强。具体技术包括:A. 添加 UI/UX 关键词,把模糊术语替换为具体组件名称,例如“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”。B. 放大氛围,加入描述性形容词,例如“modern”改为“clean, minimal, with generous whitespace”,“professional”改为“sophisticated, trustworthy, with subtle shadows”。C. 构建页面结构,把内容组织为编号区块,例如 Header、Hero Section、Content Area、Footer。D. 正确格式化颜色,采用“描述性名称 (#hexcode) for 功能角色”的形式,例如“Deep Ocean Blue (#1a365d) for primary buttons and links”。
第 4 步:格式化输出。按以下顺序组织增强后的提示词:一行说明页面用途和氛围;DESIGN SYSTEM (REQUIRED) 区块,包含平台、主题、背景、主强调色、主文本色及其他设计令牌;编号的 Page Structure 页面结构。
【输出选项】 默认将增强后的提示词以文本形式返回供用户复制;用户可选择输出到文件:next-prompt.md(用于配合 stitch-loop 技能)或用户指定的自定义文件名。
【示例】 示例 1:模糊输入“make me a login page”,输出为包含设计系统(平台 Web、Desktop-first,主题 Light,背景 Clean White #ffffff,表单卡片 Soft Gray #f9fafb,主强调色 Deep Blue #2563eb,等)和编号页面结构(Header、Login Card、Submit Button、Footer)的结构化提示词,并附带关于 DESIGN.md 的提示。 示例 2:功能请求“add a search bar”,输出为定向编辑说明,包含位置、样式(胶囊形输入框,背景 #f3f4f6)、图标、占位符、行为、宽度等具体修改,并强调这是定向编辑,仅做此改动并保留所有现有元素。
【最佳效果建议】 尽早具体化;贴合用户意图,不要过度设计;保持结构化,编号区块有助于 Stitch 理解层级;包含设计系统,一致性对多页项目至关重要;编辑时一次只改一处,不要捆绑不相关的改动。
【限制】 本技能的具体适用平台版本、依赖环境、安装命令及收费方式,资料中暂未提供。