StyleSeed

StyleSeed is a free, MIT-licensed design engine built by bitjaru in Seoul that gives AI coding agents — Claude Code, Codex, Cursor, Gemini CLI, and others — the design judgment needed to stop producing generic-looking UI. Rather than supplying a palette or component library alone, it encodes 74 craft rules, 8 job-specific output grammars, 5 surface adapters, 48 React components, 7 brand skins, and 20 agent skills into plain markdown files that agents read automatically on every prompt. The project reached v3.0.0 on 2026-07-18 and has accumulated 792 GitHub stars.

What It Is

StyleSeed is a design-method engine — a structured rulebook and toolchain that sits between a developer's prompt and an AI agent's output. Where most design-AI projects supply data (palettes, tokens, component specs), StyleSeed supplies judgment: the reasoning a senior designer applies when choosing a radius, a shadow opacity, a type scale, or a motion seed. The engine ships as plain markdown rule files (CLAUDE.md, AGENTS.md, .cursorrules) that any compatible agent reads automatically, plus an optional set of 20 /ss-* slash-command skills that automate the build-score-fix loop. It is brand-agnostic by design — the same 74 rules apply regardless of which of the 7 built-in skins (Toss, Stripe, Linear, Notion, Raycast, Arc, Vercel) or 58+ community skins a project uses.

How the Design-Method Loop Works

The core workflow StyleSeed enforces is: plan → lock → build → score → verify.

• Plan mode — the agent selects an output grammar (consumer service, operations, technical, editorial, commerce, institutional, marketing, or sequential story) and a surface adapter (web UI, mobile, carousel, deck, document) before writing any code.
• Lock — bounded decisions (skin, key color, radius, motion seed) are written to STYLESEED.md and re-read on every subsequent prompt, preventing design drift across sessions.
• Build — /ss-build runs the full loop: grammar selection → code generation → quality gate.
• Score — /ss-score grades the output 0–100 across color discipline, spatial rhythm, hierarchy, elevation, component variance, and motion/feedback, then loops fixes until the score reaches ≥80.
• Verify — /ss-verify renders the screen, screenshots it, and scores what the pixel output actually shows (dead whitespace, unloaded fonts, missing focal point, blank empty states) before the developer sees anything.

The quality gate is the mechanism that strips what the project calls the "AI look" — default indigo, icon-chip clichés, rainbow lists, pure-black text, and ad-hoc spacing — by naming and banning each tell explicitly in the rules.

Architecture: Engine + Skins + Grammars

The engine separates three concerns:

• Engine (brand-agnostic judgment): 74 visual design rules covering color discipline, spatial rhythm, information hierarchy, shadow/elevation, component variance, and motion/feedback; 48 React components (32 primitives + 16 patterns); a named motion system with 5 seeds (Spring, Silk, Snap, Float, Pulse) and 20+ keyword moves (tilt-3d, magnetic, glow-pulse, confetti-pop); and 20 cross-agent skills.
• Skins (visual identity): each skin is a single theme.css file with CSS custom properties. Seven are built in; 58+ more are available via the awesome-design-md community project and auto-fetched through /ss-setup.
• Output grammars (job-specific composition): v3 introduced 8 grammars so the engine selects the right design language for the product type rather than defaulting to a single Toss-like consumer aesthetic.

The /ss-reference skill compiles screenshots, URLs, Figma exports, or existing UI into an evidence-backed project-local grammar, so teams can extract a repeatable design language from references rather than copying screens.

Agent Compatibility and Setup Path

StyleSeed ships three rule-file formats so it works across every major AI coding agent without modification:

The fastest install is a single npx skills add bitjaru/styleseed command, which places all 20 skills into the correct agent-specific folder. The rules alone (plain markdown, zero permissions required) deliver the core design judgment; the skills add optional automation on top.

Update: StyleSeed v3.0.0

Released 2026-07-18, v3.0.0 is described in the project's own release notes as fixing "the design method, not one Toss-like look." Key additions in v3:

• 8 output grammars replacing the single consumer-UI default
• 5 surface adapters extending coverage beyond web UI to social carousels, slide decks, documents, reports, posters, and covers
• /ss-reference — a reference compiler that turns screenshots, URLs, Figma exports, or existing product UI into an evidence-backed project grammar
• Dual proof gates — both a code-level score (/ss-score) and a rendered-pixel visual gate (/ss-verify) are now required before output is shown
• Rule count raised to 74; skill count raised to 20

The project's tech stack is React 18, TypeScript, Tailwind CSS v4, Radix UI, Vite 6, Lucide Icons, and CVA. The repository is MIT-licensed with no telemetry.