Problem
Design systems are scattered across Figma, CSS, code, and documentation. There is rarely a single structured representation of how the system actually works. Humans can connect the pieces by reading files and understanding the context. Agents can’t — they see fragments and have to infer the system, often reinventing tokens, components, and patterns that already exist.
This makes agents unreliable: when the system isn’t available as structured context, they fill the gaps themselves and hallucinate.
Solution
DeLibra turns a design system into a libra: a structured library that humans read as documentation and agents use as data and context. A dedicated skill lets an agent create and work with a libra from existing sources — Figma, production CSS, or a codebase.
Creating a libra
A libra starts from whatever already exists — a Figma file, production CSS, a repository, or an empty scaffold. Guided by the DeLibra skill, an agent extracts primitives into tokens and groups recurring patterns into components.
The result isn’t a screenshot or a static document, but a structured system, addressable element by element.
From there the libra is a living document. Add a component, adjust a token, and every specimen that references it updates with it.
What a libra holds
Tokens — the primitives, named and grouped, with every value traceable to where it came from.
Components — real specimens, not pictures: each one rendered from the tokens it consumes.
Light and dark themes — both themes carried on the same specimen, so drift between them is visible instead of discovered in production.
Mobile and desktop views — viewport-aware previews sitting beside the desktop specimen.
The code layer
Every element in a libra is inspectable as code. Open any component, token, or state and read the Html/CSS behind it — then copy it, export it, or generate the files directly.
The comparison view is where it earns its keep: drop in external CSS — a live site, a legacy stylesheet, another team’s build — and DeLibra diffs it against the libra. Gaps come back as a list: what drifted, what was never tokenized, what to fix first. The audit stops being an afternoon of eyeballing and becomes a diff.
Outcome
The libra provides the data and context. A dedicated skill provides the instructions for agents to create, inspect, and extend it — giving agents a concrete system to follow instead of having to infer one.
