Claude Design vs Figma vs Lovable Pixel Audit

Grant: Hey, welcome back to UX Autopsy. Maya: And we've got a juicy one today. Grant: So, Anthropic dropped Claude Design last week, and Figma stock lost something like $1.2 billion in market value the same day. Maya: Wait, over a billion? Just from one launch? Grant: Yeah, according to Gizmodo and DesignRush, investors clearly got spooked. Maya: But doesn't stock panic actually tell us anything about whether the tool's any good or just that Wall Street panics easy? Grant: That's the fight we're having first, and we don't agree. Maya: Not even close. Grant: Then we're putting Claude Design, Lovable, and Figma Make through an actual bake-off, design system fidelity, accessibility, code cleanliness. Maya: I'm pushing back on that framework a little too. These tools aren't built for the same stage of a build. Grant: We'll see. We're also getting into whether Claude Design's big claim, reading a live site to pull colors, type, spacing... actually survives once you check the hover and focus states. Maya: I have thoughts on that. Grant: I bet you do. Maya: Plus a red flag green flag round on contrast ratios and export options. Grant: And spoiler, we split on the overall winner too. Maya: Of course we do. Grant: So grab your coffee. Maya: Or your second one. Grant: Let's get into Figma's very expensive Tuesday. Seven percent in one trading session. That's the number that made me sit up straight. Maya: Seven percent of what, though? Give me the actual damage. Grant: Figma's market cap dropped by roughly $1.2 billion, according to Yahoo Finance, the day Anthropic launched Claude Design, April 17th. Maya: That's a lot of money for one Thursday. Grant: And here's the part that caught my eye as a former risk guy. Three days before that, Mike Krieger quietly stepped off Figma's board. Maya: Wait—Krieger—Anthropic's own product chief? Grant: Yep; Gizmodo flagged the timing, too. You don't resign from a rival's board three days before your company torches their stock by accident. Maya: Okay, but a stock dip doesn't tell me the tool is actually good—that's the market reacting, not grading design work. Grant: Fair; but markets price in expectations. Traders read Claude Design's spec sheet and decided Figma's moat got smaller overnight. Maya: I'll give you the signal—I won't give you the verdict. Grant: Deal. So, um, what actually shipped? Aurora Designs reported Claude design runs on Opus 4.7, Anthropic's newest vision model. Maya: And the headline claim it can read an existing code base and pull the design system out of it on its own. Tokens, components, spacing, all of it. Grant: If that's real, that's been Figma's entire pitch for the last five years minus the labor. Maya: Right? Design systems are basically Figma's whole business. Grant: So the question isn't whether Wall Street panicked, Maya: it's whether the thing Wall Street panicked about actually holds up when you sit down and use it. Grant: which is exactly what we're about to find out. Maya: So, does Claude Design earn that billion-dollar reaction, or did the market just get spooked by a good demo? Grant: Alright, moving past the stock chart, let's build the actual test. Maya: Please, numbers on a screen don't tell you if a button works. Grant: So here's the setup: same brief, three tools, Claude Design, Figma Make, and Lovable, scored on Design System Fidelity, Accessibility, and Code Cleanliness. Maya: Three categories, three tools, one brief. Simple on paper. Grant: And somebody already ran a version of this. O2 UI tested Claude Design against Lovable. Same brief, a screenshot, plus a Design-system md file. No follow up prompts allowed. Speaker 3: Wait, no follow ups at all? So whatever comes out first is what you're stuck with? Grant: That's the whole point: no babysitting the model. And according to Opus UI Claw Design produced a full working redesign in under ten minutes. Minutes. Speaker 3: Okay, ten minutes is fast, but Lovable started generating faster, right? Grant: Right. Lovable jumped out the gate quicker. Opus UI's read was that it felt less shaped by the actual brief once you dug in. Speaker 3: See, that's the part I push back on. Comparing raw speed is a little unfair. These tools aren't built for the same job. Grant: How do you figure they both took the same input? Speaker 3: Lovable's built for scaffolding a whole app, front end, back end, the works. Claude Designs optimized for one polished screen. Of course one looks faster out the gate. Grant: Fair, but the brief was identical. If the output's supposed to reflect the brief, speed to a usable draft still matters. Speaker 3: I'm not saying speed's irrelevant. I'm saying don't crown a winner off a stopwatch. Grant: Noted. So the scorecards of the fair fight, fidelity, accessibility, and code cleanliness. Three lanes, no stopwatch. Speaker 3: Exactly, and accessibility is the one I actually want to grill because that's where a lot of these generators fall apart. Grant: Same. Because a pretty screenshot doesn't mean the contrast ratios hold up or the focus states even exist. Speaker 3: Which is basically the whole design system question, isn't it? Isn't it? Does the tool actually understand the system or just mimic the vibe of it? Grant: That's exactly where this gets hard. Let's pull the components apart and see who's really reading the design system versus faking it. Now, to take that forward, the speed number doesn't tell you if the thing actually understood the design system. Maya: Fair. So does it? Grant: According to O2UI's test, Claude design pulled colors, type, and spacing straight off the existing site's screenshot instead of starting from a blank template. Maya: Okay, that's the actual headline claim, right? Read the file, don't guess. Grant: That's the pitch. But I pulled that same output apart. And the type hierarchy falls apart the second you check real component states. Speaker 3: Like hover? Grant: Hover, focus, disabled, all three. Primary button looks sharp at rest. Focus ring, missing. Disabled state is the same color as active, just dimmed. Speaker 3: Ooh, ouch. Grant: That's not a design system read, that's a screenshot wearing one. Speaker 3: Okay, hold on. DevToolPics made basically that point last month. Maya: said production-level output from these tools still needs a manual pass before it ships, closer to a demo accelerator than something delivery-ready. Grant: Right, and that's the gap the launch page skips. Maya: Sure, but that's not really Claude Design's job. Lovable's pitch is different. It's not a picture. It's spinning up a React front-end, a back-end, off, the whole stack. Grant: Sure. How many of those aux flows work without you touching code? Maya: More than zero. Look, Lovable doesn't nail visual fidelity either. O2UI's tests showed that too. But it's solving a different problem. One builds you an app, one builds you a picture of an app. Grant: Fine, until an engineer expects that picture to be a component. Maya: And that's the real fight. Grant: It is. Yahoo Finance ran a piece framing exactly that. That the harder technical problem isn't generating one clean screen, it's getting that output into a company's existing component library and through actual developer handoff without a rebuild. Maya: Yeah, that tracks. Grant: Right. Maya: The colors matched on our poll, the card padding didn't survive handoff. Grant: Eight pixels where it should have been 16 on that same card grid. Maya: You measured it? Grant: I measured it. Told you I don't trust a screenshot at face value. Maya: I still call that a rough edge, not a deal breaker. Nobody judges Lovable off on day one; same rule should apply to Claude design spacing. Grant: Maybe, but day one's when everyone's watching and day one's when Figma stock moved. Maya: Low blow, but fair. All right, Let's slow the fight down for a second. Grant: Speed Round? Maya: Speed round. Contrast ratios, focus states, all the small stuff we just spent five minutes yelling about. about. Grant: Good; I've got opinions. Shifting gears, Quick-Fire time: I call it, you call it back. First up, contrast ratios on body text. Maya: Ooh, okay. Lovable's our quit? Grant: Green flag: four point six to one on the gray on white paragraph text. Clears AA. Maya: And Claude Design's version? Grant: Red flag. 3.8 to 1 on the same block. FAILS. Maya: harsh my turn focus states all three tools okay Grant: Go. Maya: Figma make green visible outline ring on every button red Grant: Claude Design? Maya: the primary CTA just changes opacity slightly you'd miss it tabbing through with your eyes off screen Grant: That's a real accessibility miss, not a nitpick. Maya: Microcopyerror states across the three? Grant: Green flag for Lovable, weirdly. Email doesn't look right instead of some generic invalid input. Maya: Claude Design? Grant: Flat, just red border, no message at all in our test run. Maya: Wait, no copy at all? Grant: Nope. Okay, now the one that actually worries me for cost. Maya: Oh, the token thing? Grant: PCWorld ran their own test on April 17th and burned through 80% of their weekly Claude Pro allowance in about 25 minutes. Maya: Twenty-five minutes? Grant: Yeah, if you're iterating, tweaking a button, regenerating a variation, that meter moves fast. Maya: Okay, that's a legit red flag for anyone doing rapid revisions, not just a one-shot prompt. Grant: Agreed. Green flag territory now. Exports. Lovable syncs to GitHub and does one-click Netlify deploy. That's shipping, not just presenting. Maya: I'd take the deploy pipeline over the slide export any day. Grant: I'd take both, honestly; depends if you're pitching or building. Maya: Fair. That's a real split, not a tie. Grant: Okay, tally's getting messy. Maya: Perfect. Let's add it all up. Grant: Okay, scorecard time. Three categories, three tools, and you and I are landing in different spots. Maya: We really are. Let's not pretend otherwise. Grant: Design system fidelity: Figma Make wins for me: Claude Design spacing breaks the second you open a real component state. Maya: I've got Lovable ahead there, actually. It never claimed to match an existing design system. You can't fail a test you didn't sign up for. Grant: Fair point; but if a founder needs to match their brand, that distinction doesn't help them much. Maya: Accessibility flips it back my way, though. Claude Design's invisible focus ring measured out under a two to one contrast ratio in my check. WCAG wants three to one minimum for something like that. Grant: No argument there. Cold cleanliness I'd call a wash; neither hand you something a senior engineer ships without touching it. Maya: So no single winner. That's fine by me. This was never a one tool category. Grant: I'll say this, too—I don't think Figma's cooked; people are treating this like a knockout. Maya: Where is this coming from? Grant: Figma's first quarter revenue hit three hundred and thirty three point four million dollars, up forty six percent year over year, and they raised full year guidance on top of it. Maya: After the stock dropped seven per cent. the same week Claude Design launched? Grant: Right; which complicates the whole "Figma is dead" read. The market reacted to a headline; the business kept accelerating. Maya: Or investors are pricing in a threat that shows up next year, not this quarter's revenue. Stock prices move on expectations; not what already happened. Grant: It could be both, honestly; one good quarter doesn't settle it either direction. Maya: Agreed. So what should people actually walk away with from all this? Grant: Treat any AI-generated screen as a first draft, never the final file. Maya: Open it in Figma and click through every hover state, every focus ring, every disabled button against your real components. Grant: Every time. The screenshot can look perfect and still hide three broken states underneath it. Maya: Skip that audit and you haven't saved time. You've just moved the debugging. Getting into production. Grant: And that's a call nobody wants at nine at night. Maya: Nobody. Grant: So if you take one thing from this whole audit? Maya: It's the Figma part, right? Grant: Exactly. Before you ship anything Claude Design or Lovable spits out, drop it back into Figma and check hover, focus, and disabled states yourself. Maya: Because the tools nail the happy path. It's the edge states where things fall apart. Grant: Every time. Auto-generated screens look done. They're not done until the humans click through them. Maya: Basically, don't trust the demo. Grant: Never trust the demo. Maya: All right, so screenshot a UI that's bugging you and tag us. We want to see it. Grant: And subscribe. We're back next week tearing into something else. Maya: Leave a review too, seriously. It helps more than people think. Grant: Thanks for hanging out with us through all this. Maya: Yeah, this was a fun one. Talk soon, everybody. Grant: See you next week.