·8 分钟阅读

Stitch 提示词指南：用 AI 构建 UI 的高效策略

全面的 Stitch 提示词策略指南，从基础到进阶，教你如何用 AI 高效构建高质量的用户界面设计。

S
Stitch Prompt Team
Content Team
Stitch 提示词AI 设计Stitch PromptsAI Design

用 AI 构建 UI 的新范式

Google Stitch 让 UI 设计变得像对话一样简单。但要充分发挥 AI 的能力，你需要掌握正确的提示词策略。本指南将带你从基础到进阶，系统化地提升你的 Stitch 提示词技能。

AI 构建 UI

策略一：分层描述法

不要试图在一个提示词中塞进所有信息。采用分层描述，逐步增加复杂度。

第一层：基本框架

Design a mobile fitness tracking app

第二层：添加布局

Design a mobile fitness tracking app with:
- Header with user greeting and profile avatar
- Main area with activity summary cards
- Bottom navigation with 4 tabs

第三层：丰富细节

Design a mobile fitness tracking app with:
- Header: greeting text ("Good morning, Alex") + circular profile avatar
- Main area: 3 summary cards (Steps, Calories, Active Minutes) with icons
- Below cards: weekly trend line chart
- Bottom nav: Home, Workout, Stats, Profile tabs with icons
- Style: Clean white background, green (#22C55E) accent, rounded cards

策略二：参考对象法

借鉴已知的设计模式，让 AI 更快理解你的需求。

示例

Design a dashboard similar to Spotify's artist analytics page:
- Left sidebar with navigation
- Top section with key metrics (total plays, followers, revenue)
- Middle section with streaming trends chart
- Bottom section with top tracks list
- Dark theme with green accent (like Spotify)

策略三：约束条件法

通过添加约束条件，让 AI 的输出更可控。

常用约束类型

约束类型示例
颜色约束"只使用蓝色和白色两种颜色"
尺寸约束"所有按钮最小高度 48px"
数量约束"导航栏最多 5 个选项"
风格约束"不使用阴影和渐变"
内容约束"所有文字使用英文"

实战示例

Design a mobile weather app with strict constraints:
- ONLY 3 colors: dark blue (#1E3A5F), white, and light yellow (#FCD34D)
- No gradients, no shadows — flat design only
- Maximum 5 navigation items
- All text in English
- Touch targets minimum 44px
- No images — use weather icons only

策略四：场景叙事法

用讲故事的方式描述用户场景，让 AI 理解上下文。

A busy professional opens the app during their morning commute.
They need to quickly see:
- Today's schedule at a glance
- Upcoming meetings with join links
- Quick actions: add task, start timer
The design should be information-dense but not overwhelming,
optimized for one-handed phone use.

策略五：迭代优化法

第一次生成 rarely 完美。高效的策略是多轮迭代。

迭代工作流

  1. 生成基础版本
  2. 分析不足：哪些地方需要改进？
  3. 针对性修改：在提示词中明确调整内容
  4. 再次生成：对比前后差异
  5. 重复直到满意

修改提示词示例

上次的设计基本满意，但请做以下调整：
1. 将主色调从蓝色改为紫色 (#7C3AED)
2. 卡片间距从 8px 增加到 16px
3. 标题字体改为粗体
4. 在页面顶部添加搜索栏

策略六：组件化思维

将复杂的页面拆解为独立的组件，分别生成后组合。

示例：电商首页拆解

组件提示词
搜索栏"Design a search bar with filter button and voice search icon"
分类导航"Design a horizontal scrollable category pills with 8 items"
商品卡片"Design a product card with image, title, price, rating stars, and add-to-cart button"
底部导航"Design a bottom tab bar with Home, Categories, Cart, Profile icons"

实用提示词速查表

设计类型关键提示词
登录页login, sign in, email/password, social login
仪表板dashboard, KPI cards, charts, sidebar navigation
电商product grid, shopping cart, filters, checkout
社交feed, stories, profile, messaging
工具settings, preferences, account, notifications
内容article, blog, media player, comments

总结

掌握这 6 大策略，你就能系统化地使用 Google Stitch 构建高质量 UI 设计：

  1. 分层描述——从简单到复杂
  2. 参考对象——借用已知模式
  3. 约束条件——控制输出范围
  4. 场景叙事——提供上下文
  5. 迭代优化——持续改进
  6. 组件化思维——化整为零

记住：好的提示词不是一次写成的，而是在不断迭代中打磨出来的。

← 返回博客