Design Copilot for Claude Code — two enforcement layers (Taste Guardian + Blind Spot ESLint plugin). Works standalone. Zero dependencies. Awwwards-level output. # KORRO Design Studio v3

Design Copilot for Claude Code
Two enforcement layers. Zero dependencies. Awwwards-level output.

KORRO Design Studio

Quick Start · How It Works · 7 Phases · ESLint Plugin · FAQ

--- ## Why Korrodesign AI-generated websites all look the same — purple gradients, Inter font, centered CTAs, zero personality. Existing tools (v0, Bolt, Lovable) generate fast but can't enforce design quality. Korrodesign is a **design copilot** with two enforcement layers no other tool has: 1. **Taste Guardian** — guides Claude DURING generation. 500+ lines of design rules absorbed from 6 design philosophies. Catches mistakes before code is written. 2. **Blind Spot** — a 14-rule ESLint plugin that checks UI structural integrity AFTER generation. Not "is it beautiful" — "is this even maintainable as UI?" Works standalone. Put the skill file in Claude Code and start designing. No API keys, no backend, no dependencies. --- ## Quick Start ```bash # 1. Clone and install the skill git clone https://github.com/KorroAi/korrodesign.git cp korrodesign/SKILL.md ~/.claude/skills/korrodesign/SKILL.md # 2. Reload Claude Code /claude reload # 3. Start designing /korrodesign ``` Claude becomes your Creative Director. The skill guides you through 7 phases — from asset generation to blind spot audit. Every rule in the SKILL.md is active during generation. **Optional: install the ESLint plugin for post-generation checks:** ```bash cp korrodesign/korro-studio/eslint-plugin-korro-design.js your-project/ cp korrodesign/korro-studio/eslint.config.korro.js your-project/ cd your-project npx eslint . --config eslint.config.korro.js ``` --- ## How It Works ``` ┌─────────────────────────────────────────────────────┐ │ /korrodesign │ │ │ │ LAYER 1: TASTE GUARDIAN (during generation) │ │ ┌───────────────────────────────────────────────┐ │ │ │ SKILL.md → Claude's system prompt │ │ │ │ 500+ lines of design rules │ │ │ │ Active during ALL code generation │ │ │ │ Catches: fonts, colors, spacing, animations │ │ │ └───────────────────────────────────────────────┘ │ │ ↓ │ │ Code is generated │ │ ↓ │ │ LAYER 2: BLIND SPOT (post-generation) │ │ ┌───────────────────────────────────────────────┐ │ │ │ eslint-plugin-korro-design.js │ │ │ │ 14 AST-level rules │ │ │ │ Catches: div-as-button, missing focus, │ │ │ │ z-index chaos, magic numbers, duplicate hex │ │ │ └───────────────────────────────────────────────┘ │ │ │ │ Result: Awwwards-level site with enforced quality │ └─────────────────────────────────────────────────────┘ ``` **Taste Guardian** works within Claude — the SKILL.md becomes part of Claude's context. Every code generation is filtered through these rules. **Blind Spot** works as a standalone ESLint plugin. Piggybacks on ESLint's existing distribution channel — every team already has ESLint in CI. One config line adds UI structural integrity checks. --- ## The 7 Phases | # | Phase | What Happens | Time | |---|-------|-------------|------| | 0 | **Asset Gen** | Generate 3D models (Meshy.ai), images (Pollinations.ai), audio (ElevenLabs) before design begins | 2 min | | 1 | **Creative Brief** | Stage detection (pre-launch/growth/mature) + 6 questions asked one at a time | 5 min | | 2 | **Configuration** | DESIGN_VARIANCE, MOTION_INTENSITY, VISUAL_DENSITY deduced from brief | 1 min | | 3 | **Council** | 3 contrasting creative directions (Safe / Bold / Hybrid) + 69-company inspiration library | 3 min | | 4 | **Execution Plan** | 3 steps: Foundations → Signature → Polish | 1 min | | 5 | **Generation** | Code generation via Claude (or optional OpenRouter backend for automated gen) | 5-15 min | | 6 | **Blind Spot Audit** | ESLint audit → auto-fix → pre-commit gate. UI violations block commits | 30 sec | **Total: ~20 minutes** from idea to production-ready, design-enforced website. ### Phase 3 — The Inspiration Library During the Council phase, the skill can reference design palettes from 69+ companies: Stripe, Apple, Linear, Vercel, Figma, Notion, Supabase, Spotify, Nike, SpaceX, Airbnb, Pinterest, Shopify, and 55+ more. Each palette includes: exact hex values, typography pairings, spacing scales, shadow systems, and border radius tokens. --- ## Installation ### Minimal: Claude Code Skill Only ```bash cp SKILL.md ~/.claude/skills/korrodesign/SKILL.md ``` That's it. `/korrodesign` now works in Claude Code. The Taste Guardian activates on every invocation. ### Full: Skill + ESLint Plugin + Tools ```bash # Clone the repo git clone https://github.com/KorroAi/korrodesign.git cd korrodesign # Skill cp SKILL.md ~/.claude/skills/korrodesign/SKILL.md # ESLint Plugin (copy to any project) cp korro-studio/eslint-plugin-korro-design.js my-project/ cp korro-studio/eslint.config.korro.js my-project/ # Or scaffold a fresh Next.js project with everything pre-configured node korro-studio/scaffold.js my-new-project ``` ### Optional: OpenRouter Backend For automated one-click generation, add to `~/.claude/.env`: ```bash OPENROUTER_API_KEY=sk-or-v1-... ``` Then `node generate.js --prompt-file BRIEF_CURRENT.md --output-dir my-project` generates the full project automatically. --- ## Blind Spot ESLint Plugin 14 AST-level rules. No other tool checks these at the component level. ### Core Rules (error) | Rule | What It Catches | Example Violation | |------|----------------|-------------------| | `no-div-as-button` | `

` without button semantics | `

Click

` | | `require-focus-visible` | Interactive elements missing focus styles | `

@korrocorp

korro