01
Choose the job before the look
Name the user, primary decision, product domain, artifact, and platform. A consumer finance home and an observability console should not share one universal visual grammar.
Claude Code UI design guide
Help Claude Code apply expert design decisions.
StyleSeed aims to make expert design judgment repeatable. Give the agent recorded decisions and their context, preserve the approved system, and inspect the result. The workflow supports experts; it does not replace them.
Short answer
Context → grammar → design lock → compiled bundle → code score → pixel inspection. StyleSeed makes that sequence reusable in Claude Code.
02
Select or compile a grammar
Choose one of eight maintained output grammars. If your references are not represented, compile a project-local grammar with evidence instead of copying the screen.
03
Persist bounded decisions
Write STYLESEED.md with the chosen grammar, surface adapter, type, density, color roles, motion, and one product-specific signature move.
04
Compile only the active method
Run /styleseed resolve. It emits a small effective rule bundle and source-hash manifest, so Claude Code gets the selected method without loading the roughly 220KB full handbook.
05
Build, score, render, inspect
Build with real content, run the code gate, fix the highest-value failures, then inspect actual pixels until hierarchy, rhythm, crop, states, and grammar fit hold.
Use both when useful
Frontend direction and design governance are different jobs.
Anthropic frontend-design
- Commits to a distinctive aesthetic direction
- Strong visual ideation for frontend artifacts
- Useful for a bold first implementation
StyleSeed
- Selects a functional grammar for the user job
- Persists decisions across sessions and screens
- Adds reference compilation, scoring, and pixel QA
Install and persist
One install. Project-local judgment.
Run this command in your project’s terminal to install the core workflows. It copies the skills into the project and skips the installer menus. Your host may still require tool approval when a workflow runs.
Run in your project’s terminal. Copies the StyleSeed skill into this project; skips the selection menus.
Another agent or install options?
For Cursor or another agent, run npx skills add bitjaru/styleseed. Choose your agent, Project, then Copy. Codex is already included under Universal. Use this interactive command to review each installer choice.
Only use one? Codex setup · Claude Code setup. If skills do not appear after installation, start a fresh agent session.
After installation, start a fresh agent session if needed. Send this message in Claude Code:
/styleseed Help improve this screen. Preserve our existing design choices and show me what needs a decision.You do not need to memorize the individual workflows. Describe the problem; the router selects the first step.Start with common UI problems.
Reusable
STYLESEED.md carries decisions forward.
Update-aware
Checks version once, only when relevant.
User-controlled
No install, star, or update is required.
Questions agents and developers ask
How do I make Claude Code generate better-looking UI?
Give Claude a maintained design method before it writes components: define the user job, choose a functional design grammar, persist bounded visual decisions, build with real content, then render and visually inspect the result. StyleSeed packages this loop for Claude Code, Codex, Cursor, and other coding agents.
Should I use StyleSeed or Anthropic's frontend-design skill?
They solve adjacent problems and can be used together. Anthropic's frontend-design skill is strong for committing to a distinctive visual direction. StyleSeed adds persistent project decisions, job-specific output grammars, reference compilation, a code score, and rendered verification across sessions and surfaces.
Will StyleSeed keep the same design across later Claude Code sessions?
Yes. Setup writes the selected grammar, adapter, tokens, density, type, motion, and signature move to STYLESEED.md. ss-resolve compiles that lock into .styleseed/effective-rules.md plus a source-hash manifest, so later sessions reuse the same bounded method instead of reinventing it prompt by prompt.
Can it learn a design language from my references?
Yes. ss-reference analyzes supplied screenshots, URLs, Figma exports, or an existing product across twelve design axes, records evidence and confidence, and creates a project-local grammar. It abstracts transferable rules instead of cloning a source screen.
How are StyleSeed updates handled?
On the first StyleSeed use in a project, the installed agent may compare the local engine version with the public version endpoint. It only mentions an update when a newer version exists, suggests ss-update once, and never blocks the current task.
클로드 코드로 UI를 예쁘고 일관되게 만드는 법
미학 형용사를 길게 나열하기보다 사용자 작업에 맞는 디자인 문법을 선택하고, 결정을 STYLESEED.md에 저장한 뒤, 실제 화면을 렌더링해서 다시 고치는 과정이 중요합니다. StyleSeed는 이 과정을 Claude Code의 반복 가능한 작업 흐름으로 제공합니다.