How to make Claude create better UI?

Why Claude's Default UI Output Falls Flat (and What's Missing)

You've just asked Claude to "make a nice landing page," and what came back was... fine. Clean, technically correct, and utterly forgettable. That gap between competent and compelling is the most common frustration people have with AI-generated UI — and it's largely avoidable.

The core issue is what one practitioner workflow guide calls "competent but generic" output. As that guide bluntly puts it: if you don't seed Claude with your brand first, you'll fight the aesthetic the whole way. Claude has no idea what your company looks like, who your users are, or what tone your product carries — so it fills the void with defaults.

Vague prompts make this worse. "Make a nice landing page for a SaaS" gives the model nothing to work with, so it produces a generic result rather than yours. Anthropic's official guidance is explicit that effective prompts specify four elements:

• The goal — what the screen should accomplish
• The layout — how elements should be arranged
• The content — real copy, not placeholder text
• The audience — who will actually use it

The other expectation worth setting early: first drafts are about 70% right, and that's by design. Anthropic's own getting-started guide frames the first generation as a starting point, noting that "the real value comes from iterating." Figma's AI workflow research echoes this — AI-generated designs typically need additional refinement before they're production-ready.

This isn't a failure of the tool; it's a misunderstanding of the workflow. Iteration, not one-shot prompting, is the intended process — brief, draft, critique, refine. Designers who embrace this report dramatic gains: one Anthropic customer said prototyping that used to take a week of back-and-forth now happens in a single conversation, and 78% of designers and developers believe AI boosts their work efficiency.

The good news is that closing the remaining 30% gap comes down to technique, not talent. The rest of this article covers the specific prompting patterns — design system seeding, structured briefs, and deliberate refinement — that turn generic output into something that looks like it came from your team. If you later want to automate parts of this workflow with agent skills, SkillzBench is building a free directory and MCP connector for exactly that kind of discovery.

Seed Claude With Your Design System Before You Prompt

The fastest way to make Claude's UI output stop looking like everyone else's is to give it your brand before you give it a prompt. Practitioners consistently describe Claude's default output as competent but generic — fine, but not yours — and design system setup as "the step most people skip" (https://www.designsystemscollective.com/from-prompt-to-production-a-designers-step-by-step-workflow-with-claude-design-claude-code-a7705daad026). Skip it, and you spend the rest of the session fighting the aesthetic instead of building.

The fix is straightforward. Anthropic's official announcement explains that Claude Design builds a design system during onboarding by reading your codebase and design files, so every subsequent project automatically uses your colors, typography, and components. In one hands-on test, that generation took about five minutes (https://designerup.co/blog/how-to-use-claude-design-for-ux-ui/) — a small investment that eliminates most of the generic-output problem.

You have several ways to seed the context:

• Link a codebase via GitHub import or a local directory, so Claude designs with your real components instead of inventing lookalikes.
• Upload a Figma file, logo, or live website URL as brand reference.
• Import a design system into Claude Code via the /design-sync command.
• Reference components by name in prompts — "use the ProductCard component" — once the codebase is connected.

One nuance matters more than teams expect: upload finished assets, not specs. As one practitioner guide puts it, Claude is reading the emotional texture of your brand, not just the hex codes. A polished screenshot or live page teaches the model more than a token list of colors ever will.

