Process Portfolio rebuild

How I used AI to design and ship this site

29 July to 8 September 2026 Figma Webflow Notion Claude GitHub Vercel
AI-assisted design and delivery workflow Two parallel design tracks, the homepage with its motion and the case study pages, both drawing on one shared Figma design system and both running through the same review loop: build it and measure it, judge it and redline it, preview it and only then publish, with the resulting decisions written back into the design system. STILL NOT RIGHT WRITTEN DOWN SHARED One design system, living in Figma and in the code Type and colour pulled out of Figma as data, so a style name means the same thing to both of us. IN FIGMA IN THE REPO TRACK A HOMEPAGE & MOTION TRACK B CASE STUDY PAGES THE LOOP 1 Draw it in Figma and hand it over The frame itself, not a description of it. A description loses the numbers. 2 Run the options side by side Three versions of the homepage live at once, so I can compare instead of remember. 3 Motion references get measured Open-source front-end motion as the reference, measured into real timings. 1 Migrate from the source file The old Webflow file held newer copy than the published site. Ask the file. 2 Let the writing decide the layout Drafts written in Notion first. The pages grew new sections to fit the copy. 3 Tune the layout in Figma Spacing, rhythm and hierarchy settled on the artboard before any of it is built. 4 Update Figma and design.md A new style is added in both places or in neither, so the two never disagree. BUILD Built for real, then measured Spacing, alignment and contrast come back as numbers, not “looks right”. JUDGE I look, and redline it A red line on the real pixels beats a paragraph about a 15px gap. SHIP Preview first, live on my word Every change gets a private URL. Only I move it to the public one. LEGEND The step where the design decision is mine Not right yet, round again Click any image to open it full size
Division of labour

What stayed with me

  • Every aesthetic call: which of two options, how a hover should feel, whether the banner wanted a serif.
  • Rejection in one sentence. I reported what looked wrong and left the diagnosis alone.
  • The final yes. Nothing reached the live site without it.
Division of labour

What I handed over

  • Building, so options could be judged running instead of argued about in prose.
  • Measuring, so a question about alignment had an answer instead of an opinion.
  • Remembering, so a decision made in week two still held in week six.
Six weeks in

What made it work

  • One vocabulary. Style names resolved to the design system rather than to a guess.
  • One irreversible step, guarded. Everything went through a private preview URL first.
  • Everything written down, because an AI forgets between sessions and the files do not.
Yiyan Huang huangyiyan.com