Frontend Design System

v4.0 -- Built from months of iteration and the Anthropic frontend aesthetics research.

This is not a template. It is a design operating system that transforms how AI coding agents produce visual output.

What you get:

1. CLAUDE.md Aesthetics Prompt -- inject into every build. Bans generic fonts, bans purple-on-white, demands cultural aesthetic references. Based on Anthropic official cookbook research.

2. Design Intake (DESIGN-INTAKE.md) -- 4 mandatory questions before any build starts. No brief = no build.

3. Reference Sites -- 7 benchmark sites (Linear, Vercel, Arc, Craft, Raycast, Reflect, Lusion) with actual extracted CSS values. Pick a target before building.

4. The Craft (the-craft.md) -- Specific micro-detail rules: letter-spacing tables, 3-layer shadow formulas, color temperature consistency, 8pt spacing grid, the permanent checklist.

5. AI Overrides -- 10 specific anti-patterns that make AI design look AI-generated, each with explicit code fixes.

6. Typography + Color Systems -- Premium font pairings, fluid clamp() scales, dark/light/warm color patterns with actual hex values.

Works with Claude Code, Codex, Cursor, or any coding agent. Drop the CLAUDE.md into your repo and the output quality changes immediately.