Skip to content

Home

Jump to bottom
snoo edited this page Apr 7, 2026 · 2 revisions

StyleSeed Wiki

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

Pages

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 10 slash commands with examples
Using with awesome-design-md How to combine with DESIGN.md files
Creating New Seeds Contributing new design styles

What's in a Seed?

The toss seed ships with:

  • 31 UI primitives -- Button, Card, Input, Dialog, Tabs, etc. (shadcn/ui style)
  • 16 pattern components -- StatCard, HeroCard, ChartCard, PageShell, BottomNav, etc.
  • 69 design rules in DESIGN-LANGUAGE.md -- color, typography, layout, charts, interactions, forbidden patterns
  • 10 Claude Code skills -- 6 UI generation + 4 UX audit slash commands
  • Tailwind CSS v4 theme -- CSS-first tokens, no tailwind.config.js
  • JSON design tokens -- framework-agnostic, portable to Figma/native/other platforms

Quick Links

Clone this wiki locally