May 27, 2026 · 7 min read

How to Build a Design System From Any Reference Website

You found a website whose visual design you love. The colors are perfect, the typography feels right, the spacing is clean. How do you turn that visual inspiration into a reusable design system for your own projects?

This guide walks through the process — from extracting visual data to organizing it into a structured system that you and your AI coding agent can use.

Step 1: Extract the visual foundation

Start by capturing the raw visual data from your reference site. Focus on these five categories:

Colors: Identify 8-12 key colors including primary, surface, text, border, accent, and feedback colors (success, warning, error).
Typography: Document the font stack, scale (sizes for h1-h6, body, small), weights, and line heights.
Spacing: Look for a consistent base unit (often 4, 8, or 16px) and the spacing values used for padding, margin, and gaps.
Borders and radii: Note the border-radius values on buttons, cards, inputs, and other interactive elements.
Shadows and elevation: Capture box-shadow values for different elevation levels (cards, modals, dropdowns).

Manual extraction is possible with browser DevTools, but it is slow and error-prone. DesignSaver automates this step — paste a URL and get all five categories extracted into structured files instantly.

Step 2: Define token naming conventions

Before organizing your tokens, decide on a naming convention. Good token names are descriptive, hierarchical, and consistent. The most common convention is:

{category}-{property}-{variant}
--color-primary-base
--color-surface-raised
--space-padding-md
--font-size-heading-1
--radius-button-md

This naming makes it easy for both humans and AI agents to understand what each token controls.

Step 3: Write DESIGN.md — the human layer

A design system is more than values. It needs rules and intent. DESIGN.md captures the "why" behind the tokens. Include:

Design philosophy: "Clean, minimal, with purple accent for interactive elements."
Color roles: "Primary is used for buttons and links. Surface is the main background. Accent highlights active states."
Typography rules: "Headings use font-weight 800. Body text uses font-weight 400 at 16px."
Spacing principles: "Always use multiples of 8px for spacing. Section gaps are 80px."
Component patterns: "Cards have 12px radius and subtle shadow. Buttons are 8px radius with 1.5px border."
Constraints: "Do not use decorative fonts. Do not use gradients. Keep density low."

Step 4: Structure tokens for AI consumption

AI coding agents parse structured data more reliably than natural language. Organize your tokens in JSON format with clear categories:

{
  "color": {
    "primary": "#6c5ce7",
    "surface": "#0c0e14",
    "text": "#e6e8ee"
  },
  "typography": {
    "fontFamily": { "body": "Plus Jakarta Sans, system-ui, sans-serif" },
    "fontSize": { "h1": "40px", "body": "16px", "small": "14px" }
  },
  "spacing": {
    "base": "8px",
    "section": "80px",
    "cardPadding": "24px"
  }
}

Step 5: Generate platform-specific outputs

A good design system works across platforms. From your base tokens, generate:

CSS custom properties — for direct use in web projects
Tailwind config — for Tailwind CSS projects
Style Dictionary format — for cross-platform design token management
Agent prompts — copy-ready instructions for AI coding agents

DesignSaver generates all of these automatically from any URL. You get CSS, Tailwind config, tokens.json, DESIGN.md, and agent prompts in one export.

Step 6: Version control and iteration

Your design system is a living document. Keep the DESIGN.md and token files in your repository. Update them as your visual identity evolves. Every time you update these files, your AI agent's output updates too — no prompts needed.

Join the DesignSaver beta