The AI Output Problem
Designers Are Struggling
The 2026 AI in Design Report listed the top 3 challenges designers are facing with AI as: inconsistent quality, lack of control and a lack of context.
An incredibly concerning revelation, since context, control and consistency are arguably the most critical tenets of good product design.
Top challenges of using AI in design work
2026 AI in Design Report
Unreliable or inconsistent output quality
62%
Lack of control over output
45%
Lack of product/brand context
42%
Hit or Miss
These numbers were reported along with a perceived 85% increase in efficiency and 51% increase in output quality, which reveals a striking duality.
It seems like AI is a wildcard. It can vastly improve workflows when it hits the mark and waste time when it doesn't.
So how do we enforce these essential principles when working with AI?
A Proposed Solution
"Agents follow constraints perfectly. They follow instructions inconsistently." - Alejandro Bauer
In his LinkedIn article, Alejandro Bauer argues that traditional design systems were built around humans, which presents a problem with AI agents because they lack one of our most innate characteristics: judgment.
He proposes a systemic re-design around a six-layer architecture (foundation, context, governance, agent instructions, source of truth and enforcement), where agents load only what they need, leaving no room for guesswork.
Consistency & Context
Bauer proposes that the best way to lock agents into consistent outputs and stop them from guessing is with a strict governance structure.
Canonical Tokens
The tokens file is a strict definition of the only tokens (colors, spacing, shadows, corners, etc.) which are allowed. No drift is acceptable.
Brand Context
The context of the ecosystem the agent is designing for is achieved through brand.MD and design.MD files with mood, voice & style guardrails.
Governance
The structure is enforced through a combination of auditing skills and governance files such as anti-patterns.MD and composition-rules.MD.
Diving Deeper
The CITIES design system is a mature, lived-in organism spanning multiple operating systems, interlinked applications, sub-products and teams.
Before jumping all-in with the systemic conversion, I had to gain a deeper understanding of the framework I would be working with.
Co-Learning With AI
This was the perfect opportunity to start learning leveraging AI immediately. It was not just me learning about the topic, but the agent as well. Claude Opus 4.7 was the obvious model of choice due to the massive context window.
As I went through online research, clarification prompts and industry standards, I set up the documentation structure with consecutive log files.
The Extraction Process
Tech Stack
The tech stack revolved mainly around was a no-build, no-bundler and no-dev server setup concept. You edit a component, refresh the page and see the change. This was crucial for quality control in the early stages of the project.
REACT
React was a no-brainer choice since it offers the flexibility of both plug-and-play and custom components without the weight of a production stack or infrastructure.
VANILLA CSS
Styling was kept in plain CSS with custom properties. There's nothing between the design tokens and the rendered pixel, keeping components legible for both humans and agents.
CLAUDE CODE
Claude code was the only real contender for complex systemic work, with Sonnet models handling token-conscious refactors while Opus 4.7 executed multi-layer reasoning tasks.
Systemic Extraction
Component-extract.MD and Component-audit.MD were two critical skills I developed through the process of extracting the CITIES components from Figma to code. Both refactored multiple times through the process.
Opus 4.7 with the 1M context window came in clutch here. It is the perfect model capable of conducting the extraction process along with the continuous self-improvement of the operational framework at the same time.
The CITIES Twist
The main reason I kick-started this project were the massively disappointing results from Figma Make, Lovable and Claude Code, even with the design library attached and the MCP server connected.
Quality & Accuracy First
The focus of converting the design system was ensuring that everything from the small iterations to big moonshot prototypes created with AI actually look, feel and act like CITIES products.
"Quick-and-Dirty" Innovation
One problem I ran into with the 6 layer framework was that the focus on code drift and component graduation made it hard to use in daily creative work.
The main CITIES twist lies within the proprietary "Quick-and-Dirty" decision matrix, which guides the agents, with clear constraints, into deciding between re-using the available system and generating something new.
This process is then executed with the in-house skills innovation-skill.MD and use-external-skill.MD with exact operational logic for innovation.
The Concrete Results
Design to Code Connection
We now have a real-time connection between Figma files and the codebase, where agents can access matching properties and variations and use them correctly both in code and when writing on canvas.
Another benefit of the new system is that we can talk to the coding agents in CITIES language, using the Figma properties and real tokens in prompts.
Token Efficiency
With all the proprietary skills and instructional layers, the agent is guided through the process very efficiently. This will get even better with further iterations as we use the new system for product work.
Ulocked Creativity
The main goal of the project was achieved spectacularly well.
We now have a system at our disposal which can generate incredibly creative layouts, while staying true to the CITIES product principles.
CITIES Goes Medieval
The accuracy of the system is demonstrated below by the POC layout of our product in the medieval times. The tokens and components are all adhering to the CITIES specifications, within a wildly different concept.
One-shot Accuracy
According to the log files there were around 53 larger operational refactors through the 8 week creation process of the system.
The framework can now one-shot a feature up to a 95% of completion.
Accessibility Support
CITIES Branding Dilemma
At CITIES we are facing some long-standing accessibility concerns with the primary product color derived from the corporate identity.
Having the entire system available in an AI readable format makes it incredibly easy to conduct accessibility audits and look for any additional issues.
Real-time Solutions
New concepts can be integrated into the product immediately, which makes it much easier to test and iterate the proposed solution on the spot. This is a meaningful uplift concerning any feature tied to disabilities and inclusivity.
The Future Outlook
Continuous Improvement
The biggest W of converting to the AI-native system is the fact that we own the entire framework in-house.
As we work on future features and feed the tweaks and fixes back into the system we get a compounding ROI. Small improvements add up over time, a huge payoff for a meticulous team that thrives on structure.
Handing Over Leverage
Along with all the benefits of the project, there are also some concerning trends surfacing. Switching to fully AI supported workflows should still be approached with caution.
Currently, the AI tokens are still heavily subsidized by VC money. The $100 tier subscriptions work well, but the $20 tiers feel like a scam, barely capable of handling 1 or 2 complex prompts before hitting the limit.
It almost feels like paying to not be able to work. At CITIES we are staying vigilant about upcoming token churn and dependencies.
Keep The Craft Going
Even if the token prices 100X, I can always use my brain as the reasoning engine and a pen and paper as the agent tools to draft a product workflow.
I can't predict the future, but I feel like those old school human skills that got us into design in the first place might just come in handy again.
So keep the craft going, keep learning and keep experimenting.
