StyleSeed
FAQ

Making AI-built UI look designed, not generated.

The real questions developers ask when their app looks generic — and the honest answers.

My app looks generic / AI-generated — how do I fix it?

StyleSeed fixes generic, “AI-slop” UI by giving Claude Code, Codex, and Cursor 74 design rules they read automatically — covering color discipline, spacing rhythm, hierarchy, elevation, and motion. Instead of defaulting to slate neutrals and 8px radius on everything, your output stops looking generated and starts looking designed. It's MIT-licensed and free.

I applied StyleSeed but the design still looks bad / colors are random / there's no key color — what do I do?

Consistency comes from constraints, and the one-paste prompt is the least-constrained path. Fix it in five steps. 1) Select the output grammar and surface adapter before code. 2) Lock a primary action color and define stable roles for any additional hues. 3) If you have references that StyleSeed does not model, run /ss-reference instead of copying them. 4) Install the rule files so they are re-read every prompt. 5) Run /ss-score, then render and inspect with /ss-verify; the reference demo was not one-shot either.

Why does the same prompt give a great result one time and a generic one the next?

Because output quality tracks how many constraints the agent has, not luck. A polished result happens when the rules, the key color, the skin, and a review pass are all pinned; a generic one happens when the agent improvised from a summary. Reduce the variance by deciding app type, accent, and motion up front (ideally in plan mode), installing the rule files so they persist across prompts, and running /ss-review to catch drift. More constraints = less variance.

Why does every shadcn app look the same, and how do I make mine different?

Unmodified shadcn converges on a “fingerprint”: slate/zinc neutrals, Inter at default sizes, 8px radius everywhere, a default primary. StyleSeed breaks that fingerprint with rules and 7 brand skins (Toss, Stripe, Linear, Notion, Raycast, Arc, Vercel) so your AI-built app gets a committed accent, a real type pairing, and a signature look — not the default.

How do I make my app look like Linear (or Stripe / Notion / Vercel)?

StyleSeed ships 7 brand skins — including Linear, Stripe, Notion, Vercel, Raycast, Arc, and Toss — that encode each product's neutrals, radius, type, density, and motion as rules your agent applies. Ask Claude Code, Codex, or Cursor to build “in the Linear skin” and you get the dense, monochrome, intentional look instead of a generic approximation.

How do I give Claude Code, Codex, or Cursor a design system so it stops making ugly UI?

StyleSeed is a design-method engine for that job. It installs rules the agent reads automatically, plus 8 output grammars, 5 surface adapters, 48 React components, 7 brand skins, a named motion system, and 20 ss-* skills. STYLESEED.md preserves bounded project decisions so Claude Code, Codex, or Cursor can re-read them instead of reinventing spacing, colors, type, and motion on every prompt.

Should I use StyleSeed or Anthropic's official frontend-design skill with Claude Code?

Use either or both based on the job. Anthropic's frontend-design skill is strong for choosing and executing a distinctive frontend direction. StyleSeed adds job-specific output grammars, persistent project decisions, reference compilation, a code score, and rendered pixel verification. They are complementary; StyleSeed is independent and is not an official Anthropic product.

Does it work with Codex / AGENTS.md (not just Claude Code and Cursor)?

Yes. StyleSeed ships an AGENTS.md entry point plus a repository .agents/skills bridge for Codex-facing workflows. Codex uses $ss-* calls or its skills picker, while Claude Code uses /ss-* calls; both resolve to the same canonical design engine and project-local STYLESEED.md lock. A fresh agent session should be started after installation if skill discovery is stale.

Installing the skills asks for permission or gets blocked — is that normal? Do I even need them?

Yes, that's normal and expected: the /ss-* skills are executable, so your agent asks you to trust them once on first use — the same approval any third-party skill needs (good security), not a StyleSeed-specific block. But you don't need the skills at all. StyleSeed's core is the rules — plain markdown (CLAUDE.md / AGENTS.md / DESIGN-LANGUAGE.md) — which install with zero permissions. Paste the one-sentence prompt, or copy those files in, and you already get the design judgment. The skills are just optional automation on top.

Does it handle UX writing / microcopy too, or just visuals?

Both. StyleSeed covers verbal judgment as well as visual — buttons that name the action (“Send $2,400”, not “Submit”), error messages that help instead of blame (“Check the card number” not “Invalid input”), empty states that invite, calm money copy, one term per concept. The rules install with everything else, so your agent applies them to button labels, errors, and toasts automatically. Korean/CJK projects get writing principles grounded in Toss's published “8 Writing Principles.”

How do I make my app look more professional / polished / expensive?

Generic-to-premium is mostly discipline: one saturated accent, a real font pairing, an 8pt spacing scale, intentional hierarchy, a signature shadow, and subtle motion. StyleSeed encodes all of these as 74 rules Claude Code, Codex, and Cursor follow automatically, so “make it look more professional” produces an actually professional result instead of more average defaults.

My spacing feels off and my layout looks cramped — how do I fix it?

StyleSeed enforces spatial rhythm: a consistent 8pt spacing scale, “inside vs. outside” grouping so related items sit tighter than unrelated ones, and intentional whitespace around focal elements. The agent stops emitting ad-hoc paddings, so your React or Next layout reads as deliberate and scannable rather than cramped or arbitrary.

How do I give my dashboard better visual hierarchy?

StyleSeed's hierarchy rules drive contrast through size, weight, color, and position so there's a clear focal point and scan path — plus dashboard patterns ready to use. Your Claude Code, Codex, or Cursor dashboard stops looking like a flat default admin template where every element competes for the same attention.

Why does my app look amateur or unfinished?

Apps look amateur when there's no system-level owner: inconsistent spacing, too many colors, default type, no hover or loading states. StyleSeed gives your AI agent that ownership — 74 rules plus a motion system for hover, loading, success, and error states — so the last 20% of polish that separates real products from prototypes gets handled.

How do I stop my UI from looking like a template?

StyleSeed replaces template defaults with intentional, branded choices: a committed radius, a saturated accent, a display+body font pairing, and a coherence rule that keeps every screen on the same decisions. Because these are rules the agent reads on every prompt, the whole app stays consistent instead of reverting to template-grade defaults screen by screen.

I'm vibe coding without a designer — how do I get good-looking UI?

StyleSeed is built for vibe coding without a designer. It hands Claude Code, Codex, and Cursor the design judgment a designer would provide — rules, components, brand skins, and motion — so non-designers ship UI that looks designed. It's free and MIT-licensed, and layers on top of shadcn/ui and Tailwind.

How do I fix too many colors / a messy palette?

StyleSeed's color-discipline rules cut your palette to one saturated accent plus semantic tokens, used sparingly and consistently. The agent stops decorating with color and starts using it to signal meaning, which is the single fastest fix for a UI that feels noisy, cheap, or off.

Is there a free / open-source design tool for AI coding agents?

Yes — StyleSeed is MIT-licensed and free. It's a design engine for Claude Code, Codex, Cursor, and vibe coding that gives the agent 74 design rules, 48 React components, 7 brand skins, and a named motion system. It works with React, TypeScript, Tailwind, Radix, and shadcn/ui.