How do I install the Design With Stitch skill?

Run npx skillmds@latest add kienbui1995/design-with-stitch in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Design With Stitch safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Design With Stitch?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Design With Stitch free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Design With Stitch?

kienbui1995 (@kienbui1995) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Design With Stitch by kienbui1995 — Agent Skill

Name: Design With Stitch
Author: kienbui1995

File contents

Design with Stitch

Overview

Use Google Stitch to generate visual designs and extract implementable HTML. Stitch creates mockups from text prompts — Claude Code can then read the HTML output and implement it.

Key insight: Claude Code can't see images, but CAN read HTML. Stitch generates both.

Prerequisites

Stitch SDK installed: npm install @google/stitch-sdk
STITCH_API_KEY environment variable set
Wrapper script at scripts/stitch.mjs (included in this plugin)

The Design Flow

1. Brainstorm design requirements
2. Generate mockup with Stitch
3. Extract HTML from Stitch
4. Review and refine HTML
5. Implement in your framework

Step 1: Generate a Screen

cd ~/.claude/scripts  # or plugin scripts dir
node stitch.mjs generate <project-id> "A dashboard with sidebar navigation, user stats cards, and a data table"

Step 2: Get HTML Output

node stitch.mjs get-html <project-id> <screen-id>

This returns HTML that Claude Code can read and understand — layout, components, colors, typography.

Step 3: Review and Iterate

# Edit existing screen
node stitch.mjs edit <project-id> <screen-id> "Make the sidebar collapsible and add dark mode toggle"

# Generate variants
node stitch.mjs variants <project-id> <screen-id> "Try different color schemes"

Step 4: Implement

Use the HTML as reference to implement in your framework. The HTML shows:

Component structure and hierarchy
Color values and typography
Layout and spacing
Interactive elements

Stitch SDK Commands

Command	Description
`list-projects`	List all Stitch projects
`list-screens <projectId>`	List screens in a project
`generate <projectId> "<prompt>"`	Generate new screen
`get-html <projectId> <screenId>`	Get HTML output
`edit <projectId> <screenId> "<prompt>"`	Edit existing screen
`variants <projectId> <screenId> "<prompt>"`	Generate design variants

Integration with UI UX Pro Max

If you have the UI UX Pro Max skill installed (project-level), combine:

Stitch → generates visual mockup
UI UX Pro Max → provides design system rules (colors, fonts, spacing)
Implementation → build with both references

# Get design system rules
python3 .claude/skills/ui-ux-pro-max/scripts/search.py palette modern
python3 .claude/skills/ui-ux-pro-max/scripts/search.py font clean

# Generate Stitch mockup following those rules
node stitch.mjs generate <project-id> "Dashboard using [palette] colors and [font] typography"

Model Routing

This skill is best used with the ui-designer agent (Sonnet) which has Stitch integration and frontend design expertise.

---name: design-with-stitchdescription: Use when creating UI designs, mockups, or prototypes - integrates Google Stitch SDK for visual design generation---# Design with Stitch## OverviewUse Google Stitch to generate visual designs and extract implementable HTML. Stitch creates mockups from text prompts — Claude Code can then read the HTML output and implement it.**Key insight:** Claude Code can't see images, but CAN read HTML. Stitch generates both.## Prerequisites- Stitch SDK installed: `npm install @google/stitch-sdk`- `STITCH_API_KEY` environment variable set- Wrapper script at `scripts/stitch.mjs` (included in this plugin)## The Design Flow```1. Brainstorm design requirements2. Generate mockup with Stitch3. Extract HTML from Stitch4. Review and refine HTML5. Implement in your framework```### Step 1: Generate a Screen```bashcd ~/.claude/scripts # or plugin scripts dirnode stitch.mjs generate <project-id> "A dashboard with sidebar navigation, user stats cards, and a data table"```### Step 2: Get HTML Output```bashnode stitch.mjs get-html <project-id> <screen-id>```This returns HTML that Claude Code can read and understand — layout, components, colors, typography.### Step 3: Review and Iterate```bash# Edit existing screennode stitch.mjs edit <project-id> <screen-id> "Make the sidebar collapsible and add dark mode toggle"# Generate variantsnode stitch.mjs variants <project-id> <screen-id> "Try different color schemes"```### Step 4: ImplementUse the HTML as reference to implement in your framework. The HTML shows:- Component structure and hierarchy- Color values and typography- Layout and spacing- Interactive elements## Stitch SDK Commands| Command | Description ||---------|-------------|| `list-projects` | List all Stitch projects || `list-screens <projectId>` | List screens in a project || `generate <projectId> "<prompt>"` | Generate new screen || `get-html <projectId> <screenId>` | Get HTML output || `edit <projectId> <screenId> "<prompt>"` | Edit existing screen || `variants <projectId> <screenId> "<prompt>"` | Generate design variants |## Integration with UI UX Pro MaxIf you have the UI UX Pro Max skill installed (project-level), combine:1. **Stitch** → generates visual mockup2. **UI UX Pro Max** → provides design system rules (colors, fonts, spacing)3. **Implementation** → build with both references```bash# Get design system rulespython3 .claude/skills/ui-ux-pro-max/scripts/search.py palette modernpython3 .claude/skills/ui-ux-pro-max/scripts/search.py font clean# Generate Stitch mockup following those rulesnode stitch.mjs generate <project-id> "Dashboard using [palette] colors and [font] typography"```## Model RoutingThis skill is best used with the **ui-designer agent** (Sonnet) which has Stitch integration and frontend design expertise.

Frequently asked questions

Design With Stitch