Keeping UI in sync with code: Olives

What’s the worst part about UI design other than doing it? Keeping it in sync with the code.

Well, here’s hoping you like Olives.

Over the past few weeks, I’ve been working on something I’m calling Olives: a CLI tool that extracts design structure directly from React (and soon Svelte) codebases into a deterministic, diffable index.

The problem:
Most “code to design” tools import rendered output and flatten everything. The moment your code changes, the design file is orphaned. A “SearchBar” composed of an “Input” and a “Button” becomes three unrelated shapes. The composition graph is lost.

What Olives does differently:
It reads your codebase as a structural graph, not a visual snapshot:

• Component registry with dependency edges (who contains who)
• Visual state extraction (isLoading, disabled, hover, focus-visible)
• Conditional class rules with evidence (ternaries, cn/clsx, cva variants)
• Breakpoint and token usage mapped to components
• JSX skeleton with preserved component instances

The output is a schema-validated raw.json: It’s deterministic, traceable, and diffable. Every extracted fact includes file path + character range + code snippet as proof.

For the nerds:
The extraction is built on static AST analysis (ts-morph), with deterministic sorting and stable hashing. It handles shadcn-style patterns, captures cva variant branches, and treats CSS module references and theme imports as first-class visual surfaces. No runtime, no rendering, just structural truth.

The technical foundation comes from research I published late last year on persistent context management (SR-SI) - the same principles that let AI maintain architectural memory across thousands of prompts and hundreds of sessions, turned out to work for code-to-design extraction too.

Why “Olives”?
Figs + Olives = Tapenade.
The Figma plugin (when it exists) will be called Tapenade. I couldn’t resist.
(pretend the falafels emoji are figs)

It’s still early and iterating, but so far I’ve got the core extraction pipeline live and working against real Shadcn components.

If you’re interested in following along as this develops, let me know. I’m considering open-sourcing parts of it, but for now I’m just building and learning in the open.