Olives is adding the final piece: proper visual fidelity

Almost a week ago, I built bidirectional sync between code and design tools.
This weekend, I’m adding the final piece: proper visual fidelity.

Quick context: Olives is infrastructure that treats your codebase as the single source of truth for design systems - extracting component structure, syncing bidirectionally with design tools, and eliminating the design-code gap entirely.

What’s working now:

• The structural sync is complete and validated:
• Extract components from code with full architectural fidelity
• Push to Figma (or any design tool in the future) via API
• Designer modifies in Figma → changes flow back to code
• Developer modifies code → changes flow to Figma
• Round-trip tested, deterministic, zero drift

What I’m building this coming few days is a CSS to Figma collection parity, and potentially converting new Figma components to code. Right now, Olives preserves component structure, and organizes them as atoms, molecules, organisms, variants, states, relationships.

Styling has been partial so far since it wasn’t my main focus - but now that the infrastructure is ready, I’m ready to finally go for visual parity.

This “final” phase maps your entire CSS truth to Figma:

• Every CSS file becomes a Figma collection
• Base tokens (hex values) → semantic tokens (theme variables) → utility classes (Tailwind) → component styles
• Cross-collection aliases mirror CSS variable references
• Ground-up dependency resolution

With CSS parity complete, this becomes possible:

git clone shadcn/ui
olives export figma —push

30 seconds later: your entire library is in Figma. Properly nested, styled correctly, variables bound to theme, ready to use, and synced with your code.

Really excited for this - I’ll be sharing a demo soon as it’s ready.