design-guard

KO | EN

gitlite — search

#python #php #react #csharp #chrome-extension #tensorflow #arduino #docker #elm #postgresql #people #ios

★ 13 Open GitHub ↗

Stitch Forge — CLI framework for automating web design with Google Stitch MCP

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Design Guard

Design websites with AI. Ship them with confidence.

Design Guard is a design intelligence engine and CLI for AI-generated web design. 
 Research businesses, synthesize design systems, generate screens, validate against anti-slop rules, 
 and build production sites — all from the terminal or Claude Code.

---

This landing page was generated by Design Guard using the full pipeline. <a href="https://freptar0.github.io/design-guard/">Live demo</a>

---

## Packages

This is a monorepo with two packages:

| Package | npm | Description |
|---------|-----|-------------|
| [`@design-guard/core`](./packages/core) | [![npm](https://img.shields.io/npm/v/@design-guard/core.svg?style=flat&color=6C5CE7)](https://www.npmjs.com/package/@design-guard/core) | Design intelligence engine — research, synthesis, validation, tokens |
| [`design-guard`](./packages/cli) | [![npm](https://img.shields.io/npm/v/design-guard.svg?style=flat&color=00CEC9)](https://www.npmjs.com/package/design-guard) | CLI + TUI + Claude Code skills — the full design-to-deploy pipeline |

## What It Does

1. **Research** a business — scrape the site, extract palette/typography/layout, infer business model and audience
2. **Synthesize** a DESIGN.md — 8-section design system tailored to the business (not boilerplate)
3. **Generate** screens — via Google Stitch MCP or Claude Direct, with prompt guardrails
4. **Validate** output — 18 lint rules across 7 categories catch AI slop (default fonts, purple gradients, icon grids, SaaS-speak...)
5. **Build** production sites — export to Static HTML, Astro, or Next.js

> **Built for Claude Code.** Design Guard ships with 7 skills (`/dg-discover`, `/dg-generate`, `/dg-build`...) that turn Claude into your design co-pilot.

## Quick Start

```bash
# Install
npm install -g design-guard

# Initialize and configure
dg init

# Research your business and generate a design system
dg discover "Acme Coffee, food & beverage, young professionals, warm minimal" --url https://acmecoffee.com

# Generate a screen
dg generate "A landing page with hero, menu highlights, and location CTA"

# Validate it
dg lint screens/landing.html

# Build
dg build --framework static --auto
```

## How It Works

```
Business name or URL
│
▼
┌──────────────────────┐
│  Research Engine      │  Scrape site, extract palette, infer business model
│  (@design-guard/core) │
└────────┬─────────────┘
         │
┌────────▼─────────────┐
│  DESIGN.md           │  8-section design system + business context
│  Synthesis           │  Industry-aware, anti-slop rules built in
└────────┬─────────────┘
         │
┌────────▼─────────────┐
│  Generator           │  Google Stitch (MCP) or Claude Direct
│  + Prompt Guardrails │  Length, single-screen, vague detection
└────────┬─────────────┘
         │
┌────────▼─────────────┐
│  Anti-Slop Validator │  18 rules, 7 categories, 0-100 score
│  (@design-guard/core) │  Tailwind-aware, SARIF output
└────────┬─────────────┘
         │
┌────────▼─────────────┐
│  Site Builder        │  Static HTML | Astro | Next.js
│  + Preview           │  Local server or inline in Claude Code
└──────────────────────┘
```

## CLI Commands

```
dg init                              Setup project, auth, MCP config
dg discover "brief" [--url URL]      Research business + generate DESIGN.md
dg design "brief"                    Generate DESIGN.md from preset templates
dg generate "description"            Generate a screen via Stitch or Claude
dg lint [file|dir]                   Validate HTML against DESIGN.md (18 rules)
dg preview [name]                    Open screen in browser
dg build --framework static          Build site (static | astro | nextjs)
dg sync [project-id]                 Pull screens from Stitch project
dg research                          Check for Stitch API updates
dg tokens export                     Export DESIGN.md as W3C DTCG tokens
dg workflow [redesign|new-app]       Guided multi-step workflow
dg tui                               Interactive terminal UI
```

## Claude Code Skills

```
/dg-discover   Research business + generate tailored DESIGN.md
/dg-design     Generate DESIGN.md from a brand brief
/dg-generate   Generate screens with guided prompts + guardrails
/dg-build      Build and export to your chosen framework
/dg-preview    Preview screens inline
/dg-research   Check for Stitch API updates
/dg-sync       Pull latest from a Stitch project
```

## MCP Setup

Design Guard connects to Google Stitch via MCP. Add to `.mcp.json`:

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

`dg init` creates this file automatically.

## Using @design-guard/core Directly

The core library can be used independently in your own tools:

```typescript
import { validateOutput, scoreDesignMd, designMdToDTCG } from '@design-guard/core';

// Validate AI-generated HTML
const result = validateOutput(html, designMdContent);
console.log(`Score: ${result.score}/100`);

// Score a DESIGN.md
const quality = scoreDesignMd(designMdContent);
console.log(`Quality: ${quality.total}/100`);

// Export as design tokens
const tokens = designMdToDTCG(designMdContent);
```

See the [@design-guard/core README](./packages/core/README.md) for the full API.

## Project Structure

```
design-guard/                       # Monorepo root (npm workspaces)
├── packages/
│   ├── core/                       # @design-guard/core (245 tests)
│   │   └── src/
│   │       ├── research/           # Business researcher, synthesizer, cache
│   │       ├── validation/         # Design scorer, output validator, 18 lint rules
│   │       ├── tokens/             # W3C DTCG converter
│   │       ├── templates/          # DESIGN.md generator, prompt builder
│   │       └── utils/              # Validators, prompt enhancer
│   └── cli/                        # design-guard CLI (98 tests)
│       └── src/
│           ├── commands/           # init, discover, design, generate, build, lint, sync...
│           ├── tui/                # Ink terminal UI (Dashboard, PromptBuilder, DesignEditor)
│           ├── mcp/                # MCP client with retry + backoff
│           ├── generators/         # Stitch MCP + Claude Direct adapters
│           ├── adapters/           # Framework builders (static, astro, nextjs)
│           └── research/           # Stitch docs crawler, differ, updater
├── .claude/skills/                 # 7 Claude Code skills
├── docs/                           # Guides (design, prompting, known state)
└── public/                         # Landing page + demo pages
```

## Development

```bash
git clone https://github.com/FReptar0/design-guard.git
cd design-guard
npm install
npm run build         # Build both packages
npm run test          # Run all 343 tests
npm run test:core     # Core only (245 tests)
npm run test:cli      # CLI only (98 tests)
npm run typecheck     # Type-check both packages
npm run dev           # Launch TUI in dev mode
```

## Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md) for setup instructions and guidelines.

## License

[MIT](./LICENSE)

## Author

Built by [Fernando Rodriguez Memije](https://fernandomemije.dev).

design-guard

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README