AI-Assisted UX · Delivery Phase (Using AI for Layout Design · Layout-to-Code Figma · Design Review · Showcasing AI Value + Will's Custom UX Metric Teardown Skill)
All AI techniques for the Deliver phase of Will's "AI-Assisted UX Workflow". The real goal of this phase is not to hand off specs to developers, but to distill the project into a presentable portfolio page plus interview talking points. Therefore, all AI techniques center on two things: "rearranging information into a story-telling visual/layout" and "clearly explaining the human-AI collaboration process". Coverage includes: ① Generating multiple layout options (1:1 text extraction from old layout → content direction exploration → direction selection → final image output) ② Optimizing layouts / migrating visual styles (style transfer from reference images, only changing the skin without altering the bones) ③ Layout-to-code & Figma mockup (single-page image → restoration prompt → HTML → reverse-engineer editable source file via Figma Make) ④ Infographic semantic extraction + visual redraw (strip visuals to retain only logic → 5 styling directions → wireframe → apply style) ⑤ Metric-driven design review using the will-ux-metric-teardown skill (reverse-engineer business model/North Star metric, identify issues by Tier 1-3 priority) ⑥ Showcasing AI capabilities and value in projects (for each UX phase, output "what AI did / interview talking points / what evidence to put in PPT"). Each section provides reusable prompt skeletons + Why reasoning + counterexamples. Interpersonal collaboration rules for design review meetings (roles / receiving feedback / turning feedback into actions) are covered in [[google-ux-testing-iteration]]; this article focuses specifically on prompts and workflows for using AI to run layout generation/code conversion/metric review/value articulation.