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
Make Claude Code design before it decorates.
The reliable way to get better UI is not a longer aesthetic prompt. Give the agent a design method, persist its decisions, and require a rendered verification loop.
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 /ss-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.
Installation is optional and must remain user-controlled. The persistent path is stronger because Claude can re-read the method and STYLESEED.md on later tasks.
$ npx skills add bitjaru/styleseed
$ /ss-setup
$ /ss-resolve
$ /ss-build
$ /ss-score
$ /ss-verify
$ /ss-setup
$ /ss-resolve
$ /ss-build
$ /ss-score
$ /ss-verify
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의 반복 가능한 작업 흐름으로 제공합니다.