A design method toolkit for building and reviewing user interfaces in Claude Code. It applies consistent design tokens, layout choices, and rendered visual checks, and includes a skill for capturing approved design lessons locally.
Claude Code
> /plugin marketplace add bitjaru/styleseed> /plugin install styleseed@styleseed
Codex
$ npx skills add bitjaru/styleseed -a codex
Cursor
$ npx skills add bitjaru/styleseed -a cursor
Gemini CLI
$ npx skills add bitjaru/styleseed -a gemini-cli
GitHub Copilot
$ copilot plugin marketplace add bitjaru/styleseed$ copilot plugin install styleseed@styleseed
OpenCode
$ npx skills add bitjaru/styleseed -a opencode
Windsurf
$ npx skills add bitjaru/styleseed -a windsurf
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. 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 →
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 · Quality-first roadmap
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. One request covers the same install scope, verified backup, and revision checks.
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.
$styleseed Help improve this screen. Preserve our existing design choices and show me what needs a decision./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?
npx -y skills add bitjaru/styleseed -a codex -y --copynpx -y skills add bitjaru/styleseed -a claude-code -y --copynpx skills add bitjaru/styleseed → your agent → Project → Copy.-y skips installer questions; it does not bypass your coding agent's tool permissions.Claude Code guide · Codex guide · See examples · Need help?
Use the three-minute verification path to test a clean public install before trusting the README. The source-level evaluator quickstart 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. Small docs and test fixes need no proposal. See the 15-minute contribution path.
For a fixed evaluation version, use the v5.0.0 release archive and its checksums. The default bitjaru/styleseed command follows mutable main.
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.
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 |
| Same-weight cards that hide the current priority | the #1 machine-composed tell; truly equivalent options may share weight |
| 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 ↓
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 →
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
Core judgment × output grammar × surface adapter × domain/page × brand recipe × palette recipe × optional profile. Read the architecture →
Full pages: before · after · more before/afters →
🔥 We ran an early version of this page through our own gate. It scored 58/100 → here's the receipt
Same product, six looks — each one /styleseed restyle <preset> away. Coherent, distinct, never generic.
Easy Start · Studio · Palettes · Claude Code UI guide · Codex UI guide · Brand recipes · Architecture · Engine + Recipes + Skins · Motion · Skills · Wiki · 한국어
Why the prompt installs first: the context compiler and quality gates can only run when the
Stars on GitHub
A design toolkit for Claude Code covering UI styling, design tokens and component specs, brand identity and voice, banners, logos, and HTML slide presentations with charts.
@nextlevelbuilderDesign guidance for AI coding agents that helps shape, critique, polish, and improve frontend interfaces such as websites, landing pages, and dashboards. It includes live browser iteration and rules that catch common issues in AI-generated frontend design.
@pbakausTurns a brief into a design prototype, website, app, deck, or video that follows your design system, then lets your team share it and refine it with an AI agent in the same project.
@nexu-ioCreates branded editorial diagrams such as architecture charts, flowcharts, sequence diagrams, ER models, timelines and swimlanes as self-contained HTML and SVG files. Suited to writers and designers who want polished visuals for Claude Code.
@cathrynlaveryInstall it with the command on its page. It includes styleseed, ss-learn. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it