Help us improve
Share bugs, ideas, or general feedback.
From aura-frog
Generates UI designs using Google Stitch AI with optimized prompts, review documents, and processes exported Figma/HTML/CSS for frontend integration. For rapid prototyping and design iteration.
npx claudepluginhub nguyenthienthanh/aura-frog --plugin aura-frogHow this skill is triggered — by the user, by Claude, or both
Slash command
/aura-frog:stitch-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Category:** Design Skill
Creates effective prompts for Google Stitch, an AI UI generator by Google Labs. Covers specific prompting principles, visual style definition, multi-screen flows, and platform targeting for web and mobile app designs.
Converts natural-language descriptions or UI spec files into optimized Google Stitch prompts focused on screens, structure, and visual hierarchy. Use for creating, refining, or validating Stitch design directives.
Creates Stitch UI screens, design systems, variants, and prototypes from briefs, mockups, or product context. Exports Tailwind HTML, screenshots, and local code artifacts. Use for screen exploration, editing Stitch projects, or multi-screen prototypes.
Share bugs, ideas, or general feedback.
Category: Design Skill Used By: frontend
Generate professional UI designs using Google Stitch AI. This skill creates optimized prompts, guides users through the Stitch workflow, and processes exported code for integration.
Stitch URL: https://stitch.withgoogle.com
stitch_info[1]{engine,limits,export}:
Gemini 2.5 Flash/Pro,350 gen/month (Standard),Figma paste or HTML/CSS
Ask user for:
Load template from: references/prompt-templates.md
Select template matching app type:
Fill template with gathered requirements.
Generate review document and save to:
.claude/workflow/stitch-design-review-{project-name}.md
Include:
Provide:
After user provides exported code:
# Design Review: {project_name}
## Overview
- **Date:** {date}
- **Type:** {design_type}
- **Tool:** Google Stitch AI
- **Status:** Pending Review
---
## Design Specifications
### Requirements Summary
{requirements_summary}
### Stitch Prompt Used
\`\`\`
{stitch_prompt}
\`\`\`
---
## Review Checklist
### Visual Design
- [ ] Color palette matches brand guidelines
- [ ] Typography is consistent and readable
- [ ] Spacing and alignment are uniform
- [ ] Icons are consistent in style
- [ ] Images/illustrations are appropriate
### UX/Usability
- [ ] Navigation is intuitive
- [ ] CTAs are prominent and clear
- [ ] Information hierarchy is logical
- [ ] Forms are user-friendly
- [ ] Error states are considered
### Technical
- [ ] Layout is responsive
- [ ] Components are reusable
- [ ] Accessibility basics covered
- [ ] Performance considerations
### Brand Alignment
- [ ] Matches existing brand identity
- [ ] Consistent with other products
- [ ] Appropriate for target audience
---
## Export Instructions
### Option 1: Figma Export (Recommended)
1. Click "Paste to Figma" in Stitch
2. Open Figma, paste (Cmd/Ctrl+V)
3. Organize layers and frames
4. Share Figma link for review
### Option 2: Code Export
1. Click "Export Code" in Stitch
2. Copy HTML/CSS
3. Share code for integration
---
## Approval
| Stakeholder | Status | Date | Notes |
|-------------|--------|------|-------|
| Design Lead | Pending | | |
| Product Manager | Pending | | |
| Developer | Pending | | |
---
## Next Steps
1. [ ] Review generated designs in Stitch
2. [ ] Select best variant
3. [ ] Export to Figma/Code
4. [ ] Get stakeholder approval
5. [ ] Integrate into codebase
workflow[5]{step,action,output}:
1,Gather requirements,Requirements doc
2,Generate prompt,Optimized Stitch prompt
3,Create review doc,.claude/workflow/stitch-design-review-*.md
4,Guide user,Instructions + link
5,Process export,Component code
design_types[5]{type,use_case,template}:
dashboard,Admin panels; analytics,references/prompt-templates.md#dashboard
landing,Marketing; product pages,references/prompt-templates.md#landing
mobile,iOS/Android screens,references/prompt-templates.md#mobile
ecommerce,Product; cart; checkout,references/prompt-templates.md#ecommerce
forms,Multi-step wizards,references/prompt-templates.md#forms
references/prompt-templates.md - Optimized prompts by design typereferences/design-checklist.md - Detailed review checklistreferences/export-guide.md - How to export from StitchRemember: Stitch has no API - user must manually paste prompt and export results.