Always the live product
Every screen is the running build, captured on real devices. Nothing to keep in sync.
NEW Optimize writes your sitemap, flows and design system
DesignSelected · live layer
DesignSelected · live layer
on the real product.
CRABZLAB puts your running product on an infinite canvas. Point at anything and it knows the component. Your own AI ships the fix.
The real editor on a real product: 17 routes of the Goldmarket app, captured on phone.
Lab results
Measured on release builds, on the same machine as the old review board. Numbers, not adjectives.
Metric · first paint
First paint
0msfrom opening a file to a drawn canvas
34budget 500 ms
Metric · pan and zoom
Pan and zoom
0ms p95with 12 live screens on the canvas
p95
60 Hz
one frame16.7 ms
Metric · devices
Devices
0presetsreal pixel ratio, touch and user agent
phones to 5K28
Metric · idle
Idle CPU
0% CPUwhen nothing on the canvas moves
0 drawsat rest
Metric · tests
Tests
0automated tests keep it honest
packages16
Why CRABZLAB
Your design file is a picture.
Your design file is a picture.
Your product moved on.
Design tools hold drawings, feedback tools hold screenshots, agents hold the repo. Nothing holds the product itself.
Pins name the component
Click the element. The comment carries its name, route and box, so nobody has to guess.
Your agent gets the exact element
The brief names the file, line and screen, so the fix lands where you pointed.
How it works
From running product
From running product
to shipped fix.
Four steps on one canvas. Every step leaves something the next one uses.
Source
Local build
Public URL
~/goldmarket-app/app/dist-web
Devices
iPhone 16 · 390430iPad · 1024Desktop · 1440+ 24 presets
Capturing
/
/catalog
/product/3880
/vendor/maiaqartsivadze79
/favorites
about 0.5 s per screen17 of 17 ready
Screens 17Flows 4ScenariosSitemapDesign system
17screens
4flows
4areas
12live at once
ProductCard.badgeInspect/catalog · 390
- Name
- ProductCard.badge
- Variant
- superVip
- Box
- 85 x 24 at 29, 285
- Parent
- ProductCard
YYou · just now
Badge covers the ring. Move it below the photo on phones.
Pin 1 · ProductCard.badge · /catalog
DraftYou marked the badge on the live screen
QueuedSent to
Claude Code with the context slicePlanningFound
components/ProductCard.tsxIn progressEditing the badge position under 400 px
DoneRe-captured
/catalog on 390 and 430TestedYou confirmed it on the canvas
One file, eight pages
Every way to look
Every way to look
at a product.
Routes, journeys, states, tokens and brand, side by side. All built from the same running product.
ScenariosGoldmarket · phone 390
Guest browsesnot signed in
/authgate
Buyer savessigned in
/favoritesSeller listsstore owner
/store/store/
product/new
product/new
/ Goldmarket
Buyer7/catalog/product/3880/vendor/…/favorites/notifications
Account4/profile/settings/settings/blocked/legal/terms
Seller5/store/store/product/new/store/boosts/store/wallet
Auth1/auth
primary#0C3130
primaryLight#124947
gold#FFB011
peach#FFBC7D
textPrimary#1F2937
textSecondary#6B7280
success#16A34A
danger#EF4444
Typetokens.ts
11 700 ₾price · 30
Diamond ring, 750 goldtitle · 19
101 listings in catalogmeta · 14
Componentsdata-testid
AppHeader.logoAppHeader.searchProductCard.imageProductCard.badgePriceTag.currencySearchBar.inputFilterSheet.applyVendorCard.nameEmptyState.titleand more
primary#0C3130NoteJewellery on red velvet reads warm. Keep product photos full bleed.
gold#FFB011
Aa
gold on primary7.66Aa
white on primary14.02Aa
inkDeep on gold10.55Aa
textPrimary on white14.68Aa
textMuted on white2.54 failEvery route, live.
Screens in view run as the real product, up to twelve at once, so menus open and forms validate. The rest are fresh captures.
- Zoom 5% to 400% under the cursor
- Sections by area, each screen with its route
- Capture age on every screen, one click to refresh
Journeys as real flowcharts.
Start, steps, decisions and routed arrows, generated from the product's own links. Every step is a route that exists.
- Built from the link graph
- Decisions where a form or state gates the path
- A real screen on every step
One row per person.
The same product walked by different people in different states, each row showing the screens that journey passes through.
- One journey per state the product supports
- Personas named by your own AI when allowed
- States captured as they are
The route tree, from the code.
Real routes grouped by area and ordered by depth from the entry. Routes without a screen show up in the health report.
- 17 routes in 4 areas for Goldmarket
- Levels and counts at a glance
- Stays in sync every time you run Optimize
The system the product actually uses.
Colours, type and components come out of the product's own tokens file and tags, not a separate style guide.
- Tokens read from tokens.ts
- Components from data-testid tags
- Unused tokens get flagged
Real devices, side by side.
Each preset carries its true pixel ratio, touch and user agent, so the layout is the one people actually get.
- 28 presets from phones to 5K
- Real pixel ratio and touch
- One click to capture them all
References next to the product.
Drop, paste or link pictures onto a moodboard in the same file, so direction and result sit one zoom apart.
- Drag, paste, URL or file
- Masonry that reflows as it grows
- Sticky notes for the why
The brand, checked against the product.
Logo on every ground and each colour pair with its WCAG ratio. When a pair fails, you see it before a user does.
- Contrast ratio on every pair
- Logo on light and dark
- Read straight from the tokens
Comments that know the code
Point at anything.
Point at anything.
CRABZLAB knows what it is.
Hover the live product and every element tells you its name. Click, and the comment carries everything a developer or an agent needs.
Hover names itThe element under the cursor, from the product's own tags.
The comment is the pinOne identity, one thread, one lifecycle.
Context attachedSelector, box, tokens and route, automatically.
English and GeorgianEvery component carries aliases in both.
InspectCommentshovering
- Name
- Gallery.main
- Box
- 358 x 358 at 16, 76
- Parent
- Gallery
- Aliases
- gallery · გალერეა
- Route
- /product/3880 · 390
THREAD
Click an element to leave a comment on it.
YYou · just now
CClaude Code · just nowFound
ProductScreen.price in the product screen. Planning the change.DraftQueuedPlanningIn progressDoneTested
Optimize
One button turns screens
One button turns screens
into a documented product.
Optimize reads the product behind your screens and writes the pages that describe it. One step, and one Undo.
Reads
tsapp/src/app21 routes, 23 links
{}board.json17 captured screens
#tokens.ts56 colours
< >components.json59 components
Goldmarket
Writes
Design system56 colours
review/context/INDEX.mdGLOSSARY.md
Context pack10 filesTagging plan12 tasks
Health report89 findings, all fixable
All pages written as one step. Your edits kept.Undo
Structure first, offlineRoutes, links, tokens and tags come straight from the code. No network needed.
Your AI names, never inventsWith a connector on, your CLI names journeys. It cannot add a route that does not exist.
Safe to run twiceKeep my edits is on by default. A second run changes nothing.
Bring your own AI
Your subscription. Your machine.
Your subscription. Your machine.
Nothing proxied.
CRABZLAB writes a precise brief and hands it to the coding agent you already use. The whole loop runs on your computer.
Your machine
CRABZLAB servers not in the loop
1CRABZLAB writes the brief
# Review feedback 2026-09-17 14:02Context pack: read review/context/INDEX.md first## პროდუქტი (/product/3880)### Pin 1 · /product/3880 · ProductScreen.pricechain: ProductScreen > titleBlock > price358x29 at (16, 605)comment: Price should sit next to thetitle on wide phones.
2Your agent runs it
CClaude Codeready
claude -p "…" --output-format stream-jsonXCodex CLIconnected
codex exec "…"GGemini CLInot checked
gemini -p "…"OOpenCodenot checked
opencode run "…"reading review/context/INDEX.md
found ProductScreen.price
editing app/src/app/product/[id].tsx
marked item done
3Your repo changes
Mapp/src/app/product/[id].tsx:342
Mreview/feedback/STATUS.jsondone
Re-captured/product/3880390 and 430pin 1 · Done
The CLI you already pay forClaude Code, Codex, Gemini or OpenCode, signed in as you. No keys pasted into CRABZLAB.
A role for each agentPick who iterates, who makes images and who researches names and personas.
Your MCP servers tooAdd any server your agents use. Claude Code gets it through
--mcp-config.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. CRABZLAB 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 | CRABZLAB |
|---|---|---|---|---|
| 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.
CRABZLAB 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. CRABZLAB 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 CRABZLAB cannot run its agent inside someone else's site.
Does it replace Figma?
Not for drawing from scratch, yet. Today CRABZLAB 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 CRABZLAB 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.
Why the name CRABZLAB?
Short for Crazy Business Laboratory. We are a small crew that builds and runs its own products and grinds on them until they work. CRABZLAB 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.