How to build a design system for vibe coding

AI code generators produce inconsistent visual output across sessions and files. The hero you generate in the first prompt uses one type scale. The features section you generate twenty minutes later uses a different one. By the time you reach the footer, the spacing, colours, and border radii have drifted from the original design in ways that are individually minor and collectively visible. The product looks assembled from parts that were never coordinated.

A design system solves this. Most vibe coders skip the design system because they assume it requires Figma expertise, component libraries, and a dedicated design process. It does not. A vibe coding design system is a set of fixed values embedded in HTML that the AI reads and applies. No Figma file. No Storybook instance. No design background required. If you can paste HTML into a prompt, you can build a design system that produces a consistent UI across every page and session.

What a vibe coding design system actually is

A traditional design system is a collection of Figma components, documentation, and coded component libraries maintained by a design team. A vibe coding design system is simpler. It is a collection of fixed values: font sizes in pixels, colour hex codes, spacing amounts, border radii, and line heights. These values are embedded in an HTML template that you paste into your AI coding tool at the start of every session.

The difference matters. When you describe a style in words ("use a clean, minimal aesthetic with a blue accent"), the AI interprets that description differently each time. The output varies between sessions because the model infers values rather than reading them. When you paste HTML that contains font-size:13.5px, letter-spacing:-0.02em, and border-radius:8px, the AI reads those exact values and applies them. There is no interpretation. There is no drift. The design tokens travel with every prompt.

This is what makes a vibe coding design system different from a style guide or a mood board. It is not a reference the AI looks at. It is code the AI reads and reproduces. The values eliminate inference entirely. The AI applies them precisely instead of generating from its training defaults.

The five design tokens every system needs

A complete vibe coding design system does not need dozens of variables. Five categories of design tokens cover every visual decision the AI will make during generation.

1. Type scale

Three to four sizes that create clear visual hierarchy. A display heading at 28 to 32px with font-weight 600 and letter-spacing -0.03em. A section heading at 15 to 17px with font-weight 600 and letter-spacing -0.01em. Body text at 13 to 14px with line-height 1.7 to 1.8. A label or caption at 10 to 12px with font-weight 500. These four tiers separate every level of content on the page. Without them, the AI collapses headings and body text into similar sizes and the hierarchy disappears.

2. Colour palette

One primary accent colour specified as a hex value. A set of neutrals with a slight hue bias rather than pure grey. The neutrals cover four roles: primary text, secondary text, borders, and surface backgrounds. The accent colour appears only on primary CTAs and active states. Specifying colours as hex values rather than Tailwind classes prevents the AI from reaching for its default indigo palette. A neutral palette with warm or cool bias produces a product that looks considered where pure Tailwind greys look generic.

3. Spacing rhythm

A base unit multiplied consistently. If your base unit is 4px, your spacing scale is 4, 8, 12, 16, 24, 32, 48, 64. Card padding uses one step. Section gaps use another. The relationship between them creates a visual rhythm the eye recognises as intentional even when the viewer cannot articulate why. Without a fixed spacing rhythm, the AI picks values from its training data that are individually reasonable and collectively inconsistent.

4. Border radius

Border radius should be calibrated by element type, not applied uniformly. Buttons at 6 to 8px. Cards at 10 to 14px. Input fields at 4 to 6px. Pill badges at 999px. The AI default is to apply 12px (Tailwind's rounded-xl) to every element on the page. This uniform softness is one of the clearest visual tells of a vibe-coded website. A design system that specifies different radii for different element types eliminates it.

5. Letter spacing

Letter spacing is the design token most vibe coders overlook and the one with the highest impact per character of CSS. Display headings need negative tracking: -0.03em to -0.05em at 26px and above. Body text sits at 0 (the default, which is correct at body sizes). Labels and small caps benefit from slight positive tracking: 0.02em to 0.04em. This three-tier approach to letter spacing is what separates a heading that looks typeset from one that looks generated.

How to build your design system from a single template

You do not need to define these five token categories from scratch. The fastest way to build a vibe coding design system is to extract it from an existing template that already embodies the visual direction you want.

Step 1. Pick a template that matches your visual direction

Browse the hero templates or features templates on Moon. Choose one that carries the feel you want for your product. A dark gradient hero for a premium developer tool. A light editorial hero for a content product. A warm image hero for a consumer brand. The template does not need to match your content. It needs to carry the right design tokens.

Step 2. Extract the values it uses

Read the template HTML and note the five token categories: the font sizes and weights on headings and body text, the hex colour values, the padding and margin amounts, the border-radius values on buttons and cards, and the letter-spacing on headings. These values are your design system. Write them down or keep the template open as your reference document.

Step 3. Paste the template at the top of every vibe coding session

Open Bolt, Replit, Lovable, Claude Code, or Cursor. Paste the complete template HTML at the top of your prompt. Follow it with: "Use this HTML as the design system for everything you build. Match the font sizes, spacing, colour values, and border radii exactly." Then describe your product requirements below. The AI inherits the full design system from the template without you explaining each value individually.

Step 4. Use the template as the source of truth for every future prompt

Save the template in your project folder. Every time you start a new vibe coding session, paste it at the top. Every time you ask the AI to build a new section or page, include it. The template is not a one-time reference. It is a persistent design system document that keeps the AI aligned across every generation.

Keeping the design system consistent across multiple pages

Style drift is the main failure mode of vibe coding without a design system. The AI applies your design tokens correctly in the first prompt, then reverts to its training defaults in the second or third prompt of the same session. By the time you have generated five pages, the type scale, spacing, and colours have shifted noticeably from where they started.

The solution is mechanical. Paste the reference template at the start of every new prompt, not just the first one. The AI does not retain the design system between prompts unless you include it each time. This is the single most effective habit for maintaining a consistent UI across a vibe-coded product.

For multi-page products that span several section types, paste two to three templates from the same visual family to cover more surface area. A hero template and a features template from the same design language give the AI enough context to generate pricing sections, footer sections, and dashboard views that match, even without a dedicated template for each. The tokens in the reference templates propagate to every generated component.

This approach works identically across tools. Bolt, Replit, Lovable, Claude Code, and Cursor all read HTML the same way. The design system is portable because it is embedded in code, not in a tool-specific format.

Common mistakes that break design consistency

Using word descriptions instead of fixed values

"Make it clean and modern" is not a design system. "Use font-size 13.5px, line-height 1.8, colour #555, border-radius 8px on cards and 6px on buttons" is a design system. Words require interpretation. Values do not. Every word in your prompt that describes a visual quality instead of specifying a value is a point where the AI can drift from your intent.

Mixing templates from different design languages

A dark editorial hero from one visual family combined with a bright card grid from another creates conflicting design tokens. The type scales, spacing rhythms, and radius strategies clash. The AI receives contradictory values and picks from both, producing a result that looks like two products stitched together. Use templates from the same visual family for every section on a page.

Not including the template in follow-up prompts

The design system only works when the AI can read it. If you paste the template in your first prompt and omit it in the second, the AI no longer has the reference values. It falls back to its training defaults for the new section. The result is a product where the first page looks professional and the second page looks AI-generated. Include the template in every prompt that generates new visual output.

Letting the AI pick complementary colours

Prompts like "add a secondary accent colour that complements the primary" invite the AI to generate a value from its training data. The generated colour may be reasonable in isolation but inconsistent with your palette. Specify every colour in your design system as a hex value. If you need a secondary accent, choose it yourself and add it to your template. The design system should contain zero values that require the AI to generate.