Extract a spacing scale for an AI coding agent

Contents

• [Start with repeated relationships](#start-with-repeated-relationships)
• [Build the scale from evidence](#build-the-scale-from-evidence)
• [Keep responsive behavior visible](#keep-responsive-behavior-visible)
• [Check implementation against the page](#check-implementation-against-the-page)
• [Use this in your AI agent](#use-this-in-your-ai-agent)

To extract a spacing scale, measure repeated gaps across page sections and components, group near-equal values, and map each group to a clear role such as inline gap, control padding, card padding, or section spacing. Give your AI coding agent the measurements with their locations, because a useful scale must explain how spacing is used, not just list numbers.

Start with repeated relationships

Inspect a representative set of pages and record distances between elements that appear more than once. Prioritize:

• Page edges and the main content container.
• Section-to-section gaps.
• Heading-to-paragraph and label-to-control gaps.
• Card padding and gaps between cards.
• Button and input padding.
• Inline icon-to-label spacing.
• Grid and list gaps.
• Navigation and toolbar spacing.

Measure the rendered distance, not the apparent distance in a compressed screenshot. Record the viewport, responsive state, component, and whether the value is horizontal or vertical. A 24px gap between cards may be intentional while a similar-looking 22px gap inside a compact control may belong to a different role.

The supplied examples show two captured Linear pages using compact controls, muted dividers, consistent typography, and related surface treatment. They can help you compare rhythm across two page references. They do not include measured spacing values, so do not present a specific Linear scale as extracted evidence from those cards.

Build the scale from evidence

Create a table before choosing token names:

Next, cluster values that are identical or close enough to be the same design decision. Do not round every measurement automatically. If a site repeatedly uses 8, 12, 16, 24, and 32px, that is stronger evidence of a scale than one isolated 20px gap. Keep an outlier when it has a clear job, such as a large hero separation or a special modal inset.

A token set can then look like this:

These numbers illustrate the format only. Replace them with values supported by the site you inspect. Semantic aliases are often more useful for an agent than raw steps alone:

Keep responsive behavior visible

A spacing scale is not necessarily one fixed list at every viewport. Check whether page padding, grid gaps, section spacing, and control sizes change at narrower widths. Record the breakpoint or condition when it is observable. Ask the agent to preserve relationships, not merely copy desktop pixels into mobile layouts.

For example, the desktop page may use a wide content gutter and generous section gaps, while the mobile page uses smaller horizontal padding but keeps the same control rhythm. That suggests shared tokens with responsive aliases rather than separate arbitrary values for every component.

Check implementation against the page

After the agent applies the tokens, compare the recreated page at each captured viewport. Check the outer container first, then sections, then component internals. This order helps identify whether a mismatch comes from the page grid or from local padding.

Also check text wrapping. A spacing change can alter line breaks, which changes section height and makes later gaps appear wrong. Verify buttons, inputs, cards, navigation, and repeated lists as a group. If one component needs an exception, document why instead of silently adding another number.

A good final handoff contains the measured table, token proposal, responsive notes, component mappings, exceptions, and a short list of values that still need visual review. That gives the coding agent a usable system while keeping uncertain observations honest.

Use this in your AI agent

> Inspect the captured website across its available pages and viewport states. Measure repeated horizontal and vertical gaps for the container, sections, headings, controls, cards, lists, navigation, and grids. Return each observation with component, location, direction, viewport, measured value, and confidence. Cluster repeated values into a spacing scale, preserve meaningful outliers, and create semantic aliases for control padding, card padding, inline gaps, and section spacing. Include responsive changes and explain every proposed exception. Do not invent measurements that the capture does not support.

Install Fudge for your AI agent

Treat similarity as evidence, not an automatic merge. First check whether the values repeat in the same kind of relationship. A 15px label-to-input gap and a 16px card inset may be visually close but serve different roles. A 15px value that appears across many controls may be intentional, while one isolated measurement may come from text metrics, borders, rounding, or capture scale.

Ask the agent to compare the values at the same viewport and account for borders and font rendering. Merge them when they repeat, produce the same visual rhythm, and do not create visible drift in the affected components. Keep them separate when they belong to different roles, change at different breakpoints, or have a clear product reason. In the handoff, record the original observations and the proposed merge so the decision can be revisited without remeasuring the whole site.

Create the tokens that explain the largest number of repeated relationships first. A practical order is: page gutter, section gap, card or panel padding, control height and padding, inline icon-to-label gap, grid gap, and text-group spacing. These roles usually shape the page more than rare hero or promotional values.

Use a small base scale plus semantic aliases. For example, a base step can support several components, while space.card, space.control, and space.section explain the intended use. Keep unusual values as documented exceptions until you confirm they repeat. Then have the agent rebuild one representative page, compare outer spacing before inner spacing, and check mobile or narrow states. If the page still feels inconsistent, adjust the token mapping rather than adding many new numbers immediately.

Related questions

• Extract a Typography System for an AI Coding Agent
• Extract Shadow Styles for an AI Coding Agent
• Get the Border Radius Scale from a Live Website
• Extract a Page Layout for an AI Coding Agent