Builder Series 02: Can AI Agents and Paper Replace Figma?

The Plan

Stephen had always wanted to start his own thing — he just never had the trigger. A month into a new AI startup job, after leaving Relevance AI, the company did a full layoff. He called his co-founder that same day: “Now’s the time to do it.”

Today’s job: his site’s testimonials section only fits three cards, and he has more he wants to add. The three-card pattern has stopped scaling, so step one is finding a layout that does. Step two is a section that doesn’t exist yet at all — one that lays out what Yu Studio actually offers.

Both get rebuilt using his current workflow: Paper and Conductor, run in parallel.

Why Paper, Not Figma

The unlock, in Stephen’s words: “the canvas is the DOM.” Paper’s canvas is built from real HTML and CSS, not a proprietary artboard format like Figma’s — so it functions as a literal whiteboard that AI agents can write code onto directly. That combination is the point: you keep Figma’s divergent, step-back-and-compare exploration, without losing the speed and reliability of a tool like Claude or Lovable that generates interfaces directly. Because the agents are already trained on writing and reading real code, the output is faster and more reliable than translating a design tool’s proprietary format into code after the fact.

The practical payoff shows up the moment you want a design change back in the codebase: copy the link to the frame, hand it to the agent, and the code is already there for it to read — no translation step in either direction.

Capturing the Live Site

Stephen starts with the Paper Snapshot browser extension. He selects a section of his live site — or holds Command-Enter to select the whole page — copies it, and pastes directly into Paper.

It’s fast — but the paste wasn’t a clean copy. Missing: the embedded video, the logo carousel, the scroll-triggered header animation, even some of the buttons. “It did get 80%, and I think it’s enough for me to iterate on what I want to iterate on today.” Curious whether the gap was his site or the tool, he ran the same test against Apple’s landing page and got a far more complete result — images and layout intact — which suggests the shortfall is page-specific rather than a hard ceiling on the extension itself.

Voice Prompts, Parallel Agents

Everything Stephen showed next is what he’d actually be doing off camera. His coding tool is Conductor — any AI coding agent works the same way, he says, Claude, Cursor, or Codex; Conductor is just his preference, mainly because it lets him work on multiple things at once without them conflicting.

He copies the link to the testimonial section’s frame into Conductor, then prompts entirely by voice using Wispr Flow. Held keyboard shortcut, spoken instructions, released — Wispr Flow writes it up formatted and ready, correcting names and mid-sentence corrections on the fly. Stephen’s actual spoken brief: build a few more versions of the testimonial section, the current one looks vibe-coded and only fits three, find a pattern that scales, bring some motion and animation ideas, make it good design, and generate eight different versions to review. He’s since linked the Wispr Flow shortcut to a mouse button — he barely touches the keyboard to prompt anymore.

To work on the services section at the same time, he opens a new chat rather than a new worktree in Conductor — a full worktree is a separate copy of the codebase for zero conflict risk on bigger changes; a new chat stays in the same worktree, faster to spin up, with a bit more conflict risk on simpler edits. He briefs the second agent the same way — six service categories, end-to-end product design, ten layout versions — and lets both run while he reviews the first batch. For an unrelated visual reference, he pastes in a Mobbin screenshot mid-brief and asks the agent to try a version closer to it.

What AI Gets Wrong

Eight directions come back onto the canvas, and this is exactly the case Stephen makes for Paper over raw code generation: “previously in code you would make one iteration — it was very hard to test multiple iterations. But now that it’s in the canvas, I can take a step back and review all the ideas.” One notable detail: the agent pulled real client names and logos from the codebase itself to populate the testimonial data, rather than inventing placeholders.

Then the cleanup pass. Stephen’s read on AI-generated design, in one line: “AI adds things unnecessarily — it acts like an insecure designer.” The tells he points out live: an eyebrow header added to a section that didn’t need one, then another, then a third, all in caps. Icons colored and boxed heavily enough that they catch more attention than the copy they’re meant to support. Five or six near-identical font sizes — 13.5, 14.5, 15, 34 — where two or three would hold the whole layout together. He deletes the eyebrow headers, strips the icon color and border back to grayscale, aligns every text size to the same font family, and tightens paragraph line-height.

The Real Job

I asked whether taste is something AI closes the gap on eventually, or whether it stays a permanently human part of the process. Stephen’s answer treats the site like a product: the actual problem he’s solving is that visitors need social proof fast enough to trust his design services. Once that’s the target, deciding the right pattern to serve it is still human judgment — and he thinks it stays that way.

That framing runs deeper than picking a layout. His honest first question about the testimonials wasn’t how they should look — it was whether a testimonials section should exist on the page at all. As AI gets better at the tactical execution layer — spacing, type scale, icon weight — Stephen’s read is that the higher-value work only gets more concentrated: what a user actually needs, what problem is actually being solved, what should get built, and just as often, what shouldn’t.

Canvas to Code, and a Live Tuner

With a testimonial direction he’s happy with, moving it into production is a copy-paste: link the Paper frame, ask the agent to apply it to the live site, and because the frame is already code, “this process should be pretty quick, and also extremely accurate.” He also skips a step Figma always required — building a design variant just to represent a scroll or hover state. Because the section is real code from the start, the agent added the row’s hover behavior — cards slow to a stop when you point at them — entirely on its own.

One thing Paper’s canvas can’t do yet: let him judge motion. A static frame can’t show speed or easing, so he asks Conductor to explain how the scroll animation is built and what’s tunable — then has it build a one-off UI just for dialing it in: sliders for row duration, card width, card gap, row gap, edge fade, and direction.

“Honestly, I’m pretty happy with how things turned out. I was surprisingly surprised — even this tuner thing broke my expectations.” He drags sliders until the feel is right, flips direction, removes the pause-on-hover behavior he didn’t want, and copies the resulting CSS straight back to the agent. No guessing at numbers in a code editor — he can feel the animation the same way he’d feel it as a visitor.

Advice for Solo Builders

Zooming out, Stephen’s advice for someone building solo: this exact workflow is especially useful if you’re not a designer or not technical. Generate versions, see them on a canvas, pull the one you like straight back into code — a real supplement for teams without a full-time designer.

What he’d tell people to stop worrying about: the tactical layer. Line spacing, color values, font sizing — Stephen expects AI to keep closing that gap. Tools like Conductor, Cursor, and Claude Code are intuitive enough now that you can get away with never opening the code files at all; if something’s confusing, just ask the agent how it works instead.

Tools & Resources

Everything Stephen used in this one:

• Paper Snapshot extension — capture any live page into an editable Paper canvas.
• Paper MCP — connects Paper to a coding agent so design and code stay in sync.
• Conductor — runs parallel AI coding agents, one worktree or chat per task.
• Wispr Flow — voice-to-prompt dictation.
• Mobbin — UI reference library.
• Yu Studio — Stephen’s design studio, and Stephen on LinkedIn.

Also mentioned — any coding agent works the same way, Conductor is just Stephen’s preference: Claude Code, Cursor, Codex, Lovable, and yes, Figma still has its place.

If you’re a post-PMF AI or B2B startup that wants embedded product design — a real design system, features shipped well, someone thinking about what to build and not just how it looks — Yu Studio takes a limited number of clients. Book an intro call. No pressure either way.