How I Build Better UI for Websites (Using Figma + AI Workflows)

Most website interfaces are not badly designed. They are undecided. Three things compete to be the most important element on the page, the spacing came from whatever felt right at the time, and the result reads as noise even though every individual piece is fine.

This is the process I use to avoid that. It is deliberately boring in the early stages, because the early stages are where the decisions that matter get made — and it is where AI is least useful.

Step 1: Decide the hierarchy before opening Figma

Before any layout work, I write down, in plain sentences, what the page is for and what the visitor should notice in order. Not a wireframe — a numbered list.

1. 01What is this and who is it for — one line, readable in under two seconds.
2. 02The single action I want taken.
3. 03The one piece of evidence that makes that action feel safe.
4. 04Everything else.

If two items are tied for first place, the design cannot fix it. Something has to lose. That conversation is much cheaper as a sentence than as a revised comp.

Step 2: Build the spacing system, not the layout

Inconsistent spacing is the most common reason an interface feels amateur, and it is entirely mechanical to fix. I set a base unit of 4px and only use multiples of it, with a restricted set for layout rhythm: 8, 12, 16, 24, 32, 48, 64, 96.

In Figma this becomes variables, not memory. Once spacing is a variable, changing the rhythm of an entire page is one edit instead of forty. The same set then maps directly onto whatever the frontend uses, which is the point — a design system that does not survive the handoff is a mood board.

/* The Figma variables and the CSS tokens are the same set of numbers.
   Anything not on the scale is a bug, not a judgement call. */
:root {
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem;  /*  8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-6: 1.5rem;  /* 24px */
  --space-8: 2rem;    /* 32px */
  --space-12: 3rem;   /* 48px */
  --space-16: 4rem;   /* 64px */
  --space-24: 6rem;   /* 96px */
}

One rule does most of the work: the space between a label and its content must be smaller than the space between that group and the next one. Proximity is how people perceive grouping. Get it backwards and the page reads as unrelated fragments regardless of how good the typography is.

Step 3: Typography as a scale, in two sizes

I define a type scale with a fixed ratio — usually around 1.25 for content-heavy pages and 1.333 where a display headline has to carry the page — and I define it twice: once for mobile, once for desktop. Then I interpolate between them with clamp() rather than adding breakpoints.

/* One declaration replaces three breakpoints, and there is no
   viewport width at which the headline is momentarily wrong. */
h1 {
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

Two details separate typography that looks designed from typography that does not: tighten letter-spacing as size increases, and tighten line-height as size increases. Large text set at body-copy metrics always looks loose.

Step 4: Where AI actually earns its place

AI is not good at deciding what matters on your page. It is good at the volume work around that decision, and using it for the right half of the job is most of the benefit.

• Copy variants — generating eight headline options in the same voice so I can judge length and rhythm against the real layout instead of lorem ipsum.
• Realistic filler — names, product descriptions and edge-case content of plausible length, which exposes the layout bugs lorem ipsum hides.
• Critique — describing a screenshot back to me. If the description does not match my intended hierarchy, the hierarchy is not reading.
• Token and state generation — producing the full hover, focus, disabled and error variants of a component once I have defined the base.
• Accessibility passes — checking contrast ratios, flagging missing labels, and pointing out where colour alone is carrying meaning.

AI is a fast intern with excellent recall and no taste. Give it the work where recall matters and keep the work where taste matters.

Step 5: Design the states, not the screen

The comp everyone approves is the happy path with ideal content. The states that ship broken are the other ones. Before handoff I make sure every component exists in five conditions: empty, loading, populated, error, and overflowing with far more content than anyone expected.

The overflow case is the one that catches people. A card designed around a twenty-character product name breaks on a sixty-character one, and there is always a sixty-character one.

Step 6: Test the thing that converts

A prettier interface is not the goal; a clearer one is. I check three things before calling a page finished, none of which require a research budget:

1. 01The five-second test — show the page to someone for five seconds, then ask what it does and what they would click. If they cannot answer, step 1 failed.
2. 02The squint test — blur the page until text is unreadable. The visual hierarchy should still be obvious from shape and contrast alone.
3. 03The real-device test — a mid-range phone on a throttled connection. Interfaces that only work on the designer's laptop are a recurring and expensive category of mistake.

None of this is exotic. It is a sequence: decide the hierarchy in words, systematise the spacing, scale the type, use AI for volume rather than judgement, design the unhappy states, and verify with tests that take minutes. The interfaces that come out the other side are not more decorated — they are more decided, and that is what reads as quality.