[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-1133":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":46,"readmeContent":47,"aiSummary":48,"trendingCount":15,"starSnapshotCount":15,"syncStatus":49,"lastSyncTime":50,"discoverSource":51},1133,"styleseed","bitjaru\u002Fstyleseed","bitjaru","Design engine for Claude Code & Cursor — teaches design judgment, not just data. 69 rules, 48 components, 7 brand skins (Toss\u002FStripe\u002FLinear\u002FNotion\u002FRaycast\u002FArc\u002FVercel), a named motion system (5 seeds + 20+ moves), 14 \u002Fss-* skills. Stop shipping AI UI that looks generated. MIT.",null,"TypeScript",428,49,5,1,0,15,58,88,45,93.9,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45],"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","2026-06-12 04:00:07","\u003Cdiv align=\"center\">\n\n\u003Cbr \u002F>\n\n# styleseed\n\n### The design system for Claude Code, Cursor, and vibe coding.\n\n\u003Cbr \u002F>\n\n\u003Ca href=\"https:\u002F\u002Fstyleseed-demo.vercel.app\">\n  \u003Cimg src=\"showcase\u002Fdemo.gif\" width=\"640\" alt=\"StyleSeed live demo — same chat UI morphing across Toss, Raycast, and Arc brand skins\" \u002F>\n\u003C\u002Fa>\n\n\u003Cbr \u002F>\u003Cbr \u002F>\n\n[![▶ Open AI Chat Demo](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F▶_AI_Chat_Demo-Live-FF4E8B?style=for-the-badge&logoColor=white)](https:\u002F\u002Fstyleseed-demo.vercel.app)\n \n[![▶ Open Pricing Demo](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002F▶_Pricing_Demo-Live-6C5CE7?style=for-the-badge&logoColor=white)](https:\u002F\u002Fstyleseed-demo.vercel.app\u002Fpricing)\n\n**One component. Three brand DNAs.** Same chat UI morphing across Toss · Raycast · Arc — colors, radius, motion, shadows, gradients all driven by StyleSeed tokens. No rewrites. No conditional code. Just a `data-skin` attribute.\n\n\u003Cbr \u002F>\n\n[![oosmetrics](https:\u002F\u002Fapi.oosmetrics.com\u002Fapi\u002Fv1\u002Fbadge\u002Fachievement\u002F41c4272f-b2a8-4c64-8fcb-ca7750603ab9.svg)](https:\u002F\u002Foosmetrics.com\u002Frepo\u002Fbitjaru\u002Fstyleseed)\n![GitHub release](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002Fbitjaru\u002Fstyleseed?style=flat-square)\n![GitHub stars](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fstars\u002Fbitjaru\u002Fstyleseed?style=flat-square)\n![License](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fbitjaru\u002Fstyleseed?style=flat-square)\n\n**Other repos teach LLMs what brands look like. StyleSeed teaches LLMs how designers think.**\u003Cbr \u002F>\nData vs judgment. 69 design rules that Claude Code and Cursor read automatically — so the output stops looking generated and starts looking designed.\n\n\u003Cbr \u002F>\n\n[Get Started](#get-started) · [Engine + Skins](#how-it-works-engine--skins) · [Skills](#11-ai-powered-skills) · [Wiki](..\u002F..\u002Fwiki) · [한국어](README-KR.md)\n\n\u003Cbr \u002F>\n\n\u003C\u002Fdiv>\n\n---\n\n## Who is this for?\n\n- You asked **Claude Code** or **Cursor** to build a dashboard and it came out amateur-looking\n- You're **vibe coding** a SaaS app and don't want to hire a designer\n- You use **shadcn\u002Fui** but the output still feels generic\n- You want **Toss-style** refinement without reverse-engineering it yourself\n- You're building a **Claude Code skill** or **Cursor rules** setup for design\n- You ship fast with AI and need professional UI that doesn't look AI-generated\n\n## Data vs Judgment\n\nEvery \"help LLMs design better\" project solves the wrong half of the problem. They feed the model more **design data** — brand palettes, font specs, shadow tokens, component libraries. I tried that first. Dumped Toss's entire design token JSON into my prompts. The output was still generic.\n\nThen it hit me: **a junior designer with Toss's palette still ships ugly dashboards. A senior designer with only grayscale ships something refined.** The difference isn't what they have. It's what they know to do with it.\n\nDesign data is the paint. Design judgment is knowing where to put it.\n\nStyleSeed is a **design engine** — 69 visual rules, 48 components, and 11 slash commands that teach LLMs the judgment, not just the data:\n\n```\n\"The most refined black isn't #000 — it's #2A2A2A\"\n\"One accent color in the entire app. Everything else grayscale. Restraint is elegance.\"\n\"Shadows at 4% opacity. If you can see it, it's already too much.\"\n\"Numbers and units at 2:1 ratio. 48px number, 24px unit. Always.\"\n\"Never repeat the same section type twice. Alternate tall and compact for rhythm.\"\n\"Card\u002Fbackground separation matters more than any border.\"\n```\n\nNobody writes these down. They're baked into years of experience — invisible to outsiders, invisible to LLMs. StyleSeed writes them down, organizes them into six categories (color discipline, spatial rhythm, information hierarchy, shadow\u002Felevation, component variance, motion\u002Ffeedback), and hands them to Claude as a single markdown file it reads automatically.\n\nThe rules are **brand-agnostic** — they don't reference specific colors, only semantic tokens. Which means the same rulebook works whether your app looks like Toss, Vercel, or your client's weird purple brand. Swap the skin, the judgment carries over.\n\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\"showcase\u002Flight-hero.png\" width=\"260\" alt=\"Light mode\" \u002F>    \u003Cimg src=\"showcase\u002Fdark-hero.png\" width=\"260\" alt=\"Dark mode\" \u002F>\n  \u003Cbr \u002F>\n  \u003Cem>Same engine, different skins. Built with Claude Code. Zero designer.\u003C\u002Fem>\n\u003C\u002Fdiv>\n\n\u003Cdetails>\n\u003Csummary>\u003Cstrong>See full page\u003C\u002Fstrong>\u003C\u002Fsummary>\n\u003Cdiv align=\"center\">\n  \u003Cimg src=\"showcase\u002Flight-full.png\" width=\"260\" alt=\"Light full\" \u002F>    \u003Cimg src=\"showcase\u002Fdark-full.png\" width=\"260\" alt=\"Dark full\" \u002F>\n\u003C\u002Fdiv>\n\u003C\u002Fdetails>\n\n## Works with Claude Design\n\n[Claude Design](https:\u002F\u002Fclaude.ai\u002Fdesign\u002F) generates UI fast — but it still picks `#000` for text, reaches for six accent colors, and floats cards with no background separation. The missing piece isn't more templates. It's the 69 rules that tell the model *when* to use which pattern and *why*.\n\n**StyleSeed + Claude Design together:**\n\n1. Claude Design generates the layout and components (fast scaffolding)\n2. StyleSeed's 69 rules refine the output (design judgment layer)\n3. Brand skins make it look like your brand, not like \"AI made this\"\n\nDrop `DESIGN-LANGUAGE.md` into your Claude Design workflow and the same model produces noticeably more refined output — without changing a single prompt.\n\n## Get Started\n\n### Option 1: Interactive Setup (Recommended)\n\n```bash\n# Copy the engine into your project\ncp -r engine\u002F* your-project\u002F\n\n# Run the setup wizard\n\u002Fss-setup\n```\n\nThe wizard walks you through:\n1. App type (SaaS, e-commerce, fintech...)\n2. Brand color or pick a skin (Toss, Stripe, Linear, Vercel, Notion...)\n3. Or fetch any brand from [awesome-design-md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md) (58+ brands)\n4. Font preference\n5. Generates your first page automatically\n\n### Option 2: Manual Setup\n\n```bash\n# Copy engine (rules, components, skills)\ncp -r engine\u002F* your-project\u002F\n\n# Copy engine css to src\u002Fstyles\ncp -r engine\u002Fcss\u002F* your-project\u002Fsrc\u002Fstyles\u002F\n\n# Pick a skin — copy theme.css alongside other css files\ncp skins\u002Fstripe\u002Ftheme.css your-project\u002Fsrc\u002Fstyles\u002Ftheme.css\n\n# Copy components\ncp -r engine\u002Fcomponents\u002F* your-project\u002Fsrc\u002Fcomponents\u002F\n```\n\n### Option 3: Just give AI the URL\n\n```\nRefer to https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed — read engine\u002FCLAUDE.md \nand engine\u002FDESIGN-LANGUAGE.md, then build a SaaS dashboard.\nUse skins\u002Fstripe\u002Ftheme.css for the color palette.\n```\n\n### Option 4: Cursor\n\n```bash\ncp engine\u002F.cursorrules your-project\u002F.cursorrules\n```\n\n## How It Works: Engine + Skins\n\n```\n┌─────────────────────────────────────────────────┐\n│  StyleSeed Engine (brand-agnostic)              │\n│                                                 │\n│  69 design rules · 48 components · 13 skills    │\n│  Layout · Composition · Typography · UX · A11y  │\n└──────────────────────┬──────────────────────────┘\n                       │\n              Pick a skin ↓\n                       │\n    ┌──────┬──────┬──────┬──────┬──────┬─────────┐\n    │ Toss │Stripe│Linear│Vercel│Notion│ 58 more │\n    │      │      │      │      │      │(awesome)│\n    └──────┴──────┴──────┴──────┴──────┴─────────┘\n```\n\n**Engine** = how your app is structured (design intelligence)\n- 69 visual design rules (layout, composition, rhythm, forbidden patterns)\n- 48 React components (32 primitives + 16 patterns)\n- 11 Claude Code skills (setup, UI, UX, accessibility)\n- Works with ANY color palette\n\n**Skin** = what your app looks like (visual identity)\n- Just a `theme.css` file with color variables\n- 5 built-in skins: Toss, Stripe, Linear, Vercel, Notion\n- 58+ more available from [awesome-design-md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md)\n- Or create your own (change `--brand` and you're done)\n\n### Data vs Judgment — how StyleSeed differs from every other \"design for AI\" repo\n\nMost projects trying to fix AI-generated UI give the model more **data**. StyleSeed gives it **judgment**. They're complementary, not competing:\n\n| | Data repos (e.g. [awesome-design-md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md)) | StyleSeed |\n|---|---|---|\n| **Approach** | Brand palette collection | Design judgment engine |\n| **Teaches the model** | What brands *look like* | How designers *think* |\n| **Provides** | Colors, fonts, shadow values | 69 rules + semantic tokens + executable skills |\n| **Example output** | \"Use this shade of blue\" | \"The refined black isn't #000, it's #2A2A2A\" |\n| **Brand-specific?** | Yes — rules are tied to one brand | No — rules reference semantic tokens, work with any skin |\n| **Components** | None | 48 React components |\n| **AI skills** | None | 11 slash commands (executable rules) |\n| **Scales with new brands** | Re-extract everything | Write one `theme.css`, reuse all rules |\n\n**Data repos** = paint colors.\u003Cbr\u002F>\n**StyleSeed** = the rulebook for where to put the paint.\n\nUse them together: data repos provide the skin, StyleSeed provides the brain.\n\n## Available Skins\n\n| Skin | Style | Source |\n|------|-------|--------|\n| **[toss](skins\u002Ftoss\u002F)** | Korean fintech — purple, minimal, data-focused | Original |\n| **[stripe](skins\u002Fstripe\u002F)** | Professional — indigo, clean, multi-layer shadows | awesome-design-md |\n| **[linear](skins\u002Flinear\u002F)** | Dark-first — violet, minimal, developer-focused | awesome-design-md |\n| **[vercel](skins\u002Fvercel\u002F)** | Monochrome — black & white, geometric | awesome-design-md |\n| **[notion](skins\u002Fnotion\u002F)** | Warm — blue accent, friendly, warm neutrals | awesome-design-md |\n| **[58+ more](skins\u002F_from-awesome-design-md\u002F)** | Any brand from awesome-design-md | Auto-fetch via `\u002Fss-setup` |\n\n## Engine Contents\n\n```\nengine\u002F\n├── CLAUDE.md                 # AI reads this automatically\n├── DESIGN-LANGUAGE.md        # 69 visual design rules (brand-agnostic)\n├── .claude\u002Fskills\u002F           # 13 slash commands (\u002Fss-*)\n│   ├── ss-setup\u002F             #   Interactive setup wizard\n│   ├── ss-page\u002F              #   Scaffold pages\n│   ├── ss-component\u002F         #   Generate components\n│   ├── ss-pattern\u002F           #   Compose layouts\n│   ├── ss-review\u002F            #   Design compliance check\n│   ├── ss-tokens\u002F            #   Manage tokens\n│   ├── ss-a11y\u002F              #   Accessibility audit\n│   ├── ss-lint\u002F              #   Quick violation scan\n│   ├── ss-update\u002F            #   Pull latest engine\n│   ├── ss-flow\u002F              #   Design user flows\n│   ├── ss-audit\u002F             #   UX heuristic evaluation\n│   ├── ss-copy\u002F              #   Generate microcopy\n│   └── ss-feedback\u002F          #   Add loading\u002Ferror\u002Fempty states\n├── components\u002F\n│   ├── ui\u002F                   # 32 primitives (shadcn\u002Fui + motion)\n│   └── patterns\u002F             # 16 dashboard patterns\n├── css\u002F                      # base.css, fonts.css, index.css\n├── tokens\u002F                   # 6 JSON token files\n├── utils\u002F                    # Formatting utilities\n├── icons\u002F                    # Custom SVG icon library\n└── scaffold\u002F                 # Vite 6 + React 18 starter\n```\n\n## 13 AI-Powered Skills\n\n### Setup\n| Skill | What It Does |\n|-------|-------------|\n| `\u002Fss-setup` | **Interactive wizard** — pick skin, brand color, font, generates first page |\n\n### UI — Build It Right\n| Skill | What It Does |\n|-------|-------------|\n| `\u002Fss-component` | Generate components following design conventions |\n| `\u002Fss-page` | Scaffold pages with proper layout structure |\n| `\u002Fss-pattern` | Compose UI patterns (card grid, chart, list) |\n| `\u002Fss-review` | Audit code for design system violations |\n| `\u002Fss-tokens` | View, add, or modify design tokens |\n| `\u002Fss-a11y` | Accessibility audit (WCAG 2.2 AA) |\n| `\u002Fss-lint` | Quick automated lint — catches common violations in seconds |\n| `\u002Fss-update` | Pull latest engine updates — analyzes your project and updates safely |\n\n### UX — Design It Right (No Designer Needed)\n| Skill | What It Does |\n|-------|-------------|\n| `\u002Fss-flow` | Design user flows (progressive disclosure, information pyramid) |\n| `\u002Fss-audit` | Nielsen's 10 usability heuristics evaluation |\n| `\u002Fss-copy` | Generate UX microcopy (buttons, errors, empty states, toasts) |\n| `\u002Fss-feedback` | Add loading\u002Fsuccess\u002Ferror\u002Fempty states to any component |\n\n### Example Workflow\n\n```bash\n\u002Fss-setup                    # Pick skin, configure project\n\u002Fss-page Dashboard           # Scaffold main page\n\u002Fss-copy \"dashboard\"         # Generate all microcopy\n\u002Fss-feedback src\u002FDashboard   # Add loading\u002Ferror states\n\u002Fss-audit src\u002FDashboard      # Check UX quality\n\u002Fss-lint src\u002FDashboard       # Quick violation scan\n\u002Fss-review src\u002FDashboard     # Deep design compliance check\n\u002Fss-update                   # Pull latest engine updates\n```\n\n### Example Prompts\n\n**New project:**\n```\nRefer to https:\u002F\u002Fgithub.com\u002Fbitjaru\u002Fstyleseed — read engine\u002FCLAUDE.md \nand engine\u002FDESIGN-LANGUAGE.md. Use skins\u002Fstripe\u002Ftheme.css for colors.\nBuild a SaaS dashboard with revenue, users, and activity.\n```\n\n**Add a page (engine already in project):**\n```\nFollow CLAUDE.md and DESIGN-LANGUAGE.md rules.\nCreate a settings page with profile, notifications, and danger zone.\nRun \u002Fss-review when done.\n```\n\n**Improve existing page:**\n```\nRefactor src\u002FDashboard.tsx to follow DESIGN-LANGUAGE.md.\nCheck visual rhythm (rule 61) and KPI variation (rule 62).\n```\n\n**Update engine:**\n```\n\u002Fss-update\n```\n\n## Example Design Rules\n\nThese are the kind of rules that make AI output look professional:\n\n```\nRule: The most refined black isn't #000 — it's #2A2A2A.\n      5-level grayscale: #2A → #3C → #6A → #7A → #9B\n\nRule: All content lives inside cards. Never on page background.\n      Card (#FFF) vs background (#FAFAFA) contrast IS the separator.\n\nRule: Never repeat the same section type consecutively.\n      Hero → Grid → Chart → Carousel → List (visual rhythm)\n\nRule: KPI cards must vary: 2 with trend arrows, 1 with progress bar,\n      1 with comparison text. Never 4 identical cards.\n\nRule: Information density increases as you scroll down.\n      Top: 48px (one number) → Bottom: 14px (detailed lists)\n```\n\n69 rules total. [See the full design language →](engine\u002FDESIGN-LANGUAGE.md)\n\n## Tech Stack\n\nReact 18 · TypeScript · Tailwind CSS v4 · Radix UI · Vite 6 · Lucide Icons · CVA\n\n## StyleSeed vs. the alternatives\n\n| | StyleSeed | shadcn\u002Fui | Tailwind UI | Material UI | Generic AI output |\n|---|---|---|---|---|---|\n| Components | ✅ 48 | ✅ 50+ | ✅ | ✅ | ❌ |\n| Design **judgment** (when to use what) | ✅ 69 rules | ❌ | ❌ | Partial | ❌ |\n| Claude Code \u002F Cursor integration | ✅ 11 skills | ❌ | ❌ | ❌ | — |\n| Brand skins (Toss, Stripe, Linear...) | ✅ | ❌ | ❌ | ❌ | ❌ |\n| Price | Free (MIT) | Free | $299+ | Free | — |\n| Works *with* AI coding tools | ✅ | Indirect | Indirect | Indirect | — |\n\n**TL;DR:** shadcn\u002Fui gives you components. Tailwind UI gives you templates. StyleSeed gives you the *design judgment* that makes AI output stop looking like AI output.\n\n## FAQ\n\n**Q: Why does Claude Code \u002F Cursor generate ugly UI?**\nBecause LLMs optimize for functional correctness, not visual refinement. They'll pick `#000` for text, `py-4` for spacing, `text-xl` for everything — all technically valid, all amateur. StyleSeed gives them the rules professional designers use.\n\n**Q: Is this a shadcn\u002Fui replacement?**\nNo — it's built *on top of* shadcn\u002Fui patterns. StyleSeed components use the same Radix primitives and CVA conventions. Think of it as shadcn\u002Fui + design judgment + AI-tool integration.\n\n**Q: Does it work with Cursor too?**\nYes. The 69 design rules live in a `.cursorrules` file and `CLAUDE.md`. Cursor reads them automatically.\n\n**Q: How is this different from awesome-design-md?**\nawesome-design-md gives you brand DESIGN.md files (what). StyleSeed gives you the engine that turns any brand into a working app (how). They pair well.\n\n**Q: Can I use it for a non-fintech app?**\nYes. The engine is brand-agnostic. Pick any skin, swap the brand color, ship.\n\n## Documentation\n\nFull docs in the **[Wiki](..\u002F..\u002Fwiki)** — design rules reference, composition recipes, chart guides, skills reference.\n\n## Contributing\n\n### Create a New Skin\n\nJust a `theme.css` + `skin.json`:\n```bash\nmkdir skins\u002Fyour-brand\n# Copy any existing skin as starting point\ncp skins\u002Ftoss\u002Ftheme.css skins\u002Fyour-brand\u002Ftheme.css\n# Change the --brand color and other values\n```\n\n### Improve the Engine\n\nBetter rules → better AI output:\n- More specific design rules\n- New pattern components\n- Accessibility improvements\n- New AI skills\n\nSee [CONTRIBUTING.md](CONTRIBUTING.md) for details.\n\n## Updating\n\nAlready using StyleSeed? Quick update (always safe):\n\n```bash\n# Pull latest\ncd styleseed && git pull\n\n# Update design rules + skills (safe — no project-specific content)\ncp styleseed\u002Fengine\u002FDESIGN-LANGUAGE.md your-project\u002F.claude\u002FDESIGN-LANGUAGE.md\ncp -r styleseed\u002Fengine\u002F.claude\u002Fskills\u002F your-project\u002F.claude\u002Fskills\u002F\n```\n\n**Don't overwrite:** your `theme.css` (brand colors), `CLAUDE.md` (if project-specific), or customized components.\n\nFull guide: [engine\u002FUPDATE.md](engine\u002FUPDATE.md)\n\n**Get notified:** Click **Watch** → **Custom** → **Releases** on this repo.\n\n## License\n\n[MIT](LICENSE)\n\n## Acknowledgments\n\n- Design language inspired by [Toss](https:\u002F\u002Ftoss.im\u002Fdesign-system)\n- Components based on [shadcn\u002Fui](https:\u002F\u002Fui.shadcn.com\u002F)\n- Brand skins sourced from [awesome-design-md](https:\u002F\u002Fgithub.com\u002FVoltAgent\u002Fawesome-design-md)\n- UX principles from [Laws of UX](https:\u002F\u002Flawsofux.com\u002F) and [Nielsen Norman Group](https:\u002F\u002Fwww.nngroup.com\u002F)\n","styleseed 是一个专为 Claude Code 和 Cursor 设计的系统，旨在通过69条设计规则、48个shadcn组件以及多种品牌皮肤（如Toss、Stripe等）来提升AI生成UI的设计感。它基于Tailwind CSS v4和Radix UI构建，使用TypeScript编写，能够帮助开发者轻松地在不同品牌风格之间切换界面样式，而无需重写代码或添加条件判断，只需简单设置`data-skin`属性即可实现。此项目特别适用于需要快速开发专业外观SaaS应用但又不想雇佣设计师的场景，或是希望利用AI工具产出高质量UI设计而不显得过于机械化的情况。",2,"2026-06-11 02:41:52","CREATED_QUERY"]