"Is That the Latest Mockup?" — How the 5% of Designers Beat the 95% of Developers

3 days ago

6 min read

Executive Summary

Five percent of TecAce's staff are designers. The other 95% are developers. Twenty developers for every designer. At that ratio, "every screen is reviewed by a designer" is not a principle, it is a joke.

So we lived in the land of screenshots for a long time. A designer drew the mockup in Figma, a developer copied the values out of Dev Mode and hard-coded them, someone pasted a screen capture into an AI and had it build the screen, a reviewer asked "what is wrong with this blue?", and back to the start. 3.5 business days per screen. A 34% rejection rate at the first brand review.

In June 2026, Anthropic connected Claude Design and Claude Code through /design-sync. In August, the /design command moved inside the terminal. As an AI solutions company, we tried it on ourselves before selling it to clients. We planted the AX Hub design system in a code repository and let AI build screens on top of it.

Eight weeks later: screen lead time 3.5 days to 1 day, rejection rate 34% to 6%, and the sentence typed most often in our Slack, "Is that the latest mockup?", completely gone.

The Challenge

What happens in the land of screenshots

Three different blues: Brand blue is a single value: #116DFF. Yet three different blues were living in the shipped screens. Figma Dev Mode shows the exact value. The problem was that the value had nowhere to go. With no tokens in the code, developers hard-coded #116DFF, and when a designer changed the Figma variable once, the blue inside the code stayed behind. AI-generated screens had never seen Figma, so they invented a third blue on their own.
Two sources of truth: The design system lived in a Figma library and the components lived in a shadcn/ui repository. Both claimed to be the latest. Both were wrong. For six months.
Everyone is a designer: Our developers also serve as FDEs (forward-deployed engineers) embedded at client sites. So proposal screens and client dashboard mockups were built by developers themselves with Claude. It was fast. And the screens the 95% built each looked like they came from a different company. What we warned about in part 4 of this series, "Who approved this AI design?", was happening inside our own house.
The tab round-trip marathon: People can read Dev Mode, but Claude Code could not. Showing the AI a mockup meant terminal, Figma, capture, paste. Four to six times per screen. The AI only saw pixels; it knew neither component names nor tokens. So it built the button from scratch every single time.
"Is that the latest?": Feedback was scattered across Slack, Figma comments and PR reviews. Nobody knew what had actually been applied. So everybody asked. Every day.

"It was not that we lacked tools. It was that nobody owned the moment when design turns into code." — Design Lead, TecAce Software

The Solution

The design lead sat down with the engineering team and set a single principle.

"We build the design system as code, not as files. Wherever AI builds a screen, there has to be one set of rules that it reads."

Nothing grand. Four phases, eight weeks.

Phase 1: Moving the design system into code (about 2 weeks)

We moved the AX Hub design system out of Figma and into a GitHub repository.

Color, type and spacing to tokens.css
Component rules to the shadcn/ui registry plus DESIGN.md
Things not to do ("never use a secondary color for a CTA", "no gradient backgrounds") to CLAUDE.md

Figma variables are pulled through Figma MCP and mapped into tokens.css. Now there is a single source of truth, and Figma remains the tool for drawing it. Every hard-coded #116DFF became var(--brand-primary).

Phase 2: Wiring that repository into Claude Design (about 1 week)

We connected the repository through Claude Design's design system import. From that point on, Claude Design assembles new screens out of our components, compares what it made against the design system, fixes itself, and only then shows you the result. We effectively gained one more reviewer, and this one never sleeps.

With the admin lock on the Team plan, we pinned a single approved system as the organization standard. No matter which of the 95% builds it, there is now only one blue.

Phase 3: Designing inside the terminal with /design (about 3 weeks)

What /design is: a command that brings Claude Design's whole artboard workflow inside Claude Code (research preview, August 2026). Type "/design a few options for {screen}" and several editable artboards appear inside the terminal session. Pick one, touch it up on the canvas, say "build this" and you are done. /design-sync pulls the design system from the repository into the session so that every generated UI starts from our components.

The new workflow is three lines.

/design-sync: Start the session. Load the AX Hub design system.
/design: Get three or four artboards, pick one, edit it on the canvas, then say "build it."
Screens a designer creates in Claude Design come over as a project, not as a screenshot. Claude Code does not start over, it continues from there.

What actually happened: We urgently needed an AX Diagnostic results dashboard for a client proposal. The developer on it typed "/design a few options for an AX diagnostic result page". Three artboards. He picked the second one and adjusted only the card spacing. "Build it." Two hours to clear brand review. It used to take three days. Zero screen captures.

Phase 4: A human puts the final stamp on it (about 2 weeks)

Getting faster did not mean getting rid of review. The same principle we set during AXKH still holds: AI proposes, humans approve.

Brand review skill: We turned the checklists for token compliance, accessibility contrast and copy tone into a Claude Code skill that runs automatically whenever a PR is created. Humans only read the result and then approve, revise or reject.
Only designers touch the system: Nothing is merged into the token and component repositories without the design lead's approval. AI uses the rules, it cannot change them.
Token budget rule: /design eats a lot of context because it generates several artboards. We use it only when starting a new screen, never to nudge a single button.

The Results

After eight weeks, the first thing that changed was not the numbers but the mood in Slack.

Speed

Screen lead time 3.5 days to 1 day, about 70% shorter. From idea to a review-passing implementation.
Most screens now finish in a single terminal session. The captures folder has gone quiet.
With the same headcount, more than twice as many proposal prototypes.

Brand

First-pass rejection rate 34% to 6%. Most of the remaining 6% comes down to copy tone. Nobody brings up the blue anymore.
Component reuse more than doubled. The buttons, cards and tables that used to be born anew on every screen are extinct.
Screens built by the 95% clear the same bar as the ones built by the 5%. You cannot tell who made which. That was the goal.

People

"Is that the latest mockup?" — zero times. With a single source of truth there is no reason to ask.
The 5% no longer inspect the output of the 95% one by one. They design the rules that the 95% follow. "From Maker to System Designer", the idea from part 1 of this series, went from a slogan to an actual work schedule.

Honestly, /design is not what did the good work. The tokens.css and DESIGN.md that /design read are what did it. If your design system is not in the code, no AI will protect your brand. That is everything we learned in eight weeks.

This workflow started as a tool integration and became a brand operating system in which designers set the standard and AI and humans follow it together.

Next Steps

We do the same for our clients: Formalizing, as an AX Pro consulting offering, a package that codifies brand guideline PDFs into tokens, components and DESIGN.md and wires them into Claude Design and Claude Code.
AI Supervision integration: Attaching the brand review skill to the real-time verification layer of AI Supervision so that accessibility, brand compliance and sensitive-data exposure are all checked automatically before deployment.
Claude Enterprise onboarding: On the Enterprise plan, Claude Design is off by default and sharing stays inside the organization. As a Claude Enterprise partner, we handle admin settings, design system locking and skill deployment in one go.
Tracking the /design preview: We will refresh our rules as soon as it is confirmed how far an imported design system is applied automatically.

Is your company's brand guideline still sitting inside a PDF? AI does not read PDFs. Start the conversation with TecAce now, beginning with the very first step of moving it into code.