From Figmimic to Claude: Replacing Design SaaS With Scrappy AI Workflows

The short answer

You can build UI components without Figma by capturing an existing interface directly from the browser (via a bookmarklet, screenshot, or DOM extractor) and handing that capture to Claude, which writes the component code. No design file, no seat, no round trip through a design tool required.

This is not a hypothetical. It is what a growing number of product teams are doing instead of paying for full Figma seats just to move pixels around before a developer rebuilds them anyway.

Why teams are looking for a way around Figma

Figma is good software. It is also expensive at scale, and the pricing keeps climbing. On the Professional plan, a Full seat (the kind a designer needs) runs $16 a month billed annually, Dev seats are $12, and Collab seats are $3.¹ Step up to Enterprise and a Full seat costs $90 a month, with Dev seats at $35.² Figma raised Full seat prices by 20% to 35% across its tiers as part of a 2025 pricing overhaul.³

Multiply that by a team where only two or three people actually live in Figma all day and everyone else needs occasional access, and you get an odd shape of spend: a handful of $90 licenses justified by a much larger group of people who mostly just need to look at a screen and copy a hex code.

The market noticed this tension in a very public way. When Anthropic shipped Claude Design, a text-prompt tool for building prototypes, decks, and one-pagers on top of Claude Opus 4.7, Figma's stock fell about 7% the same day.⁴ Adobe and Wix dipped too.⁵ Wall Street was not pricing in a Figma killer overnight. It was pricing in a shift already underway: fewer people need a dedicated design tool to get from idea to shippable interface.

The workflow: extraction plus Claude, not a new design tool

The scrappy version of this shift does not require Claude Design or any other paid AI design product. It uses two things most teams already have access to.

Step 1: Extract the interface, not a screenshot

A screenshot is a flat image. You can trace over it, but you cannot easily recover spacing, hierarchy, or component boundaries from pixels alone. What you want is the underlying structure.

This is the idea behind Figmimic, a free bookmarklet built by B12's Adam Marcus and Meredith Blumenstock. It serializes the DOM of any webpage into Figma's native file format, preserving nesting and hierarchy, so you get an editable structure instead of a static image grafted with vector edits.⁶ The tool itself came out of a Claude Code session: the team was experimenting with Figma's MCP tooling, discovered the underlying code injection trick worked on any page, and asked Claude to turn it into a shareable bookmarklet.⁶

You do not need Figmimic specifically. The pattern generalizes: grab the DOM, grab computed styles, grab a screenshot as a fallback, and pass that structured data forward instead of a picture.

Step 2: Hand the extraction to Claude and ask for a component

Once you have structure, not just pixels, an AI coding tool can rebuild it faithfully. The open source project screenshot-to-code, which has more than 74,000 GitHub stars, benchmarked Claude 3 against GPT-4 Vision on exactly this task back when Claude 3 launched.⁷ Using a 0-4 replication accuracy scale across 16 test screenshots, Claude 3 Sonnet scored 70.31%, beating GPT-4 Vision's 65.10%.⁷ The maintainer also noted Claude was "much less lazy" than GPT-4 Vision, which tended to stub out repeated list items with comments like <!-- repeat for each item --> instead of writing the full markup.⁷

That gap matters more than it sounds. A model that gets lazy on repeated components is useless for building a real component library, because components are, by definition, repeated.

Step 3: Turn the output into an actual component, not a one-off page

This is where the discipline comes in. Claude will happily hand you a giant slab of markup that looks right. Whether it becomes a reusable UI component depends on what you ask for. In practice this means:

• Ask for the component in isolation, not the whole page. Extract one card, one nav bar, one modal at a time.
• Ask for props or variants explicitly ("give this a variant prop for primary and secondary states") rather than letting Claude hardcode one instance.
• Ask it to match your existing design tokens (colors, spacing scale, font sizes) if you have them, rather than inventing new ones. Developers who convert Figma to code by hand already do this step manually, pulling padding, colors, and radius values into variables before writing a single component.⁸ The AI workflow just moves that same discipline earlier, before code exists at all.
• Iterate with real screenshots. Round-trip testing, where the model takes a screenshot of what it just built, compares it to the target, and adjusts, closes most of the gap between "close enough" and "actually matches."

None of this requires a Figma license. It requires a browser, a coding agent, and someone willing to be specific about what they want.

Where this breaks down

Be honest about the limits, because the hype cycle around this workflow is loud right now.

DOM-to-Figma tools like Figmimic are not perfect. The maintainer himself flagged that the underlying library can mess up visibility rules and get element sizing slightly wrong, requiring manual cleanup afterward.⁶ It also has not been tested on interaction states, animations, or multi-step flows, only static screens.⁶

Screenshot-to-code tools have their own blind spots. Claude 3 got background and text colors wrong "quite often" in testing, and every model struggled specifically with side-by-side flex layouts.⁷ If your component depends on getting an exact brand color right, verify it, do not trust the first pass.

And even Anthropic's own polished design product has rough edges by early accounts. One designer who spent weeks testing Claude Design gave it a 6 out of 10, noting the handover to actual code was clunky enough that the workaround was screenshotting Claude Design's output back into Claude Code.⁹ If the frontier lab's own flagship design tool has that friction, expect friction in the scrappy DIY version too.

Where this fits in the bigger build-vs-buy picture

The pattern here is not "AI replaces designers." It is "AI collapses a specific, expensive handoff." The Figma-to-code translation step, where a developer manually reads spacing values, copies hex codes, and rebuilds a static design in a framework, has always been slow and error-prone.¹⁰ Extraction tools plus a capable coding model shorten that path without requiring a $90-a-month seat for everyone who touches a design.

Teams that already track what they build internally versus what they rent tend to spot these openings faster. If you are treating your internal tools as assets you own rather than subscriptions you renew, this kind of workflow is a natural fit to log alongside the rest of your homegrown stack, the kind of thing a tool like Remy is built to keep visible instead of buried in someone's bookmarks bar.