How to Extract a Border Radius Scale for an AI Coding Agent

To extract a border radius scale for an AI coding agent, inspect repeated components, record their visible corner treatments, group confirmed repetitions into named roles, and preserve meaningful exceptions. The result should explain both the value and where the value belongs.

Inspect repeated components first

Review buttons, inputs, search fields, cards, panels, dialogs, menus, badges, avatars, media frames, and compact controls. For each example, record:

• the approximate radius
• whether all corners match
• whether the shape is circular or pill-shaped
• the component's size and purpose
• whether nested content uses a smaller radius
• whether borders, shadows, or backgrounds follow the same curve
• whether the treatment changes at another viewport size

Repeated use is stronger evidence than one decorative example. If several controls share one treatment, that is a good candidate for a control radius. A larger value used by cards or dialogs may belong to a surface role even when the numbers are close.

The two captured Linear references below provide useful examples for comparing shape, spacing, surfaces, and typography across pages. They show a near-black canvas, muted dividers, compact controls, a cool accent, and Inter typography. They do not establish exact radius values, so do not infer a complete scale from these observations alone.

Turn observations into roles

Use a table while inspecting:

Replace bracketed values with measurements from the captured page. Keep the scale small when only a few values repeat. Do not merge two close values until you compare them at the same size and confirm that the components serve the same role. A one-off treatment can remain an exception with a short explanation.

For an AI coding agent, document usage rules alongside values. radius-md: 12px is less useful than radius-md: 12px, used for cards and panels; do not use it for compact controls. Mark every value as confirmed, approximate, or inferred. If exact measurements are unavailable, use named variables with estimated values that are easy to replace rather than presenting guesses as facts.

Validate the proposed scale

Apply the proposed roles to one button, input, card, modal, and badge. Check whether the progression from restrained controls to larger surfaces remains clear. Review nested content: an image inside a rounded card often needs an inner radius that is smaller than the outer radius, with spacing between the two curves.

Compare responsive states when they are available. A radius may remain constant as a component shrinks, or a mobile layout may use a simpler treatment. Record the observed behavior instead of creating a new token automatically.

Before handing the result to the agent, include the page or viewport used, the confidence for every measurement, and a short exception list. This makes later visual review faster and prevents estimated values from becoming accidental rules.

Use this in your AI agent

> Inspect the captured website and extract its observed border-radius system. List relevant components, their approximate radius or shape, whether they are circular or pill-shaped, and any nested-radius relationship. Group repeated values into named CSS variables, preserve meaningful exceptions, separate confirmed observations from estimates, and apply the result to buttons, inputs, cards, panels, dialogs, badges, and media frames without inventing unsupported values.

Install Fudge for your AI agent

Compare the components at the same visual scale and ask whether they communicate the same job. A compact button and a larger card may have similar numbers but still need separate roles because one controls interaction density and the other defines a surface hierarchy.

Check repetition, context, and resizing. A value repeated across controls is stronger evidence for a control role. A value repeated across cards, dialogs, or media frames may belong to a surface role. If the components resize differently or use different nested content, keep the roles separate.

Merge values when the difference is not visible at normal viewing size, the components share the same purpose, and one variable will remain clear to future developers. Keep them separate when the difference is intentional, repeated, or tied to a component family. Record the original observations before merging and tell the coding agent that the merged value is a normalization choice, not a confirmed fact.

Use this prompt after filling in the observed values:

> Implement the observed border-radius system as CSS custom properties. Define --radius-sm, --radius-control, --radius-md, --radius-lg, --radius-pill, and --radius-circle only when the captured evidence supports each role. Add a comment beside every value naming the observed component and marking the value as confirmed or estimated. Apply the variables to buttons, inputs, cards, panels, dialogs, badges, avatars, and media frames according to their roles. Use smaller inner radii for nested content only when the spacing and outer radius support that relationship. Do not replace a one-off radius with a shared variable unless the component clearly matches an existing role. Report missing measurements instead of inventing them.

Before accepting the implementation, compare one example of each role side by side and check compact controls, larger surfaces, pills, and nested media corners.

Related questions

• Extract a Color System for Your AI Coding Agent
• How to Extract a Website's Typography System
• Extract a Complete Design System for an AI Coding Agent
• Extract a Website's Spacing Scale