SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场stitch-ui-design

stitch-ui-design

设计与创作

查看项目

更新于 10-15 14:03

技能介绍

用途

本技能用于指导用户在 Google Stitch 中编写有效的提示词。Google Stitch 是 Google Labs 推出的实验性 AI 界面生成工具，由 Gemini 2.5 Flash 驱动，可将文本提示和视觉参考转化为可用的 UI 设计。该技能帮助用户创建精准、可操作的提示，为网页和移动应用生成高质量 UI 设计。

Google Stitch 的主要能力

  • 从自然语言提示进行文本到 UI 的生成
  • 从草图、线框图或截图进行图像到 UI 的转换
  • 多屏应用流程与响应式布局
  • 导出为 HTML/CSS、Figma 和代码
  • 通过变体和标注进行迭代优化

核心提示原则

  1. 具体且详细：笼统的提示产生笼统的结果。应明确组件、布局结构、视觉风格和上下文。例如，不要写“创建一个仪表盘”，而应写“会员仪表盘，包含课程模块网格、进度跟踪条和社区动态侧边栏，使用紫色主题和卡片式布局”。

  2. 定义视觉风格与主题：始终包含配色方案、设计美学和视觉方向，以避免通用的 AI 输出。需要指定的内容包括：调色板（主色、强调色）、设计风格（极简、现代、活泼、专业、玻璃拟态）、字体偏好、间距与密度（紧凑、宽松、均衡）。

  3. 清晰结构化多屏流程：对于多屏应用，在生成前以项目符号列出每个屏幕。Stitch 在生成多个屏幕前会请求确认，以确保与你的设想一致。

  4. 指定平台与响应式行为：说明设计面向移动端、平板、桌面还是响应式网页。

  5. 包含功能需求：描述交互元素、状态和用户流程，以生成更完整的设计。需要指定的元素包括：按钮操作与 CTA、表单字段与验证、导航模式、加载状态、空状态、错误处理。

提示结构模板

可使用以下模板编写完整提示：

[屏幕/组件类型] for [用户/上下文]

Key Features:

  • [功能 1 及具体细节]
  • [功能 2 及具体细节]
  • [功能 3 及具体细节]

Visual Style:

  • [配色方案]
  • [设计美学]
  • [布局方式]

Platform: [移动端/网页/响应式]

迭代策略

  • 使用标注修改：利用 Stitch 的“标注编辑”功能进行针对性修改，无需重写整个提示。工作流为：根据提示生成初始设计、标注需要更改的具体元素、用自然语言描述修改、Stitch 仅更新被标注的区域。
  • 生成变体：请求多个变体以探索不同设计方向。
  • 渐进式细化：先宽泛，再在后续提示中增加具体性。

常见用例

  • 落地页：如 SaaS 落地页，包含英雄区、社会证明、功能网格、推荐语轮播、定价表、FAQ 手风琴、页脚等。
  • 移动应用：如外卖应用首页，包含搜索栏、分类标签、餐厅卡片、底部导航等。
  • 仪表盘：如内容管理系统管理后台，包含侧边栏导航、顶栏、统计概览、最近文章表格、活动时间线等。
  • 表单与输入：如 B2B 平台多步注册表单，包含进度指示器、字段验证、上一步/下一步导航等。

设计转代码工作流

导出选项：HTML/CSS（干净、语义化的标记）、Figma（“粘贴到 Figma”以集成设计系统）、代码片段（面向框架的组件级导出）。

导出前最佳实践：验证响应式断点、检查颜色对比度以确保可访问性、确保定义了交互状态、审查组件命名与结构。

导出后最佳实践：按生产标准重构生成的代码、添加正确的语义 HTML 标签、实现可访问性属性（ARIA 标签、替代文本）、优化图像与资源、添加动画与微交互。

应避免的反模式

  • 模糊提示（如“做一个好看的网站”）应改为具体提示（如“摄影师作品集网站，全屏图片画廊、项目案例研究和联系表单，极简黑白美学搭配衬线字体”）。
  • 缺少上下文（如“创建一个登录页”）应改为上下文丰富的提示（如“医疗门户登录页，包含邮箱/密码字段、‘记住我’复选框、‘忘记密码’链接和 SSO 选项（Google、Microsoft），专业可信的设计搭配蓝色医疗主题”）。
  • 没有视觉方向（如“设计一个任务管理应用”）应改为清晰的视觉方向（如“任务管理应用，看板布局、拖拽卡片、优先级标签和截止日期指示器，现代、以生产力为核心的设计搭配紫/青渐变强调色并支持深色模式”）。

提升效果的技巧

  • 参考现有设计：上传截图或草图作为视觉参考，与文本提示配合使用。
  • 使用设计术语：如“英雄区”“卡片布局”“玻璃拟态”“便当网格”等术语有助于 Stitch 理解意图。
  • 指定交互：描述悬停状态、点击操作和过渡效果，以生成更完整的设计。
  • 以组件思考：将复杂屏幕拆分为可复用组件（页眉、卡片、表单等）。
  • 增量迭代：进行小而聚焦的更改，而非完全重新设计。
  • 测试响应式：始终在多个断点（移动端、平板、桌面）验证设计。
  • 考虑可访问性：在提示中提及颜色对比度、字体大小和触摸目标尺寸。
  • 利用变体：生成多个选项以快速探索不同设计方向。

与开发工作流的集成

  • Stitch → Figma → 代码：在 Stitch 中用详细提示生成 UI，导出到 Figma 集成设计系统，将设计规范交给开发者，用生产级代码实现。
  • Stitch → HTML → 框架：在 Stitch 中生成并优化 UI，导出 HTML/CSS 代码，转换为 React/Vue/Svelte 组件，集成到应用代码库。
  • 快速原型：快速创建多个屏幕变体，与用户或利益相关者测试，根据反馈迭代，最终确定设计用于开发。

限制

  • 仅在任务明确匹配上述范围时使用本技能。
  • 不要将输出视为环境特定验证、测试或专家审查的替代品。
  • 如果缺少必需的输入、权限、安全边界或成功标准，应停止并请求澄清。
  • Stitch 是起点而非最终产品，应将其用于加速设计流程、快速探索想法和确立视觉方向，然后以人工判断和生产标准进行优化。