Convert a Website into a Tailwind v4 Theme for AI Coding Agents

A website-to-Tailwind v4 theme converter turns observed colors, typography, spacing, radii, shadows, and component patterns into a project-ready theme for an AI coding agent. The most useful workflow is to inspect the reference first, separate observation from interpretation, and export only the details needed for implementation.

Inventory the reference before writing tokens

Start with a visual inventory instead of asking an agent to imitate a screenshot. Record:

1. Typography: family, available weights, size scale, line heights, letter spacing, and where each style appears.
2. Color roles: page background, elevated surfaces, primary text, muted text, borders, accents, and visible status colors.
3. Layout rules: container width, gutters, spacing rhythm, grid or flex behavior, and responsive changes.
4. Shape and depth: radii, border widths, shadows, gradients, and overlays.
5. Components: buttons, inputs, cards, navigation, tables, badges, and repeated states.

Then decide which observations belong in a global theme and which should stay local to a component. A color used throughout the interface deserves a named role. A one-off illustration color usually does not.

The Linear reference is useful for studying a compact sans-serif system. Its typography evidence connects Inter at weight 400 with body copy, labels, navigation, and controls, while weight 500 is used for headings and emphasized interface text. Treat that as an observed example, not a universal rule for every site.

Build semantic Tailwind v4 tokens

Name values by their job rather than storing an unexplained list of hex values. Semantic names help an AI coding agent make consistent choices across pages.

Use the observed values to fill the variables, then create component recipes for recurring patterns. A primary button needs more than a background color. Document its text color, padding, radius, weight, hover state, focus treatment, and disabled state. Do not treat a static screenshot as proof of every interaction state.

Validate the theme on one representative page

Before building a full application, ask the agent to create a small test page containing a heading, body copy, muted metadata, primary and secondary buttons, an input, a card, a border, and one responsive layout change.

Check the result against the reference:

• Does the type hierarchy use the right family, weight, size, and line height?
• Does each important color have a role and readable contrast?
• Are spacing values regular enough to form a scale?
• Are mobile and desktop layouts represented separately where needed?
• Are hover, focus, selected, disabled, and error states known or clearly marked as unverified?
• Can another developer understand what each variable controls?

When something looks wrong, classify the mismatch as a token problem or a component problem. Avoid scattering one-off overrides through the application.

Export the details an agent can use

Export font families and observed variants, type scale, color roles, spacing, borders, radii, shadows, gradients, and reusable component styles. Leave out incidental content, hidden states, and coordinates that will not recur. Fudge lets you inspect a captured page's structure and observed design details, then export supported findings to Tailwind v4 or another project artifact.

Add a short instruction after the theme: use these variables first, preserve the role names, avoid near-duplicate colors, and ask before inventing a new token. Ask the agent to label uncertain values and to distinguish visible observations from implementation suggestions.

Use this in your AI agent

> Inspect the saved website reference, identify its typography, color roles, spacing scale, borders, radii, shadows, gradients, and repeated component states. Convert the observed details into a Tailwind CSS v4 @theme block plus a concise DESIGN.md. Use semantic token names, note uncertain values, preserve responsive behavior, and separate observed facts from implementation suggestions. Then show the proposed tokens and explain which page patterns they support.

Install Fudge for your AI agent

Use a small semantic token layer first, then let component styles consume those tokens. Start with roles that appear across the page: background, surface, foreground, foreground-muted, border-subtle, accent, and visible status colors. Add a compact spacing and radius scale only after checking repeated distances in the reference.

Give each token one job. If two grays look similar but one is used for body text and the other for borders, keep both roles instead of merging them. If a value appears only once, keep it as a component-level exception rather than promoting it into the global theme.

Tell the agent to use existing semantic tokens before adding new values, avoid arbitrary hex colors in components, preserve the type scale, and record the reason for every new token. List the family and supported weights explicitly so the implementation does not request variants that were not observed.

Ask it to validate the theme through one representative page before building the whole application. Include a heading, body copy, muted metadata, primary and secondary buttons, an input, a card, a border, and at least one responsive layout change.

Use this review loop:

1. Build the sample page only from the exported variables.
2. Compare its type hierarchy, spacing, contrast, radii, and depth with the reference.
3. List mismatches as token changes or component changes.
4. Update the theme and render the sample page again.
5. Freeze approved tokens before adding more routes.

Ask the agent to flag anything it could not verify, such as a font variant or interaction state that was not visible. Once the sample is close, instruct it to reuse the same roles and component recipes across the project.

Related questions

• Convert Website Design Details into Color and Font Tokens
• Website to Tailwind CSS theme converter for AI coding agents
• Convert Website Design Details into CSS Custom Properties
• Convert Website Design Details Into Structured JSON for AI Coding Agents