by bitjaru
Design engine that makes AI code like a UI/UX designer. Pick any brand skin, get professional UI.
# Add to your Claude Code skills
git clone https://github.com/bitjaru/styleseed
A design engine that teaches Claude Code and Cursor how to think like a designer. Pick any brand skin. Get professional UI. No designer needed.
Get Started · Engine + Skins · Skills · Wiki · 한국어
AI coding tools generate functional UI — but it looks generic. The missing piece isn't components or color tokens. It's design judgment.
StyleSeed is a design engine — 69 visual design rules, 48 components, and 11 AI skills that teach AI how professional designers think:
"The most refined black isn't #000 — it's #2A2A2A"
"One accent color in the entire app. Everything else grayscale. Restraint is elegance."
"Shadows at 4% opacity. If you can see it, it's already too much."
"Numbers and units at 2:1 ratio. 48px number, 24px unit. Always."
"Never repeat the same section type twice. Alternate tall and compact for rhythm."
The engine is brand-agnostic — pair it with any color skin and it works.
# Copy the engine into your project
cp -r engine/* your-project/
# Run the setup wizard
/ui-setup
The wizard walks you through:
No comments yet. Be the first to share your thoughts!
# Copy engine (rules, components, skills)
cp -r engine/* your-project/
# Copy engine css to src/styles
cp -r engine/css/* your-project/src/styles/
# Pick a skin — copy theme.css alongside other css files
cp skins/stripe/theme.css your-project/src/styles/theme.css
# Copy components
cp -r engine/components/* your-project/src/components/
Refer to https://github.com/bitjaru/styleseed — read engine/CLAUDE.md
and engine/DESIGN-LANGUAGE.md, then build a SaaS dashboard.
Use skins/stripe/theme.css for the color palette.
cp engine/.cursorrules your-project/.cursorrules
┌─────────────────────────────────────────────────┐
│ StyleSeed Engine (brand-agnostic) │
│ │
│ 69 design rules · 48 components · 13 skills │
│ Layout · Composition · Typography · UX · A11y │
└──────────────────────┬──────────────────────────┘
│
Pick a skin ↓
│
┌──────┬──────┬──────┬──────┬──────┬─────────┐
│ Toss │Stripe│Linear│Vercel│Notion│ 58 more │
│ │ │ │ │ │(awesome)│
└──────┴──────┴──────┴──────┴──────┴─────────┘
Engine = how your app is structured (design intelligence)
Skin = what your app looks like (visual identity)
theme.css file with color variables--brand and you're done)They're complementary, not competing:
| | awesome-design-md | StyleSeed | |---|---|---| | What it is | Brand color palette collection | Design intelligence engine | | Provides | Colors, fonts, shadow values | Layout rules, composition recipes, UX patterns | | Components | None | 48 React components | | AI Skills | None | 13 slash commands | | Makes AI understand | "Use this shade of blue" | "How to structure a page like a pro designer" |
awesome-design-md = paint colors StyleSeed = architecture + interior design rules
Use them together: awesome-design-md provides the skin, StyleSeed provides the brain.
| Skin | Style | Source |
|------|-------|--------|
| toss | Korean fintech — purple, minimal, data-focused | Original |
| stripe | Professional — indigo, clean, multi-layer shadows | awesome-design-md |
| linear | Dark-first — violet, minimal, developer-focused | awesome-design-md |
| vercel | Monochrome — black & white, geometric | awesome-design-md |
| notion | Warm — blue accent, friendly, warm neutrals | awesome-design-md |
| 58+ more | Any brand from awesome-design-md | Auto-fetch via /ui-setup |
engine/
├── CLAUDE.md # AI reads this automatically
├── DESIGN-LANGUAGE.md # 69 visual design rules (brand-agnostic)
├── .claude/skills/ # 13 slash commands
│ ├── ui-setup/ # Interactive setup wizard
│ ├── ui-component/ # Generate components
│ ├── ui-page/ # Scaffold pages
│ ├── ui-pattern/ # Compose layouts
│ ├── ui-review/ # Design compliance check
│ ├── ui-tokens/ # Manage tokens
│ ├── ui-a11y/ # Accessibility audit
│ ├── ux-flow/ # Design user flows
│ ├── ux-audit/ # UX heuristic evaluation
│ ├── ux-copy/ # Generate microcopy
│ └── ux-feedback/ # Add loading/error/empty states
├── components/
│ ├── ui/ # 32 primitives (shadcn/ui + motion)
│ └── patterns/ # 16 dashboard patterns
├── css/ # base.css, fonts.css, index.css
├── tokens/ # 6 JSON token files
├── utils/ # Formatting utilities
├── icons/ # Custom SVG icon library
└── scaffold/ # Vite 6 + React 18 starter
| Skill | What It Does |
|-------|-------------|
| /ui-setup | Interactive wizard — pick skin, brand color, font, generates first page |
| Skill | What It Does |
|-------|-------------|
| /ui-component | Generate components following design conventions |
| /ui-page | Scaffold pages with proper layout structure |
| /ui-pattern | Compose UI patterns (card grid, chart, list) |
| /ui-review | Audit code for design system violations |
| /ui-tokens | View, add, or modify design tokens |
| /ui-a11y | Accessibility audit (WCAG 2.2 AA) |
| /ui-lint | Quick automated lint — catches common violations in seconds |
| /ui-update | Pull latest engine updates — analyzes your project and updates safely |
| Skill | What It Does |
|-------|-------------|
| /ux-flow | Design user flows (progressive disclosure, information pyramid) |
| /ux-audit | Nielsen's 10 usability heuristics evaluation |
| /ux-copy | Generate UX microcopy (buttons, errors, empty states, toasts) |
| /ux-feedback | Add loading/success/error/empty states to any component |
/ui-setup # Pick skin, configure project
/ui-page Dashboard # Scaffold main page
/ux-copy "dashboard" # Generate all microcopy
/ux-feedback src/Dashboard # Add loading/error states
/ux-audit src/Dashboard # Check UX quality
/ui-lint src/Dashboard # Quick violation scan
/ui-review src/Dashboard # Deep design compliance check
/ui-update # Pull latest engine updates
New project:
Refer to https://github.com/bitjaru/styleseed — read engine/CLAUDE.md
and engine/DESIGN-LANGUAGE.md. Use skins/stripe/theme.css for colors.
Build a SaaS dashboard with revenue, users, and activity.
Add a page (engine already in project):
Follow CLAUDE.md and DESIGN-LANGUAGE.md rules.
Create a settings page with profile, notifications, and danger zone.
Run /ui-review when done.
Improve existing page:
Refactor src/Dashboard.tsx to follow DESIGN-LANGUAGE.md.
Check visual rhythm (rule 61) and KPI variation (rule 62).
Update engine:
/ui-update
These are the kind of rules that make AI output look professional:
Rule: The most refined black isn't #000 — it's #2A2A2A.
5-level grayscale: #2A → #3C → #6A → #7A → #9B
Rule: All content lives inside cards. Never on page background.
Card (#FFF) vs background (#FAFAFA) contrast IS the separator.
Rule: Never repeat the same section type consecutively.
Hero → Grid → Chart → Carousel → List (visual rhythm)
Rule: KPI cards must vary: 2 with trend arrows, 1 with progress bar,
1 with comparison text. Never 4 identical cards.
Rule: Information density increases as you scroll down.
Top: 48px (one number) → Bottom: 14px (detailed lists