Stitch UI 设计提示词指南

问题：AI 生成的界面总是「差一点」

用 Stitch 这类文本转 UI 工具时，最常见的失败模式不是模型能力不足，而是提示词里缺少可执行的约束。一句「帮我做一个登录页」只会得到笼统的结果——没有指定配色、没有说明布局密度、没有定义交互状态。更隐蔽的问题是，当你想生成多屏流程或响应式布局时，如果不在提示里显式声明平台和断点行为，模型往往会输出一套既像移动端又像桌面端的混合体。

技能如何工作

这个技能把「写好 Stitch 提示词」拆成可复用的骨架。核心能力包括：

• 结构化提示模板：按组件、布局、视觉风格、上下文四个维度展开，而不是给一句模糊描述。
• 视觉方向前置：在提示中明确配色方案、设计语言（极简、玻璃拟态、Bento Grid 等）与排版偏好，避免通用化输出。
• 多屏流程声明：将每个屏幕以列表形式列出，Stitch 在生成前会要求确认，减少方向性返工。
• 功能状态补全：按钮动作、表单校验、加载态、空态、错误处理等交互细节需要显式写入提示。

关键步骤是渐进式细化：先用宽泛提示拿到方向，再通过追加约束逐步收窄；配合 Stitch 的 annotate to edit 能力，对局部元素用自然语言标注修改，而不是重写整段提示。生成变体（variants）用于快速探索不同设计方向。

适用边界

该技能只覆盖提示词编写与生成流程，不包含代码落地后的环境验证、可访问性审计或生产级重构。导出的 HTML/CSS、Figma 内容与组件代码需要按团队标准二次处理。当任务缺少明确的平台、断点或交互需求时，应先澄清再动手，而不是直接生成。