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 knowledge, 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.

Try it live

https://github.com/raphael-batte/delibra