Blog / AI tools

How to make UI/UX design more polished with AI

AI can build a working screen in a minute. Getting it to feel designed takes a few more deliberate passes. Here is the workflow we use: set the rules first, fill the gaps AI leaves, and review like a designer.

By Abdullah NomanOctober 13, 20265 min read

AI copilot assist panel, hairline isometric illustration

Ask Claude, Cursor, v0 or Lovable for a dashboard and you get something that works and looks fine. Ask ten people and you get ten dashboards that look the same: default spacing, a blue button, a grey box where an image should be, and nothing for the moments when there is no data. The model is not bad at design. It just fills every decision you did not make with the most average answer.

Polish is the sum of those decisions. The good news is that AI is very good at applying rules consistently once you give it rules. So the workflow is: decide the rules, give the AI the parts it cannot invent, then review like a designer.

Why AI-built UI looks generic

  • No design tokens. Without a defined palette, type scale and spacing, the model picks safe defaults screen by screen, and they drift.
  • Happy-path only. Prompts describe the full screen. Empty, loading, error and first-use states get skipped or become one line of grey text.
  • Placeholder visuals. Models cannot draw a consistent illustration set, so you get grey boxes, emoji, or random stock images in mixed styles.
  • Template copy. "Welcome back!" and "Lorem ipsum" make a screen feel unfinished faster than any spacing issue.
  • No review. The model does not look at what it built unless you make it.

Step 1: write the rules once

Put a short design brief in your project where the AI reads it every time: a CLAUDE.md, Cursor rules file, or the project instructions in your builder. Keep it concrete:

# Design rules
- Colours: use tokens only. Background #FAFAF9, text #0E1014, muted #5B616C,
  border #E6E7EA, accent #3A57FF. Dark theme values in globals.css.
- Type: Geist. Scale 12 / 14 / 16 / 20 / 28 / 40. Headings tracking -0.02em.
- Spacing: 4px grid. Card padding 20. Section gaps 48 / 64.
- Radius: 10 on controls, 14 on cards. One shadow style, used rarely.
- Every list, table and page has empty, loading and error states.
- Illustrations: Liniqo only (hairline isometric), accent = brand accent,
  light and dark versions. Never placeholder boxes or emoji.
- Copy: plain, specific, sentence case. No "Welcome back!", no lorem ipsum.

Ten lines like this remove most of the "AI look", because every screen now starts from the same decisions.

Step 2: give the AI what it cannot invent

A model can write layout and code all day. What it cannot produce on demand is a consistent visual language: illustrations in one style, matched to your brand colour, with dark versions. That is the gap that makes most AI apps feel like prototypes.

This is where Liniqo fits. It is our library of 2,049 hairline isometric illustrations, and it runs an MCP server, so Claude, Cursor, Windsurf, VS Code and many builders can search it and place illustrations themselves. Connect it once:

# Claude Code
claude mcp add --transport http liniqo "https://liniqo.com/mcp"

# Cursor: ~/.cursor/mcp.json
{ "mcpServers": { "liniqo": { "url": "https://liniqo.com/mcp" } } }

Then ask in plain words:

  • "Add Liniqo illustrations to every empty state in the app, 160px, using our accent colour."
  • "Replace the grey hero placeholder with a Liniqo illustration about invoices. Dark theme too."
  • "Give the three feature cards matching Liniqo illustrations for analytics, team and security."

The model searches the library, picks pieces that match the topic, saves the SVGs into your project and wires them in. Because they all come from one library, drawn on one grid with one stroke, the screens finally look like they belong together. Setup for every tool is on the AI tools page, and there is more detail in How to add illustrations with Claude, Cursor and Lovable.

AI agent workflow, hairline isometric illustration
Let the AI search and place illustrations instead of leaving placeholders. AI agent workflow

Step 3: build the states, not just the screen

Polished products feel finished in the moments nobody screenshots. After the main screen works, ask for the rest explicitly:

For the Invoices page, add:
1. First-use empty state: Liniqo illustration, headline
   "Your invoices will appear here", one button "Create invoice".
2. Filtered-to-nothing state with "Clear filters".
3. Loading skeleton that matches the table layout.
4. Error state with "Try again".
Use the design rules in CLAUDE.md.

Our empty state guide lists eight states worth covering, with copy you can adapt.

Step 4: make dark mode real

AI often implements dark mode by swapping the background and text colour, and stops there. Ask it to check borders, shadows, charts and images in dark mode. Illustrations are the usual casualty: white boxes glowing on a dark page. Liniqo illustrations come in light and dark versions and use CSS variables, so you can ask the AI to switch them with your theme. See Dark mode illustrations.

Step 5: add motion in one or two places

A little motion makes a product feel crafted; a lot makes it feel like a demo. Pick one or two moments, such as finishing onboarding or a hero illustration, and use a short draw-on animation that respects reduced motion. Liniqo's animated versions do exactly that with plain CSS. More in Animated SVG illustrations.

Step 6: review like a designer, with the AI

Models are surprisingly good critics when you give them a screenshot and a checklist. After each screen:

Here is a screenshot of the Settings page. Review it against our design
rules and list the 10 most visible problems, most important first:
alignment, spacing on the 4px grid, type scale, contrast, inconsistent
radius or shadows, missing states, placeholder content, copy that is
vague. Then fix them.

Do it at phone width too. Most AI-built layouts break first at 390px.

A polish checklist

AreaPolished looks like
ColourTokens only; one accent used with intent
TypeA fixed scale; balanced headings; real hierarchy
SpacingOne grid; groups separated by space, not lines
VisualsOne illustration style everywhere, brand accent, light and dark
StatesEmpty, loading, error and first-use on every list
CopySpecific, short, sentence case, no placeholders
MotionOne or two purposeful moments; reduced motion respected
MobileChecked at 390px; tap targets at least 44px
AccessibilityContrast checked; decorative images hidden from screen readers

What to keep for yourself

AI is great at applying a system. It is weaker at deciding what matters: which feature leads, what the empty state should encourage, where the product should feel calm and where it should feel exciting. Make those calls yourself, write them into the rules, and let the AI do the repetitive work at a level of consistency that would take a person days.

Questions

Can AI design a good user interface?

AI can build functional, reasonably clean screens quickly. It looks polished when you give it explicit design rules, the assets it cannot invent such as a consistent illustration set, and a review step with screenshots.

How do I stop AI-built apps looking generic?

Define tokens for colour, type, spacing and radius in a rules file, replace placeholders with one consistent illustration style, write specific copy, and design empty, loading and error states.

How do I add illustrations with Claude or Cursor?

Connect an illustration library over MCP. With Liniqo, add https://liniqo.com/mcp as an MCP server, then ask in plain words, for example to add illustrations to every empty state in your brand colour.

Is it allowed to use Liniqo illustrations through AI tools?

Yes. The Liniqo licence covers using the illustrations through AI coding tools to build your own projects, and client projects on Pro and Lifetime.

Keep reading