Design that scales
without you redrawing it.
StyleSeed is a drop-in React design system for vibe coding. One attribute swaps the brand DNA. Five named motion seeds give you elegant animation in plain English. MIT licensed and built for Claude Code, Cursor, and the AI-assisted product workflow.
- components
- 33
- brand skins
- 7
- motion seeds
- 5
- design rules
- 69
11 finished templates · 385 live variants.
Every template ships across 7 brand DNAs and 5 motion seeds — toggle live in the browser. Copy the source from the repo.
Finance Dashboard
dashboardKPI strip, revenue trend, and recent transactions — a Toss-style daily view.
Food Delivery
mobileRestaurant feed, cart, and live order tracking — a Baemin/DoorDash-style consumer app.
Fitness Tracker
mobileActivity rings, workout history, and weekly goals — an Apple Fitness-style health app.
Music Player
mobileNow-playing, queue, and library — a Spotify-style streaming app.
Issue Tracker
workflowKanban board with filters and assignees — a Linear-style power-user view.
Mobile Wallet
mobileAccount balance, transfers, and recent activity — a Toss-style consumer banking app.
Five vibe words. Production-grade animation.
5 named motion seeds, each with five spreadable recipes (entrance, exit, hover, press, layout). Stop guessing spring params — say what you want and your LLM will reach for the right one.
Save
</motion.button>
Built for the AI-assisted product workflow.
Brand-agnostic by design
One attribute (data-skin) morphs the entire UI across 7 hand-tuned brand DNAs — Toss, Stripe, Linear, Notion, Raycast, Arc, Vercel.
Motion in vibe words
Five named motion seeds (Spring, Silk, Snap, Float, Pulse). Spread one onto any motion element. No more guessing spring stiffness.
Production-grade primitives
33 React components + 16 composed patterns + 69 documented design rules. No surprise gotchas after copy-paste.
AI-ready out of the box
13 slash skills (/ss-component, /ss-page, /ss-motion, …) that Claude Code and Cursor read automatically. Stop fighting generic shadcn output.
Drop-in, not all-in
Copy engine/ into any React + Tailwind v4 project. No build step, no runtime dependency, no lock-in.
Free under MIT
Production use, fork, white-label, internal tooling — all fair game. No usage caps, no telemetry.
Stop redrawing. Start shipping.
One repo, every brand, every motion personality. Drop StyleSeed into your next vibe coding session and let your LLM produce UI that doesn’t look generated.
MIT licensed · zero install fee · no telemetry · production-ready