-
Notifications
You must be signed in to change notification settings - Fork 48
Home
bitjaru edited this page Jun 8, 2026
·
4 revisions
StyleSeed is an open-source design system seed for AI coding tools. It gives Claude Code (and other AI assistants) a complete visual language -- components, tokens, rules, and skills -- so generated UIs are consistent, polished, and production-ready.
GitHub: bitjaru/styleseed
| Page | Description |
|---|---|
| Getting Started | Installation, setup, first steps |
| Design Rules Overview | All 69 rules organized by category |
| Page Composition Recipes | SaaS, e-commerce, analytics, fintech layouts |
| Visual Rhythm Guide | How to prevent monotonous layouts |
| KPI Card Variations | How to make metric cards diverse |
| Chart and Element Guide | Chart selection and pairing rules |
| Claude Code Skills | All 14 slash commands with examples |
| Using with awesome-design-md | How to combine with DESIGN.md files |
| Creating New Seeds | Contributing new design styles |
StyleSeed ships with:
- 33 UI primitives -- Button, Card, Input, Dialog, Tabs, etc. (shadcn/ui style)
- Pattern components -- StatCard, HeroCard, ChartCard, PageShell, BottomNav, etc.
-
69 design rules in
DESIGN-LANGUAGE.md-- color, typography, layout, charts, interactions, forbidden patterns -
14 Claude Code skills --
/ss-*slash commands for generating, motion, and auditing UI - Named motion system -- 5 seeds (Spring/Silk/Snap/Float/Pulse) + a library of copy-paste keyword moves (live gallery)
- 7 brand skins -- Toss, Stripe, Linear, Notion, Raycast, Arc, Vercel + 58 via awesome-design-md
-
Tailwind CSS v4 theme -- CSS-first tokens, no
tailwind.config.js - JSON design tokens -- framework-agnostic, portable to Figma/native/other platforms