StyleSeed——设计规则引擎，让AI智能体不再构建千篇一律的UI

bitjaru

/

styleseed

Public

Notifications You must be signed in to change notification settings

Fork 89

Star 967

main

Branches Tags

Go to file

Code Open more actions menu

Latest commit

History

262 Commits

262 Commits

Folders and files

Name Name Last commit message

Last commit date

.agents

.agents

.claude-plugin

.claude-plugin

.codex-plugin

.codex-plugin

.github

.github

.styleseed

.styleseed

assets

assets

demo-pricing

demo-pricing

docs

docs

engine

engine

examples

examples

extensions/ learning

extensions/ learning

packaging/ codex

packaging/ codex

research/ design-judgment

research/ design-judgment

scripts

scripts

showcase

showcase

skills/ styleseed

skills/ styleseed

skins

skins

.gitattributes

.gitattributes

.gitignore

.gitignore

AGENTS.md

AGENTS.md

CHANGELOG.md

CHANGELOG.md

CODE_OF_CONDUCT.md

CODE_OF_CONDUCT.md

CONTRIBUTING.md

CONTRIBUTING.md

LICENSE

LICENSE

README-KR.md

README-KR.md

README.md

README.md

ROADMAP.md

ROADMAP.md

SECURITY.md

SECURITY.md

THIRD_PARTY.md

THIRD_PARTY.md

View all files

Repository files navigation

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. 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 →

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 · 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.

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 · Codex guide · See examples · Need help?

Evaluating the repository?

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 .

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 ↓

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 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 · 한국어

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 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 .)

What your agent actually does with StyleSeed loaded:

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 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 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)?

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 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:

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 .cursor

... (truncated at the site's per-page length limit; see the source link below for the full text.)