AI design tool · solo build · 2024–26

Weave

Why am I spending my day describing design to AI instead of doing it? Why am I typing "move that dark blue box 10px to the right" and then waiting forever for it to regenerate? I could have just, like, you know, done that, in like 3 seconds. Like we used to in the good old days (6 months ago).So I built Weave. You use AI to generate a thing, and then you actually edit the thing yourself directly like a normal human designer.
Role
Everything — design, code, product
Team
Solo
Stack
React + TypeScript + Zustand + Supabase
Shipped March 2026 · live
Info

AI killed the blank canvas, but the second I wanted to nudge a box or swap an image, I was typing a paragraph to describe a three-second change, then waiting for a re-render.

So I built the opposite: a canvas where you finish the AI's draft by hand, and when you do want AI, you select the thing instead of describing it. User generates a UI as a wireframe or a React prototype, makes changes to it directly (like a normal human designer would), re-prompt only a certain element or a group only when they want to, all without breaking the underlying code. I shipped it before Figma, or Anthropic's Claude Design, did.

01 — The original concept

AI drafts. Designer finishes (on canvas or in code).

I found it ironic that we use AI to be efficient, but asking it to complete a job like swapping an image, that would have taken me a total of 5 seconds to do with my hands, would take a minute or two to complete, where I would just sit and wait and stare at the "discombobulating/pontificating/skedaddling" and rest of the Claudisms, which over the course of the day would mean so. much. wasted. time.

Not to mention I'd burn a lot of usage on these tiny tasks, again, all while wasting time. So much for efficiency? So the solution was clear to me: let the user generate a design with AI (or bring one they already created somewhere else) and then edit the design directly on canvas, in code, or by re-prompting particular elements. The design-to-code relationship never breaks, regardless of how edits were made.

So Weave starts there: generate the draft with AI, then finish it on a canvas like a design tool — drag, restyle, replace, reposition, all client-side, instant, and free. The model only runs when I want it to think, and when it does, it works on whatever I've selected, not on a paragraph trying to describe it.

02 — The arc

Each release widened what "edit on the canvas" meant.

01 the seed

Generate → Edit

Prompt a UI into existence, then drag and restyle it on the canvas with zero model calls.

02 real code

Edit React prototypes on the canvas

Beyond throwaway mockups: bring real React components onto the canvas and edit them visually, with the working code preserved underneath. Designers could touch the actual build instead of a picture of it.

03 the leap

Figma integration

Open a Figma file and it lands on the canvas as live, editable objects. Select any element, group, or frame and re-prompt just that ("make this card calmer," "tighten this row," "take the whole frame dark"), and the AI rewrites only the selected scope.

The convergence

Figma and Claude Design join the party (oh well).

I knew the entire time I was building it that I was racing against time, and that eventually the industry will catch up. And so they did: Figma released by-node editing and the unbreakable design-to-code relationship at the 2026 Config. Claude Design was released as a research preview at the end of April, 2026. I can't take credit for a frontier AI lab's and post-IPO company's product roadmap, but them landing on the same shape later tells me I read the problem right. I arrived at the solution early and alone, and that feels validating.

Weave functionalityLater matchedShipped
Import a design file → AI-edit it on the canvas, by node
Agents editing the canvas by component / variable
Figma · Mar 24 2026
Hand-finish AI output by direct manipulation — no model call per tweak
Direct canvas editing — drag, resize, align without a prompt
Claude Design · Jun 17 2026
Real code as an editable object on the canvas
Code layers — working code on canvas, from your codebase
Figma · Config 2026
Jun 24 2026
Design ↔ code round-trip that preserves the build
Code layers — one click syncs changes back to code
Figma · Config 2026
Jun 24 2026
03 — Scoped re-prompting

Direct selection

Typing 'the large blue box in the right with the "Recent Transactions" container' is much, much slower than just clicking on that large blue box. That became a huge part of the product for both direct and AI editing.

04 — The engine

One canvas for three very different inputs.

A prompt, a React tree, and a Figma node graph share almost nothing, until they're normalized into one editable scene. Then every edit has to survive the trip back into real source.

05 — more work