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. Live demo
This is a monorepo with two packages:
| Package | npm | Description |
|---|---|---|
@design-guard/core |
 |
Design intelligence engine — research, synthesis, validation, tokens |
design-guard |
 |
CLI + TUI + Claude Code skills — the full design-to-deploy pipeline |
- Research a business — scrape the site, extract palette/typography/layout, infer business model and audience
- Synthesize a DESIGN.md — 8-section design system tailored to the business (not boilerplate)
- Generate screens — via Google Stitch MCP or Claude Direct, with prompt guardrails
- Validate output — 18 lint rules across 7 categories catch AI slop (default fonts, purple gradients, icon grids, SaaS-speak...)
- 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.
# 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 --autoBusiness 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
└──────────────────────┘
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
/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
Design Guard connects to Google Stitch via MCP. Add to .mcp.json:
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["@_davideast/stitch-mcp", "proxy"],
"env": { "STITCH_API_KEY": "${STITCH_API_KEY}" }
}
}
}dg init creates this file automatically.
The core library can be used independently in your own tools:
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 for the full API.
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
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 modeSee CONTRIBUTING.md for setup instructions and guidelines.
Built by Fernando Rodriguez Memije.
