Guides
Design systems, tokens and AI agents, answered.
Short answers first, then the detail. Each guide says what Saer does about the problem today and what is not built yet.
- How do AI coding agents use an existing component library?They use what is in their context: the files they open, examples nearby, and any documentation you hand them. A component they never see gets rebuilt.
- How do you prevent AI-generated UI from drifting from a design system?Give the agent the real system before it writes, and check what it wrote afterwards, with deterministic findings rather than opinions.
- How do you discover an undocumented React design system?Read it out of the code: declared tokens, the values actually used, the components and their use sites. The system is there; it is just not written down.
- How do you keep design-system documentation aligned with code?Derive the facts from the code instead of maintaining them by hand, and check the code against the docs on every change.
- How can AI agents reuse existing design tokens?Tell the agent which tokens exist and what each is for, in every theme, and check its output for raw values that equal a token.
- How do you audit a design system in code?Reconstruct the declared system, read every use, and compare: exact drift, near-matches, dead tokens, conflicts, duplicates and accessibility, each with evidence.
- What is design-token drift?Design-token drift is code that bypasses a token: a raw value identical or close to one that already exists, written directly instead of referenced.
- How do you find duplicate React components?Inventory every component, resolve every JSX use to its definition, then flag the same exported name in more than one file, with the evidence.
- How do you check colour contrast across light and dark mode in a codebase?Resolve every text and background pair in each colour context, then apply the WCAG ratio per context. A pair that passes in light can fail in dark.