LawnGuru · Design system · AI automation

A design system that maintains itself, from Figma token to shipped component.

LawnGuru needed a design system that could keep pace with product work instead of drifting behind it, so the path from Figma tokens to production components had to run without manual upkeep.

View live design system

Challenge

Design systems tend to decay at the handoff. Tokens move in Figma, components lag in code, and documentation slowly becomes a record of what used to be true. The real problem was never the initial design, it was the cost of keeping three sources in agreement.

Approach

I built the system as a pipeline rather than a library. Figma variables act as the single source of truth, and Figma MCP plus Claude Code automate the translation work in between, generating multi-platform token sets, React components, and documentation from the same definitions.

Outcome

A single pass now audits and updates 670+ component variants, along with the multi-platform token sets and the documentation, with nobody hand-editing a file. Engineers pull the generated components straight into product work instead of rebuilding one-offs, which is the real test of whether a design system is being used rather than admired.

Trade-offs

Not everything was worth automating, and deciding where to stop was most of the work. Accessibility was the first line I drew: generated output looked correct but could not be trusted on contrast ratios or semantic structure, so every colour pairing and component role is still verified by hand before it ships. Complexity was the second. Primitives with predictable structure generate reliably, but anything carrying real interaction logic or state I wrote myself, because a component that is subtly wrong costs more to find and fix than one written from scratch. The pipeline is deliberately narrow: it does the repetitive translation work at volume, and stops where judgement starts.

More work

Read case study

Conversational Booking

Replacing a bundled Typeform with a chat-led booking flow: one question set per service, reusable chat primitives, and photo capture that never blocks the order.