Extract a Complete Design System for an AI Coding Agent

Contents

• [Start with a repeatable checklist](#start-with-a-repeatable-checklist)
• [Convert observations into reusable rules](#convert-observations-into-reusable-rules)
• [Write an implementation-ready handoff](#write-an-implementation-ready-handoff)
• [Validate before building new screens](#validate-before-building-new-screens)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

To extract a complete design system for an AI coding agent, compare several representative pages, identify repeated visual decisions, and turn those observations into reusable values, component rules, and implementation guidance. Cover typography, colors, spacing, layout, surfaces, borders, radii, shadows, states, and responsive behavior. Mark uncertainty clearly instead of presenting guesses as facts.

Start with a repeatable checklist

Review a landing page, a product or dashboard page, and a page with forms or dense interaction when those pages are available. Compare at least two pages before deciding that a detail is shared.

Capture these categories:

1. Typography: families, available variants, weights, sizes, line heights, letter spacing, casing, and text roles.
2. Color: page background, surfaces, primary and muted text, borders, interactive states, accents, success, warning, and danger colors.
3. Layout: container widths, columns, gaps, section spacing, alignment, responsive changes, and common content widths.
4. Components: buttons, links, inputs, cards, navigation, tables, badges, dialogs, and repeated content patterns.
5. Visual treatment: radii, shadows, dividers, gradients, image crops, icon sizing, hover states, focus states, and disabled states.

Ask whether another developer could build a new page from the notes without repeatedly reopening the source. If not, add examples, measurements, or clearer usage rules.

The captured Linear references below are useful for comparing repeated page treatment. They show a near-black canvas, muted dividers, compact controls, a cool accent, and Inter typography. Treat those as observed examples from the supplied captures, not as a complete design system for every website.

Convert observations into reusable rules

Organize the handoff into four layers:

• Primitive values: raw colors, spacing steps, font sizes, radii, border widths, and shadow values.
• Semantic values: background, surface, text, muted text, border, accent, focus, and destructive roles.
• Component values: button padding, control height, card radius, input border, and heading spacing.
• Usage rules: when each value applies, which variants exist, and how states change.

Group values by role rather than creating a separate decision for every sampled shade. Record whether a value is exact, approximate, or inferred from repeated observations. For responsive behavior, state what changes at each observed breakpoint: columns may collapse, spacing may tighten, navigation may simplify, or cards may become full width.

For typography, document display headings, section headings, body copy, labels, navigation, and captions. The supplied Linear evidence identifies Inter at weights 400 and 500 for body, interface, heading, and emphasized text examples. Do not extend that observation to unverified font files, sizes, or licensing details.

Write an implementation-ready handoff

Include:

• a short visual summary and scope
• a table of values, roles, and confidence
• typography roles and responsive type behavior
• container, grid, and spacing rules
• component recipes with anatomy, variants, and states
• accessibility checks for focus, contrast, labels, and keyboard use
• a page-building recipe showing how pieces combine
• an uncertainty list for details that still need review

Give the coding agent constraints such as using semantic values instead of raw colors and reusing an existing card recipe for repeated content. Include approved and incorrect examples. This reduces one-off buttons, arbitrary shadows, inconsistent muted text, and invented radii.

If implementation output is needed, use a supported export format after reviewing the observations. Exported details describe what the captured pages appear to use; they do not prove the source site's private internal rules.

Validate before building new screens

Recreate one existing section before generating a new page. Compare hierarchy first: heading scale, content width, whitespace, and surface contrast. Then check control height, border tone, radius, shadow, icon alignment, focus treatment, and responsive behavior.

Use this acceptance checklist:

• Are repeated roles using the same values?
• Do headings and body text preserve the observed hierarchy?
• Do controls share consistent height, padding, and states?
• Does the layout behave sensibly between captured widths?
• Are focus and error states specified rather than invented?
• Are uncertain values clearly marked for review?

This turns a visual inventory into a practical foundation for new screens. To let an AI agent inspect saved website references while coding, install Fudge for your AI agent.

Use this in your AI agent

> Inspect the saved website references and extract a complete implementation-ready design system. Compare multiple pages to identify repeated typography, color roles, spacing, layout rules, surfaces, borders, radii, shadows, responsive behavior, and component states. Separate observed values from inferences, name semantic values, document component recipes and accessibility requirements, and finish with a concise DESIGN.md-style handoff for building a new page consistently.

Structure the handoff around decisions the codebase can reuse. Start with a table for colors, spacing, type sizes, radii, borders, shadows, and layer order. Give each semantic value a stable name such as color.surface, color.textMuted, or space.section rather than scattering raw values through examples.

Next, define typography roles and component recipes. For each button, input, card, navigation item, and alert, specify anatomy, variants, dimensions, states, and responsive behavior. Explain the visual rule before describing the CSS or utility classes.

Add a page recipe showing container width, section spacing, heading sequence, and common composition patterns. Mark values as observed or approximate. Finally, ask the agent to recreate one reference section and compare hierarchy, spacing, contrast, and interaction states before generating additional screens.

Give the agent a short set of rules for every UI task. Require semantic values instead of new raw colors, spacing values, or radii unless it explains the exception. Require existing component recipes to be reused before a new variant is introduced.

Keep the handoff close to the code, such as a DESIGN.md file linked from the agent instructions. Include approved examples and a short list of drift to avoid, such as one-off button heights, inconsistent muted text, or arbitrary card shadows.

For each new screen, have the agent report which values and components it used, then compare the result with an existing reference. Review the highest-impact differences first: type hierarchy, container width, whitespace, surface contrast, and control sizing. This creates a practical review loop without treating the first extraction as perfect.

Related questions

• Extract Component Styles for an AI Coding Agent
• Extract a Color System for Your AI Coding Agent
• How to Extract Design Tokens for an AI Coding Agent
• How to Extract a Border Radius Scale for an AI Coding Agent