stitch_skill

Overview

This skill integrates with Google Stitch to generate UI screens from text prompts, export designs to React components, and produce a DESIGN.md design system. It streamlines the flow from idea to interactive mockup by combining generation, project management, and code export. Use it to accelerate UI iteration, create consistent design tokens, and get production-ready component code.

How this skill works

The skill talks to Stitch project APIs to list, create, and retrieve projects and screens. It generates new screens from natural-language prompts and device targets, then pairs with a React conversion step to export components. It can also feed design tokens into a DESIGN.md generator to produce a living design system document.

When to use it

• Rapidly prototype screens from a product brief or user story.
• Create wireframes or high-fidelity mockups across device types.
• Convert generated designs into React components for development.
• Bootstrap or document a design system with DESIGN.md tokens.
• Manage multiple Stitch projects and review shared screens.

Best practices

• Write clear, concise prompts specifying layout, content, and device type.
• Use project-level organization: create projects per feature or team.
• Review and iterate generated screens before exporting to code.
• Pair exports with the react:components skill for clean component output.
• Run design-md after iterations to keep DESIGN.md tokens up to date.

Example use cases

• Generate a dashboard screen for desktop from a product requirement prompt.
• Create mobile onboarding screens by prompting for steps and tone.
• Convert a validated Stitch screen into reusable React components for the frontend repo.
• Extract color, spacing, and typography tokens into DESIGN.md for handoff to engineering.
• List and review shared project screens from collaborators before finalizing designs.