agentsclimarketplace

Google stitch ui prompting

Skill findscripter/everything-skills/06-creative/google-stitch-ui-prompting

类书式 AI Agent 技能大典 · 精选/中文化/互见成网的 500+ 开源技能，可作为 Claude Code 插件市场一键安装。A curated, cross-referenced encyclopedia of 500+ open-source agent skills.

Install
npx -y skills add findscripter/everything-skills --skill google-stitch-ui-prompting

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

  • no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
  • 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

当用 Google Stitch（Gemini 驱动的 Labs UI 生成器）由文字/草图生成 Web 或移动端界面时使用；做提示词工程，产出具体、含视觉风格与功能要求的可执行提示词及迭代/导出方案；不适用于手写生产代码、做交互动效实现或替代真人评审。触发词：Stitch、UI 提示词、文字转界面、界面生成、导出 Figma/HTML。

The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.

SKILL.md

6.1 KB, as published. Nobody here has run it

何时使用

  • 用 Google Stitch（Google Labs 出品、Gemini 2.5 Flash 驱动的实验性 UI 生成器）把文字描述或草图/截图转成 Web、移动端界面时。
  • 需要规划多屏 App 流程、响应式布局，并导出到 HTML/CSS、Figma 或代码片段时。
  • 现有界面要做定向迭代（注释微调、生成变体、渐进细化）时。

不该用的边界：

  • 不要把 Stitch 产出当成可直接上线的成品——它是起点，需人工重构、补无障碍属性、优化资源后才能生产。
  • 不负责手写/实现交互动效与框架代码，也不替代环境内的测试与专家评审。
  • 输入、权限、安全边界或验收标准缺失时，先停下来问清，不要硬编。

步骤

  1. 定位与上下文：一句话写清「为谁、做什么屏/组件」，如「SaaS 分析平台的仪表盘」。
  2. 列关键功能：用要点列出组件与具体细节（指标卡、折线图、活动流、快捷按钮）。
  3. 定视觉风格：色板（主色+点缀色）、设计调性（极简/现代/玻璃拟态/活泼）、排版、留白密度。
  4. 指定平台与响应式：移动/平板/桌面/响应式，必要时给断点（如 320px→1440px）。
  5. 补功能要求：按钮动作、表单校验、导航模式、加载态、空态、错误处理。
  6. 生成并确认：多屏时 Stitch 会在生成前请你确认，核对后再产出。
  7. 迭代：注释微调 →（按需）生成变体 → 渐进细化。
  8. 导出与收尾：核对断点、对比度、交互态、命名后导出，再做生产级重构。

指令

提示词模板：

[屏/组件类型] for [用户/场景]

Key Features:
- [功能1，含具体细节]
- [功能2，含具体细节]
- [功能3，含具体细节]

Visual Style:
- [色彩方案]
- [设计调性]
- [布局方式]

Platform: [Mobile/Web/Responsive]

核心原则（务必遵守）：

  • 越具体越好：泛泛的提示得到泛泛的结果。
  • 永远带视觉方向：色板 + 调性 + 布局，避免「AI 味」通用输出。
  • 多屏用要点逐屏列清。
  • 善用设计术语：hero section、card layout、glassmorphic、bento grid、kanban，帮 Stitch 准确理解意图。
  • 描述交互态（hover、点击、过渡）让设计更完整。
  • 拆成可复用组件思考（header、card、form）。

示例

有效 vs 无效（对照）：

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

完整模板示例：

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)

多屏流程：

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

迭代三招：

  • 注释微调（annotate to edit）：「Make this button larger and use primary color」「Add more spacing between these cards」——只改注释区域，无需重写整条提示。
  • 生成变体：「Generate 3 variants of this hero section: 1. Image-focused 2. Text-heavy 3. Video background」。
  • 渐进细化：先 E-commerce homepage，再 Add featured products section with 4-column grid and hover effects，再调色板与 banner。

反模式 → 改法：

✗ 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.

注意事项

  • 导出前：核对响应式断点、色彩对比度（无障碍）、交互态是否定义、组件命名与结构。
  • 导出后：按生产标准重构代码、补语义化 HTML 与 ARIA/alt、优化图片资源、补动效与微交互。
  • 导出格式：HTML/CSS（语义化标记）、Figma（Paste to Figma 接入设计系统）、组件级代码片段。
  • 典型工作流：Stitch → Figma → 代码（设计系统交付）；Stitch → HTML → React/Vue/Svelte 组件。
  • 多断点（移动/平板/桌面）都要验证；在提示里就提及对比度、字号、触控目标尺寸等无障碍要求。
  • 记住：Stitch 加速探索与确定视觉方向，最终仍需人的判断与生产标准把关。

互见

  • 创意/misc 域内的视觉与原型类技能。
  • Figma、前端框架（React/Vue/Svelte）相关组件落地技能。

采编自 sickn33/antigravity-awesome-skills（MIT License）。

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.