Codebase linking also shrinks the prototype-to-production gap. When Claude can access your actual components, you avoid the classic "this looks great but we don't have that component" handoff problem, and the distance between prototype and shippable code shrinks dramatically (https://academy.claude.com/tutorials/using-claude-design-for-prototypes-and-ux). For monorepos or codebases with 100+ active contributors, link only the specific package or directory containing your relevant components — and leave out .git and node_modules folders.

If you want to push this workflow further with reusable instruction packages for Claude Code and other agents, SkillzBench is building a free, security-scanned skills directory and MCP connector to help you find and test the ones that genuinely help. The five minutes of setup is the part that compounds: seed the brand once, and every prompt after it lands closer to production.

The Structured Brief: Goal, Layout, Content, Audience

The difference between a generic AI mockup and a design that actually looks like your product usually comes down to one thing: the brief. Anthropic's own guidance is blunt about it — "the more context you give Claude, the better your output will be" — and the context that matters most fits on a single page.

Anthropic's official getting-started guide recommends that every UI prompt include four elements: the goal, layout, content, and audience. A prompt like "Create a dashboard showing monthly revenue with filters for region and product line" works because it tells Claude what the screen is for, how it should be organized, what data it holds, and who will use it. Compare that to "make a nice landing page," which one experienced designer notes produces a generic result — competent, but not yours.

Practitioners extend that four-element structure into a fuller brief pattern. A detailed workflow guide from a 15-year designer recommends covering:

• Project and audience — what you're building and who it serves
• Pages needed — with the purpose of each page stated explicitly
• Tone — 3 to 5 concrete adjectives, not vague vibes
• References — finished assets, not specs, because Claude reads the emotional texture of your brand, not just hex codes
• Constraints — anything Claude must or must not do

Component naming is where briefs become powerful. Once you link a codebase, Anthropic's official tutorial shows you can write prompts like "use the ProductCard component" or "follow the same layout pattern as the settings page." Claude then designs with your real components instead of inventing generic ones, which shrinks the gap between prototype and shippable code dramatically. Naming also matters downstream: component names referenced in the design conversation carry through to handoff.

Real copy beats placeholder text, too. Figma's resource library on AI tools for UX designers makes the point that designing with real content from the start leads to more accurate layouts and better design decisions. Lorem ipsum forces Claude to guess at text lengths, hierarchy, and tone — three things that shape the entire visual structure.

Expect the first draft to be roughly 70% right, according to practitioner reports. That's not a failure; it's the intended workflow. A strong brief gets you to that 70% faster and makes the remaining 30% easier to refine. And if you want to push past prompting into fully automated agent workflows for design and code tasks, agent skills can handle much of that pipeline — SkillzBench is building a free, independent directory with security scanning and benchmarking so you can pick skills that actually help.

Iterate Like a Designer: Variations, Self-Critique, and Edge States

The first draft Claude hands you is a starting point, not a finish line. Practitioners report first generations land at roughly 70% right, and Anthropic's own guidance says "the real value comes from iterating" — which means the refinement loop, not the initial prompt, is where your design actually gets made.

The first rule of iterating well is matching the tool to the change. Anthropic's support documentation lays out three refinement modes: use the chat for broad, global changes ("make the whole page feel more compact"), leave inline comments for targeted fixes on specific components, and make direct canvas edits for quick tweaks like copy adjustments. Reaching for chat when you need a one-word fix — or a pixel nudge when the layout itself is wrong — burns tokens and time.

When you're unsure of a direction, don't guess. Ask Claude to show you 2–3 parallel layouts instead of committing to one. A pattern that works well: "Show me 3 directions for the hero section — one minimal, one expressive, one retro-technical." Comparing concrete alternatives surfaces taste decisions faster than describing them abstractly, and version management lets you preserve each direction ("save what we have and try a completely different approach") without losing work.

Claude is also surprisingly effective as its own design reviewer. Practitioners recommend prompts like "review this design for accessibility, contrast ratios, and information hierarchy" — one hands-on reviewer at designerup.co successfully flagged inaccessible colors this way and had Claude fix them in a follow-up prompt. This self-critique step catches issues that look fine at a glance but fail real users.

Before any handoff, prompt for the states developers always end up asking about. The official Claude Academy tutorial recommends asking Claude to demonstrate how the design handles empty states, error states, loading states, and different data volumes. A screen designed only for perfect data falls apart the moment the API returns nothing — and catching that in the design conversation costs one prompt instead of one sprint.

A quick checklist for the refinement phase:

• Match the refinement method to the change: chat for structure, inline comments for components, canvas edits for copy.
• Request 2–3 parallel variations with distinct styles rather than iterating blindly on one.
• Ask Claude to self-review for accessibility, contrast, and information hierarchy.
• Prompt for empty, error, loading, and high-volume data states before handing off.

For teams that want to turn this refinement loop into a repeatable pipeline — running accessibility checks or state-generation prompts automatically through coding agents like Claude Code — SkillzBench is building a free directory of vetted agent skills and a free MCP connector so you can test which skills actually lift your workflow before relying on them.

ctaText: Browse and test free agent skills for Claude Code and other coding agents at SkillzBench — join the waitlist to get access when we launch. socialProofText: Published research found ~26% of community agent skills carry at least one vulnerability — SkillzBench security-scans, benchmarks, and trust-scores every skill so you know which ones actually help.

From Prototype to Production: Handoff and Repeatable Workflows

The moment a design starts looking right is exactly when beginners lose hours — by dragging the same conversation between visual exploration and production code. Practitioners who've shipped with Claude consistently recommend keeping design and code conversations separate: Claude Design for visual iteration, Claude Code for production implementation. Mixing the two, one workflow guide warns, is where newcomers burn their time.

When you're ready to hand off, the handoff itself has a technique that separates smooth builds from messy ones. End your prompt with "Start by showing me the folder structure before writing code" — a practice the same guide calls the single most underused technique in AI-assisted development. Forcing Claude to map the architecture first means you review the plan before hundreds of lines exist, rather than untangling a structure you never approved.

It also helps to document your design decisions in the chat itself, since that reasoning carries through as context for implementation. Component names matter too: if you've referred to elements by specific names during the design conversation, those names carry through to the handoff, making the code match what you discussed.

Set expectations realistically. First drafts from Claude Design are about 70% right, and iteration — not one-shot prompting — is the intended workflow. That's why one practitioner recommends a 90-minute timebox for your first project: enough pressure to iterate deliberately without chasing perfection. With that constraint, the author shipped a live five-page website in a single afternoon, deploying via Vercel with a live URL in roughly 60 seconds.

A repeatable workflow looks like this:

• Keep design exploration and production code in separate conversations.
• Request the folder structure before any code gets written.
• Name components explicitly during design so names survive the handoff.
• Timebox the first project to 90 minutes and ship something real.

Once you have a workflow that works, the next step is making it repeatable — and that's where agent skills come in. Skills are instruction packages that extend coding agents like Claude Code, Codex, Cursor, and Gemini CLI, and they can encode exactly these habits: folder-structure-first prompting, design-system seeding, handoff rituals. The catch is quality — published research found roughly 26% of skills carry at least one vulnerability, so choosing blindly is risky.

That's the problem SkillzBench is building against: a free, independent directory where every skill is version-pinned, security-scanned, and benchmarked in a sandbox, with a free MCP connector that lets you toggle exactly which skills each of your agents can see. The directory and connector are still pre-launch — you can join the waitlist now to be first in line when skills, proven, become one click away.