Pictures go stale
The mockup was right the day it was drawn. The product kept shipping and the file did not, so every review starts by asking which version is true.
NEW Optimize writes your sitemap, flows and design system
Design
Design
on the real product.
ucode by CRABZLAB puts your running product on an infinite canvas. Every screen live, on every device, arranged into flows, scenarios and a sitemap. Point at anything and ucode knows the component. Hand the note to your own AI, and the screen updates.
Download for macOS
Other platforms
macOS, Windows, Linux and web. Tablets next.
The real editor on a real product: 17 routes of the Goldmarket app, captured on phone.Hover names the component. Click opens the thread.
0msfirst paint of a file
0msp95 pan and zoom with 12 live screens
0real device presets with true pixel ratio
0% CPUwhen the canvas is idle
0automated tests across 16 packages
Measured on release builds, same machine as the old review board. Numbers, not adjectives.
Why ucode
Your design file is a picture. Your product moved on.
Design tools hold drawings of a product. Feedback tools hold screenshots of it. Coding agents hold the repo. Nothing holds the product itself, the way people actually use it.
Feedback loses its target
"The button on the left" in a chat thread. A cropped screenshot. A ticket nobody can map back to a component, a route or a line of code.
AI guesses what you meant
A coding agent reads the whole repo to work out which element you pointed at, then fixes the wrong one with total confidence.
ucode starts from the running product, so the picture can never drift from the truth.
How it works
From running product to shipped fix, on one canvas.
Four steps, one file. Every step leaves something the next one can use: captures, structure, pins, and a brief your agent can act on.
01 / CONNECT
Bring the product
Point ucode at a local build or a URL. It captures every route on every device you pick, with the product's real data and state.
02 / SEE
See it whole
Screens, flows, scenarios, sitemap, design system, responsive, moodboard and branding. Eight pages, one file, one canvas.
03 / POINT
Say what is wrong
Hover names the element. Click marks it and opens a thread that already knows the selector, the box, the tokens and the route.
04 / ITERATE
Fix it with your AI
Send pins to Claude Code, Codex, Gemini or OpenCode on your machine. ucode re-captures the screen and moves the pin along.
One file, eight pages
Every way to look at a product, in one place.
A product is not a pile of screens. It is routes, journeys, states, tokens and a brand. ucode keeps all of them next to each other, built from the same source.
Every route, live.
Screens in view run as the real product, up to twelve at once, so menus open and forms validate. Everything else is a fresh capture you can refresh or make live in one click.
- Zoom from 5% to 400% under the cursor, with the old board's feel
- Grouped into sections by area, each screen labelled with its route
- Capture age on every screen, one click to refresh
Journeys as real flowcharts.
Flows read like the diagram you would draw on a whiteboard: a start, steps, decisions with yes and no, terminals and routed arrows. Every step is a route that exists.
- Generated from the link graph of the product
- Decisions appear where a form or a state gates the path
- A thumbnail of the real screen on every step
Flows / Browse to purchase
Scenarios, one row per person.
The same product walked by different people in different states: a guest, a signed-in buyer, a seller with an offer open. Each row shows the screens that journey really passes through.
- One journey per state the product supports
- Personas and goals named by your own AI when you allow it
- States captured as they are, never faked
Scenarios
Guest?as=guest
Buyersigned in
Seller#open=offer
The route tree, read from the code.
The sitemap is the product's real routes arranged by path and ordered by how deep they sit from the entry points. Routes with no screen and screens with no route show up in the health report.
- Built from routes and links, not from memory
- Levels, counts and orphans at a glance
- Stays in sync every time you run Optimize
Sitemap
/home
/catalog3 screens
/product/:id2 states
/vendor/:slug1 screen
/favorites1 screen
/store4 screens
/store/wallet1 screen
/profile2 screens
/settings2 screens
/authgate
The design system the product actually uses.
Colours, type and spacing come out of the product's own CSS custom properties and scales. Components come from its own tags. Defined but unused tokens get flagged, not hidden.
- Token groups from real CSS variables
- Type and spacing scales measured from the build
- Component list from data-testid tags
Design system
brand
ink
sale
ok
bg
text
AaAaAaAaAa40 / 30 / 22 / 17 / 14
AppHeader.logoAppHeader.searchProductCardProductCard.priceVipBadgeBottomNavFilterSheet+ 18
28 real devices, side by side.
Each preset carries its true pixel ratio, touch and operating system user agent, so the product renders the way it does on the device, not a resized desktop.
- iPhone 16 at 1179 by 2556, 3x
- Pixel 9 at 2.625x with touch
- A 5120 by 1440 super ultrawide at 1x
Responsive / 28 presets
iPhone 16
3x
3x
Pixel 9
2.625x
2.625x
iPad Pro 11
2x
2x
MacBook Air
2x
2x
Ultrawide 5120
1x
1x
References next to the thing they inspire.
Drop, paste or link pictures onto a moodboard in the same file as the product, so the direction and the result sit one zoom apart.
- Drag and drop, paste, URL or file dialog
- Masonry layout that reflows as boards grow
- Arrange in one command
Moodboard
The brand, checked against the product.
Swatches with their WCAG contrast ratios, type specimens and the logo, all read from the product's own tokens. When a colour fails contrast you see it before a user does.
- Contrast ratio on every swatch pair
- Type specimens in the product's own fonts
- Generated straight from the design tokens
Branding
Aa#F5A623 on #111 9.3
Aa#0F3B34 on #FFF 12.4
Aa#6B7280 on #F3F4F6 4.4
Aa#F5A623 on #1F2937 7.2
Comments that know the code
Point at a button. ucode knows which one.
A comment in ucode is a pin on a real element. It carries everything a developer or an agent needs to find it, and it moves through a lifecycle you can see on the canvas.
- Hover names the element under the cursor, from the product's own tags
- The comment is the pin: one identity, one thread, one lifecycle
- Selector, box, tokens and route attached automatically
- Mark a region when the note is about more than one element
- English and Georgian aliases on every component
DesignComments 1
Component
- Name
- AppHeader.logo
- Selector
- div[data-testid="AppHeader.default"] > div[data-testid="AppHeader.logo"] > svg
- Box
- 187 x 36 at 16, 12
- Route
- /catalog · phone 390
- Tokens
- radius 0px · text rgb(0, 0, 0)
Thread
You · just nowThe logo crowds the search icon on small phones. Scale it to 80% below 400 px.
Claude Code · 2 minChanged AppHeader.tsx: logo width clamps to 80% under 400 px. Re-captured /catalog on 390 and 430.
Status
DraftQueuedPlanningIn progressDoneTested
SkippedNeeds info
Optimize
One button turns screens into a documented product.
Optimize reads your screens and the product behind them, works out how it is wired, and writes the pages that describe it. It shows what it will add, change and leave alone, then applies everything as one step you can undo.
Optimize
Read the product and write the pages that describe it.
Keep my edits. Anything you changed by hand is left alone.
- Sitemapready
- Flowsready
- Scenariosready
- Design systemready
- Organise the fileready
- Context packready
- Tagging planready
- Health reportready
287 changes applied UndoGenerate
Structure first, offline
Routes, links, forms, states, CSS tokens and component tags. Deterministic, and it works with no network at all.
Your AI names, never invents
With a connector enabled, your own CLI names journeys and personas. It cannot add a route the product does not have.
Safe to run twice
Keep my edits is on by default. Running it a second time changes nothing, and one Undo restores the whole file.
Bring your own AI
Your subscription. Your machine. Nothing proxied.
Connect the coding agents you already pay for. ucode hands them a precise brief instead of a vague screenshot, and keeps every step of the loop visible on the canvas.
- Give each agent a role: iterate, images or research
- Add any MCP server your agents already use
- Your code and captures stay on your computer
ConnectorsRuns on your machine
Claude Code
ConnectedclaudeCodex CLI
ConnectedcodexGemini CLI
Not checkedgeminiOpenCode
Not checkedopencodeMCP servers+ Add server
01Pins
You mark what is wrong, on the real screen
02Brief
LATEST.md plus the context slice for that area
03Your agent
Your CLI edits the code in your repo
04Re-capture
ucode shoots the changed screens again
05Tested
The pin reaches Done, you confirm it
Context pack
The file your AI reads instead of the whole repo.
Optimize writes a chunked context pack into the product: what the product is, its areas, every screen and every component with what it does. One area fits in one prompt, so agents stop guessing and stop burning tokens.
- INDEX, SCREENS and GLOSSARY, plus one file per area
- Written into your repo under review/context
- Never overwrites a file you edited without saying so
review/context/
INDEX.md
SCREENS.md
GLOSSARY.md
areas/
catalog.md
product.md
store.md
profile.md
HEALTH.md
# Glossary AppHeader.logo file AppHeader.tsx does brand mark, links home used /, /catalog, /favorites ka ლოგო ProductCard.price file ProductCard.tsx does price with currency, sale state used /catalog, /vendor/:slug ka ფასი
Everywhere you work
One file on every surface.
The same file opens with the same identity, comments and versions wherever you are. The drawing layer lets the browser compositor do the work, so it stays fast on a laptop battery.
macOSAvailable
WindowsIn build
LinuxIn build
WebIn build
iPadNext
Android tabletNext
⌘KCommand palette for every actionKeyboard first, like the design tool you already knowDark and light, English and Georgian
Honest comparison
Why not just use what you have.
Good tools already cover parts of this. ucode is the combination: the live product, its structure, precise pins and the fix loop, on one canvas.
| Capability | Design tools | Feedback widgets | Code-side editors | ucode |
|---|---|---|---|---|
| Shows your running product with real state | Snapshot | Yes | Yes | Yes |
| Every device size side by side | By hand | No | Partly | 28 presets |
| Flows, scenarios and sitemap | By hand | No | No | Generated |
| Comments that name the component | No | No | Partly | Yes |
| Review lifecycle from draft to tested | Partly | Yes | No | Yes |
| Hands the fix to your own AI agent | Partly | No | Yes | Yes |
| Context pack for agents | No | No | No | Yes |
| Vector drawing from scratch | Yes | No | No | On the roadmap |
Categories as of September 2026. Tools move fast. If a row is out of date, tell us and we will fix it.
Roadmap
Create and fine-tune, in one tool.
ucode grows from reviewing the product you have into creating the product you want. Every phase lands on the same canvas and the same file.
Now Shipping
- Live canvas with every screen, every device
- Eight pages: screens to branding
- Pins and comments with a full lifecycle
- Optimize and the context pack
- Connectors for your own CLI and MCP
Next Building
- Tablets with pencil and touch, same file
- Record and tag scenarios from the live screen
- Create: image, video and asset generation on the canvas
- Accounts and sharing across every surface
Later Planned
- Fork to proposal: live page to layers, diff to code
- Styles and components editor
- Vector editor on the same canvas
- Present mode and plugins
Pricing
Priced by the fixes you ship.
Every plan includes the full canvas, all eight pages, pins and Optimize. Plans differ by included AI iterate runs and seats.
$20/ month
For one person and one or two products.
- 25 AI iterate runs a month
- 3 projects
- All eight pages and Optimize
- Pins, comments and versions
- Your own CLI connectors
$100/ month
For people who ship every week.
- 150 AI iterate runs a month
- Unlimited projects
- Everything in Starter
- Priority captures and support
$200/ month
For small teams and agencies.
- 400 AI iterate runs a month
- 5 seats
- Bring your own API key
- Everything in Pro, fair use
Extra runs $0.75 each. Image and video generation is metered separately when it arrives.
FAQ
Questions people ask first.
Does my code leave my machine?
No. Iterate runs the CLI you connected, on your computer, with your own subscription. ucode proxies nothing. Captures of a local build stay local.
What can I connect?
A local web build gives you live screens, pins and the iterate loop. A public URL gives you captures of every screen; live frames and component pins need the local build, because ucode cannot run its agent inside someone else's site.
Does it replace Figma?
Not for drawing from scratch, yet. Today ucode is where you see, review and fix the real product and document its structure. The vector editor is on the roadmap and grows on the same canvas.
Which AI agents work with it?
Claude Code, Codex CLI, Gemini CLI and OpenCode, plus any MCP server you add. Each gets a role: iterate, images or research.
How does ucode know which component I clicked?
A small agent runs inside the live screen and reads the element under the cursor, its selector, box and styles, and the component name from the product's own tags. Products without tags get a tagging plan from Optimize.
Is there a tablet version?
iPad and Android tablets are next: touch and pencil first, review and comment, the same file you opened on your desktop.
Who makes ucode?
CRABZLAB, short for Crazy Business Laboratory: a small crew that builds and runs its own products and grinds on them until they work. ucode is the tool we built to review and fix them, and now it is yours too.
Which languages does it speak?
The interface is in English and Georgian, and every component can carry aliases in both.
Stop reviewing pictures of your product.
Open the real thing, point at what matters, and let your own AI ship the fix.