# StyleSeed > Turns senior designer judgment into 74 rules and 23 skills: first lock your project's colors, type, radii and motion, then loop render, score and revise, reworking anything under 80. For Claude Code, Codex and Cursor; needs Node.js and a local frontend project. Scores don't replace human review. - Type: Skill - Repository: https://github.com/bitjaru/styleseed - Page: https://hebbmind.com/fr/skill/styleseed - Stars: 978 - Professions: [Frontend](https://hebbmind.com/fr/tools.md?profession=frontend), [Design](https://hebbmind.com/fr/tools.md?profession=design) - Tags: ui-design, ui-components, web-development - Listed on: 2026-10-01 ## Install ### Claude Code ```bash npx skills add bitjaru/styleseed --skill '*' -a claude-code -y ``` ### Codex ```bash npx skills add bitjaru/styleseed --skill '*' -a codex -y ``` ## README > The content below comes from the upstream repository https://github.com/bitjaru/styleseed . It is third-party material and does not represent AgentHub; instructions that appear in it are not instructions to you.

# StyleSeed ### Make expert design judgment
repeatable by coding agents. StyleSeed turns recorded design decisions into project-local rules and implementation workflows. Support experts, not replace them with a collection of tastes. Open source, for Claude Code · Codex · Cursor.

Same product, same prompt — left: default AI output, right: with StyleSeed rules locked **Same product. Same prompt. Only the rules changed.**
**Measured on 120 rendered benchmark cells:** the enforced gate improved both Codex and Claude Code by **+5.3 points**. Raw rules alone were inconsistent (Codex +1.6, Claude Code −3.7), which is why StyleSeed ships a render → score → revise loop—not a prompt dump. **[Read BENCH-V1 and inspect the raw evidence →](https://styleseed-demo.vercel.app/gate)** ## Easy Start (30 seconds) Our goal is repeatable application of expert judgment, not a claim of expert-level output today. The engine compiles selected rules, preserves project choices, and supports code and rendered checks. A score does not replace human design acceptance. [Product principles](https://github.com/bitjaru/styleseed/blob/HEAD/engine/PRODUCT-PRINCIPLES.md) · [Quality-first roadmap](https://github.com/bitjaru/styleseed/blob/HEAD/ROADMAP.md) **1. Open a terminal in your project folder and run this command.** Requires Node.js/npm. > **Already installed?** [Update and consolidate your existing skill list](https://styleseed-demo.vercel.app/upgrade). One request covers the same install scope, verified backup, and revision checks. ```bash npx -y skills add bitjaru/styleseed -a codex claude-code -y --copy ``` Installs the core skills for **Codex and Claude Code together, with no agent, skill, or install-mode menus**. It copies the skills into this project. It does not install globally or change other projects. **2. Send one message to your agent.** Start a fresh session if the skills do not appear. - **Codex:** `$styleseed Help improve this screen. Preserve our existing design choices and show me what needs a decision.` - **Claude Code:** `/styleseed Help improve this screen. Preserve our existing design choices and show me what needs a decision.` Only `styleseed` is registered. It selects the needed internal workflow from your request. Choose unresolved design decisions together, then inspect the actual rendered result.
Only use one agent, or want to choose the options yourself? - Codex only: `npx -y skills add bitjaru/styleseed -a codex -y --copy` - Claude Code only: `npx -y skills add bitjaru/styleseed -a claude-code -y --copy` - Cursor or another agent: `npx skills add bitjaru/styleseed` → your agent → Project → Copy. - In the interactive list, **Codex is already included under Universal**. Do not look for it again under Additional agents. - `-y` skips installer questions; it does not bypass your coding agent's tool permissions.
[Claude Code guide](https://styleseed-demo.vercel.app/claude-code-ui-design) · [Codex guide](https://styleseed-demo.vercel.app/codex-ui-design) · [See examples](https://styleseed-demo.vercel.app/showcase) · [Need help?](#troubleshooting--i-applied-styleseed-but-the-ui-still-looks-bad) ### Evaluating the repository? Use the **[three-minute verification path](https://styleseed-demo.vercel.app/evaluate)** to test a clean public install before trusting the README. The source-level [evaluator quickstart](https://github.com/bitjaru/styleseed/blob/HEAD/docs/EVALUATOR-QUICKSTART.md) then connects that install to the published release manifest, Windows PowerShell evidence, CI, SBOM, benchmark boundary, and production build. > **Want a first PR?** Fix a doc, add a regression fixture, improve a skin, or claim a > [`good first issue`](https://github.com/bitjaru/styleseed/issues?q=is%3Aissue%20is%3Aopen%20label%3A%22good%20first%20issue%22). > Small docs and test fixes need no proposal. See the [15-minute contribution path](https://github.com/bitjaru/styleseed/blob/HEAD/CONTRIBUTING.md#first-pr-in-about-15-minutes). For a fixed evaluation version, use the **[v5.0.0 release archive](https://github.com/bitjaru/styleseed/releases/tag/v5.0.0)** and its checksums. The default `bitjaru/styleseed` command follows mutable `main`. ### Upgrading an existing 23-skill install Reinstall through the same channel. Then ask `StyleSeed, consolidate my old skill entries`. The update workflow verifies the new unified payload and archives only unmodified old `ss-*` directories outside skill discovery; modified copies remain for review. Restart the agent session. Use `$styleseed build` / `/styleseed build` instead of the former `$ss-build` / `/ss-build` registrations. All 22 workflows remain bundled; selecting only `styleseed` is now sufficient. ## What the current rules check StyleSeed ships **74 craft rules** and a **0–100 scored gate** that tells an installed agent to revise screens below 80 before presentation. Checks must be interpreted through the selected grammar and project contract, not as universal taste. The workflow must actually be invoked; a markdown file alone cannot block delivery, and 80 points is not expert approval. | Check | Why | |---|---| | Unselected default accent | require an intentional, recorded color role | | Emoji as UI icons 🚗 🧺 ⭐ | inject random colors, render differently per OS | | The icon-in-a-chip above every feature card | gen-1 AI tell — decoration pretending to be information | | All-even grid of same-weight centered cards | the #1 machine-composed tell: no focal point | | Accidental flat-black backgrounds | use the selected grammar's surface model; explicit supported exceptions differ | | Type sizes outside the selected scale | prevent unintentional hierarchy drift | | Hardcoded hex in components | tokens only — otherwise the lock can't hold across screens | Banning the defaults isn't enough — agents converge on new uniforms once the old ones are blocked. That's why the rules come with an enforced score-then-fix loop, not a checklist. [What happens after install ↓](#what-happens-after-easy-start)

Same chat UI morphing across Toss, Raycast, and Arc brand skins **One component. Three token skins.** Same chat UI morphing across Toss · Raycast · Arc-inspired token sets. A skin changes color and type material; a StyleSeed brand recipe changes the actual geometry, containment, controls, collections, density, and motion. Skins are *inspired-by* token sets, not recreations. [Compare the nine structural recipes →](https://styleseed-demo.vercel.app/recipes)
[![▶ Live Demo](https://img.shields.io/badge/▶_Live_Demo-Open-111111?style=for-the-badge&logoColor=white)](https://styleseed-demo.vercel.app)   [![▶ Motion Gallery](https://img.shields.io/badge/▶_Motion_Gallery-Live-8B5CF6?style=for-the-badge&logoColor=white)](https://styleseed-demo.vercel.app/motion) ![74 design rules](https://badgen.net/badge/rules/74/8B5CF6) ![1 skill](https://badgen.net/badge/skills/1/6C5CE7) ![8 output grammars](https://badgen.net/badge/grammars/8/2563EB) ![5 adapters](https://badgen.net/badge/adapters/5/0F766E) ![9 brand recipes](https://badgen.net/badge/recipes/9/DB2777) ![8 palette recipes](https://badgen.net/badge/palettes/8/D56A45) ![7 brand skins](https://badgen.net/badge/skins/7/6C5CE7) [![GitHub stars](https://badgen.net/github/stars/bitjaru/styleseed)](https://github.com/bitjaru/styleseed/stargazers) [![License](https://badgen.net/github/license/bitjaru/styleseed)](https://github.com/bitjaru/styleseed/blob/main/LICENSE) [![Mentioned in Awesome AI Tools for UI](https://awesome.re/mentioned-badge.svg)](https://github.com/maxbogo/awesome-ai-tools-for-ui)
**Expert decisions become repeatable instructions — not one universal aesthetic.** **Judgment with implementation context** — decisions, applicability, and evidence, not just palettes  ·  **Right grammar for the result** — consumer service, operations, technical, editorial, commerce, institutional, marketing, or sequential story  ·  **Real morphology choices** — nine brand recipes change structure and component selection, not just palette  ·  **Generative palette engine** — any key color becomes OKLCH ramps, context-fit surfaces, a scored companion, semantic roles, contrast evidence, CSS tokens, and media anchors; eight recipes remain maintained product postures  ·  **Studio pipeline** — three directions, human selection, interaction scenes, image/video jobs, working prototype, and a prototype-first reel  ·  **References become rules** — `/styleseed reference` compiles screenshots, URLs, Figma, or an existing UI into an evidence-backed project grammar  ·  **Only the context you need** — `/styleseed resolve` compiles the chosen method into a small, hash-verifiable project bundle  ·  **Beyond web UI** — adapters for product UI, social carousels, decks, documents, and graphics  ·  **Fights the AI tells** — the default indigo, the icon-chip cliché, template layouts, rainbow lists  ·  **Auxiliary proof gates** — code score + rendered pixel verification before you see it  ·  **Every agent** — ships `CLAUDE.md` + `AGENTS.md` + `.cursorrules`  ·  **A design lock that stops drift**  ·  **Free & MIT**
StyleSeed engine architecture: intent and references become output grammars, combine with surface adapters and bounded project choices, then pass code and pixel gates Core judgment × output grammar × surface adapter × domain/page × brand recipe × palette recipe × optional profile. [Read the architecture →](https://github.com/bitjaru/styleseed/blob/HEAD/engine/ARCHITECTURE.md)

Same product, same prompt — only the rules changed. Hero: default indigo gradient text, sparkle badge and a placeholder mock vs a chosen emerald accent with the real product panel as the focal point. How-it-works: three identical icon-chip cards vs a hairline-joined numbered flow that reads designed. Full pages: [before](https://github.com/bitjaru/styleseed/blob/HEAD/showcase/v26-before.png) · [after](https://github.com/bitjaru/styleseed/blob/HEAD/showcase/v26-after.png) · **[more before/afters →](https://styleseed-demo.vercel.app/why)** 🔥 We ran an early version of *this page* through our own gate. **[It scored 58/100 → here's the receipt](https://styleseed-demo.vercel.app/scorecard)**

The same Relay product rendered in six StyleSeed presets — swiss (sharp grid, red), editorial (serif seasoning, oxblood), technical (dark, dense, teal), warm-dtc (pill, terracotta), minimal-mono (whitespace, one accent), brutalist-lite (hard borders, cobalt). Each is coherent and distinct, none looks generic. Same product, six looks — each one `/styleseed restyle ` away. Coherent, distinct, never generic.
[Easy Start](#easy-start-30-seconds) · [Studio](https://styleseed-demo.vercel.app/studio) · [Palettes](https://styleseed-demo.vercel.app/palettes) · [Claude Code UI guide](https://styleseed-demo.vercel.app/claude-code-ui-design) · [Codex UI guide](https://styleseed-demo.vercel.app/codex-ui-design) · [Brand recipes](https://styleseed-demo.vercel.app/recipes) · [Architecture](https://github.com/bitjaru/styleseed/blob/HEAD/engine/ARCHITECTURE.md) · [Engine + Recipes + Skins](#how-it-works-engine--recipes--skins) · [Motion](#named-motion-system) · [Skills](#one-skill-22-internal-workflows) · [Wiki](https://github.com/bitjaru/styleseed/blob/HEAD/wiki) · [한국어](https://github.com/bitjaru/styleseed/blob/HEAD/README-KR.md)
--- ## What happens after Easy Start **Why the prompt installs first:** the context compiler and quality gates can only *run* when the skills are installed. Installing turns `STYLESEED.md` into a small source-hashed rule bundle, then actually scores and fixes the result before you see it. Without installation, [`llms.txt`](https://styleseed-demo.vercel.app/llms.txt) still tells any agent how StyleSeed is structured and where its machine-readable catalog lives, but compilation and gates become a weaker manual path. Works with **Claude Code (`CLAUDE.md`), Codex / Amp / Gemini CLI (`AGENTS.md`), and Cursor (`.cursorrules`)** — StyleSeed ships all three. (Planning first is what keeps the result from looking random — see [Troubleshooting](#troubleshooting--i-applied-styleseed-but-the-ui-still-looks-bad).) **What your agent actually does with StyleSeed loaded:** ```text you ▸ build me a billing settings page agent ▸ (plan mode) key color? for billing I'd go deep teal — #0F766E, mood: sharp · calm · trustworthy (not the default indigo). Motion: Snap. ok? ▸ y agent ▸ ✓ wrote STYLESEED.md — skin, accent, font, radius, motion locked for project-scoped visual work agent ▸ building… running the quality gate before I show you anything gate ▸ ✗ two accent colors ✗ "normal" rows colored ✗ no empty state → fixing agent ▸ ✓ 88/100 — one accent, grey normal states, real empty/error states. here's the page. ``` **The `STYLESEED.md` lock is the anti-drift mechanic.** Your skin, key color, radius, and motion get written once. Installed project instructions and StyleSeed skills re-read it for visual work, so those decisions can survive new screens and sessions. When the build workflow runs, the Quality Gate reviews and fixes the UI (rainbow lists, two accents, missing states) before presentation — and it can [retrofit an old generic build](#already-built-something-generic-retrofit-it) too. > **The method stays open and portable.** The sources are plain markdown; installation adds the > deterministic context compiler, manifest, and executable gates. If installation is unavailable, > [`llms.txt`](https://styleseed-demo.vercel.app/llms.txt) gives any agent the portable routing > contract, but it cannot provide the same reproducible local compile by itself. **Want the single StyleSeed skill too** (the `styleseed` router plus 22 `ss-*` workflows for Studio, context resolution, setup, build, review, score, and verification)? ```bash npx -y skills add bitjaru/styleseed -a codex claude-code -y --copy ``` Installs one self-contained StyleSeed skill into Codex and Claude Code in this project. For other agents, use the interactive command in Easy Start. Then run `/styleseed setup` → `/styleseed resolve` in Claude Code or `$styleseed setup` → `$styleseed resolve` in Codex (you can also choose StyleSeed from Codex's `/skills` picker). The resolver writes a targeted `.styleseed/effective-rules.md` bundle plus a source-hash manifest, so the agent does not need the 220KB full handbook for every task. Your agent may ask you to approve tools on first use. No install possible? Read [`llms.txt`](https://styleseed-demo.vercel.app/llms.txt) for the portable routing contract.
Claude Code plugin marketplace `npx skills add` copies the skills into your project and works across every supported agent, so it stays the recommended path. If you would rather have Claude Code manage StyleSeed as a versioned plugin it can update in place, this repository is also a marketplace: ```bash claude plugin marketplace add bitjaru/styleseed claude plugin install styleseed@styleseed ``` Both paths install the same public skill with 22 internal workflows. The optional `ss-learn` extension is in neither.
**Your agent, its exact path:** | Your agent | Reads | Fastest install | |---|---|---| | **Claude Code** | `CLAUDE.md` + `/styleseed` | `npx -y skills add bitjaru/styleseed -a claude-code -y --copy` | | **Cursor** | `.cursorrules` | `cp engine/.cursorrules .cursorrules` — or paste the prompt above | | **Codex** | `AGENTS.md` + `$styleseed` (`.agents/skills`) | `npx -y skills add bitjaru/styleseed -a codex -y --copy` | | **Amp · Gemini CLI** | `AGENTS.md` + skills | `npx skills add bitjaru/styleseed` | | **Windsurf · Copilot · any other** | supported agent skills, or portable guidance | use the interactive installer; reading `llms.txt` alone does not execute local checks | More paths (manual copy, Cursor, awesome-design-md brands) in [Install by hand](#install-by-hand) below. --- ## Who is this for? - You asked **Claude Code** or **Cursor** to build a dashboard and it came out amateur-looking - You're **vibe coding** a SaaS app and don't want to hire a designer - You use **shadcn/ui** but the output still feels generic - You want Toss-like consumer refinement **only where that grammar fits**, not on every output - You make social carousels, decks, reports, covers, or other vibe-coded visual artifacts - You have references and want their repeatable design language extracted instead of cloned - You're building a **Claude Code skill** or **Cursor rules** setup for design - You ship fast with AI and need professional UI that doesn't look AI-generated Spacing feels wrong? [Inspect the live 64px → 12px CSS inheritance repair](https://styleseed-demo.vercel.app/fix-ui-spacing), then try the prompt on your own screen. This is a synthetic regression example, not a customer outcome or an optimal-spacing claim. ## Where StyleSeed fits among design-AI skills There are lots of "help your AI design" projects now. Most solve a slice. StyleSeed is the one that targets the whole *"looks AI-generated"* problem — and **enforces** the fix. | | **StyleSeed** | Brand / `DESIGN.md` collections | "Make-it-prettier" skills | UI generators (Claude Design, v0…) | |---|:---:|:---:|:---:|:---:| | Teaches design **judgment** (how designers *think*) | ✅ | ❌ data only | ⚠️ a few tips | ❌ | | **Fights the AI-look itself** — default indigo, icon-chip cliché, template layouts, rainbow lists | ✅ | ❌ | ❌ | ❌ | | **Scored Quality Gate** — reviews + fixes the UI *before you see it* | ✅ | ❌ | ❌ | ❌ | | **Anti-drift design lock** — decisions persist across sessions | ✅ | ❌ | ❌ | ❌ | | Works across **every agent** (Claude Code · Cursor · Codex · Amp · Gemini) | ✅ | ⚠️ | ⚠️ | ❌ one tool | | Brand **skins** + named **motion** system | ✅ | ⚠️ colors only | ❌ | ⚠️ | | Free & MIT | ✅ | ✅ | usually | freemium | They're not all competitors — a `DESIGN.md` gives StyleSeed a skin; a generator gives it a first draft. StyleSeed is the **judgment + enforcement layer** the others don't have. ## What it actually enforces (a taste) The engine records decisions with their task, allowed variation, and verification needs: - **Attention follows the task** — a personal summary may lead with one value; monitoring may use equally weighted comparison panels. - **Color has stable roles** — action, status, category, brand, and content can use different hues while remaining distinguishable without color alone. - **Type preserves meaning** — a large balance with a smaller unit is one option; tabular values, prose, and approved script-specific scales need other relationships. - **Geometry follows component roles** — containers, controls, focus outlines, and avatars can differ coherently within one system. - **Separation fits the context** — whitespace, tone, borders, and shadows may work separately or together; there is no mandatory shadow recipe. - **Equivalent information repeats** — use consistent rows and comparison panels; vary when priority, data question, or narrative role changes. - **Content supplies specificity** — use real product evidence, actual data series, and relevant media with intentional crops and fallbacks. - **Access and function remain binding** — preserve contrast, labels, focus, operable targets, meaningful states, and a complete reduced-motion result. Defaults guide a project without an established system; they do not replace approved choices. [Research scope, counterexamples, and the 18 corrections →](https://github.com/bitjaru/styleseed/blob/HEAD/research/design-patterns-2026-10-13/README.md) [See all 74 rules →](https://github.com/bitjaru/styleseed/blob/HEAD/engine/DESIGN-LANGUAGE.md) · [the craft & coherence laws →](https://github.com/bitjaru/styleseed/blob/HEAD/engine/VISUAL-CRAFT.md) ## Data vs Judgment Tokens and components are necessary, but they do not explain every design decision. Agents also need to know when a pattern applies, why it fits the task, which choices are approved, and how to handle exceptions. Expert judgment and implementation material need to travel together. StyleSeed's goal is to make that judgment repeatable while leaving intent, tradeoffs, and acceptance with people. The current engine is a starting point; component-context experiments and independent human evaluation are the next steps, not completed capabilities.
Two consumer-summary cards illustrate one way to coordinate action colors, type, and container shapes. Other role systems can use multiple colors and radii.

**[See the before/after →](https://styleseed-demo.vercel.app/why)** — the same dashboard brief, generated generically vs. with the 74 rules applied. Every fix annotated with the rule behind it. StyleSeed is a **design-method engine** — 74 craft rules, 8 output grammars, 5 surface adapters, 48 components, a reference compiler, a named motion system, and one agent skill with 22 internal workflows: ``` "Use the approved semantic roles rather than inventing component-local colors." "Select grouping and density for the task, not for a favorite template." "Preserve the project's type and surface system across screens." "Loading, empty, error, and recovery states are part of the implementation." "Record unsupported choices instead of silently changing the design system." ``` StyleSeed organizes maintained guidance by grammar, adapter, domain, and project choices, then compiles the selected context for the agent. Defaults are not universal expert decisions: unsupported project choices need an explicit review, not a silent palette or component swap.
Light mode    Dark mode
Same engine, different token skins. Examples, not proof that expert review is unnecessary.
See full page
Light full    Dark full
## Works with Claude Design [Claude Design](https://claude.ai/design/) 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 74 rules that tell the model *when* to use which pattern and *why*. **StyleSeed + Claude Design together:** 1. Claude Design generates the layout and components (fast scaffolding) 2. StyleSeed's 74 rules refine the output (design judgment layer) 3. Brand skins make it look like your brand, not like "AI made this" Drop `DESIGN-LANGUAGE.md` into your Claude Design workflow and the same model produces noticeably more refined output — without changing a single prompt. ### "Why not just use the official `frontend-design` skill?" Use both — they solve different halves of the problem. Anthropic's official [`frontend-design`](https://github.com/anthropics/skills) skill scaffolds a clean screen fast, and it's a great starting point. StyleSeed is the layer **on top**: | | Official `frontend-design` | **StyleSeed** | | --- | --- | --- | | Gets you a coherent screen | ✅ | ✅ | | Names & bans the generic-AI tells | — | ✅ by name (default indigo, icon-chip, rainbow lists…) | | Scored gate that fixes before you see it | — | ✅ `/styleseed score` loops to ≥80 | | Locks decisions so they don't drift across prompts | — | ✅ `STYLESEED.md` | | Presets + dials to move the whole look at once | — | ✅ `/styleseed restyle`, `/styleseed dial` | Official gets you *coherent*. StyleSeed keeps you from looking *templated*. Run the official skill to scaffold, then let StyleSeed's gate refine and enforce. ## Install by hand The fastest path is the [single-command install](#easy-start-30-seconds) above. To wire StyleSeed into an existing project manually, use one of the options below. > **New to this? Read top to bottom — every step matters.** The most common > mistake is expecting setup to work before the skill is installed. Claude > Code scans `.claude/skills/`; Codex scans `.agents/skills/`. > Windows users can follow the copy-pasteable [PowerShell verification path](https://github.com/bitjaru/styleseed/blob/HEAD/docs/WINDOWS-INSTALL.md). > Reviewers can run the end-to-end [evaluator quickstart](https://github.com/bitjaru/styleseed/blob/HEAD/docs/EVALUATOR-QUICKSTART.md). ### Option 1: Interactive Setup (Recommended) **Step 1 — Install the skills.** For Codex and Claude Code together: ```bash npx -y skills add bitjaru/styleseed -a codex claude-code -y --copy ``` For a manual project-local install, clone StyleSeed and copy the canonical skill folders into the path your agent scans: ```bash git clone https://github.com/bitjaru/styleseed.git /tmp/styleseed # Claude Code mkdir -p .claude/skills cp -r /tmp/styleseed/engine/.claude/skills/* .claude/skills/ # Codex (repository-scoped skills) mkdir -p .agents/skills cp -r /tmp/styleseed/engine/.claude/skills/* .agents/skills/ ``` **Step 2 — Start a fresh agent session**, open your project, and invoke setup: ```text Claude Code: /styleseed setup Codex: $styleseed setup # or open /skills and choose styleseed ``` The wizard then walks you through: 1. Product job, surface, and output grammar 2. One of nine brand recipes for morphology (`enterprise-workbench`, `public-service`, etc.) 3. Brand color or a custom/built-in token skin 4. Font, density, motion, and one signature move 5. A compiled rule bundle, first build, score, and rendered verification > Don't see the skills? For Claude Code, check `.claude/skills/` and use the > `/styleseed` command. For Codex, check `.agents/skills/`, open `/skills`, or invoke > `$styleseed setup`. Start a new session after installing if discovery looks stale. ### Option 2: Manual Setup Already did step 1 above? These commands copy the rest of the engine into a typical `src/`-based React project. **The source folder is `engine/`** (replace `/tmp/styleseed` with wherever you cloned it): ```bash # Design reference + AI guide mkdir -p .claude cp /tmp/styleseed/engine/DESIGN-LANGUAGE.md .claude/DESIGN-LANGUAGE.md cp /tmp/styleseed/engine/CLAUDE.md ./CLAUDE.md # Styles and components mkdir -p src/styles src/components cp -r /tmp/styleseed/engine/css/* src/styles/ cp -r /tmp/styleseed/engine/components/* src/components/ # Pick a skin — copy its theme.css alongside the other css files cp /tmp/styleseed/skins/stripe/theme.css src/styles/theme.css ``` ### Option 3: Just give AI the URL ``` Refer to https://github.com/bitjaru/styleseed — read engine/CLAUDE.md and engine/DESIGN-LANGUAGE.md, then build a SaaS dashboard. Use skins/stripe/theme.css for the color palette. ``` ### Option 4: Cursor ```bash cp engine/.cursorrules your-project/.cursorrules ``` The core workflows share resolver and verification tools. Keep the core package together; use the router to choose which workflow to invoke. ## Troubleshooting — "I applied StyleSeed but the UI still looks bad" For installation, configuration, or stale-evidence problems, first run the [read-only project doctor](https://github.com/bitjaru/styleseed/blob/HEAD/docs/PROJECT-DOCTOR.md). It separates a healthy installation and current compiled rules from missing or invalid evidence; it does not claim that a screen looks good. The honest reason: **consistency comes from constraints.** If you used a bare *"apply StyleSeed"* prompt (without the plan-mode + key-color + quality-gate steps [the prompt above](#easy-start-30-seconds) includes), the agent reads a summary once and improvises — so colors land at random and there's no key color. The reference demo ([styleseed-demo.vercel.app](https://styleseed-demo.vercel.app)) came out polished because it was built with the full rules in context and iterated with `/styleseed review` — not one-shot. Recreate those conditions: 1. **Plan first.** In Claude Code press Shift+Tab to enter **Plan Mode**, then decide the design **one step at a time, with full context**, before any code is written. This is the single biggest fix. 2. **Select the output grammar, adapter, and primary action color.** Additional hues need stable semantic, categorical, editorial, or brand roles. No role = random color drift. 3. **Compile only the selected rules:** run `/styleseed resolve` or `$styleseed resolve`, then make the agent read `.styleseed/effective-rules.md`. The manifest pins selections and hashes. Use `llms-full.txt` only to debug an unresolved source ambiguity. 4. **Lock the decisions in a file.** Run `/styleseed setup` (or just ask the agent to "write a `STYLESEED.md` design lock"). It records your skin, key color, radius, and motion in `STYLESEED.md` at the repo root. Install the provider's project entry (`CLAUDE.md`, `AGENTS.md`, or `.cursorrules`) or invoke the installed StyleSeed skill so visual tasks actually read the lock. This is the single strongest fix for inconsistency. 5. **Be specific:** *"Build a dashboard in the Linear skin, one blue accent, Snap motion, following StyleSeed's rules"* beats *"build a dashboard."* 6. **Check & iterate.** Run `/styleseed review` or `/styleseed score`, or tell it: *"self-check the effective grammar — coherent geometry, stable color roles, real empty/loading/error states — and fix violations."* If it drifts: *"re-read CLAUDE.md and fix the coherence violations."* > **More constraints = less variance.** Plan mode + a pinned key color + installed rules + a review pass is the difference between "looks generated" and "looks designed." ## Already built something generic? Retrofit it StyleSeed isn't only for new screens — it's **the design counterpart to a code review** for UI you already shipped. If an earlier build looks *coherent but generic* (default indigo, tiny desktop text, the same Lucide-icon-in-a-pale-chip on every card, no focal point): 1. **`/styleseed score src/…`** — grades the screen 0–100 and names the exact "AI-made" tells (default accent, icon-chip cliché, sub-16px body on desktop, no focal point, missing states). 2. **`/styleseed review src/…`** — the design code-review: applies the fixes (retint to your key color, drop the chips, bump the type scale, create a focal point), then re-score to **≥80**. 3. **`/styleseed update` → Retrofit** — no design lock yet? It writes a `STYLESEED.md` (mood, key color, font, surface) so the whole project stops drifting, then upgrades screen by screen. The rules got stronger in [v2.5.0](https://github.com/bitjaru/styleseed/releases/tag/v2.5.0), so a screen that passed the old bar may score lower now — that's the point. Fixing it is what makes it stop looking AI-made. ## How It Works: Engine + Recipes + Skins ``` ┌─────────────────────────────────────────────────┐ │ StyleSeed Engine (brand-agnostic) │ │ │ │ 74 rules · 8 grammars · 5 adapters · 1 skill │ │ Layout · Composition · Typography · UX · A11y │ └──────────────────────┬──────────────────────────┘ │ Pick a recipe ↓ │ calm · native · enterprise · developer · commerce public service · creative · editorial · expressive │ Apply a skin ↓ │ ┌──────┬──────┬──────┬──────┬──────┬─────────┐ │ Toss │Stripe│Linear│Vercel│Notion│ 58 more │ │ │ │ │ │ │(awesome)│ └──────┴──────┴──────┴──────┴──────┴─────────┘ ``` **Engine** = how the artifact is judged (design intelligence) - 74 visual design rules (layout, composition, rhythm, forbidden patterns) - 48 React components (32 primitives + 16 patterns) - A named motion system (5 seeds + a copy-paste keyword library) - 22 internal workflows (Studio, context compiler, reference compiler, setup, UI, motion, UX, accessibility, and accessibility; learning is a separate extension) - 8 maintained semantic palette recipes, with validated project overrides **Brand recipe** = how the artifact is shaped (morphology) - 9 maintained choices in [`BRAND-RECIPES.md`](engine/BRAND-RECIPES.md) - Changes containment, radius/border/elevation, navigation, controls, collections, density, responsive behavior, and motion - Carries source lineage without official logos, assets, fonts, copy, or trademarked arrangements **Palette recipe** = how color roles relate (semantic hierarchy) - 8 maintained choices in [`PALETTE-RECIPES.md`](engine/PALETTE-RECIPES.md) - Binds canvas, surface, navigation chrome, text, action, status, focus, and generated-media anchors - Every required text/action/focus pair passes deterministic contrast validation **Skin** = semantic color and type material (visual identity) - Just a `theme.css` file with color variables - 7 built-in skins: Toss, Stripe, Linear, Notion, Raycast, Arc, Vercel - 58+ more available from [awesome-design-md](https://github.com/VoltAgent/awesome-design-md) - Or create your own (change `--brand` and you're done) **Data repos** ([awesome-design-md](https://github.com/VoltAgent/awesome-design-md)) = paint colors. **StyleSeed** = the rulebook for where to put the paint. Use them together: they provide the skin, StyleSeed provides the brain. (Full comparison in [Where StyleSeed fits](#where-styleseed-fits-among-design-ai-skills).) ## Named Motion System
StyleSeed motion gallery — flashy named moves: tilt-3d, magnetic, glow-pulse, gradient-sweep, blob-morph, spotlight
Flashy, named, copy-paste moves — live at /motion

StyleSeed gives motion a **vocabulary** for projects that need it. Preserve approved motion roles first; a named recipe, a fade, an instant state change, or a static page can each fit the task. The optional library has two layers: **1. Seeds = personality.** Five named presets, each a spreadable framer-motion recipe in five contexts (`entrance` / `exit` / `hover` / `press` / `layout`): | Seed | Vibe | Inspiration | |------|------|-------------| | **Spring** | bouncy, energetic, playful | Arc, Toss | | **Silk** | smooth, elegant, continuous | Stripe, Linear | | **Snap** | instant, decisive, precise | Raycast, Linear | | **Float** | weightless, gentle, dreamy | Apple | | **Pulse** | rhythmic, alive, punchy | Discord, music apps | ```tsx import { spring } from "@engine/motion"; Save ``` **2. Keywords = distinctive moves.** A library of copy-paste named motions behind one handle — `toggle-flip`, `toggle-curtain`, `reveal-blur`, `pop-in`, `tilt-3d`, `magnetic`, `glow-pulse`, `confetti-pop`, `shimmer`, and more. Say the keyword while vibe coding (or run `/styleseed motion toggle-flip`) and the same recipe lands in your code. ▶ **[Preview & copy every motion at the live gallery →](https://styleseed-demo.vercel.app/motion)**  ·  [Vibe-code your own → the motion guide](https://styleseed-demo.vercel.app/motion/guide) **Motion is scoped by the task and surface.** Choose it for feedback, orientation, or an approved narrative purpose: | Surface | Motion posture | |---|---| | **App / dashboard / data / forms** | Keep reading and interaction responsive. Motion may explain state or provide feedback; it must not delay essential values or obscure comparisons. | | **Marketing / landing / brand pages** | A static page is valid. When the narrative benefits, optional scroll-linked reveals, sticky sequences, parallax, or richer media may support it. | Preserve native scroll control, immediate access to content and actions, and a complete reduced-motion result. Prefer compositor-friendly animation where suitable, and measure performance and behavior on the target devices. Motion is optional; a preset name or animation count is not a quality test. (Rules: DESIGN-LANGUAGE §43 · PAGE-TYPES → Landing) All seeds auto-respect `prefers-reduced-motion`, and the `/styleseed motion` skill pulls every recipe from one source of truth — so motion stays consistent no matter who (or what) writes the code. ## Available Skins | Skin | Style | Source | |------|-------|--------| | **[toss](https://github.com/bitjaru/styleseed/blob/HEAD/skins/toss)** | Korean fintech — purple, minimal, data-focused | Original | | **[stripe](https://github.com/bitjaru/styleseed/blob/HEAD/skins/stripe)** | Professional — indigo, clean, multi-layer shadows | awesome-design-md | | **[linear](https://github.com/bitjaru/styleseed/blob/HEAD/skins/linear)** | Dark-first — violet, minimal, developer-focused | awesome-design-md | | **[vercel](https://github.com/bitjaru/styleseed/blob/HEAD/skins/vercel)** | Monochrome — black & white, geometric | awesome-design-md | | **[notion](https://github.com/bitjaru/styleseed/blob/HEAD/skins/notion)** | Warm — blue accent, friendly, warm neutrals | awesome-design-md | | **[raycast](https://github.com/bitjaru/styleseed/blob/HEAD/skins/raycast)** | Dark, punchy — red accent, snappy, launcher energy | awesome-design-md | | **[arc](https://github.com/bitjaru/styleseed/blob/HEAD/skins/arc)** | Playful — bold gradients, rounded, expressive | awesome-design-md | | **58+ more** | Any brand from [awesome-design-md](https://github.com/VoltAgent/awesome-design-md) | Auto-fetched via `/styleseed setup` — nothing vendored | ## Engine Contents ``` engine/ ├── CLAUDE.md # AI reads this automatically ├── AGENTS.md # Codex and other AGENTS.md-compatible agents ├── DESIGN-LANGUAGE.md # 74 visual design rules (brand-agnostic) ├── .claude/skills/styleseed/ # One registered skill │ ├── SKILL.md # Route the user's request │ └── workflows/ # 22 internal workflows, each with WORKFLOW.md │ ├── ss-resolve/ # Compiler and runtime │ ├── ss-build/ # Build loop │ ├── ss-verify/ # Rendered evidence ``` > The README is long; the above is its first 40000 characters. Full content: https://github.com/bitjaru/styleseed