stitch-ui-design
使用 Google Stitch 创建 UI 设计
本技能帮助用户为 Google Stitch AI UI 设计工具编写有效的提示词。它提供最佳实践、示例提示词和高级技术，以生成专业的 Web 和移动端界面。
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“stitch-ui-design”。 如何使用 Stitch 创建仪表板？
预期结果:
要使用 Google Stitch 创建仪表板，请遵循以下原则：
1. 具体明确：不要使用"创建仪表板"，而是使用"会员仪表板，包含课程模块网格、进度追踪条和社区动态侧边栏，采用紫色主题和卡片式布局"
2. 定义视觉风格：包含配色方案、设计美学
3. 列出组件：指定所需的每个 UI 元素
示例提示词："分析仪表板，包含 KPI 卡片、趋势线图、日期范围选择器和导出按钮。使用现代深色主题，数据可视化采用强调色。"
正在使用“stitch-ui-design”。 移动应用提示词应该包含什么？
预期结果:
对于移动应用，请指定：
- 平台：iOS、Android 或跨平台
- 屏幕尺寸和响应式行为
- 导航模式（标签栏、抽屉式、堆叠式）
- 平台原生组件
- 触控友好的尺寸和间距
示例："移动应用登录屏幕（iOS 风格），包含邮箱/密码输入框、社交登录按钮（Google、Apple）和忘记密码链接。遵循 iOS 人机界面指南，使用 SF Pro 字体。"
安全审计
安全This is a documentation-only skill containing markdown files with guidance for Google Stitch AI UI design tool. All static analyzer findings are false positives: backticks are markdown code formatting, not shell execution; cryptographic algorithm flags are documentation text misinterpreted by scanner. No executable code, network requests, or dangerous patterns present.
高风险问题 (3)
质量评分
你能构建什么
学习 Stitch 提示词基础
新用户想要了解如何编写有效的提示词，使用 Google Stitch 生成他们的首个 UI 设计
提升设计输出质量
已尝试过 Stitch 但得到通用结果的用户，想要学习具体技巧以获得更好、更个性化的设计
创建多屏幕应用流程
构建完整应用的用户，需要关于如何为多个关联屏幕和响应式布局编写提示词的指导
试试这些提示
创建一个 [component type]，包含 [specific features]，使用 [color scheme] 主题和 [layout style] 设计风格。
设计一个电子商务产品页面，包含主图画廊、加入购物车按钮、评论区和相关产品轮播。使用简洁的极简主义设计，搭配 [accent color] 强调色和充足的留白。
为 [app type] 移动应用设计一个 [screen name] 屏幕。包含 [list of features and components]。使用 [design style] 风格，配色为 [color palette]。添加 [interactive states] 和 [navigation elements]。
创建一个 [app type] 应用，包含： - [screen 1]，具有 [features] - [screen 2]，具有 [features] - [screen 3]，具有 [features] 使用 [design system] 风格，确保在移动端和桌面端的响应式行为。
最佳实践
- 始终指定视觉细节：颜色、排版、间距和设计风格，以避免通用的 AI 输出
- 对于多屏幕应用，明确列出每个屏幕 - Stitch 会在生成多个设计前进行确认
- 包含功能需求：按钮操作、表单验证、导航模式和用户流程
避免
- 使用模糊的提示词如"创建一个好看的登录页面" - 会导致通用、不可用的设计
- 忘记指定平台（移动端 vs 桌面端），导致错误的布局预期
- 未定义视觉风格，导致 AI 输出随机或不一致的美学效果