stitch-ui-design

Stitch UI 设计提示词

为在 Google Labs 推出的 AI 驱动 UI 设计工具 Google Stitch 编写有效提示词的专家指南。本技能有助于创建精准、可执行的提示词，为 Web 和移动应用生成高质量 UI 设计。

原型与隐私边界

使用产品专属步骤前，请先通过当前官方文档确认实际的账户功能、导出选项和数据条款。仅使用获授权的参考图片／素材以及合成或已脱敏的数据；上传屏幕截图可能会泄露机密 UI、个人记录和凭据。通过提示词生成的功能状态只是视觉规格，不能证明已实现身份验证、支付、验证或无障碍功能。投入生产前，请检查导出的代码／依赖项，并在真实设备上测试语义结构、键盘／焦点、缩放／重排、对比度和减少动态效果。示例中的 Logo、用户评价、评分、指标和安全徽章均为占位内容；没有证据／许可时，绝不可将其作为事实声明发布。导出／分享／部署及更改外部账户均须获得授权。

什么是 Google Stitch？

Google Stitch 是一款实验性的 AI UI 生成工具，其可用模型／功能取决于当前产品版本，可将文本提示词和视觉参考转换为功能性 UI 设计。它支持：

• 根据自然语言提示词生成 UI
• 将草图、线框图或屏幕截图转换为 UI
• 多屏幕应用流程和响应式布局
• 导出为 HTML/CSS、Figma 和代码
• 通过变体和注释进行迭代优化

核心提示词原则

1. 具体且详细

泛泛的提示词只会产生泛泛的结果。要求清晰、具体的提示词能生成量身定制的专业设计。

较差的提示词：

Create a dashboard

有效的提示词：

Member dashboard with course modules grid, progress tracking bar, 
and community feed sidebar using purple theme and card-based layout

**有效原因：**明确指定了组件（模块、进度、动态内容）、布局结构（网格、侧边栏）、视觉风格（紫色主题、卡片）和使用场景（会员仪表板）。

2. 定义视觉风格和主题

始终明确配色方案、设计美学和视觉方向，避免生成泛泛的 AI 结果。

需要指定的要素：

• 调色板（主色、强调色）
• 设计风格（极简、现代、活泼、专业、玻璃拟态）
• 字体偏好（如有）
• 间距和密度（紧凑、宽松、均衡）

示例：

E-commerce product page with hero image gallery, add-to-cart CTA, 
reviews section, and related products carousel. Use clean minimalist 
design with sage green accents and generous white space.

3. 清晰规划多屏幕流程

对于包含多个屏幕的应用，生成前请用项目符号列出每个屏幕。

方法：

Fitness tracking app with:
- Onboarding screen with goal selection
- Home dashboard with daily stats and activity rings
- Workout library with category filters
- Profile screen with achievements and settings

生成前请检查预期的屏幕列表；不要依赖产品提供确认环节。

4. 指定平台和响应式行为

说明设计面向移动设备、平板电脑、桌面设备还是响应式 Web。

示例：

Mobile app login screen (iOS style) with email/password fields and social auth buttons

Responsive landing page that adapts from mobile (320px) to desktop (1440px) 
with collapsible navigation

5. 包含功能要求

描述交互元素、状态和用户流程，以生成更完整的设计。

需要指定的要素：

• 按钮操作和 CTA
• 表单字段和验证
• 导航模式
• 加载状态
• 空状态
• 错误处理

示例：

Checkout flow with:
- Cart summary with quantity adjusters
- Shipping address form with validation
- Payment method selection (cards, PayPal, Apple Pay)
- Order confirmation with tracking number

提示词结构模板

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

[Screen/Component Type] for [User/Context]

Key Features:
- [Feature 1 with specific details]
- [Feature 2 with specific details]
- [Feature 3 with specific details]

Visual Style:
- [Color scheme]
- [Design aesthetic]
- [Layout approach]

Platform: [Mobile/Web/Responsive]

示例：

Dashboard for SaaS analytics platform

Key Features:
- Top metrics cards showing MRR, active users, churn rate
- Line chart for revenue trends (last 30 days)
- Recent activity feed with user actions
- Quick action buttons for reports and exports

Visual Style:
- Dark mode with blue/purple gradient accents
- Modern glassmorphic cards with subtle shadows
- Clean data visualization with accessible colors

Platform: Responsive web (desktop-first)

迭代策略

使用注释进行优化

使用 Stitch 的“注释以编辑”功能，有针对性地修改内容，而不必重写整个提示词。

工作流：

1. 根据提示词生成初始设计
2. 为需要修改的具体元素添加注释
3. 用自然语言描述修改内容
4. 请求进行针对性修改，然后检查完整结果，确认没有意外改动

注释示例：

• “放大这个按钮，并使用主色”
• “增大这些卡片之间的间距”
• “将其改为水平布局”

生成变体

请求生成多个变体，探索不同的设计方向：

Generate 3 variants of this hero section:
1. Image-focused with minimal text
2. Text-heavy with supporting graphics
3. Video background with overlay content

渐进式优化

先从宽泛的提示开始，然后在后续提示中逐步增加具体细节：

初始：

E-commerce homepage

优化 1：

Add featured products section with 4-column grid and hover effects

