References
Two sheets keep it consistent.
One sheet fixes the person, the other fixes the phone and the real app screen. Every clip starts from both, so the same face and the same app turn up in every shot.
Build with AI · 2 min read
Building with AI, from first prompt to tested design.
AI makes the pixels faster. I spend the time it saves on what it can’t do: sitting with users, reading the room in a crit, and earning trust with compliance.
- Where
- Work and side projects
- Tools
- Claude, Figma, Mobbin, Obsidian
- The rule
- AI drafts, never decides
Ads before launch
AI-generated
First cut
Filmed like a real customer.
A handheld selfie at a stall at night, like showing a friend a good find. Fifteen seconds to check the order works: the deal first, then how it works.
AI-generated
Full ad
A 30-second ad, before launch.
Price, food, the app, then the reason to care: less food thrown away. Made in an afternoon, so the message gets tested before anyone pays for a shoot.
What studies found
Faster with AI
Results from controlled studies, by kind of task
Product designFigma study, 2026~20% less time
Consulting tasksOrganization Science, 202625.1% faster
WritingScience, 202340% less time
CodingGitHub Copilot study, 202355.8% faster
Published research, shown for reference. The consulting study also found AI made people 19% less likely to solve a task it wasn’t suited to. Sources: Stewart et al. (2026)↗, Dell’Acqua et al. (2026)↗, Noy and Zhang (2023)↗, Peng et al. (2023)↗.
The flow
Draft a bill reminder from
3 referencesusing our
Design system
FigmaMobbin
From Mobbin
From Figma
Drafting 4 options…
1 · Prompt
Start from real references.
The prompt starts in Figma, with real patterns from Mobbin as references, so the first draft already fits the product.
4 options from 1 prompt
A
B
C
D
2 · Generate
Options in minutes.
One brief turns into a handful of directions. Choosing between them is still the design work.
Task 1 · Pay the bill
B
5 of 6
C
3 of 6
Sorting 6 sessions into themes…
3 · Test and synthesise
Learn from people sooner.
The best options go in front of users early. AI personas run a first, synthetic pass, so time with people goes to the harder questions. AI sorts the notes into themes, and the team decides what they mean.
My design harness
A harness is everything around the model: the process it follows, the tools it can reach, the rules it can’t break and the checks before anything gets to me. The model is the same one everyone uses. The harness is what makes it design my way.
The process
The steps, in order. My design-process skill takes every brief from screenshots to a tested redesign, one stage at a time.
The tools
What it can reach. Figma for designs, Mobbin for references, Obsidian for writing, and a browser to check what gets built.
The references
A benchmark to beat. Fresh examples from current apps make sure the basics match the best, so the effort can go into what makes the design its own.
The rules
Taste, written down. Every correction becomes a rule it checks before handing anything over, so it only needs saying once.
The reviewers
A second opinion before mine. A critic flags anything that looks generic or AI-made, and every screen is checked at each size, in both themes.
Show, then ship
Nothing goes live unseen. It shows me the work and waits for a yes.
The last call
What to keep, what to cut and what ships is always mine.
How I design
A team of AI agents, each with one job.
A designer in Figma, a writer in Obsidian, a developer in code, and a critic that flags anything that looks AI-made.
Taste becomes rules they can’t break.
Every correction becomes a rule the agents check before handing anything over, so it only needs saying once.
1440834390
Figma first, then code that checks itself.
Nothing gets built until the design is approved. The build is then checked at every screen size in both themes, and fixed before it comes back.
Skills I built
A Claude skill is a short file that teaches Claude how I work. It reads the first line of every skill with each brief, opens the one that matches, and follows it. The process is written once and used on every project.
Redesign these four screens
design-processSkill loaded
Claude
Starting with stage 1. I’ll rebuild one screen and show it before touching the rest.
design-process/SKILL.md
--- name: design-process description: From screenshots to a tested redesign. Use when a brief says redesign, explore or compare. ---
- 1Capture what exists
- 2Name the problems
- 3Research references
- 4Explore wide
- 5Decide narrow
- 6Test
- 7Animate in Figma
- 8Turn it into a case study
The whole redesign process, in one file.
Capture what exists, name the problems, research references, explore wide, decide narrow, test, then go round again until it holds up. The file holds the order and the rules. The decisions stay with me.
Where it saves time
Aug billingRM 500.00Due 25 AugPay
Aug billingRM 500.00Paid early
Aug billingRM 500.009 monthly payments
Aug billingRM 500.003 days overduePay now
Edge cases
Every state, drafted first.
A bill can be due, paid early, split into months or overdue. AI drafts every state, so the time goes to the ones people actually hit.
Freeze card
Your card has been blocked.
Card temporarily suspended.
Your card is frozen for now.
Card frozen. Unfreeze anytime.
UX writing
Copy that starts as a draft.
Errors, warnings and confirmations all need clear words. AI writes the first pass, and people decide what ships.
Prototyping
Prototypes in hours.
Cheap prototypes mean rougher ideas get tested earlier, like retrying one failed step instead of starting over.
What stays with me
Framing the problem
Deciding what’s worth solving at all.
Judgment and taste
Choosing between options, and knowing when good enough isn’t.
Trade-offs
Balancing risk, regulation, the business and the people using it.
Accountability
Owning what ships, whoever drafted it.
Like my projects? Email me jordychew93@gmail.com or LinkedIn↗