Start with the problem you can see. Try a focused change, inspect the result, then decide whether you need a reusable workflow.
My app works, but looks amateur. What should I fix first?
Start with one screen and the task a person needs to finish there. Check whether the heading, key information, and next action are easy to find, then fix spacing, text contrast, and missing loading or error states. Changing the whole palette first can leave the underlying usability problem untouched.
Capture the current screen at desktop and phone widths. Write down its main user task.
Name the three most consequential problems and change those first, preserving working behavior.
Render again at the same sizes and check the actual task, including keyboard use and error states.
Try this with your coding agent
This screen works, but looks amateur. Identify its main user task and the three biggest visual or usability problems. Explain each proposed change, preserve existing components and behavior, then render before and after at desktop and mobile sizes.
Paste into your coding agent and add your screen or reference.
StyleSeed’s ss-audit and ss-build workflows can structure this review and repair. You still decide whether the result serves your users; a passing score is not that decision.
한 화면에서 사용자가 해야 할 일부터 정하세요. 제목·핵심 정보·다음 행동이 잘 보이는지 확인하고, 간격·글자 대비·로딩과 오류 상태 순서로 고칩니다. 색상부터 전부 바꾸면 사용하기 어려운 원인은 그대로 남을 수 있습니다.
Why do all my AI-generated websites look the same?
If each brief leaves layout, density, typography, and imagery undecided, repeated templates can fill the gaps. Replacing purple with another accent does not define a direction. Choose references that fit the product’s task, explain what to borrow from each, and select a direction before implementing the whole site.
Collect two or three references and name the useful feature of each: reading rhythm, navigation, density, or imagery.
Compare a few directions on the same content and choose one for reasons tied to the audience and task.
Record the choice and check later screens against it. Keep useful conventions instead of chasing novelty everywhere.
Try this with your coding agent
Before rebuilding this page, propose three directions for this audience and task. Keep the content the same so I can compare them. Explain layout, typography, density, and imagery choices, then wait for my selection.
Paste into your coding agent and add your screen or reference.
StyleSeed’s ss-studio supports direction exploration and a human selection before the build. Its presets are starting points, not proof that a design fits your product.
배치·정보 밀도·글자·이미지 방향을 비워두면 비슷한 기본 패턴이 반복될 수 있습니다. 색 하나를 바꾸기보다 제품 목적에 맞는 레퍼런스를 고르고, 각각 무엇을 참고할지 설명하세요. 같은 콘텐츠로 몇 가지 방향을 비교한 뒤 하나를 선택합니다.
How do I stop Claude or Codex changing the design on every page?
Give the agent an approved screen, the actual components it must reuse, and a small record of decisions such as text sizes, color roles, and spacing. Ask it to inspect these before each new screen. Then compare the rendered result with the approved screen; having a rules file alone does not prove it was followed.
Identify the existing screen and components that are approved, including their loading, empty, and error states.
Record reusable choices and explicit exceptions. Ask the agent to report conflicts before substituting a preset.
Try the next screen in a fresh agent session and compare it with the approved one. Fix and record any drift.
Try this with your coding agent
Add this screen using the existing approved screen and components. Inspect the project’s recorded design decisions first. List anything you cannot reuse faithfully before changing it. After implementation, render both screens and check typography, spacing, color roles, and states.
Paste into your coding agent and add your screen or reference.
StyleSeed resolves project-local rules for an artifact and supports checks against them. Complete import of an arbitrary existing design system and guaranteed cross-session consistency are not established capabilities.
승인한 화면과 실제로 재사용할 컴포넌트, 글자 크기·색상 역할·간격 같은 결정을 함께 남기세요. 새 화면을 만들기 전에 읽게 하고 결과 화면을 비교해야 합니다. 규칙 파일이 있다는 것만으로 일관성이 검증되지는 않습니다.
I gave the AI a screenshot. Why doesn’t the result feel like it?
A screenshot shows one state at one size. It does not specify how the layout adapts, what the components do, or which details matter to you. Describe the useful relationships—content width, type hierarchy, spacing, image treatment—and verify those in the rendered page, including another viewport and an interactive state.
Mark the properties you want to carry over and separate them from the reference’s brand assets and content.
Ask the agent to describe the rules it inferred and flag anything the image cannot establish.
Build one representative screen first. Compare it at matching dimensions, then test mobile and interaction states.
Try this with your coding agent
Use this reference to describe its layout, typography, spacing, and image treatment. Tell me what is uncertain from the screenshot. Preserve our product content and brand; build one representative screen and compare the rendered result before expanding to more pages.
Paste into your coding agent and add your screen or reference.
StyleSeed’s ss-reference can turn supplied references into project-local rules. It does not guarantee pixel identity or infer every hidden interaction from a screenshot.
스크린샷은 한 크기의 한 상태만 보여줍니다. 콘텐츠 폭·글자 위계·간격·이미지 처리 중 무엇을 참고할지 구체적으로 말하고, 이미지에서 알 수 없는 반응형 동작은 따로 정하세요. 대표 화면 하나를 만든 뒤 같은 크기와 모바일에서 비교합니다.
Why does my AI-generated UI spacing feel wrong?
Group related content first, then inspect the computed gap or padding and the CSS token that supplies it. Check whether a nested screen inherits its parent’s spacing. Re-render at desktop and phone widths with real labels, checking overflow and wrapped controls. Bigger padding alone does not establish better rhythm.
Separate field-level, group-level, and section-level spacing by the user task.
Inspect computed CSS, token resolution, and nested ownership before changing values.
Render at matching desktop and mobile sizes; check long labels, overflow, and error states.
Try this with your coding agent
Inspect this screen’s grouping, computed gaps/padding, and resolved CSS tokens. Check nested spacing inheritance. Preserve approved tokens and components; explain prioritized fixes and render before and after at desktop and mobile widths. Check overflow and wrapped controls.
Paste into your coding agent and add your screen or reference.
StyleSeed supplies optional scoped spacing roles and rendered diagnostics. Recommendations are starting values; final rhythm still needs content-specific review.
관련된 내용을 먼저 묶고, 실제 적용된 gap·padding과 토큰 값을 확인하세요. 부모 화면의 간격을 상속하는지도 살펴봅니다. 실제 문구로 데스크톱·모바일을 다시 렌더하고 넘침과 버튼 줄바꿈을 확인하세요.
Want to use StyleSeed for this?
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.
Then send $styleseed in Codex or /styleseed in Claude Code, followed by your task. The router selects the first workflow.
How do I install StyleSeed without choosing from a long list of agents?
Run npx -y skills add bitjaru/styleseed -a codex claude-code -y --copy in your project’s terminal. This installs all core skills for Codex and Claude Code in that project, using copies and skipping the installer menus. Then use $styleseed in Codex or /styleseed in Claude Code and describe the screen you want to improve. If the skills do not appear, start a fresh agent session.
Why is Codex missing from the installer’s Additional agents list?
Codex is already in the Universal group, which reads .agents/skills. It does not need to be selected again under Additional agents. When using the interactive installer, select Claude Code there if you also use it, choose Project, and choose Copy for a fresh project. The explicit install command above skips these choices.
What is StyleSeed's goal — does it replace designers?
StyleSeed aims to make expert design judgment repeatable by coding agents, not replace experts with aesthetic preferences. People own intent, tradeoffs, and acceptance. The current engine compiles selected rules, preserves project choices, and supports implementation checks; passing those checks does not establish expert-level quality.
Can it work with our existing design system?
Preserving an approved system is a product priority, not a promise of universal import today. Start from the project's real components, semantic tokens, and decisions. Where the engine cannot express them, report the mismatch instead of silently choosing a StyleSeed preset. Component-contract integration and independent quality evaluation are planned research.
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 /styleseed reference instead of copying them. 4) Install the provider's project entry or invoke the installed StyleSeed skill so visual work reads STYLESEED.md. 5) Run /styleseed score, then render and inspect with /styleseed 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?
A prompt alone may leave important decisions implicit, and models can still vary even with the same context. Record the approved system, load the relevant rules and implementation material, and inspect the result. More constraints are not automatically better: task fit, correct components, meaningful states, and human review matter alongside consistency.
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 give Claude Code, Codex, or Cursor a design system so it stops making ugly UI?
StyleSeed is a design-method engine for that job. Its core ships 8 output grammars, 5 surface adapters, 48 React components, 7 brand skins, a router, and 22 canonical ss-* workflows. STYLESEED.md preserves bounded project decisions; installed project instructions and StyleSeed skills re-read it for visual work instead of reinventing spacing, colors, type, and motion.
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.
Can StyleSeed learn from corrections made by a designer?
An optional repository-only extension can, but it is not part of the core or public npx installation. With caller-attested review, $ss-learn turns an accepted correction into a generalized local candidate. Capture, review, packaging, bridge exposure, and promotion are separate decisions; one candidate never becomes a team or core rule automatically.
Does $ss-learn upload my code, prompts, screenshots, or brand data?
No automatic upload exists. The repository-only learning contract rejects project code, prompt text, screenshots, URLs, local paths, brand tokens, and arbitrary extra fields. Its scanner is a guardrail, not an anonymization guarantee, so review the exact package before exposure. The development bridge stays disabled until a host-owned proof adapter is verified; enabling it would reveal one exact approved package to the connected client and model after a one-time grant.
Why can $styleseed update find an update when the semantic version has not changed?
StyleSeed tracks both engineVersion and engineRevision. The version names the release line; the revision hashes the exact maintained method, 1 skill, plugin boundary, and palette engine. $styleseed update compares installed, project-recorded, and published revisions, then refreshes the engine and re-resolves the project lock without replacing project-owned code or design decisions.
Is the StyleSeed Codex plugin available in a public plugin directory?
Not yet. The repository contains a development Codex package with one core skill, but public directory release is not verified. The default/core package contains neither ss-learn nor a learning MCP. Use the project-local CLI install above; a public plugin-directory release is a separate distribution path.
Installing the skills asks for permission or gets blocked — is that normal? Do I even need them?
Tool permissions depend on your agent and workspace settings. The install command skips the installer’s questions; it does not bypass host permissions. The skills include executable compilation and verification tools. Reading llms.txt can provide portable guidance when installation is unavailable, but reading markdown alone does not run those tools or establish a verified result.
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.”
My spacing feels off and my layout looks cramped — how do I fix it?
Start with grouping, computed spacing values, and the actual project tokens. StyleSeed can compile scoped spatial roles and inspect explicitly mapped rendered consumers for token failures or mismatches. Its numeric recommendations are starting values; responsive content and final rhythm still need review. See the live example at /fix-ui-spacing.
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.
I'm vibe coding without a designer — how do I get good-looking UI?
You can use StyleSeed's maintained guidance as a starting point, make explicit choices, and run its implementation and visual-check workflows. Treat the result as something to review, not expert-approved output. StyleSeed is free and MIT-licensed; it helps apply recorded judgment but does not replace user research, design expertise, or final acceptance.
How do I fix too many colors / a messy palette?
Assign colors to roles: actions, surfaces, text, and meaningful states or data. Remove decorative color that competes with those roles, and check contrast. The right number of accents depends on the screen and approved design; StyleSeed should preserve those decisions rather than force every product into one palette.
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.