Complete Google Stitch integration — design generation, token extraction, SwiftUI/React conversion, multi-screen flows, and brand kit setup.
npx claudepluginhub ildunari/stitch-studioGoogle Stitch integration for Claude Code — AI-powered UI design generation, design token extraction, and framework conversion (SwiftUI, React, CSS). Bridges Stitch's visual design output with production code.
A Claude Code plugin that integrates Google Stitch (AI-powered UI design tool) into coding workflows. Generate screens from text prompts, extract design tokens, and convert to production code — especially SwiftUI.
Stitch generates high-fidelity UI screens from text descriptions, but only exports HTML/CSS. This plugin bridges the gap:
# Install all skills
npx skills add kostamilov/stitch-studio --global
# Install a specific skill
npx skills add kostamilov/stitch-studio --skill stitch-convert --global
claude plugin install kostamilov/stitch-studio
skillsync add kostamilov/stitch-studio
The plugin works best with the Stitch MCP server for direct generation:
npm install -g @_davideast/stitch-mcp
npx @_davideast/stitch-mcp init # guided auth setup
npx @_davideast/stitch-mcp doctor # verify config
The plugin includes .mcp.json that auto-configures the server when installed
as a plugin.
All skills work without MCP. Generate screens in your browser at stitch.withgoogle.com, then paste screenshots or HTML into Claude Code.
| Skill | Trigger | Purpose |
|---|---|---|
stitch-studio | /stitch, "design a screen" | Orchestrator — routes to the right sub-skill |
stitch-generate | "generate UI", "stitch me a..." | Prompt enhancement + screen generation |
stitch-tokens | "extract tokens", "sync design system" | DESIGN.md ↔ code token synchronization |
stitch-convert | "convert to SwiftUI" | HTML/CSS → SwiftUI with mapping tables |
stitch-flow | "design a flow", "onboarding screens" | Multi-screen connected flows |
stitch-brand | "set up design system" | Brand kit + design system bootstrap |
| Agent | Purpose |
|---|---|
design-explorer | Generate competing design variants in parallel |
token-mapper | Focused token extraction from DESIGN.md |
conversion-reviewer | Review SwiftUI output against original screenshot |
The bridge between Stitch and your code. A markdown file containing design
tokens (colors, typography, spacing) that Stitch generates and your code
consumes. Place it at your project root or in a Design/ directory.
Stitch provides 400 daily credits + 15 daily redesign credits. The plugin tracks usage and warns at 75% consumption.
The stitch-convert skill includes comprehensive Tailwind-to-SwiftUI and
CSS-to-SwiftUI mapping tables covering layout, spacing, typography, colors,
sizing, borders, effects, and interactive elements.
stitch-studio/
├── .claude-plugin/
│ ├── plugin.json
│ └── marketplace.json
├── agents/
│ ├── design-explorer.md
│ ├── token-mapper.md
│ └── conversion-reviewer.md
├── hooks/
│ └── hooks.json
├── scripts/
│ ├── session-init.sh
│ └── credit-logger.sh
├── skills/
│ ├── stitch-studio/SKILL.md
│ ├── stitch-generate/
│ │ ├── SKILL.md
│ │ └── references/ios-prompting.md
│ ├── stitch-tokens/
│ │ ├── SKILL.md
│ │ ├── references/design-md-schema.md
│ │ ├── examples/DESIGN.md
│ │ └── scripts/parse-design-md.py
│ ├── stitch-convert/
│ │ ├── SKILL.md
│ │ └── references/
│ │ ├── tailwind-to-swiftui.md
│ │ └── css-to-swiftui.md
│ ├── stitch-flow/SKILL.md
│ └── stitch-brand/
│ ├── SKILL.md
│ └── examples/DESIGN.md
├── docs/
│ ├── skills-index.md
│ └── mcp-setup.md
├── .mcp.json
├── AGENTS.md
├── CONTRIBUTING.md
├── LICENSE
└── README.md
Apache 2.0 — see LICENSE.