DesignSync

loveholidays’ design system hadn’t received meaningful technical investment in four years. Documentation sat scattered across Figma, Storybook and Google Docs, with no single source of truth and no owner. As AI-assisted development accelerated across the company, that became a structural liability. AI tools can’t read undocumented knowledge, so they fall back on generic patterns and ignore brand conventions. What the team ended up with: more than a dozen internal AI prototypes that looked like they came from different companies, and ideas that took ten minutes to generate but the better part of two days to bring back onto brand. Both are directional observations rather than tracked measurements, because nobody was timing it, which is part of the problem this work set out to fix.

Company	loveholidays
Role	Principal Designer
Team	Two designers, with light-touch support from a web infrastructure engineer. No dedicated engineering headcount.
Timeframe	January – March 2026

The goal: Build machine-readable design system infrastructure that makes brand-aligned AI output the default. Prove it with working code instead of a proposal.

My scope: Two designers. No dedicated engineering headcount. No formal coding background on either side. Built in approximately three months using Claude Code.

How I scoped it: The director of design made OKR space to improve the design system’s AI foundation. No defined scope. No solution specified. I partnered with the lead designer to define and build the solution ourselves, with light-touch support from a web infrastructure engineer to ensure we stayed within existing tech stacks. We used Claude Code to contribute directly to a running codebase as designers without formal engineering training.

loveholidays was scaling fast. AI prototyping had accelerated across product and engineering teams, but the design system couldn’t keep up. Every AI tool hitting the codebase defaulted to its own interpretation of the brand because no machine-readable source of truth existed.

We structured the project around seven testable hypotheses, from brand-aligned AI output through to market scalability and governance. The most important was that the cost of inaction compounds. Every month of delay raises the remediation cost as more AI-generated work piles onto a weak foundation.

The brief needed that risk translated into an investable programme, and it needed credibility with engineering, which meant shipping working infrastructure rather than a deck.

Before writing a line of code, I mapped what “better” meant:

• Brand-aligned AI output
• Scalable multi-brand tokens
• Machine-readable component intent
• Human oversight baked into AI workflows
• A clear path to engineering adoption

This gave us a testable framework rather than an open-ended build.

Documentation in Figma or a Google Doc is invisible to AI tools, so writing more of it would not have helped. The design system needed structure an AI tool could query.

Four-tier architecture built on W3C DTCG standards: Primitives → auto-generated Palette → curated Semantic → Component tokens. Components only reference the semantic layer. One build command generates 9,200+ lines of brand-specific CSS across three brands and two market variants, using OKLCH colour format for perceptual consistency across every theme switch.

Adding a new market like Austria is a 50-line JSON file. Onboarding a B2B partner requires no component code changes at all. Stack: Figma Token Studio, Style Dictionary v5, Tailwind CSS v4.

A core part of this work was defining a new token naming structure from scratch. Each tier has semantic meaning baked into the name itself. A token at the primitive tier like core.primary tells you it is a raw brand value. At the semantic tier, brand.primary.base tells you how that value is used across the brand. At the component tier, ds.button.primary.base.hover.background tells you exactly which element, which variant, which state, and which property it controls. Any AI tool, engineer or designer reading the token name can see its intent without tracing it back through the system. That was deliberate: the token name carries the documentation.

I chose to embed governance into the tools rather than write policy documents. Proto Studio, our AI prototyping sandbox, runs 11 discovery steps before generating a single line of code. It queries the registry, validates output, self-heals errors, and uses only components the design system supports. Teams can explore freely with DS primitives. Anything outside the system surfaces a transparent approval request before entering the codebase.

This was a slower build, and direct code generation would have been faster. A tool that produces inconsistent output with no oversight would have left the original problem in place.

Two designers specified, designed and built both the AI illustration tool and the competitive analysis agent using Claude Code, with no engineering hire. Designers can contribute to a production codebase when the tooling supports it.

The illustration tool encodes six specific skin tones, enforces a four-colour brand palette and includes a scored approval workflow ($0.009 for concept drafts, $0.13 for hero banners). It tracks generation cost per asset by default.

• Token pipeline: one build command generates CSS, a Tailwind theme, and a JavaScript runtime object across three brands
• Component library: six fully token-driven components following a strict nine-rule contract that AI tools cannot break accidentally
• Machine-readable registry: intent, usage rules, and failure modes encoded for every component
• Proto Studio: brand-aligned AI prototyping from text, image, or Figma URL input
• AI illustration generation with human approval gates and per-generation cost tracking
• Competitive analysis agent: full funnel capture (desktop and mobile) with CSS token extraction and structured UX gap analysis
• Claude Code skills: reusable commands that load the full design system into any AI tool’s working memory

The 7.6/10 is our own assessment, not an external audit. We scored the prototype against published accounts of what mature AI-ready design system infrastructure looks like: token architecture, machine-readable component intent, governance and adoption path. It was built to make the investment case legible internally, and it should be read as a structured self-assessment rather than a third-party benchmark.

Industry benchmarks frame the investment case. Miro’s equivalent infrastructure let a team of six serve 40+ product teams and cut design support queries by 70 to 80%. Enara Health dropped design system monitoring costs from $169/month to $0.20 on a comparable AI-ready foundation. DesignSync is built on the same principles, and we treated those efficiency gains as the baseline rather than the stretch.

After a live prototype walkthrough, stakeholder feedback confirmed the tool was usable in its current state. The follow-up question from the room: “When can I use it?” Engineering investment backed for Q3 to move from prototype to production programme.

Leading with a working prototype rather than a proposal was the right call. It moved the conversation from “is this worth investing in?” to “when can we productise this?”

What I’d do differently: instrument usage earlier. I have strong proxy metrics (token coverage, automation hours, benchmark score) but no direct evidence yet on time-to-prototype reduction or design-to-dev error rates. Those baselines need to be captured from day one of the Q3 build, before adoption scales.

Where it stands now. This is not in production. As of August 2026 the agreed next step is a protected shared MCP pilot with three to five users, with validation still underway. Engineering investment is backed for Q3; the build has not replaced the prototype.

The next 12 months: get the token pipeline and registry into daily use across all product teams, and measure the reduction in AI prototype correction time against the pre-system baseline. The commercial case gets much stronger once those numbers exist.

The broader lesson: a design system becomes a strategic asset when it works as infrastructure. AI will write more of the product either way, and the open question is whether the design system is ready to govern what it writes.