Do designers need to build a website from scratch?

Not at first. The level I recommend is reading the HTML and CSS an AI writes and making small edits yourself: spacing, colour, order, direction. Writing from scratch comes after you have edited enough real code.

Should I learn CSS or JavaScript first?

HTML and CSS. Most design decisions live in layout, spacing, type and colour, which is CSS. JavaScript matters once you want to understand interaction and state, and it is easier to learn once CSS reads naturally.

Does knowing Figma auto layout make flexbox easier?

Much easier. Auto layout is close to flexbox with a panel on top: direction, gap, padding, alignment and wrap all have CSS equivalents. The mapping table in this article lists each pair.

If AI writes the code, why learn it at all?

To review it. AI is fast and its output usually runs, but it does not know which tokens you banned, which grey fails contrast, or which state you never designed. Reading code is how you catch those before they ship.

How much HTML and CSS should designers learn now?

A designer working with AI needs to read HTML and CSS fluently; writing it well can come later. Look at generated code and you should know how the layout resizes, whether a value is a token, and which states are missing. That takes semantic HTML plus five CSS concepts: box model, flexbox and grid, positioning, variables, responsive rules.

I'm Hai Le, a UI/UX designer with more than five years of experience who also writes React, Tailwind and Next.js. Most "should designers code?" articles were written before AI could produce a working page in minutes, and they argue about whether you should build things yourself. My question is narrower. How much code do you need so that reviewing AI output stays an actual review? This piece sits under Claude Code for designers, which covers the workflow itself.

Do designers still need to code when AI can write the UI?

Yes, for a different reason than before. Designers used to learn code to build prototypes or to talk to engineers. Now an AI drafts the first version, and the designer's job moves to reviewing it.

Reviewing code feels a lot like reviewing someone else's Figma file. You don't have to be faster at drawing than they are. You do have to spot the frame using a colour outside the styles, or the spacing that breaks the grid. When an AI writes p-[13px] or #9a9a9a into a component, only a person who reads code will notice.

This site's repository has a rule I wrote after measuring contrast: neutral-500 and neutral-400 are banned as text colours, because #9a9a9a on white only reaches 2.81:1. WCAG asks for 4.5:1 for body text. A class like text-neutral-500 still builds, still renders, and the page still works. The bug only shows up when someone reads the line and knows why it is wrong.

What level of HTML and CSS is enough?

I think in three levels. Level 2 is the realistic target for a designer working alongside AI.

Level	What you can do	Good enough for
1. Read	Look at classes and properties and predict what they do on screen	Asking the AI better questions, skimming a diff
2. Edit	Change spacing, colour, order and direction; add hover and focus states	Reviewing and adjusting AI output without waiting on an engineer
3. Write	Build a component from scratch, solve awkward layouts, write interaction	Shipping small products, building a design system in code

Level 3 arrives after enough level 2. I haven't found a faster route than editing real code in a project you care about.

Which HTML and CSS concepts should you learn first?

The minimum roadmap, in the order I'd learn it, with what each unlocks:

Semantic HTML. button versus a, nav, main, headings, label paired with input. Once you know these, you catch the AI using a clickable div where a real button belongs, which breaks keyboard navigation and screen readers.
The box model. Every element is a box of content, padding, border and margin. Add box-sizing: border-box to that: with it, width includes padding and border. Tailwind's Preflight turns it on for every element, so a 320px card is 320px including its stroke.
Flexbox and grid. Flexbox lays things out in one row or column; grid works in two dimensions. On this site almost every card, tab row and toolbar is built with one of the two, so this is where study time pays back fastest.
Positioning. static, relative, absolute, fixed, sticky. The pair that matters most is relative on a parent and absolute on a child, which is how badges, close buttons and image overlays work.
CSS custom properties. --name and var(--name). This is where design tokens live in code. What design tokens are explains why I split them into three layers.
Responsive rules. Media queries such as @media (width >= 48rem), relative units (rem, %), and mobile-first thinking: style the narrow screen first, then add rules for wider ones.

Complex animation, CSS-in-JS, preprocessors and build configuration can wait. AI handles them well enough, and they are rarely where a design decision goes wrong.

How do Figma concepts map to CSS?

If you are fluent in Figma, you already know more CSS than you think. These are the pairs I use when explaining it to designers. A few are approximate, and the last column says so.

