01Case study · 2026

Shipping the AMP
design task with AI.

An interview design task, designed in Figma — then turned into a live presentation website the same day, by directing AI instead of writing code.

King Tan — Designer × Claude Code Figma → live in ~2 hours 18 slides · 8 PRs

Ready when you are.18 slidesFigma MCP6 feedback rounds8 PRs mergedevery deploy verifiedpixel-matched to the deckmobile friendly Ready when you are.18 slidesFigma MCP6 feedback rounds8 PRs mergedevery deploy verifiedpixel-matched to the deckmobile friendly Ready when you are.18 slidesFigma MCP6 feedback rounds8 PRs mergedevery deploy verifiedpixel-matched to the deckmobile friendly Ready when you are.18 slidesFigma MCP6 feedback rounds8 PRs mergedevery deploy verifiedpixel-matched to the deckmobile friendly

02The task

A real interview task,
a real deadline.

AMP set the brief: an identity, hero campaign and comms for a retirement education hub — warm and optimistic, but unmistakably a financial institution.

I designed the response in Figma: an 18-slide deck built around one idea, "Ready when you are." — never ask the big question, always invite the next small yes.

Then the twist: instead of presenting a PDF, present a website.

Shipping the AMP design task with AIThe task

03The ask

Turn the deck into a website — in one session.

REQ 01

Native, not images

Every slide rebuilt in real HTML/CSS — selectable type, drawn-in underlines, a working progress device.

REQ 02

Unmistakably the deck

Same type, colour, spacing and graphic devices — reviewed against the Figma file slide by slide.

REQ 03

Presentable anywhere

Keyboard and swipe navigation, deep links to any slide, and a URL I can open in the room.

Claude read the Figma file directly — exact geometry, full copy, reference screenshots — no redlines, no handoff doc.

Shipping the AMP design task with AIThe ask

04How we worked

I stayed the art director.
AI did the translation.

Same division of labour as my portfolio build: taste and judgement stayed human, execution got compressed to minutes.

01
Deck → design system. Paperbark, navy and Banksia; one typeface with hierarchy by weight; the sharp "Ready Line" underline device.
02
The device became UI. The deck's Ready Line runs the site's progress bar: Ready → 62% ready → You're ready ✓.
03
Everything verified. Every change screenshot-checked in a headless browser against the Figma reference before I ever saw it.

Shipping the AMP design task with AIHow we worked

05Version one

Brief to live in about two hours.

read

The Figma file, directlySlide geometry, copy and screenshots pulled straight from the source — no spec writing.

build

18 slides, native HTML/CSSDesign system, navigation, entrance motion — plus the digital banners running as live CSS/JS animations.

verify

Screenshot every key slideHeadless browser renders compared against the deck before review.

ship

PR → merge → deploy → greenLive on kingtan.com.au through the same pipeline as the portfolio.

Shipping the AMP design task with AIVersion one

06The first big call

Deck fidelity beat cleverness.

−561

Lines of code cut by the reversal

Version one had the banner storyboards running — real HTML banners playing their four-step animation live on the slide. Technically impressive. But it wasn't the deck.

I called it: show the storyboards exactly as designed. The reversal shipped in minutes and cut 561 lines of code.

That's the working relationship in one decision — AI proposes and executes; the designer decides what's on-brand.

Shipping the AMP design task with AIThe first big call

07Iteration

Six feedback rounds. Same day.

R1–2

Craft details

Sharp underlines, corrected weights and fills, the deck's real icons and photography swapped in as I exported them.

R3–4

Real artwork

Hero, social and all five banner formats replaced with exported frames; official logo plus its white variant.

R5

Exact geometry

Every storyboard matched to the deck's 1720px grid — true frame sizes, true gaps, flush left edges.

R6

Polish + mobile

Consistent chrome across slides and a proper mobile pass — swipe, scroll and safe areas.

Each round: I reviewed against Figma, described what was off, and merged the fix minutes later.

Shipping the AMP design task with AIIteration

08Debugging together

My eyes caught it.
AI explained why.

01
The 62% bar that never filled. I spotted it; the diagnosis was an inline span silently ignoring its width. One line fixed it.
02
Storyboards that wouldn't line up. The exports carried invisible padding that inflated every gutter — 24 frames cropped programmatically, then replaced with clean exports.
03
Billboard frames out of order. Two exports shipped swapped — caught in verification screenshots before I ever saw the slide.

Shipping the AMP design task with AIDebugging together

09The pipeline

Every round shipped like production.

branch

Work lands as a pull requestEach feedback round became a reviewable PR with verified screenshots.

merge

I keep the merge buttonNothing hits my live domain without my click — my rule, respected all the way through.

deploy

Build → FTPS → verified greenEvery one of the 8 merges was watched through to a confirmed live deploy, ~2 minutes each.

Shipping the AMP design task with AIThe pipeline

10By the numbers

One weekend, start to finish.

18

Slides rebuilt natively

6

Feedback rounds

8

PRs merged & verified

2hrs

Brief to first live version

25 campaign frames 10 icons 9 photos 2 logo variants Every deploy verified green

Shipping the AMP design task with AIBy the numbers

11What it proves

The deliverable and the case study are the same thing.

01
Taste stayed human. Every reversal, every "that's not the deck" — design judgement drove all of it.
02
AI compressed the distance. Translation, verification and shipping went from days to minutes per round.
03
Proven on a deadline. Not a demo — an interview task with real stakes, shipped and refined in a weekend.

Shipping the AMP design task with AIWhat it proves

12See it yourself

The presentation is live.

Walk the 18 slides the interviewer saw — keyboard, swipe, and the Ready Line ticking along the bottom.

View the live presentation

← All case studies

King Tan × AI · 2026See it yourself

Shipping the AMPdesign task with AI.

A real interview task,a real deadline.