The battle of AI design tools

Figma Design, Figma Make and Claude Design, benchmarked against a real production codebase

Most AI design tool comparisons test a tool on its own terms: whatever framework it prefers, whatever output it's optimized for. We didn't do that. Our accelerator store Blackbird, which we used to conduct the tests, runs on NuxtJS, Vue, TypeScript and Bulma, and two of the three tools we tested default to generating React and Tailwind instead.

Rather than score them on that friendlier home turf, we measured the full cost of getting each tool's output into Blackbird's actual codebase, conversion included. It's a harder test to pass, and it's exactly the kind of test that separates a tool that looks good in a demo from one that holds up on a real project.

One more condition shaped the results just as much as the stack: this was a test of redesigning existing Blackbird components, not building new ones from scratch. It might thus lead to different results than we'd find for greenfield prototyping.

Since the tools evolve fast, it's worth noting the tests were carried out in Q3 2026.

All three tools produced maintainable code that stuck to existing project conventions reasonably well. But they all shared the same tax: none of them natively speaks Vue and Bulma, so every option required some conversion from its default output. What set Figma Design apart wasn't dodging that effort, but reading structure and design tokens directly from the source file rather than generating a fresh interpretation of the design. That gave the team less to convert and less to double-check, which is why it still came out most token efficient and most accurate.

One thing shapes this whole comparison: Blackbird's use case here is redesigning existing components, not building from a blank page. Figma Make is built for turning a design into a new, working prototype. A real strength when there's no existing codebase to fit into. Starting a project from scratch, it would likely be the better pick. On a redesign, where the job is matching something that already exists rather than inventing something new, that same strength turns into overhead, and that's a real part of why it lost here.

This led us to take the decision to standardize on Figma Design as the source of truth for Blackbird UI work, implemented through Claude Code with a purpose-built skill. AI design tools are moving fast, and this comparison is a snapshot (Q3 2026), not a permanent verdict. supersonic will keep re-testing as Figma Design, Figma Make, Claude Design and any other relevant tools evolve, so we can keep providing valuable recommendations.