Ship a design system without visual drift

Use Brief to map our frontend design system. Find tokens, themes, shared components, hand-written CSS, representative screens, and visual or accessibility tests. Don't edit yet. If useful, fan out read-only audits for tokens, components, and verification, then recommend the smallest useful mission.

Run a Brief design mission to build a dev-only Theme Lab. Import production tokens and components rather than demo copies. Show foundations, common components, important states, responsive layouts, accessibility behavior, and supported themes. Add focused tests and keep the route out of production.

Inspect <Figma frame URL> with the connected Figma tools. Use Brief to map it to our existing tokens, components, rules, and tests. Compare it with the Theme Lab and explain the design-to-code gap before editing.

Now run a bounded Brief design mission for <surface>. Reuse approved tokens and components, update the Theme Lab when shared foundations change, and stop if the work needs a new system-level design decision.

Add a multi-layer design-system verification loop to this mission. Check token definitions and forbidden raw values; component variants and states; Theme Lab coverage; rendered fonts, line height, padding, gaps, alignment, radii, borders, and shadows; responsive layouts; visual regression; accessibility; and representative product flows. Report what ran, what passed, and what remains unproven.

Save the Theme Lab, token files, shared primitives, pilot screen, and tests as a Brief reference implementation. Record where it applies and what should not be copied blindly.