优化 2：

Update color scheme to earth tones (terracotta, sage, cream) 
and add promotional banner at top

常见用例

落地页

SaaS landing page for [product name]

Sections:
- Hero with headline, subheadline, CTA, and product screenshot
- Social proof with customer logos
- Features grid (3 columns) with icons
- Testimonials carousel
- Pricing table (3 tiers)
- FAQ accordion
- Footer with links and newsletter signup

Style: Modern, professional, trust-building
Colors: Navy blue primary, light blue accents, white background

移动应用

Food delivery app home screen

Components:
- Search bar with location selector
- Category chips (Pizza, Burgers, Sushi, etc.)
- Restaurant cards with image, name, rating, delivery time, and price range
- Bottom navigation (Home, Search, Orders, Profile)

Style: Vibrant, appetite-appealing, easy to scan
Colors: Orange primary, white background, food photography
Platform: iOS mobile (375px width)

仪表板

Admin dashboard for content management system

Layout:
- Left sidebar navigation with collapsible menu
- Top bar with search, notifications, and user profile
- Main content area with:
  - Stats overview (4 metric cards)
  - Recent posts table with actions
  - Activity timeline
  - Quick actions panel

Style: Clean, data-focused, professional
Colors: Neutral grays with blue accents
Platform: Desktop web (1440px)

表单和输入项

Multi-step signup form for B2B platform

Steps:
1. Account details (company name, email, password)
2. Company information (industry, size, role)
3. Team setup (invite members)
4. Confirmation with success message

Features:
- Progress indicator at top
- Field validation with inline errors
- Back/Next navigation
- Skip option for step 3

Style: Minimal, focused, low-friction
Colors: White background, green for success states

设计到代码工作流

导出选项

Stitch 提供多种导出格式：

1. HTML/CSS - 适用于 Web 项目的简洁语义化标记
2. Figma - 使用“Paste to Figma”集成设计系统
3. 代码片段 - 面向框架的组件级导出

导出的最佳实践

导出前：

• 验证响应式断点
• 检查颜色对比度，确保无障碍性
• 确保已定义交互状态
• 检查组件的命名和结构

导出后：

• 重构生成的代码，使其符合生产标准
• 添加恰当的语义化 HTML 标签
• 实现无障碍属性（ARIA 标签、替代文本）
• 优化图片和资源
• 添加动画和微交互

应避免的反模式

❌ 模糊的提示词

Make a nice website

✅ 具体的提示词

Portfolio website for photographer with full-screen image gallery, 
project case studies, and contact form. Minimalist black and white 
aesthetic with serif typography.

---

❌ 缺少上下文

Create a login page

✅ 充实上下文的提示词

Login page for healthcare portal with email/password fields, 
"Remember me" checkbox, "Forgot password" link, and SSO options 
(Google, Microsoft). Professional, trustworthy design with 
blue medical theme.

---

❌ 缺少视觉方向

Design an app for task management

✅ 明确的视觉方向

Task management app with kanban board layout, drag-and-drop cards, 
priority labels, and due date indicators. Modern, productivity-focused 
design with purple/teal gradient accents and dark mode support.

提升效果的技巧

1. 参考现有设计 - 将截图或草图与文本提示一同上传，作为视觉参考

2. 使用设计术语 - “hero 区域”、“卡片布局”、“玻璃拟态”、“便当盒网格”等术语有助于 Stitch 理解你的意图

3. 说明交互方式 - 描述悬停状态、点击操作和过渡效果，让设计更加完整

4. 以组件为单位思考 - 将复杂屏幕拆分为可复用组件（页眉、卡片、表单等）

5. 逐步迭代 - 进行小幅、有针对性的修改，而不是彻底重新设计

6. 测试响应式效果 - 始终在多个断点（移动设备、平板电脑、桌面设备）下验证设计

7. 考虑无障碍性 - 在提示词中说明颜色对比度、字体大小和触控目标尺寸

8. 利用变体 - 生成多个选项，快速探索不同的设计方向

与开发工作流集成

Stitch → Figma → 代码

1. 使用详细的提示词在 Stitch 中生成 UI
2. 导出到 Figma，以集成设计系统
3. 将设计规范交接给开发人员
4. 使用可用于生产环境的代码进行实现

Stitch → HTML → 框架

1. 在 Stitch 中生成并优化 UI
2. 导出 HTML/CSS 代码
3. 转换为 React/Vue/Svelte 组件
4. 集成到应用代码库中

快速原型设计

1. 快速创建多个屏幕变体
2. 与用户或利益相关者进行测试
3. 根据反馈进行迭代
4. 完成设计，为开发做好准备

结语

有效的 Stitch 提示词应当具体、上下文充实且能清晰描述视觉效果。遵循这些原则和模板，你就能生成专业的 UI 设计，为生产级应用奠定坚实基础。

请记住： Stitch 是起点，而非最终成品。利用它加快设计流程、快速探索创意并确立视觉方向，然后再结合人工判断和生产标准进行完善。

适用场景

当需要执行概述中所述的工作流或操作时，可使用此技能。

局限性

• 仅当任务明确符合上述范围时，才使用此技能。
• 不要将输出视为针对特定环境进行验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请暂停并请求澄清。