Get a design engine for Claude Code, Codex, and Cursor, ideal for founders building AI-driven products with 681 GitHub stars
682 stars64 forksTypeScriptQuality 8/10Updated 7/15/2026100% free ยท open source
What it does
Styleseed is a design engine that helps founders building AI-driven products create consistent and professional-looking user interfaces with pre-defined rules, components, and brand skins.
Install / run
Clone the Styleseed repository from GitHub using `git clone https://github.com/bitjaru/styleseed.git`
When to use it
โขYou're building an AI-driven product with Claude Code, Codex, or Cursor and want a consistent design language
โขYou want to create a professional-looking UI without hiring a designer
โขYou need to create multiple variations of your product's UI with different brand identities
Quick start
1Explore the 7 pre-defined brand skins (Toss, Stripe, Linear, Notion, Raycast, Arc, Vercel) in the `skins` directory
2Learn about the 74 pre-defined design rules in the `rules` directory
3Use the named motion system with 5 seeds and 20+ moves to create consistent animations
4Utilize the 15 `/ss-*` skills to generate UI components
5Check out the example use cases in the `examples` directory to get started with your own project
Ready-to-paste prompt
Use the `styleseed` design engine to generate a UI component with the Notion brand skin and a specific set of design rules, for example: `styleseed generate --skin notion --rule padding:16px`
Heads up: Make sure you have the necessary dependencies and TypeScript configured in your project, as Styleseed is written in TypeScript and requires it to run
Saves to your device
Topics
ai-coding
ai-design
ai-ui
claude-code
claude-design
claude-skills
cursor
design-judgment
design-system
design-tokens
nextjs
radix-ui
react
react-components
shadcn
shadcn-ui
tailwindcss
typescript
ui-design
vibe-coding
What's inside โ free to inspect
No purchase needed
Read the entire source before you build โ unlike paid marketplaces that hide it behind a buy button.