← all work case study 03 · AI workflow

Designing workflow systems with AI

I write the design system down and let agents handle the repetitive work. The judgment calls stay with me.

Nhat Hoang · Product design lead · 2026

how I work

The system does the repetition. I do the judgment.

Groundwork

Brand, design system and business rules, written so an agent can follow them.

Workflow

Eight phases from the first request to handoff, each with a gate someone can review.

What it produces

Figma as the source of truth, a coded prototype, screens dev can build.

Running today on finance mini-apps: loans, eKYC, insurance, payments.

act 01

Groundwork

Before an agent builds anything, the rules have to be written down.

groundwork · 01

Write the rules down before any screen

An agent only follows what it can read, so what I'd keep in my head goes into plain text.

Brand and design rules

Tokens, type, spacing and which component goes where.

Hard business rules

Constraints a screen has to satisfy — consent screens, limits from the brief.

Corrections become rules

Every correction that applies everywhere becomes a numbered rule, so it doesn't come back.

groundwork · 02

The design system as a readable skill

layer 1 the key one

DS skill

Component specs, screen templates and audit rules, in one document.

layer 2

Tokens

Colour, radius, type and partner themes, synced from Figma.

layer 3

Component kit

The live Figma library every built frame links back to.

The skill list and the partner token table — three layers, one source of truth

No design system yet?

start in the browser

Starting from nothing, I explore in the browser first — real clickable screens. The direction we pick becomes the Figma foundation.

Seven home-screen explorations side by side, one per user segment — explorations you can click through

act 02

Workflow

Eight phases, from the first request to handoff. Each one ends in a gate.

Request

Brief from the PO or client

Brief

Screens and rules locked

Flow

Diagram and wireframes

Design

Figma frames built

Prototype

Built from React components

Audit

Compliance and states

Review

Stakeholders in browser

Handoff

Figma link, frame delta

phase 0 · request

Every project starts as a request

From a product owner or a client, always the same way: a ticket with a one-page brief.

Two kinds of request

A new user goal is a project. A change to something shipped is a feature request.

One brief template

What changes, the user's goal, the flow it touches. Same form for everyone.

Checked before I start

Gaps go back as questions instead of becoming my assumptions.

gate ✓Work starts once the brief passes, or the open questions are answered.

phase 1 · brief

Get the big picture before designing anything

The kickoff pass turns the brief into a spec, and sends the gaps back to the PO.

Screen inventory

Named, numbered, agreed before design starts.

Edge states

Retry limits, timeouts, empty and terminal states.

Business rules and their context

Written as constraints a screen has to satisfy.

Kickoff spec table mapping PRD steps to Figma frame names — the spec that decides how many screens we need

gate ✓The screen list and state list are signed off before a single Figma frame exists.

phase 2 · flow

Flow diagram and wireframes first

Flow and wireframes on one page, so people review the journey, not a pile of screens.

Flow map for an NFC step with iOS and Android branches and a retry — flow map with decision points

All screens of the flow laid out and connected in one Figma page — all screens and states in one file

phase 3 · design

Figma frames built from the approved wireframes

eKYC selfie and ID-capture frames in Figma next to the agent's build log

Library-linked

Every frame uses real components and variables from the library.

Two-way

The agent reads each frame back and checks it against its source spec.

Editable by anyone

Ordinary Figma files the team can change.

phases 3–5 · under the hood

Three skills do the repetitive work

Wireframe → Figma

Approved HTML screens rebuilt as real Figma frames from the library.

Flow connector

The signed-off flow rebuilt in Figma, commentable frame by frame.

Design audit

Checks compliance, states, usability and flow logic while frames are built.

HTML screen next to the Figma frame built from it — built from the library

Figma frames joined by connectors into a flow — reviewed as a journey

Audit log fixing icons and colours across a batch of frames — audited before anyone sees it

phase 4 · prototype

A prototype built from the real React components

Not hotspots on static frames — code built from the team's Storybook, the same React components developers ship.

parts leave the library and land in the real flow

Storybook with the loan detail screen open: repayment schedule, loan info and payment buttons, built only from library components — the loan detail screen, open in Storybook

kept in sync

I keep the library's visual layer matched to the Figma kit — tokens, partner themes, 47 components with stories.

gate ✓Stakeholders test the flow before engineering estimates it.

phases 5–6

Audit, then review

Audit report with a dimension scoreboard

Internal audit

Compliance, states, usability, flow logic. Reviewers only see screens that passed.

Stakeholder review

Working screens in a browser, comments straight on the frames.

phase 7 · handoff

A Figma link, and nothing written twice

Developers build from the PO's spec and open Figma for the screens. A second spec from me would only drift.

the PO's spec owns

How it works

Business rules, validation, APIs, system states.

Figma owns

How it looks

Every state as a named frame, final copy included.

When they disagree: logic follows the spec, looks follow Figma.

What gets sent

The Figma link

Screens and flow board, on the ticket, developer tagged.

A frame delta table

New, changed, retired or untouched — so nobody uses an old screenshot.

The prototype code

Optional. Built from the same library, so screens can be lifted straight out.

Assets, if needed

Only what the kit doesn't already have.

Figma and code point at each other

A developer has to find the code for what they see in Figma, so the kit and Storybook stay matched.

each side names the other

Kit → code

Each kit component names its React component and story.

Code → kit

Each story links back to its Figma component.

One tracker

55 components compared, code against kit.

A guide for coding agents

A component guide, so a dev's agent picks the right part too.

gate ✓Closed when a developer confirms, or after a day with no blocking question.

act 03

What every project gets

Deliverables

Flow diagram and screen inventory
Hi-fi screens covering every state
Library-linked Figma file
Coded prototype of the key flow, reusable by developers
Frame delta table for every feature request

Quality guarantees

Every screen audited before review
No detached components, no off-token values
Error, empty and end states designed up front
Revisions in scope until the gate passes

before you ask

The fair questions about AI in the loop

"Is the quality actually controlled?"

Every phase has a gate I sign off. The audit is stricter than a manual check — the rules are written down.

"What happens to our material?"

Files stay in your workspace and Figma. I follow your rules, including no AI on named projects.

"Does this replace design thinking?"

No. It removes the redraw work. Structure, hierarchy, copy and the user call stay mine.

judge the taste yourself

Two demo projects you can open now

shipped product Logem — Expense & Budget Log on the App Store

Partner work is under NDA, so this is my own product. No account required.

live demo loanhub-jade.vercel.app

A lending flow you can click through. Demo account provided.

Loan application form in the Loan Hub demo

next step

Start with one flow, two weeks

Pick the flow that hurts most. Every phase, fixed scope, judged on real work.

week 1

Brief, flow, wireframes

week 2

Figma, prototype, handoff

Get in touch All work

in short

the rules are written down
the agent does the redraws
every phase has a gate
the judgment stays mine