AI-Assisted Workflows, Design Systems

Floret Codegen: closing the gap
between design intent and production code.

An AI-assisted approach built on vector search, matching design intent to production code so teams spend less time translating a screen and more time deciding if it's right.

RoleDesign System Lead
ApproachVector search
Live since2025
2-minute read
Problem
Developers kept hand-translating designs into code the system had already solved once.
Approach
Built an AI-assisted tool that matches design intent to the closest existing pattern and its code.
Execution
Describe what's needed in natural language; Codegen retrieves the nearest match, ready to adapt.
Result
60–80% less effort depending on complexity, live in production since 2025.

Floret solved this once. Developers kept re-solving it.

The design system already had the answer for most screens. The gap wasn't decisions, it was distance, between a finished design and the code that matched it.

01

A near-identical pattern usually already existed somewhere in Floret's 65+ components

02

Finding it meant searching documentation manually, by memory or by keyword

03

Once found, translating it into working code was still manual, screen by screen

04

System knowledge lived in people's heads, not somewhere machine-searchable

Same outcome, a shorter distance to get there

Not a different design process, the same judgment, applied to something machine-searchable instead of memory-dependent.

Getting from a finished screen to working code
Manual hand-off vs. Codegen-assisted retrieval
Manual hand-off
1
Read the finished design
2
Search docs for a similar pattern
by memory or keyword
3
Hand-translate styles and structure
4
Review against the design
Codegen-assisted
1
Describe the need in natural language
2
Codegen retrieves the closest match
pattern + implementation code
3
Developer adapts and confirms it's right
60–80%
Effort reduced, by complexity
2025
In active use
Vector search
Core matching approach

Retrieve what's already been decided, don't regenerate it

Reframe

Retrieval, not generation

The goal was never "generate UI from scratch." Floret already contained the right answer for most screens, the task was finding and adapting it, consistent with the system's core philosophy of reuse over reinvention.

Index

Made the system searchable by meaning

Represented Floret's patterns and components so they could be matched by intent, not just exact keywords, an AI-assisted approach built on vector search.

Retrieve

Natural language in, pattern and code out

Developers describe what they need in plain language; Codegen retrieves the most relevant design pattern along with its implementation code, ready to adapt.

Judgment

Kept the decision with the developer

Codegen surfaces a strong starting point, not a final answer, the developer still decides whether the match is right for the context, same as before.

Key insight

The bigger lesson wasn't about AI. It was about reducing the distance between intent and implementation. AI wasn't replacing expertise, it was making existing knowledge easier to discover, that's where the real value came from.