Building AI tools for consistent product design

Branch’s product team works across India, Kenya and Nigeria, supporting onboarding, identity verification, loans, repayments, rewards, accounts and support. Generic AI tools could produce convincing work without understanding which products existed in a market or how Branch communicated with customers.

A product-team poll reported that 65% used ChatGPT, 20% used Claude and others used Gemini. Conversations and real output reviews helped me understand where individual prompting broke down.

I treated each workflow as an internal product: identify its users, document its failure modes, define rules, test outputs and keep an approval point before product use.

Original programme overview

Other designers and I identified the consistency problem. Product screens mixed flat, outlined and dimensional illustrations, making new assets another round of sourcing and style decisions.

I explored the direction with Arushi. Her FigJam vote, my three public review sessions and the design team’s quality review helped turn preferences into a shared visual direction. The design team defined the colour system, including the 60/25/10/5 structure.

Four layers made the direction repeatable

I wrote the system instructions and JSON rules, built the manifest and material catalogue, and designed and implemented the render pipeline. Render Mode started from a reference image; Ideation Mode proposed concepts from a brief before rendering the selected idea. Both used the same pipeline.

- Shape: rounded rectangles, square buttons, clean edges, subtle chamfers
- Lighting: soft top-left studio, neutral white balance, diffused highlights
- Camera: 45° isometric, mild perspective, 35mm, centered, never crop
- Composition: single object centered; modular = floating grid with even gaps
- Background: TRUE TRANSPARENT alpha + soft ground shadow only

The material-realism gate could request up to two rerenders before escalating to a person. More than 500 image-generation iterations were completed, often 10–15 for a final illustration. The design team reviewed quality and made the final selection.

The resulting illustration language

The rollout is now live across all product markets. Clearer style rules eased illustration sourcing and reduced repeated visual corrections; the project does not provide a measured time-saving figure.

Colleagues used Gemini, ChatGPT, Claude, Perplexity and Google Search to create copy. They had Branch’s brand principles, but no shared base of product and component guidance governing those outputs. Reviewing one line could consume 20 minutes of a design-review session. This is an owner-reported example of the problem.

The goal was to standardise UX writing in Branch’s voice, with consistent tone, casing and product and market context. I owned the project from discovery through implementation, with substantial help from colleagues.

Other designers collected and cleaned feature documentation for their markets. The team collectively defined component guardrails, while I owned lint and version tuning. That context became the reference material behind the workflow.

Seven file iterations, followed by Skill packaging

The prototype moved from a ChatGPT Custom GPT to a Claude Project and then a Claude Skill. The team judged Claude stronger for this writing task. The final internal harness was Claude Chat with the Skill enabled.

Small copy changes made the next action clearer

The same original PAN instruction needed different wording depending on the screen state. The tracker records implemented changes; it does not establish which version generated each historical rewrite.

I collaborated with one product manager and one engineer from each market for implementation. Original copy, proposed copy and rationale went into a shared Google Sheet, with human review before engineering changes.

PMs could already use Claude to make rough prototypes. Those outputs did not understand Branch’s UX patterns: how screens were structured, which Neem components to use or how a product idea should move through the app.

I created a workflow connecting PRD input, Claude Skill interpretation, Figma MCP context, Neem component mapping, token-compliant React prototypes, stakeholder review and PRD refinement. Neem is Branch’s design system.

Design-system knowledge lived in the Skill

The Claude Skill carried component decision guides, token definitions, screen composition rules and component JSX and CSS. A Figma-linked request could bring in a screenshot, design context and variable definitions; a screen description followed a separate path. References were loaded for the components needed in that screen.

- Button → `ButtonStack`
- Text/heading block → `TextBlock` (pick variant from decision guide)
- Input → `TextField` / `ChatTextField` / `PasscodeField` / `SearchField`
- Progress bar → `LinearProgressIndicator` or `StepIndicator`
- Screen header → `TopAppBar` (pick variant from decision guide)

.btn--primary {
  background-color: var(--neem-surface-primary);
  color: var(--neem-text-on-primary);
  border-radius: var(--neem-radius-medium);
}
.btn--primary:hover:not(:disabled) { opacity: 0.88; }

PMs, designers and developers tested the workflow. General PM feedback suggested about a 30% reduction in PRD evaluation time. This is directional feedback rather than a timed comparison.

The practical value was earlier alignment: stakeholders could respond to an interaction alongside the written requirements, before the team invested in high-fidelity design.

Each workflow had a different quality question. Illustration reviews checked visual alignment and material treatment. Copy reviews checked product truth, market language and the component’s purpose. Prototyping reviews checked whether the interaction helped evaluate the PRD.

Deovrat’s one-to-one check-ins helped keep the work aligned with the objective. Conversations, show-and-tell sessions and direct testing gave me a way to tune the systems around real work.

The programme moved the team from individual prompting toward shared, Branch-specific AI workflows. Its contribution was reusable context, clearer quality checks and a more consistent starting point for product work.

Illustration rollout is live in all product markets. Copywriting turnaround improved directionally. For the Neem DS Prototyper, general PM feedback suggested about a 30% reduction in PRD evaluation time. The available record does not establish numerical adoption or accuracy results.

“He is an AI-native builder with a designer’s eye and a PM’s brain.”

Original recognition message

Useful AI starts with the team’s context

The workflows became more useful when they understood a real product moment, local terminology, component constraints and visual rules. Building that reference material required collaboration and documentation.

Guardrails need tuning

Too little guidance left outputs generic. Overly strict rules could make them rigid. Iterating the references, testing outputs and cleaning inconsistent component names mattered as much as choosing a model.

Reuse still needs human judgement

A shared workflow helps teams start closer to an appropriate answer. Designers, engineers and PMs still decide whether an illustration, string or prototype fits the product before it moves forward.