Claude UI Design Prompts: 10 Art Direction Templates to Copy

Why does Claude produce generic landing pages from a one-line prompt?

Anthropic's Applied AI team calls it distributional convergence: models predict tokens from statistical patterns in training data, and safe design choices dominate the web, so an underspecified prompt samples from the middle. OpenAI says the same about GPT-5.4 in its frontend guide: when prompts are underspecified, models fall back to high-frequency patterns, many of which are overrepresented habits rather than proven conventions. The middle has changed over time. Anthropic's documentation describes Claude Opus 4.8's default house style as a warm cream background near #F4F1EA, serif display type, italic word accents and a terracotta accent, and its current frontend-design skill lists the clusters it sees in generated design today. The practical lesson is that "make it modern and clean" is not a direction, it is a request for the average. Each prompt below replaces an average with a decision. Our pillar post, Why AI websites look the same, covers the wider problem; this one is the toolkit.

• •A warm cream background with a high-contrast serif display and a terracotta or clay accent.
• •A near-black background with a single bright acid-green or vermilion accent.
• •A broadsheet layout with hairline rules, zero border-radius and dense newspaper-like columns.
• •The SaaS-card kit: identical rounded cards, one radius on everything, the same soft grey shadow, gradient washes as decoration.
• •Template chrome: a tracked-out ALL-CAPS eyebrow above every heading, middle-dot meta strings and an arrow appended to every link.
• •The older defaults Anthropic's 2025 cookbook named: Inter, Roboto and system fonts, and purple gradients on white.

What should an art-direction brief for Claude include? (Prompt 1)

Anthropic's golden rule for prompting is to show the prompt to a colleague with minimal context and ask whether they could follow it. A human designer handed "build a landing page for my tea business" would come back with twenty questions, so answer them up front. The brief below covers audience, the single job of the page, brand adjectives with their opposites (the negative adjectives do a surprising amount of work), a reference world, real content and hard constraints. OpenAI's guide makes the same point about content: giving the model real copy and product context is one of the simplest ways to improve results, because it stops the model inventing placeholder marketing. The last paragraph borrows from Anthropic's frontend-design skill, which tells Claude to open the hero with the most characteristic thing in the subject's world.

Which design movements and eras give Claude a usable direction?

A named reference world is the cheapest way to move off the average, because it imports a whole system of type, grid and colour that Claude already knows. The International Typographic Style, for example, comes with mathematical grids, sans-serif type, asymmetric flush-left layouts and objective photography. Pick one world per project and commit; a mix of three reads as none. The table gives starting points we use: every font listed is on Google Fonts, the palettes are starting values for you to adjust and contrast-check, and the "watch for" column flags where each direction slides into one of the defaults above. The awesome-claude-design repository on GitHub keeps a much longer catalogue of DESIGN.md files grouped by aesthetic family if you want more references.

How do you specify fonts and a colour palette Claude will follow? (Prompt 2)

Name exact families, weights, sizes and roles, and give every colour a job. Anthropic's Opus 4.8 guide is explicit that the model follows concrete specs precisely, and its sample prompt lists five hex values; OpenAI recommends defining tokens such as background, surface, primary text, muted text and accent, with two typefaces maximum and one accent colour. For pairing, Google Fonts' own pairing lesson quotes Jason Santa Maria: when in doubt, pair a serif and a sans serif, different enough not to compete but not so similar they blur. Butterick's Practical Typography gives the measure: 45 to 90 characters per line. The roles in the prompt below carry contrast rules, and that matters. WCAG 2.2 requires 4.5:1 for normal text and 3:1 for large text; the signal red in this example measures about 4.4:1 on the paper colour, so it is legal as a button with white text (5.0:1) or a large headline accent, but not as body-size link text. Writing that into the prompt stops Claude using the accent everywhere. Refactoring UI, by the creators of Tailwind CSS, is the best developer-friendly primer if you want to build these systems yourself.

How do you describe a layout so Claude stops centring everything? (Prompt 3)

Describe the grid, alignment and the reason each block has its size. "Asymmetric bento" alone gets you a tidy box grid of equal tiles; "one large tile because this content matters most" gets hierarchy. OpenAI's hard rules are a useful counterweight to card-heavy output: a full-bleed hero by default, no cards in the hero, and cards only when the card is the container for an interaction. Anthropic's skill asks Claude to compare layout concepts as one-sentence descriptions and ASCII wireframes before coding, which is why the prompt ends with that request; a wireframe is cheap to reject, a finished component is not.

