Stitch Forge

English | Español

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:

• Research a business and generate a tailored design system — the Design Intelligence Agent understands your business model before designing
• Generate screens with guided prompts, anti-slop validation, 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 7 skills that turn Claude into your design co-pilot. Generate a full website without leaving the conversation.

Features

| Feature | Description | |---------|-------------| | Design Intelligence Agent | Researches your business, analyzes competitors, understands your audience, and generates a tailored DESIGN.md — not boilerplate | | Business Model Awareness | Detects if you're physical retail, e-commerce, SaaS, or service — prevents generating the wrong page patterns | | DESIGN.md Generator | 8-section design system with strict validation (hex colors, rem sizes, component patterns, anti-slop rules) | | Prompt Builder | Zoom-out-zoom-in framework with guardrails: max length, single-screen, vague detection, business alignment | | Anti-Slop Validation | Scores generated HTML 0-100, catches AI-default fonts, purple-blue gradients, heading hierarchy issues | | Multi-Framework Build | Export to Static HTML, Astro (via Stitch MCP), or Next.js App Router — with Stitch Forge signature | | Live Preview | Open screens in browser from CLI, TUI, or view inline via Claude Code | | Interactive TUI | Dashboard, prompt composer, and design editor — all in the terminal | | Quota Tracking | Visual meter for Flash (350/mo) and Pro (200/mo) generation limits | | Auto-Research | Crawls Stitch docs, blog, and forums — diffs against known state, updates knowledge base | | MCP Client Resilience | Retry with exponential backoff, 30s/120s timeouts, user-friendly error messages |

Quick Start

# Install globally
npm i -g stitch-forge

# Or use without installing
npx stitch-forge init

# Configure
# Add your STITCH_API_KEY from stitch.withgoogle.com > Settings > API Key

# Initialize project
forge init

# Research your business and generate a tailored design system
forge discover "Your Company, industry, audience, aesthetic" --url https://yoursite.com

# Generate your first screen
forge generate "A landing page with hero, features, and CTA"

# Preview it
forge preview

# Build the site
forge build --framework static --auto

From Source

git clone https://github.com/FReptar0/stitch-forge.git
cd stitch-forge && npm install
cp .env.example .env  # Add your STITCH_API_KEY
npm run build
npm link  # Makes `forge` command available globally

How It Works

Business name or brief
│
▼
┌──────────────────────┐
│  Design Intelligence │  Research business model, analyze site,
│  Agent               │  study competitors, understand audience
└────────┬─────────────┘
         │
┌────────▼─────────────┐
│  DESIGN.md           │  8-section design system + business context
│  (with biz context)  │  "NOT e-commerce — drive foot traffic"
└────────┬─────────────┘
         │
┌────────▼─────────────┐
│  Prompt Builder      │  Guardrails: length, single-screen,
│  + Stitch MCP        │  vague detection, business alignment
└────────┬─────────────┘
         │
    ┌────┼────┐
    ▼    ▼    ▼
 Screen  Preview  Quota
 .html   browser  tracker
    │
┌───▼──────────────────┐
│  Framework Build     │  --framework static | astro | nextjs
│  + Forge Signature   │  <!-- Built with Stitch Forge -->
└──────────────────────┘

Usage

CLI Commands

forge init                              Setup project, auth, and MCP config
forge discover "brief..." [--url URL]  Research business + generate DESIGN.md
forge design "brief..."                Generate DESIGN.md from brand brief (preset mode)
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 Skills

/forge-discover   → Research business + generate tailored DESIGN.md (recommended)
/forge-design     → Generate DESIGN.md from a brand brief (preset mode)
/forge-generate   → Generate screens with guided prompts + guardrails
/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}" }
    }
  }
}

Or connect directly to the Stitch API:

{
  "mcpServers": {
    "stitch": {
      "type": "http",
      "url": "https://stitch.googleapis.com/mcp",
      "headers": { "X-Goog-Api-Key": "${STITCH_API_KEY}" }
    }
  }
}

forge init creates this file automatically.

Project Structure

stitch-forge/
├── src/
│   ├── index.ts              # CLI entry (commander)
│   ├── commands/             # init, discover, design, generate, build, sync, research, preview
│   ├── adapters/             # Framework adapters (static, astro, nextjs) + forge signature
│   ├── tui/                  # Ink terminal UI (Dashboard, PromptBuilder, DesignEditor)
│   ├── mcp/                  # MCP client with retry, timeout, response parsing
│   ├── research/             # Business researcher, design synthesizer, crawler, cache
│   ├── templates/            # DESIGN.md (14 industries × 6 aesthetics), prompts, workflows
│   └── utils/                # Config, validators, prompt enhancer, output validator, quota
├── tests/                    # 121 tests — unit + integration with fixtures
├── .claude/skills/           # 7 Claude Code skills (discover, design, generate, build, preview, research, sync)
├── docs/                     # Design guide, prompting guide, known state
└── .github/workflows/        # CI (typecheck + tests)

Development

npm install           # Install dependencies
npm run dev           # Launch TUI in dev mode
npm test              # Run tests (watch mode)
npm run test:run      # Run tests once (121 tests)
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.