Converts natural-language descriptions or UI spec files into optimized Google Stitch prompts. Use when creating, refining, or validating design directives for Google Stitch. The Skill follows Stitch best practices—short, directive prompts focused on screens, structure, and visual hierarchy with clear UI vocabulary, concise style cues, and one primary intent per prompt. Trigger when the user wants to prepare or improve prompts for Stitch.
Limited to specific tools
Additional assets for this skill
This skill is limited to using the following tools:
EXAMPLES.mdREFERENCE.mdTROUBLESHOOTING.mdWORKFLOW.mdevaluation.jsontemplates/authoring-stitch-prompts-template.mdtemplates/layout-prompt-template.mdUse this Skill whenever users need Stitch-ready wording, prompt refinements, or style-consistent rewrites.
Generate optimized prompts in feature-based directories with organized artifact storage:
Feature Name (Directory):
a-z0-9- characters, collapse duplicate hyphens, trim endsdashboard, "landing page" → landing, "admin panel" → admin-panelDirectory Structure:
.google-stitch/{feature}/exports/ - For Stitch-generated outputs (PNG, SVG, HTML)wireframes/ - For pre-work mockups and reference imagesFile Composition:
<!-- Layout: {Title Case Name} --> HTML comment label--- separator line<!-- Component: {Title Case Name} --> HTML comment label--- separator (between components, not after last)6-Prompt Stitch Limit:
prompt-v{version}.mdprompt-v{version}-part{N}.mdVersion Auto-Increment:
.google-stitch/{feature}/prompt-v*.mdFile Path Resolution:
git rev-parse --show-toplevel{root}/.google-stitch/{feature}/ directory{feature}/exports/ and {feature}/wireframes/ subdirectories{feature}/prompt-v{version}.mdReport:
📂 Feature: {feature}/
📄 File: prompt-v{version}.md
Contains {N} prompts (within 6-prompt limit ✓):
• Layout: {Title}
• Component: {Title}
• Component: {Title}
Directory structure:
.google-stitch/{feature}/
├── prompt-v{version}.md ← Generated prompt
├── exports/ ← Place Stitch outputs here
└── wireframes/ ← Place mockups/references here
Usage:
1. Copy prompt file → Paste into Stitch → Generate designs
2. Save Stitch exports to exports/ directory
3. Store wireframes/mockups in wireframes/ directory
Examples:
Multi-component page (4 prompts):
Input: "Analytics dashboard with KPI cards, revenue chart, and subscriptions table"
Output: .google-stitch/dashboard/prompt-v1.md
Directory created:
.google-stitch/dashboard/
├── prompt-v1.md
├── exports/
└── wireframes/
File content:
<!-- Layout: Analytics Dashboard -->
Design a web dashboard page for SaaS analytics overview.
[...layout prompt content...]
---
<!-- Component: KPI Metrics -->
Design metric cards displaying key SaaS performance indicators.
[...component prompt content...]
---
<!-- Component: Revenue Chart -->
Design an interactive line chart for monthly revenue tracking.
[...component prompt content...]
---
<!-- Component: Subscriptions Table -->
Design a subscription activity table showing recent changes.
[...component prompt content...]
Single component (1 prompt):
Input: "Login form with email and password"
Output: .google-stitch/login/prompt-v1.md
Directory created:
.google-stitch/login/
├── prompt-v1.md
├── exports/
└── wireframes/
File content:
<!-- Component: Login Form -->
Design a login form for web application.
[...component prompt content...]
Large page split (8 prompts → 2 files):
Input: "Admin panel with navigation, dashboard, users, roles, settings, audit logs, notifications"
Output: .google-stitch/admin-panel/prompt-v1-part1.md (6 prompts)
- Layout: Admin Panel
- Component: Navigation
- Component: Dashboard
- Component: Users
- Component: Roles
- Component: Settings
Output: .google-stitch/admin-panel/prompt-v1-part2.md (2 prompts)
- Component: Audit Logs
- Component: Notifications
Directory created:
.google-stitch/admin-panel/
├── prompt-v1-part1.md
├── prompt-v1-part2.md
├── exports/
└── wireframes/
⚠️ Warning: Use part1 first, then part2 in separate Stitch session
Iteration (auto-increment):
Existing: .google-stitch/dashboard/prompt-v1.md
Input: "Update analytics dashboard with new metrics"
Auto-detected version → prompt-v2.md
Output: .google-stitch/dashboard/prompt-v2.md
Directory structure:
.google-stitch/dashboard/
├── prompt-v1.md ← Previous version
├── prompt-v2.md ← New version
├── exports/
└── wireframes/
(Entire file versioned together, versions coexist in same directory)
Feature Directory Benefits:
--- separator conventionAccepted
/specs/dashboard.md)Input Detail Levels
All detail levels are valid—Stitch infers patterns from minimal descriptions:
Use adjectives to convey vibe when details are sparse ("vibrant fitness app", "minimal meditation app").
High-level loop: parse → condense → format → validate.
Detailed branching logic, including cue extraction and revision handling, lives in WORKFLOW.md.
Prompts must follow the Stitch-friendly template:
Reference templates/authoring-stitch-prompts-template.md for wording patterns.
Representative before/after samples (SaaS dashboard, banking app, iterative edits, spec conversions) are in EXAMPLES.md. Use them to mirror tone and formatting; keep this file lean by not re-embedding the full transcripts here.
REFERENCE.md or templates/authoring-stitch-prompts-template.md.For advanced usage: