AI
Design systems for AI-assisted development.
Make design intent readable in code.
Less works through the system itself: the Figma library, semantic variables, component properties, code counterparts and the handoff between them. The test is a real product task, built with AI assistance and reviewed by design and engineering.
A screen can look finished and still leave the build guessing.
Which component is canonical? What does a color mean? Which states exist? How should the layout respond? Where is the production component? Those decisions need to live somewhere the team and its tools can use.
amber / 600Appearance alone
color/status/warningWhat the value means
Properties and states
<StatusBadge tone="warning" />Approved implementation
Illustrative naming. The specific vocabulary must come from the client’s library and codebase.
What the refactor involves.
Audit one real flow
Find raw values, duplicate components, ambiguous names and missing states in a product journey the team is actively building.
Output: a ranked gap list tied to actual screens and code.
Structure the library
Write semantic tokens. Define component properties and variants. Name layers by purpose. Document responsive and non-happy-path behavior.
Output: a library with explicit roles and component contracts.
Connect to code
Map Figma components to production equivalents and reconcile props, tokens, states and usage examples with frontend engineers.
Output: a design-to-code map the team can maintain.
Test in a build
Have AI-assisted development implement a representative flow. Review what it reuses, hard-codes, guesses or invents; feed corrections back into the system.
Output: a working test and a specific correction list.
The change is in the workflow.
Design → system context → working code → review → system improvement.
The library stops being only a source of screens. It becomes an operational reference for designers, developers and AI tools. Each build reveals which rules are still missing.
Across Less’s AI practice.
We are working with teams on product interactions, platform processes and the systems around delivery.
These references show the wider AI practice. They do not attribute this illustrative system walkthrough to either client.
Read the companion guide.
A deeper explanation of the audit, semantic tokens, component contracts, design-to-code mapping and the build test.
Read the guideBring us a system bottleneck.
Ask about this workMake AI work in the product—and in the way the product gets made.