What belongs on a banned-patterns list, and why is a ban not enough? (Prompt 4)

A banned list is useful, but on its own it relocates the default rather than removing it. Anthropic's Opus 4.8 guide warns that generic instructions such as "don't use cream" tend to shift the model to a different fixed palette instead of producing variety, and its general prompting advice is to tell Claude what to do instead of what not to do. So every line below pairs the ban with its replacement. The list combines Anthropic's named tells, OpenAI's clutter rules (pill clusters, stat strips, icon rows, floating badges) and the bans practitioners such as Jason Zhou at Superdesign recommend. The final line matters: asking Claude to explain itself when it wants to break a rule surfaces real design tension instead of hiding it.

How do you get three genuinely different design directions before Claude builds? (Prompt 5)

Ask for options, constrain how different they must be, and make Claude stop and wait. Anthropic recommends exactly this for Opus 4.8: have the model propose distinct visual directions (background hex, accent hex and typeface with a one-line rationale) before building, noting it produces meaningfully different directions across runs and replaces relying on temperature for variety. OpenAI suggests the equivalent for GPT-5.4, asking the model to generate a mood board or several visual options before selecting final assets, and its frontend skill asks for a one-sentence visual thesis first. Our version adds a self-critique line per direction and rules out the two most common dark and light defaults by name. Pick one, then paste Prompt 2 filled with the chosen direction's values so they become fixed.

What does a good critique-and-revise prompt for Claude look like? (Prompt 6)

Give Claude eyes, a rubric and permission to cut. The frontend-design skill tells Claude to critique its own work from screenshots and quotes Chanel: before leaving the house, look in the mirror and remove one accessory. OpenAI notes that pairing the model with Playwright lets it inspect rendered pages, test viewports and check its output against a reference. Thomas Wiegold's write-up of the frontend-design plugin adds the most useful habit: name exactly what converged ("you used Space Grotesk again, pick a serif") rather than asking for something "more creative". In Claude Code, run this after a Playwright screenshot; in claude.ai or ChatGPT, paste the screenshot in. Our post on the visual feedback loop with Playwright covers automating it.

What are the best section-level prompts for hero, pricing, testimonials and footer? (Prompts 7 to 10)

Once the system is fixed, prompt one section at a time so each gets a single job. OpenAI's guide puts it as one purpose, one headline and usually one short supporting sentence per section, and sets a hero budget of brand, headline, sentence, CTA group and one dominant image. These four prompts assume Prompts 2 to 4 are already in the conversation or in your project rules file. Note the testimonials prompt: it forbids invented quotes, which is a legal and trust issue as much as a design one.

Do these Claude UI design prompts work in ChatGPT, Gemini, Cursor and v0?

Yes, because they are plain-language specifications rather than tricks tied to one model. OpenAI's GPT-5.4 guidance lands on the same principles: define the design system up front, provide visual references, structure the page as a narrative, ground it in real content and avoid purple-on-white defaults. A few adjustments help across tools. In Claude Code or Cursor, move Prompts 2 to 4 into a persistent rules file so you do not paste them every session; our guide to design tokens and CLAUDE.md rules covers that. In chat tools, keep the brief and system in the first message and send sections afterwards. Where we work with clients at Tech Arion, the brief and banned list live in the repository next to the code, and section prompts are run one at a time with a screenshot review between each.

• •Claude: Anthropic says Opus 4.8 needs less frontend prompting than earlier models, so start with the brief and add the banned list only if defaults appear.
• •ChatGPT and Codex: OpenAI reports low and medium reasoning levels often give stronger front-end results for simpler sites.
• •Gemini and other models: keep the hex values and font names exact; specific values transfer between models better than adjectives.
• •v0, Lovable and similar builders: paste the brief and system as the first message, then edit section by section rather than regenerating the whole page.

Pre-flight checklist before you send a design prompt

Run through this list before you hit enter. If any line is unanswered, Claude will fill it with the average.

Frequently asked questions about Claude UI design prompts

Quick answers to what developers and founders ask most when they start art-directing AI-built websites.