AI-ready mobile design system
I led a six-month, hands-on transformation of Meera’s production mobile design system into an AI-assisted delivery system spanning Figma, Codex, iOS and Android.
The original problem looked like a component-library problem. A previous AI implementation could generate plausible interfaces, but almost every visible component was invented rather than taken from the production system.
I found that component structure alone was not enough. The agent also needed the context experienced designers carried implicitly: what each component was for, when to use it, behavioural constraints, relationships between patterns, platform rules and the reasoning behind product decisions.
I restructured the Figma organisation, components and semantic tokens; built that missing context layer; established production Storybooks for iOS and Android; and connected Figma, repository guidance and production code into an agent-driven workflow.
Median time from product brief to a reviewable interface fell from two working days to 1.5 hours. More than 95% of generated UI now uses approved production components.
The components existed. The context the agent needed did not.
Meera already had a mature production product and a large design system. Experienced designers knew which components were current, how iOS and Android differed, which patterns belonged together and when established rules should bend. An AI agent did not have that institutional knowledge. A previous attempt to generate product interfaces exposed the gap immediately. The output looked reasonable at first glance, but almost every component was invented. It approximated the visual language instead of composing the actual production system. The failure was useful because it changed how I understood the problem. Improving prompts or renaming a few components would not be enough. A component library tells an agent what exists; it does not automatically explain what those components mean. I needed to make the product’s implicit design judgement explicit and machine-readable.
I rebuilt the design system as machine-readable product context.
I audited the system across Figma, iOS and Android and identified where humans were compensating for ambiguous naming, inconsistent structures, missing states and undocumented product rules. I reorganised the Figma library, renamed and restructured component families, clarified variants and rebuilt the token hierarchy around semantic intent rather than visual values alone. But the larger change was contextual. Components were documented with purpose, usage rules, behavioural constraints and relationships to other patterns. Product and platform rules were moved out of people’s memory and into repository guidance that an agent could retrieve before making a decision. Tokens also needed meaning. It was not enough for Codex to know a spacing or colour value; it needed to understand where that token was appropriate and where it was not. The same vocabulary was aligned across Figma, iOS, Android and documentation so a product concept had a predictable identity throughout the system. I also established production Storybooks for iOS and Android, covering all critical component states and giving both humans and agents an executable reference for how the real system behaves.
I connected design context and production code into a repeatable agent workflow.
Once the system itself was structured, I focused on how agents consumed it. I tested Figma’s official MCP first. It was useful for giving agents structured access to design metadata, screenshots, variables and component information. I also tested the third-party Figma Console MCP and found it more practical for deeper workflows because it exposed a broader set of tools. Rather than treating MCP as a shortcut for exporting screens, I used it as one part of a progressive context-building workflow. The agent could inspect the relevant Figma structure and visual reference, resolve components against the production system, retrieve semantic variables and repository rules, and only then generate UI code. For feature work, I connected this with PRDs and existing product context so Codex could reason from requirements through design-system constraints to implementation. Generated output reused real production components and tokens instead of recreating their appearance. I also used the workflow in reverse for design QA: comparing requirements, existing patterns and generated output to surface missing states, unsupported edge cases, component misuse and token drift before they reached production. When the same failure appeared repeatedly, I fixed the source context or system structure rather than adding another prompt workaround.
Reviewable UI moved from two days to 1.5 hours—with 95%+ production-component reuse.
The result was not simply faster prototyping. The design system became part of the software-delivery architecture. Before the transformation, producing an interface ready for design review took a median of two working days. The same stage now takes approximately 1.5 hours. A typical interface previously required 20–30 corrections during design review. It now requires 2–4, while documenting review feedback has fallen from most of a working day to approximately one hour. More than 95% of generated UI now uses approved production components, with invented or incorrect elements appearing only occasionally. Four product managers and eight product designers adopted Codex for first-pass product work. They can explore and build interfaces without starting in Figma, while developers receive output already grounded in the same production components, tokens and behavioural rules. For medium-sized features, typical design-to-PR lead time fell from approximately five days to two days. The transformation moved Meera beyond one-off AI prototyping. Design intent, system context and production implementation now form a connected workflow in which AI handles more of the translation and composition while human designers remain responsible for product judgement and final quality.
