How to get good-looking UI from Claude Code and Cursor

By 8pt · Updated 2026-11-14

When a model’s UI looks bad, it’s rarely a coding problem. It’s missing three things: a clear visual direction, a fixed set of design tokens and real references to follow. Give it a page template for direction, put colors, type sizes and spacing into the project rules, swap in finished components instead of having it draw from scratch, and finish with a screenshot review. UI quality becomes noticeably more consistent.

#Why generated UI all looks the same by default

With no direction, a model picks the safest, most common choices: generic fonts, familiar gradients, a centered big headline and three columns of cards. Anthropic’s officialfrontend aesthetics prompting guide also notes that without guidance it leans toward safe designs, and recommends giving explicit direction on fonts, color, motion and backgrounds.

#Step 1: set the direction with a page template

First, pick an 8ptPage templates and have the model keep its section order, layout and rhythm while swapping only the brand, copy and images. A concrete reference page saves the model far more guessing than asking it to look more premium. 8pt has 14 page templates today, each with live desktop, tablet and phone previews.

#Step 2: put your design tokens into the project rules

Colors, fonts, radii and spacing need to be fixed, or every generation drifts. Pick anThemesCopy its CSS variables into your global stylesheet, then run:

project root

npx @8pt-dev/cli init

It writes the 8pt design system into AGENTS.md, CLAUDE.md, .cursor/rules/8pt.mdc and .github/copilot-instructions.md, which Claude Code, Cursor, Codex and Copilot all read.

#Step 3: use finished components instead of drawing from scratch

For sections like pricing tables, FAQ, navigation and heroes, ready-made components are faster and more reliable. Open a component on 8pt and hand the copied prompt to your model, or connect 8pt MCP and just describe what you need; the model searches and fetches components itself:

Terminal

8pt search "pricing yearly toggle"
8pt add <Components slug>

The prompt has the model map the component’s colors and fonts to your project’s existing variables (for example --background and --primary in globals.css), so it won’t overwrite your design system.

#Step 4: review with screenshots

The model can’t see the page it built. Have it run a local dev server and take browser screenshots (or send it yours), then check against the reference point by point: consistent spacing, clear type hierarchy, no overflow at phone width, complete button states. Two or three rounds is usually enough.

#A prompt you can use as-is

Prompt

First read the project and tell me the framework, styling approach and existing design tokens.
Use an 8pt page template <template name>  as the structural reference. Keep the section order and spacing rhythm; swap in my brand, copy and images.
Use only the project’s existing variables for colors, fonts and radii; never hard-code colors.
Rebuild pricing, FAQ and navigation with 8pt components instead of drawing them yourself.
Animate only transform and opacity,Respects prefers-reduced-motion.
When done, take screenshots at 1440 and 390 wide, review them, then tell me which files you changed.

#FAQ

What if the UI Claude Code generates looks bad?

Give it a concrete reference page (a page template), a fixed set of design tokens (a theme plus a project rules file), finished components instead of generating from zero, and have it review its own screenshots. Asking it to make it look nicer rarely gives consistent results.

How do I use 8pt components in Cursor?

Two ways: copy the prompt on a component page and paste it into Cursor, or add 8pt MCP to ~/.cursor/mcp.json and just describe what you need in the chat; Cursor calls 8pt to search and fetch components itself.

If I use 8pt, will my site look like everyone else’s?

No. The prompt tells the model to wire colors, fonts and spacing to your project’s own design tokens; the component only brings structure and motion. With a different theme, the same component looks completely different from one project to the next.

Does 8pt only work in React projects?

No. Component source is native HTML, CSS and a little JS, and the model rewrites it for your project in React, Vue, Svelte, Astro or plain HTML.