Developerz.ai Designer
Design in the live page. Ship the real code.
Chrome extension. Open any page — your prod app or localhost — open a side-panel chat, and tell an agent what to change. It mutates the live DOM/CSS instantly so you see it. When you like it, click Ship and the agent hands the change off over MCP to a dev-agent backend (developerz.ai) that makes the real code change and opens a PR.
Not a page builder. Not a Figma clone. It edits your codebase, and the only durable output is a reviewable PR.
The loop
You ─chat─► Agent ─DOM tools─► live page (ephemeral)
│ │ iterate, see it instantly
│ "Ship" ▼
└─► changeset (selectors, styles, screenshots, intent)
│ MCP
▼
developerz.ai ─► real code edit ─► PR ─► CI
Why
- Design tools produce mockups, not code — someone re-implements them by hand.
- DevTools edits the live page, but the edits vanish on reload and never reach the repo.
- Coding agents write from text prompts, blind to what the page actually looks like.
The gap: what you see (the rendered page) and what you change (the source) are disconnected. Designer closes it — design on the real page, ship a real PR, one conversation.
How it works
| Step | Where | What happens |
|---|
| Talk | Side-panel chat | "Make the hero full-bleed, CTA orange, tighten the nav." Attach mockups (button, paste or drop) and the agent redesigns the live page towards them. |
| See | Live page | Agent mutates real DOM/CSS. Instant. You react, refine. |
| Accept | Side-panel chat | Each change recorded as a structured changeset entry (edit chips + undo). |
| Ship | MCP handoff | Changeset → dev-agent → finds source → edits code → PR. |
| Verify | PR / CI | Real change, tested, reviewable. You merge. |
- Live edits are ephemeral. Mutations never persist to the site. Reload = clean page.
- BYOK. OpenRouter key for the design agent. MCP token for the dev backend. We never resell tokens.
- Human in the loop. "Ship" is a button, not an inference. The agent never auto-merges.
Quickstart
bun run local # install if needed → build → prints the load-unpacked path
Or for a live-reload loop: bun install && bun run dev (WXT dev server, HMR).
bun run local | |
|---|
| (no flags) | chrome, plain build → build/chrome-mv3 |
--firefox | firefox MV2 → build/firefox-mv2 — experimental: the toolbar button toggles the sidebar, but every chrome.debugger-backed tool (screenshots, device emulation, responsive scan, visual inspect) is unavailable there, and the build has no real-Firefox test coverage |
--check | run the gate (lint + typecheck + unit + integration) first |
--zip | also produce the distributable .zip |
Chrome builds also sign build/designer-<version>-chrome-mv3.crx with keys/designer.pem — generated on the first build and gitignored. Back it up: that key is the extension ID.
Chrome builds also sign build/designer-<version>-chrome-mv3.crx with keys/designer.pem (generated on first build, gitignored — back it up, it defines the extension ID).
- Load unpacked —
chrome://extensions → Developer mode → Load unpacked → build/chrome-mv3.
- Add your OpenRouter key — side panel → settings (BYOK, stored encrypted, used only in the service worker).
- Connect a backend — MCP tab → add
https://mcp.developerz.ai/v1/mcp (developerz.ai). OAuth on first use.
- Open any page, open the side panel, start designing.
Release build (tree-shaken, minified, optimized CSS/JS):
bun run release # build + sign .crx + zip → build/*.zip, build/*.crx
Stack
Docs
| |
|---|
| docs/idea/ | Vision, the design→ship loop, principles, surfaces |
| docs/architecture/ | Components, MV3 worlds, agent loop, handoff, security, ADRs |
| Privacy policy | Data handling: BYOK inference, ephemeral edits, changeset-only durable output |
Status
Spec + scaffold phase. v0: live-edit + chat, no handoff. v1: full MCP handoff to developerz.ai.
