Stats
Actions
Tags
From stitch
Compose optimized prompts for Google Stitch screen generation. Reads DESIGN.md Section 6 context, applies Stitch Effective Prompting best practices, and outputs ready-to-use prompts. Use when: 'stitch prompt', 'compose prompt', 'create stitch prompt', 'prompt for stitch'.
How this skill is triggered — by the user, by Claude, or both
Slash command
/stitch:stitch-promptThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Compose optimized prompts for Stitch screen generation and editing. Uses DESIGN.md context to ensure visual consistency across all generated screens.
Compose optimized prompts for Stitch screen generation and editing. Uses DESIGN.md context to ensure visual consistency across all generated screens.
Every Stitch prompt MUST follow this 4-part structure:
Synthesize a design context block from the 5 canonical DESIGN.md sections:
Format as a context preamble:
Design System Context:
- Primary: #HEXCODE (role)
- Secondary: #HEXCODE (role)
- Font: FamilyName, weights: 400/500/600/700
- Radius: 0.Xrem default
- Style: [aesthetic description from Section 1]
Describe WHAT the screen shows, not HOW to build it. Stitch responds best to:
Always specify one of:
| Device | Use When |
|---|---|
DESKTOP | Dashboard, admin, content-heavy pages |
MOBILE | Mobile-first flows, responsive previews |
TABLET | Hybrid layouts |
Always append:
Maintain exact visual consistency with the design system above.
Use the specified color palette and typography — do not introduce new colors or fonts.
[Design Context Block]
Create a landing page with:
- Hero section: bold headline using display font, subtitle in body font, primary CTA button
- Feature grid: 3 cards showing key benefits with icons
- Social proof section: testimonials or partner logos
- Footer with navigation links and contact info
Device: DESKTOP
Maintain exact visual consistency with the design system above.
[Design Context Block]
Create a dashboard page with:
- Left sidebar navigation with icon + label items, active state highlighted
- Top bar with search input, notification bell, user avatar
- Main content area: summary stats in 4 metric cards, data table below
- Cards use surface elevation with subtle shadows
Device: DESKTOP
Maintain exact visual consistency with the design system above.
[Design Context Block]
Create a form page with:
- Page title and description at top
- Form fields: text inputs, select dropdowns, date pickers
- Grouped in logical sections with section headers
- Action buttons at bottom: primary submit, secondary cancel
- Inline validation states for required fields
Device: DESKTOP
Maintain exact visual consistency with the design system above.
[Design Context Block]
Edit the current screen to [ONE specific change]:
- [describe the single change clearly]
Do not modify any other elements. Keep all existing styling and layout intact.
Maintain exact visual consistency with the design system above.
| Rule | Reason |
|---|---|
| One aspect per edit prompt | Stitch handles single-focus edits better than multi-change prompts |
| Descriptive over technical | "A warm, inviting hero" beats "div with bg-primary p-8 flex" |
| Always include design context | Without context, Stitch defaults to its own palette and fonts |
| Specify device type explicitly | Prevents layout mismatches between desktop and mobile |
| Reference existing screens | "Match the style of the login page" improves consistency |
| Avoid CSS class names in prompts | Stitch generates its own Tailwind classes from descriptions |
.stitch/DESIGN.md — extract design context.stitch/SITE.md (if exists) — understand page purpose in sitemapstitch:invoke or manual useConsult these files for detailed guidance:
generate_screen_from_text takes 1-2 minutes — do not retry if no immediate responsenpx claudepluginhub murillodutt/cellm --plugin stitchGenerates Stitch UI prompts: Path A refines vague ideas into structured formats with design system and page structure; Path B merges Design Spec JSON + user requests.
Transforms vague UI ideas into Stitch-optimized prompts. Enhances specificity, injects UI/UX keywords and design system context from DESIGN.md, structures for better UI generation results.
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.