Andy Madrick - Why AI changed design handoff forever

2026-05-26 - 53 min - source - Read full transcript

Vid (host)Andy Madrick

Key insights

LLMs get engineers to roughly 80-90% of a feature, but the final 10-20% of visual and motion polish remains a distinctly human 'superpower' designers must own.

Andy frames this as Notion's explicit philosophy: engineers wire up functionality and performance, but LLMs are still not good at the last mile of craft, so designers have no excuse not to take responsibility for finishing it themselves, down to itty-bitty PRs of pure visual polish.

designer-owned-last-mile

A full prototype directory can be handed to an LLM and one-shotted into production-ready code with the animation intact.

Andy describes building a Make with Notion modal's animation entirely in an internal prototype playground, then feeding that directory to an LLM with the instruction 'make this work in production' - it ported the animation flawlessly on the first attempt, surprising both him and the engineer he was working with.

prototype-playground-to-production-handoff

Screenshots of sketched keyframes are a far more effective way to specify animation to an LLM than written descriptions.

Andy says trying to type out motion instructions ('move here, shrink, fade') leads to fighting the tool for hours; sketching key states, screenshotting them, and feeding them to Composer or an LLM with computer vision gets a working result much faster because a picture is 'worth a thousand words.'

motion-design-via-screenshots-not-prose

The source of truth for design has shifted from Figma files to production code itself.

Andy says his Figma canvas is now the messiest it has ever been in his career; most 'documentation' now lives in the live product, with Figma reduced to occasional screenshots of prod pasted in via the Paper Chrome extension, a shift that initially gave him FOMO but that he has now fully accepted.

prototype-playground-to-production-handoff

A rough, styled-but-ugly-in-production prototype can be merged with an engineer's clean, functional build by having an agent apply the designer's styling on top of the engineer's code.

Rather than treating exploratory prototype code as fully throwaway, Andy has an agent take the engineer's performant 'team version' of a feature and apply the visual styling from his rough prototype, which he says gets much closer to done than intuition would suggest, since the front-end scaffolding is already correct.

prototype-playground-to-production-handoff

Designer PRs should stay small enough that the designer has genuinely reviewed every line themselves before an engineer sees them.

Andy's rule of thumb is that if someone will spend more time reviewing your PR than you spent making it, something is wrong; he aims for roughly five-to-a-hundred-line PRs he can fully vouch for, rather than 500-line AI-generated dumps an engineer has to untangle.

designer-owned-last-mile

For large, strategic changes, review is shifting from code diffs to markdown planning documents.

Andy has started sending engineers a plan-mode markdown file to review before writing code, because by the time a large AI-assisted change reaches the code-review stage, an engineer may object to the entire underlying approach, no matter how many AI review passes it already had.

designer-owned-last-mile

How a designer collaborates with an engineer now depends on that specific engineer's preferences rather than fixed job titles.

Andy says titles are 'breaking down'; with an engineer focused purely on backend performance he now ships full front-end PRs himself, while with an engineer who wants front-end involvement he builds crude prototypes or quick Figma mocks and iterates together in code, so there is no one-size-fits-all handoff process.

designer-owned-last-mile

Recreating existing UI interactions in detail, not copying static screens, is one of the best ways to train design taste in the AI era.

