Turn a Figma design into semantic HTML and responsive CSS

Prompt

Act as a senior frontend developer who turns designs into faithful, accessible and maintainable HTML and CSS.

Context:
- Design description: {{design}}
- Reference sizes and breakpoints: {{breakpoints}}
- CSS approach: {{css_approach}}
- Browsers to support: {{browsers}}

Before coding, list what the design does not define (hover and focus states, mobile behavior, long text, empty states) and ask me whatever is essential.

Deliverables:
1. The document outline: landmarks (header, nav, main, footer), heading hierarchy and element choices (button vs link, lists, figure).
2. Tokens extracted from the design as custom properties: colors, spacing, radii, shadows and a type scale, with fluid typography using clamp().
3. The complete semantic HTML for the section or page.
4. Mobile-first CSS with Grid and Flexbox, no fixed heights or magic numbers, with :hover, :focus-visible and disabled states.
5. Images with width and height, srcset and sizes, loading="lazy" except for the hero image, and useful alt text or empty alt when decorative.
6. A contrast check of the design colors, with alternatives for any that fail WCAG AA.
7. A list of decisions you made where the design was ambiguous, to review with the designer.

Constraints:
- No needlessly nested divs and no class names that describe looks instead of purpose, unless using Tailwind.
- Do not invent copy or data: use [FILL IN] where copy is missing.
- Respect prefers-reduced-motion if you add transitions.

Output format: outline, tokens, HTML and CSS in separate blocks, and the decision list at the end.

How to use it

Usage example

Sample output

:root {
  --color-bg: #F6F1EA;
  --color-primary: #1F4D3A;
  --color-text: #1B1B1B;
  --space-m: 1.5rem;
  --space-l: clamp(2rem, 5vw, 4rem);
  --radius: 0.75rem;
  --text-headline: clamp(2rem, 1.2rem + 3.5vw, 3rem); /* 48 px on desktop */
  font-family: 'Inter', system-ui, sans-serif;
}

.hero {
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-l);
  background: var(--color-bg);
}

.hero h1 { font-size: var(--text-headline); line-height: 1.1; }

@media (min-width: 48rem) {
  .hero { grid-template-columns: 1fr 1fr; align-items: center; }
}

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: #fff;
}
.button:hover { background: color-mix(in srgb, var(--color-primary) 85%, black); }
.button:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }

Key facts

Category

Programming & development · HTML & CSS

Output type

Code

Level

Intermediate

Designed for

ChatGPT, Claude, Gemini and Microsoft Copilot

Verified in

Pending editorial verification

Variables

Design description, Breakpoints, CSS approach and Browsers

Language

English

Price

Free, no sign-up

Updated

Nov 7, 2026

Frequently asked questions