Solide - One canvas, no second app
A design tool I built for myself first: layout, vector drawing and motion on one canvas, with my own AI working inside the file.
I worked across three apps and paid for two AI plans, and the only check that a built screen matched its design was my own eyes. The first Solide took one week on GrapesJS and then hit a wall, so I started over with the flows and the UI system first. Three months on, I have drawn more than 300 Tasmi' screens on it.
{{ impH2 }}
One canvas to draw on, an agent that works inside it, and a check on what ships.
The AI part at work: the agent reads the real scene, edits only the element you meant, and every row it touches flashes.
One user to start: me, designing every screen and then building it.
Solide was built for its maker first. That made the brief unusually honest: every gap between a drawing and its code cost my own time, and every extra tool cost my own money.
Three tools, two AI bills, and a gap only my eyes were checking.
A normal day meant laying out screens in one app, drawing icons in another, and paying for the AI that plugs into each. Every switch cost a little focus, and every plan a little money.
Then came the handoff. Porting Solide's own sidebar from its mockup took four rounds of me spotting mismatches by eye. When I finally automated the check, its first run on a section I had already reviewed three times found 134 mismatches. My eyes were the only test, and they were losing.
How might I draw layout, vectors and motion in one place, let my own AI work inside the file, and know, not hope, that the built screen matches?
I threw away a working week and started with the flows and the UI system.
Solide began in late June 2026 as a one-week GrapesJS build: 84 commits that worked, until an audit found one 1,179-line engine file changed 52 times in 30 days.
On July 3 I started over. This time the framing, the flows and the UI system came first, and the code came after. Three rules have carried every session since.
Three questions shaped everything else.
For each one I weighed the options before writing any code.
What you drew is what you build from.
Eight flows, approved before any code. The eighth step is the point of the product.
The UI system came first, and tokens get a screen of their own.
Solide's interface is built from its own tokens. They are edited on a dedicated screen, in light and dark, with math, contrast pairs and alias chains in view instead of buried in a panel.
Every behaviour is drawn and signed off before its code.
The pen drew corners only. A curve could arrive in an SVG file, but dragging one of its points bent it out of shape, and a circle showed 5 points instead of 4.
So curves became 24 behaviours, A to X, each one drawn on the canvas and approved over four review rounds before I wrote a line of code. Six of them below.
If I can't measure it, I don't claim it.
Solide's own interface plays by the same rule. Its panels are split into 126 sections, and each one must pass the design-diff gate against its mockup before a commit goes through. The gate proves the DOM matches the drawing. It does not prove behaviour or accessibility.
Solide already carries real work: more than 300 Tasmi' screens.
Every Tasmi' screen, from rough lo-fi to final hi-fi, was drawn on the Solide canvas and moved into code through its MCP. For a tool built for its maker, that is the test that counts: I kept using it.
Details that matter
Small behaviours I have rarely seen in other design tools, each one designed on purpose.