Andy argues that pixel-copying a static frame is less valuable now, but studying and rebuilding a real interaction pattern (he cites Linear's sidebar auto-collapse and reflow behavior) forces you to learn easing curves and breakpoints, which AI-generated defaults will otherwise flatten into something generic.

taste-development-through-critique

Three hours a day of unfiltered critique from high-taste collaborators can compress years of design-judgment development.

Andy credits his year at Tome, spent in daily multi-hour crit sessions with cofounder Henry Liriani and creative director Alex Cannon, with forcing him to articulate the 'why' behind every decision and strip out 'graphic design theater,' which he says produced his biggest single leap in taste and speed as a designer.

taste-development-through-critique

The pendulum on micro-interactions can swing too far, and reviewing a product holistically (not just PR-by-PR) is needed to catch it.

Andy notes that when a designer owns small, isolated PRs (e.g., single P3 bugs), each individual interaction can become immaculate, but zooming out later can reveal the whole interface has become 'overcooked'; he suggests studying where top products (like Linear) deliberately use instant transitions with no animation at all.

motion-design-via-screenshots-not-prose

Cursor's Composer and workflow tooling (plan mode with rendered markdown and mermaid diagrams, worktrees, multi-agent runs) made Andy switch away from a tool he had been loyal to for months.

Andy describes being a committed Conductor user who dismissed Cursor until a coworker pushed him to try Cursor 3.0 ('Cursor glass'); he was won over by Composer's front-end quality and by plan mode rendering a beautifully formatted MD plan with mermaid charts before any code is written.

tool-switching-cursor-vs-conductor

Media referenced

Craft at Speed - other - Andy's own course teaching designers to train their visual eye and ship high-craft work with AI tools; discussed at length near the end of the episode.

Companies

Notion - Andy leads design of Notion meeting notes; the episode's central case study is the Make with Notion conference modal he designed there.
Cursor - Andy's current primary coding tool; he praises its Composer model, plan mode, worktrees, and multi-agent workflows over Conductor.
Conductor - Andy's previous coding tool of choice, which he describes 'abandoning' in favor of Cursor after trying Cursor 3.0 (Cursor glass).
Paper - Sponsor product; a Chrome extension and canvas tool that lets designers copy live HTML/CSS components from production and paste them as editable layers to iterate with Claude.
Framer - Sponsor; launched a free AEO (AI Engine Optimization) tool that scores how well a website is read and understood by AI systems like ChatGPT and Perplexity.
Tome - Andy's previous company, an AI slide-deck generation tool that pivoted to an AI CRM after shrinking from 80 to 12 people; where he says he became a '10x designer' through daily 3-hour crit sessions with the founders.

Techniques and frameworks

Prototype playground handoff - Andy builds interactive Figma-like prototypes in a lightweight internal code playground, then hands the directory straight to an LLM to port into production code, which one-shotted a full animation perfectly.
Sketching keyframes and screenshotting for motion prompts - Instead of describing animation in words, Andy sketches key frames, takes screenshots, and feeds them to an LLM (Composer/Claude), which he says works far better than typed descriptions for motion design.
Style-transfer between mock and production code - Andy builds a rough, ugly-but-good-looking prototype in a different code base, then has an agent apply that styling onto the engineer's production-quality feature build, skipping most manual translation work.
Small, reviewable PRs - His rule of thumb: don't ask an engineer to review a PR you put more work into than they'll spend reading it; keep AI-assisted PRs small (roughly under 100 lines) so a non-engineer designer can review them responsibly before handoff.
Planning-mode MD files instead of code review - For larger, more strategic changes, Andy now sends engineers a plan as a markdown file to review before code is written, since code-level review increasingly surfaces fundamental approach problems too late.

Summary

Andy Madrick, who leads design on Notion meeting notes, walks host Vid through a granular, screen-sharing-heavy account of how his workflow changed after adopting AI coding tools, using the Make with Notion conference modal as the running case study. He starts in Figma doing broad iteration, but moves quickly into an internal lightweight code "prototype playground" so he can share click-through links instead of static Figma files, letting colleagues (including Notion's co-founder Ivan) edit copy and layout directly and send feedback as screenshots rather than Figma comments. The clearest AI moment in the episode is when Andy takes the entire prototype directory for a polished animation and hands it to an LLM with the instruction to make it production-ready: it one-shots the port perfectly, stunning both him and the engineer he's paired with.

The conversation's throughline is where the human "last mile" sits now that engineers can get a feature to 80-90% with AI. Andy and Vid agree that LLMs remain weak at final visual and motion polish, so Notion's designers are expected to own that gap directly in code rather than handing redlines to someone else. Andy describes a technique of sketching animation keyframes by hand, screenshotting them, and feeding the images to Composer or Claude, arguing this radically outperforms typed descriptions for motion work. He also describes a style-transfer pattern: build a rough, badly-engineered but great-looking prototype, let the engineer build the real feature separately, then have an agent apply the prototype's styling onto the engineer's clean, performant code rather than manually re-implementing the design.

They spend significant time on how this changes designer-engineer collaboration and code review. Andy's practical rule is to keep AI-assisted PRs small enough that he has genuinely reviewed every line himself, on the logic that a reviewer shouldn't spend more time reading a PR than the author spent producing it. For larger, more strategic work, he has started sending plan-mode markdown documents for engineer review before any code exists, since by the code-review stage an engineer may reject the entire underlying approach regardless of how many AI review passes preceded it. He's candid that there's no fixed process: how he collaborates depends entirely on the individual engineer's preferences, whether that means shipping full front-end PRs himself for a backend-focused engineer or co-iterating with an engineer who wants front-end involvement.

On taste, Andy pushes back on the idea that AI erodes design skill development, arguing instead that recreating real interaction patterns in detail (not static screens) is one of the best ways to build judgment, since it forces you to internalize easing curves and breakpoint behavior that generic AI output otherwise flattens. He credits his transformation as a "10x designer" to a year at Tome, where daily multi-hour critique sessions with the founders forced him to justify every decision and cut "graphic design theater." He also warns about an overcorrection risk: designers who obsess over polishing isolated small PRs can end up with an interface that reads as "overcooked" in aggregate, and points to products like Linear that deliberately use instant, animation-free transitions in places. The episode closes with Andy explaining his course, Craft at Speed, and reflecting on Notion's design culture, crediting specific colleagues (Ken Chen, Kathy, Brian Lovin, co-founders Ivan and Simon) for shaping his practice.

Notable Quotes

"I took the directory that this was in in the playground, fed it to an LLM, and said, 'Make this work in production.' And it one-shotted it and did it like perfectly." - Andy Madrick

"These LLMs are not very good at the last mile of design. And that's still like our superpower, needs to be our superpower... we have no excuse anymore to not be responsible for those changes that we want to see." - Andy Madrick

"If you are expecting someone to put more time into reading something like a PR than you put into making it, if there's a mismatch of work being performed, right, and then it goes for like writing docs and stuff too." - Andy Madrick

"The default is like, what does this thing look like with no decoration? With the same size typeface, with no animations. Take that and say, okay, where can I add a little flourish of delight here?" - Andy Madrick

"There is no shortcut to having taste or developing a high craft, high velocity practice... it comes back to discovering and learning the language of visual design." - Andy Madrick