In Figma	In CSS	Note
Horizontal / vertical auto layout	`display: flex` with `flex-direction: row` / `column`	Close to one-to-one
Spacing between items	`gap`
Auto layout padding	`padding`
Alignment grid	`justify-content`, `align-items`	Main and cross axis swap with direction
Hug contents	Size from content (`width: auto` or `fit-content`)	The default for most elements
Fill container	`flex: 1` in a row, or `align-self: stretch`
Fixed width	`width: 320px`
Wrap	`flex-wrap: wrap`
Ignore auto layout (formerly absolute position)	`position: absolute` inside a `position: relative` parent	Figma itself compares it to CSS absolute positioning
Constraints (left, right, center, scale)	`position: absolute` with `left` / `right` / `top` / `bottom`, or `%` sizes	Approximate; constraints don't apply to auto layout children
Layout grid	`display: grid` with `grid-template-columns`	Figma's layout grid is a guide; CSS grid actually places elements
Variables	Custom properties (`--color-primary`)
Variable modes (light / dark)	Overriding variables under `.dark` or `@media (prefers-color-scheme: dark)`
Text style	One class bundling `font-size`, `line-height`, `letter-spacing`	This site uses `type-*` classes
Clip content	`overflow: hidden`
Corner radius	`border-radius`
Component and variant	React component, with variants as props	e.g. `variant="outline"`, `size="sm"`

The first two rows are why I tell people to get solid at auto layout before touching flexbox. Figma auto layout explained walks through Hug, Fill and Fixed one by one, and learning Figma from zero spends a whole day on it.

What does AI do well, and what must a designer still check?

This split comes from building this site. The left column is work I hand to AI and rarely correct. The right column is what I always check myself.

AI handles well	You still check
HTML structure and flex/grid layout from a description or screenshot	Whether values come from tokens or are hard-coded
Turning a frame into a component in the framework you use	Text contrast, especially grey text on grey surfaces
Explaining any line of code when asked	States nobody designed: hover, keyboard focus, disabled, empty, error, loading
Rewriting CSS a different way, such as flex to grid	A 360px screen, long translated strings, content longer than the mock
Finding syntax and build errors	Dark mode: does each colour flip to the right step
Following rules already written in the instruction file	Which rules are missing from that file, and which are stale

Everything on the right has one thing in common: the AI cannot know design intent you never wrote down. In this repo that intent lives in DESIGN.md and AGENTS.md. What DESIGN.md is covers how to write one.

How do I review code that AI wrote?

Here is real code from the list card used on this site's Blog and Library pages, shortened:

<Link className="group flex rounded-md border border-border hover:bg-muted">
  <p className="type-body-md text-foreground">{title}</p>
  <p className="type-caption text-muted-foreground">{description}</p>
</Link>

I ask four questions, in order:

What is the layout? flex means a horizontal row, the same as horizontal auto layout.
Where do colour and type come from? border-border, text-foreground and text-muted-foreground are tokens. type-body-md and type-caption are the system's text styles. Nothing here is hard-coded.
What does hover do? hover:bg-muted swaps the background to the grey surface. This site bans box-shadow, so cards never lift on hover. If an AI adds hover:shadow-lg, I delete it.
Which state is missing? The full version in the repo also has focus-visible:bg-muted, so keyboard users get the same feedback as mouse users.

Those four questions work on any component. If the class names themselves are the hurdle, Tailwind for designers explains how to read a class string like this one.

To make the AI check its own work first, write these questions into CLAUDE.md as rules. Prompting Claude has concrete examples.

What order should you learn in so you don't give up?

Learn on a real project instead of isolated exercises. A short sequence:

Step	Do this	You get
1	Ask an AI to build a simple page from a Figma frame you already made	Real code for your own design to read
2	Open browser DevTools, click elements, look at the box model panel	Padding, margin and border made visible
3	Edit `gap`, `padding` and `flex-direction` by hand and watch the page change	A link between CSS properties and Figma controls
4	Narrow the window to phone width, note what breaks, fix one thing at a time with the AI	Media queries learned through real bugs
5	Replace every hard-coded colour with a CSS variable	Tokens understood in code

If you haven't set up a tool yet, installing Claude Code goes step by step for people who have never opened a terminal.

Where to go next

Claude Code for designers: a six-step workflow from Figma to a working page.
Tailwind for designers: reading the class strings AI produces.
Figma MCP and Claude Code: letting the AI read variables and components straight from Figma.
Joyme case study: a 50-plus component system, the kind that stays consistent only if someone reads both the Figma file and the code.

If you are hiring a designer who can read their own code, the about page has my background and contact details.

Sources

MDN, Introduction to the CSS box model
MDN, Flexbox and Grids
MDN, position
MDN, Using CSS custom properties
MDN, Responsive design
MDN, HTML: a good basis for accessibility
W3C, Understanding SC 1.4.3: Contrast (Minimum)
Figma, Guide to auto layout
Tailwind CSS, Preflight: sets box-sizing: border-box on every element

CSS definitions and Figma's description of auto layout were checked against the pages above on 4 October 2026. The code sample and contrast ratio come from this site's repository on the same day.