AI Workflow
Programmatic AI assembly line with 90 percent component compliance and 60 percent cost reduction
Ideas
Ideas
Experiments, notes, and work that does not fit a client case study.
The TL;DR
In early 2026, internal access to AI tools created a chaotic wild west of browser prompting. While the initial layouts looked great, they introduced severe scope creep, broken design patterns, and massive engineering bloat.
I stepped in and built a local multi agent framework using Claude Code to stabilize the workflow. This put Figma back at the center as our single source of truth and created a programmatic design system enforcement pipeline for direct to code prototyping.
60 percent reduction in overall design to code production time.
40 percent velocity gain in shipping production ready frontend logic.
90 percent token and component accuracy enforced via a custom automated scoring script.
Zero handoff bloat achieved by delivering functional code based UI via Git Pull Requests.
The old linear process is dead
Research, iterate, design. That sequence was built for specialised teams with time to hand work down the line. In 2026 it does not hold.
Staff reductions driven by AI mean I now own research, design, prototyping, copy, motion, and presentation across multiple products at once. A linear waterfall cannot keep up. The work has to loop in parallel: design the block UI in Figma, have Claude Code build the prototype, iterate on copy and animation in the live build, then present and take feedback in the same session.
Skill.md and sibling markdown files — high-density guardrails the agents read before they execute.
Disciplined Claude Code process
Click any stage. Human gates stay human. AI is used where it amplifies speed, not where it replaces judgment.
Human gate
AI stage
Sonnet
Heavy lift
Haiku
Validation loop
Disciplined AI use in enterprise design means knowing where the model belongs. Ideation, prototyping, and cheap validation loops are amplified. Requirements, pattern selection, review, and user testing stay human. The output that reaches engineering is validated design, not unchecked generation.
The Problem: Browser Prompting and the 10 Topping Pizza
When AI tools were first opened up internally, there was zero skepticism. Everyone wanted to experiment. Because the code generated by basic prompts looked visually superior to standard developer UI, I was quickly trialed to push code directly to engineering teams.
We rapidly hit a wall with browser based iteration. Without strict guardrails, we lost our source of truth. The AI started generating hallucinated features, breaking conventional layout grids, ignoring typography scales, and introducing massive scope creep. It became the classic 10 topping pizza problem where the model kept inventing things nobody asked for. This resulted in long hours spent manually wrestling the code back into compliance.
The Strategy: Enforcing a Programmatic 90 Percent Tolerance Gate
I got sick of wrestling with browser inputs, so I moved the workflow into a local terminal using Claude Code. I established a strict architecture where static Figma designs remained the source of truth, utilizing Claude to interpret visual layouts and token frameworks with high precision.
To automate governance, I designed a multi agent validation pipeline backed by a custom auditing script:
The Scope Gatekeeper verifies instructions against strict product requirements to block scope creep.
The Design System Auditor programmatically scans the generated code class names to check exactly which components are pulled from our official design system.
The 90 Percent Tolerance Rule is a calculation built into the pipeline that scores design system utilization. If component compliance falls below a strict 90 percent threshold, the build automatically halts, flags the non compliant code, and surfaces it for manual direction.
Reusability Enforcement forces the model to reuse instead of rebuild existing components. This optimizes token spend and prevents the model from writing global UI from scratch.
The Human in the Loop Reality
While the automated agent workflow keeps accuracy above 90 percent, real senior oversight is mandatory for handling exceptions. The system is not a replacement for craft. It requires acting like an Art Director for AI.
When the audit flags a score below 90 percent, it is usually because a specific use case requires a highly customized interaction or validation state that the standard library does not support. My role shifts to executing final quality control. I review the flagged exceptions, verify the end to end user flow logic, and manually override code where unique components are genuinely required.
Closing the Handoff Gap: The Engineering Inspector
To share these highly accurate prototypes across distributed teams, I integrated directly into the engineering team Git workflow to open Pull Requests.
To completely remove traditional handoff friction, I built two key collaborative features into the running prototypes:
In Context Comments allow stakeholders and engineers to click anywhere on the live running web screen to leave feedback. This mimics the collaborative feel of Figma but on production ready code.
Component Inspect Toggle is an interactive toggle engineered directly into the UI. Engineers can switch it on or off to instantly see a visual overlay of exactly which design system components are being utilized in the code, ensuring total transparency between design intent and frontend execution.
Pragmatic Governance: A Scalable Repeatable Engine
This initiative started out of professional skepticism. I wanted to know if we were genuinely saving engineering cycles or just burning corporate budget on token fees. By conducting a granular cost benefit analysis calculating my hourly rate against daily token spend, I proved that this agentic workflow reduced design to production costs by 60 percent compared to traditional static handoffs.
This framework is not a one off experiment. Because the multi agent pipelines, automated auditing scripts, and inspector toggles are entirely packaged, I bring this custom development engine to every new project I touch.
The repository structure sits cleanly on GitHub. The corporate design system component library is pulled in securely via standard dependency management inside node modules where local terminal agents can immediately parse and import verified components. System architecture, strict interaction criteria, and flow logic are maintained in markdown files to provide high density, low token context that the agents read as their behavioral guardrails before executing code. I never start from scratch, allowing me to bypass baseline setup phases and immediately spin up compliant enterprise grade prototypes at maximum velocity.
Finding Hope is a real-time editorial canvas mapping the world’s emotional temperature. Live news RSS headlines are parsed via secure Gemini AI onto a 3D WebGL globe. Framed in a brutalist layout, the piece pairs tactile data viz with an evolving, responsive analogue synthesiser soundtrack.
Live at findinghope.art.
Finding Hope is an interactive, real-time editorial data canvas that registers and visualises the emotional temperature of the world.
The experience acts as a digital mirror to global events, translating current headlines into high-fidelity tactile feedback. Juxtaposing the raw reality of global news with procedural golden spikes representing each country’s ‘Hope Reserves,’ the piece invites users to explore the delicate balance of contemporary civic sentiment. Built on a strict, high-contrast brutalist grid, the visual layout rejects generic data visualisation templates in favour of a premium design canvas.
It features dense masonry word clouds, ultra-thin 3D data needles, and country labels wrapped flush with the sphere’s terrain. Technically, a Vercel server-less proxy scrapes global RSS feeds on-the-fly, securely calling Gemini to map sentiment without exposing API keys. This drives a spatial WebAudio context with responsive Blade Runner-style synth chords and tactile hover clicks.
Click a word in the cloud and it expands into a full-bleed poster — the term, the country sentiment behind it, and a mood score — so each headline fragment becomes its own editorial artifact.
Word poster for “AFD” — country mood and score pulled from the live sentiment map.
Word poster for “RECESSION” — the same interaction, different term from the masonry cloud.
Overview
Most AI-generated UI fails before a line of code is worth shipping. It fails because the model never got a real brief — problem, user, outcome, edge cases — and has nothing solid to ground the interface against. So you get slop: pretty screens that ignore your system, invent features you never asked for, and waste the next week in cleanup.
First. is requirements-first design. Write the brief, lock the system (IBM Carbon, Material UI, or your own tokens), then generate components that know who they are for and what problem they solve. Detail before build. Order that actually holds.
Live at first-app.uk.
The idea
Give the AI the detail before you let it touch the interface. A brief is not bureaucracy — it is the artefact that makes generation defensible. First. coaches designers through problem statements, primary users, outcomes, tasks, and edge cases, then scores brief quality so weak thinking gets fixed before anything is generated.
Then you configure the system: Carbon, MUI, or custom JSON tokens, brand colours, button and input language. Those decisions stay locked. Generation reasons from requirements you already wrote, on components that already belong to your system — not a random invent-fest.
Before Designer, and after
First. launched with this thesis before Anthropic shipped Designer — the product that now occupies a similar “brief before you generate” space in the mainstream toolchain. That is not a failure story. It is validation. The gap was real; the market filled it. First. still stands as an independent product: requirements as a design artefact, system-faithful output, and a deliberate order of operations for teams who refuse to start in the middle.
Free to start at first-app.uk.