How to Generate Stunning UI with Claude Code: A Step‑by‑Step Front‑End Workflow

Overview

This article presents a reproducible workflow for generating high‑fidelity UI with the Claude Code LLM. The process starts from full‑screen screenshots and extracted HTML/CSS, proceeds through iterative prompting, automatic style‑guide creation, prototype HTML generation, and finally conversion into a maintainable Next.js application. All source files are available at https://github.com/1111-stu/eisenhower-matrix and a live demo is hosted on Vercel ( https://eisenhower-matrix-to-do.vercel.app/en).

Step 1 – Provide style context and generate initial HTML

Supply Claude Code with:

One or more full‑page screenshots of the target UI.

The original HTML and CSS snippets (copied from the browser’s html and body style attributes).

A concise prompt, e.g.:

Help me rebuild the exact same UI design in a single file xxx.html. The extracted CSS is provided above.

Claude returns a raw HTML file that reproduces the visual layout.

Step 2 – Refine the raw UI

Iteratively improve details (button hover shadows, borders, typography) by sending a second prompt that enforces Tailwind‑only styling, in‑line style attributes, and a consistent design language (e.g., Linear, Stripe, Vercel). Example prompt fragment:

Only code in HTML/Tailwind in a single code block. All CSS must be in the style attribute. Include <code>html</code>, <code>head</code> and <code>body</code> tags. Use Lucide icons with 1.5 stroke width. Follow the visual language of Linear/Stripe/Vercel without mentioning the names.

Step 3 – Generate a comprehensive STYLE_GUIDE.md

Ask Claude to produce a detailed style guide that documents:

Overview and design philosophy

Color palette (CSS variables, hex values, Tailwind equivalents)

Typography (font families, type scale, weight guidelines)

Spacing system (Tailwind default scale, component‑specific gaps)

Component styles, shadows, animations, border radius, opacity

Common Tailwind usage patterns

Example component code

Sample prompt:

Great, now help me generate a detailed style guide. Include Overview, Color Palette, Typography, Spacing System, Component Styles, Shadows & Elevation, Animations & Transitions, Border Radius, Opacity, Common Tailwind CSS Usage, and Example component reference design code.

The resulting guide contains CSS variable definitions, color‑usage tables, a type‑scale matrix, and Tailwind spacing utilities.

Step 4 – Build a pixel‑perfect prototype HTML

Using the style guide, Claude constructs a four‑quadrant to‑do‑list prototype in plain HTML. The author reviews the output, adjusts header colors, adds chart components, and repeats the refinement loop until the prototype matches the design intent.

Step 5 – Convert the prototype to a Next.js application

Because a static HTML file is hard to maintain, a final prompt asks Claude to scaffold a Next.js project that reproduces the UI and logic with clear, readable code. Key requirements include:

Pixel‑perfect visual fidelity

Clear folder and component structure

Early‑return patterns for conditional rendering

Tailwind CSS used directly in JSX class attributes

> Great, now you need to build a Next.js app from todo-quadrant.html. Ensure the UI and logic are pixel‑perfectly restored. The code structure should be clear and highly readable. Use early‑return to solve if‑else cases.

The generated Next.js app is deployed on Vercel and serves as the final product.

Extensions

With the STYLE_GUIDE.md in hand, the workflow can be extended to:

Generate matching UI mockups in design tools such as Stitch.

Create art assets with tools like Lovart.

Produce motion graphics using Framer Motion.

Export presentation slides from the HTML source.