Stitch UI 设计技能关于如何在 Google StitchAI 驱动的 UI 设计工具中创建有效提示词的专家指南。概述本技能提供了全面的指导帮助你在 Google Stitch 中构建精确、可操作的提示词从而生成高质量的 UI 设计。内容涵盖提示词结构、具体化技巧、迭代策略以及设计到代码的工作流程。包含内容SKILL.md核心提示词原则与技巧具体性与细节要求视觉风格定义多屏幕流程结构平台与响应式规格功能需求提示词模板迭代策略常见用例应避免的反模式参考资料prompt-examples.md按类别组织的有效 Stitch 提示词综合库落地页移动应用仪表盘电商表单与认证内容平台SaaS 应用每个示例都包含详细的组件拆解、风格规格和平台要求。advanced-techniques.md面向生产级设计的进阶策略图像转 UI 工作流设计系统集成响应式设计策略无障碍考量性能优化组件复用原子设计方法论导出与交付最佳实践何时使用本技能在以下场景使用本技能在 Google Stitch 中创建 UI 设计生成移动端或 Web 应用界面编写有效的 Stitch 提示词将草图或线框图转换为数字 UI构建设计系统创建响应式布局确保无障碍合规优化设计到代码的工作流程核心原则要具体- 笼统的提示词只会产生笼统的结果定义视觉风格- 始终包含颜色、美学和设计方向清晰组织结构- 明确列出组件和区块指明平台- 说明是移动端、平板、桌面还是响应式包含功能- 描述交互、状态和用户流程增量迭代- 做有针对性的修改而不是彻底重设计快速开始基础提示词模板[屏幕/组件类型] 面向 [用户/场景] 关键特性 - [带具体细节的特性 1] - [带具体细节的特性 2] - [带具体细节的特性 3] 视觉风格 - [配色方案] - [设计美学] - [布局方式] 平台[移动端/Web/响应式]使用示例面向 SaaS 分析平台的仪表盘 关键特性 - 顶部指标卡片显示 MRR、活跃用户、流失率 - 收入趋势折线图最近 30 天 - 带用户操作的近期活动流 - 报告与导出的快捷操作按钮 视觉风格 - 深色模式蓝/紫渐变点缀 - 现代玻璃拟态卡片带微妙阴影 - 干净的数据可视化使用无障碍友好配色 平台响应式 Web桌面优先最佳实践应该做的 ✅提供具体的组件细节定义清晰的视觉方向指明响应式行为包含交互状态使用设计术语在有助于理解时引用现有设计使用标注进行迭代从一开始就考虑无障碍不该做的 ❌使用模糊的描述“好看的网站”省略视觉风格指导忘记平台规格忽略响应式要求跳过无障碍考量做彻底重设计而非增量修改与开发流程集成Stitch → Figma → 代码用详细提示词在 Stitch 中生成 UI导出到 Figma 进行设计系统集成附带设计规格移交给开发者用生产就绪的代码实现Stitch → HTML → 框架在 Stitch 中生成并优化 UI导出 HTML/CSS 代码转换为 React/Vue/Svelte 组件集成到应用代码库资源SKILL.md- 核心提示词指南prompt-examples.md- 30 个详细提示词示例advanced-techniques.md- 生产就绪的设计策略成功技巧从明确的需求和上下文开始使用提示词模板保持一致性参考类似用例的示例使用标注进行增量迭代生成变体以探索选项始终指明视觉风格和平台在每个提示词中都考虑无障碍在生产使用前优化导出结果关于 Google StitchGoogle Stitch 是一个实验性的 AI UI 生成器由 Gemini 2.5 Flash 驱动可将文本提示词和视觉参考转换为功能性的 UI 设计。它支持文本转 UI 生成、图像转 UI 转换、多屏幕流程以及导出为 HTML/CSS、Figma 和代码。注意本技能旨在帮助你为 Stitch 创建有效的提示词。输出质量取决于提示词的具体性和清晰度。将模板和示例作为起点再根据你的独特需求进行定制。