Stitch Forge

English | Español

Design websites with AI. Ship them with one command.

Stitch Forge turns Google Stitch into a full design-to-deploy pipeline.
Generate screens, build design systems, and export to your favorite framework — all from the terminal.

This landing page was generated by Stitch Forge in a single prompt. Live demo · Full screenshot

What Is This

Stitch Forge wraps Google Stitch's MCP API into a CLI framework that handles the full lifecycle of AI-generated web design:

• Generate a design system from a brand brief — colors, fonts, spacing, components
• Create screens with guided prompts and built-in guardrails
• Preview instantly in your browser or inline in Claude Code
• Build and export to Static HTML, Astro, or Next.js
• Track quota and stay within Stitch's monthly generation limits
• Auto-research Stitch updates so your tooling never goes stale

Built for Claude Code. Stitch Forge ships with 6 slash commands that turn Claude into your design co-pilot. Generate a full website without leaving the conversation.

Features

Quick Start

# 1. Clone and install
git clone https://github.com/FReptar0/stitch-forge.git
cd stitch-forge && npm install

# 2. Configure
cp .env.example .env
# Add your STITCH_API_KEY from stitch.withgoogle.com > Settings > API Key

# 3. Initialize project
npx tsx src/index.ts init

# 4. Create a design system
npx tsx src/index.ts design "Acme Corp, SaaS platform, startups, modern minimal"

# 5. Generate your first screen
npx tsx src/index.ts generate "A landing page with hero, features grid, and CTA"

# 6. Preview it
npx tsx src/index.ts preview

# 7. Build the site
npx tsx src/index.ts build --framework static --auto

CLI Demo

How It Works

Brand brief or description
│
▼
┌──────────────────┐
│   DESIGN.md      │  8-section design system (colors, fonts, spacing, patterns)
│   Generator      │
└────────┬─────────┘
         │
┌────────▼─────────┐
│  Prompt Builder   │  Guardrails: length, single-screen, specificity check
│  + Stitch MCP     │  → generate_screen_from_text
└────────┬─────────┘
         │
    ┌────┼────┐
    ▼    ▼    ▼
 Screen  Preview  Quota
 .html   browser  tracker
    │
┌───▼──────────────┐
│  Framework Build  │  --framework static | astro | nextjs
└──────────────────┘
         │
    ┌────┼────┐
    ▼    ▼    ▼
  dist/  dist/  out/
  HTML   Astro  Next.js

Usage

CLI Commands

forge init                          Setup project, auth, and MCP config
forge design "brief..."            Generate DESIGN.md from brand brief
forge generate "description..."    Generate a screen via Stitch
forge preview [screen-name]        Open screen in browser (--all for all)
forge build --framework static     Build site (static | astro | nextjs)
forge sync [project-id]            Pull screens from Stitch project
forge research                     Check for Stitch API updates
forge workflow [redesign|new-app]  Show guided step-by-step workflow
forge quota                        Show generation quota usage
forge tui                          Launch interactive terminal UI

Claude Code Slash Commands

/forge-design     → Generate DESIGN.md from a brand brief
/forge-generate   → Generate screens with guided prompts
/forge-build      → Build and export to your chosen framework
/forge-preview    → Preview screens inline (base64 image via MCP)
/forge-research   → Check for Stitch updates
/forge-sync       → Pull latest from a Stitch project

MCP Setup

Stitch Forge connects to Google Stitch via MCP. Add this to your .mcp.json:

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["@_davideast/stitch-mcp", "proxy"],
      "env": { "STITCH_API_KEY": "${STITCH_API_KEY}" }
    }
  }
}

forge init creates this file automatically.

Project Structure

stitch-forge/
├── src/
│   ├── index.ts              # CLI entry (commander)
│   ├── commands/             # init, design, generate, build, sync, research, preview, workflow
│   ├── adapters/             # Framework adapters (static, astro, nextjs)
│   ├── tui/                  # Ink terminal UI (Dashboard, PromptBuilder, DesignEditor)
│   ├── mcp/                  # MCP client, tool builders, auth
│   ├── research/             # Stitch update crawler, differ, updater
│   ├── templates/            # DESIGN.md, prompt, and workflow templates
│   └── utils/                # Config, logger, validators, quota, preview
├── tests/                    # Unit + integration tests with fixtures
├── .claude/commands/         # Claude Code slash commands
├── docs/                     # Design guide, prompting guide, known state
└── .github/workflows/        # CI (Node 20 + 22, typecheck + tests)

Development

npm install           # Install dependencies
npm run dev           # Launch TUI in dev mode
npm test              # Run tests (watch mode)
npm test -- --run     # Run tests once
npm run typecheck     # Type-check without emitting
npm run build         # Compile TypeScript to dist/

Contributing

See CONTRIBUTING.md for setup instructions and guidelines.

License

MIT

Author

Built by Fernando Rodriguez Memije.