DesignX Editor

An AI-native open-standard editor — like Figma Make, but pure HTML + long-polling.

Inspired by Lavish. Completely free. Supports any machine-readable design system (design.md — find them at getdesign.md).

You now see the design before you develop into code. Do all the designer things — and AI helps you wire it up to your flows and spec.

It's live — try it in your Claude or VS Code in one command:

npx -y @designx-26/editor your-file.html

Free on public npm · No accounts · No cloud · No build setup

Highlights

🎨 Optimise and evolve your frames with prompt presets — inline

Click any frame's title bar. A toolbar appears with ready-to-run agent commands: Generate 3 ideas, Fix accessibility (AA / AAA), Microcopy, Pixel-perfect align, Consistency check, and Information architecture. Each command reads your repo's design-system standards (CLAUDE.md, tokens, brand guidelines) before it runs — no boilerplate prompts needed.

▶️ Interactive prototypes — Autoplay enabled

Toggle Autoplay in the Interactive pane and the prototype clicks itself through the flow like a real user would — pausing on each screen, walking the canonical path. Stop it anytime to take over. Great for stakeholder demos and for catching dead-ends.

🔒 Lock your final screens — AI auto-wires them

Click the tiny lock icon on any frame's title bar to mark it as a canonical screen in your flow. The AI then automatically:

• Rewires inbound and outbound links to the right buttons (forward + back)
• Swaps in same-kind variants (lock a new "Home" screen → the old one unlocks and links migrate)
• Scaffolds supporting screens (modals, confirmations) when the locked one implies them
• Numbers everything hierarchically (1 → 1.1 → 1.2 → 2 → 2.1)

📑 Open and end multiple sessions — like Figma pages

Every session is saved under ~/.dxeditor/state.json. Visit http://127.0.0.1:4487/ to see every session you've ever opened with Open for active sessions and Restart for ended ones — pick up exactly where you left off. End sessions cleanly from the editor's top-bar button or via CLI.

What you can open

Anything the agent gives you as an HTML file. The editor adapts to what's inside.

| You ask the agent for… | What you get to do | |---|---| | A plan — implementation plan, before/after, decision tree | Read it visually, click into any section, leave comments per box, send "change this" back to the agent | | A design — mobile / web / tablet screens | Drag screens around a canvas, wire them into a clickable prototype, lock a screen into the canonical flow | | A comparison — options table, A/B analysis, tradeoffs | Annotate any row/cell, ask for changes | | A report — audit, retro, status dashboard | Review and challenge sections inline | | A diagram — architecture, flow, sequence | Comment on any node | | A code diff / PR review | Annotate any change with evidence | | An input form — triage, choices, ranking | Make selections that get queued back to the agent | | Slides | A deliberate presentation when slides are the right format |

It's all the same workflow: open → review → annotate → send → iterate.

Install

Three install modes — you can mix them. Most people start with #1, add #2 once they want Claude to use it automatically.

Prerequisites — Node.js (one-time, per machine)

Every command on this page uses npx, which ships with Node.js. If npx says "command not found", you don't have Node.js yet. Install it once:

Mac (recommended via Homebrew):

# If you don't have Homebrew yet:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Then install Node:
brew install node

Windows: download the LTS installer from nodejs.org — next, next, finish.

Linux: curl -fsSL https://fnm.vercel.app/install | bash && fnm install --lts

Verify it worked:

node --version    # should print v22.x or newer
npx --version

1 · Use it as an editor

To open an HTML file in DesignX Editor right now — no setup beyond Node.js:

npx -y @designx-26/editor your-file.html

Your browser opens, the editor renders the file, and that's it. npx downloads the package on first run and caches it; subsequent runs are instant.

If you want the dxeditor command available globally (so you can type just dxeditor my-file.html from anywhere, no npx):

npm install -g @designx-26/editor
dxeditor my-file.html

2 · Add it as a Claude Code skill

To let Claude Code open the editor automatically whenever it makes a visual artifact for you (and give you a /dxeditor slash command to open files on demand):

npx -y @designx-26/editor install

This copies a SKILL.md into ~/.claude/skills/dxeditor/ and a slash command into ~/.claude/commands/dxeditor.md. Then restart Claude Code (quit + reopen). After that:

• Claude will use the editor automatically when it builds you a plan, design, diagram, or any HTML artifact — no prompting needed
• You can type /dxeditor path/to/file.html to open any file yourself
• All preset commands (Generate 3 ideas, Fix accessibility, etc.) become available as /ideas, /accessibility, etc. inside any DesignX Editor session

To install for just the current project (not globally), run inside the project root:

npx -y @designx-26/editor install --here

That puts the skill under ./.claude/skills/dxeditor/ instead, scoped to this repo.

3 · Add it as an MCP server (advanced)

If you want Claude to talk to the editor as MCP tool calls instead of CLI invocations, add this to ~/.claude/settings.json:

{
  "mcpServers": {
    "@designx-26/editor": {
      "command": "npx",
      "args": ["-y", "@designx-26/editor", "mcp"]
    }
  }
}

Restart Claude Code. The editor's tools (open, poll, snapshot, end, etc.) now appear as MCP tools.

EPAM corporate-only install (optional)

If your team's policy requires corporate-internal distribution instead of public npm, the same build is mirrored to EPAM GitLab as @epmc-uxd/designx-editor. One-time per-machine ~/.npmrc setup is required — add this (using a GitLab Personal Access Token with read_api scope from https://git.epam.com/-/user_settings/personal_access_tokens):

@epmc-uxd:registry=https://git.epam.com/api/v4/groups/epmc-uxd/-/packages/npm/
//git.epam.com/api/v4/groups/epmc-uxd/-/packages/npm/:_authToken=<YOUR_GITLAB_TOKEN>

After that, swap @designx-26/editor for @epmc-uxd/designx-editor in any command above.

Your first session — what happens

dxeditor my-design.html

Your browser opens to http://127.0.0.1:4487. You'll see:

┌──────────────────────────────────────────────────────────────────┐
│ DesignX Editor    Interactive · Design system · Share · End session│ ← top bar
├──────────────────────┬───────────────────────────────────────────┤
│ Conversation         │ Design                                    │
│                      │                                           │
│  (chat with the      │   ┌──────────┐ ┌──────────┐ ┌─────────┐ │
│   agent shows up     │   │ Frame 1  │ │ Frame 2  │ │ Frame 3 │ │
│   here)              │   │          │ │          │ │         │ │
│                      │   └──────────┘ └──────────┘ └─────────┘ │
│  [Type message…]  ▶  │                                           │
└──────────────────────┴───────────────────────────────────────────┘

What to do in there

Annotate any element. Hover anything — you see a pink outline. Click — a comment box opens. Type what you want changed, hit Send. The agent gets your comment with a precise pointer to the element.

Talk to the agent in the chat panel. Type a message in the box on the left, hit the paper-plane. Same channel — it just doesn't need an element pointer.

Open the interactive prototype. Click Interactive in the top bar. The stage splits — design on the left, a clickable prototype on the right. Click buttons in the prototype to navigate frame-to-frame.

See the design system memory. Click Design system in the top bar. A pane opens showing every DESIGN*.md / STYLEGUIDE.md near your file. The agent uses this when iterating.

Resize / minimize / maximize panes. Drag the thin handle between any two panes. Click the – icon on a side pane to collapse it to a thin rail on the right; click the □ icon to make it fill the stage. Restore with the same icons.

End your session. Click the red End session button in the top bar (or run dxeditor end my-design.html). The agent gets a clean exit signal.

Resume anything later. Open http://127.0.0.1:4487/ — that's the homepage. Every session you've ever opened is listed. Click Restart on an ended one and it picks up exactly where you left off.

Multi-frame designs — the canvas

Any HTML where elements carry data-vee-frame="<name>" becomes a multi-frame canvas — scaffolded by new-page, written by hand, or generated freely by an agent. The editor injects the canvas runtime at serve time, so you get pan/zoom, the frame toolbar, lock + autowire, and the interactive prototype on every file with frame markers. Files without those markers render untouched.

Frames laid out with plain CSS (flex, grid) keep their natural positions on the canvas — you don't need to set data-x / data-y unless you want to override the layout.

DesignX Editor renders them as a pannable, zoomable board.

        ┌───────────────┐  ┌───────────────┐  ┌───────────────┐
        │  Home         │  │  Add Reminder │  │  Detail       │
        │               │  │               │  │               │
        │   (screen)    │  │   (screen)    │  │   (screen)    │
        │               │  │               │  │               │
        └───────────────┘  └───────────────┘  └───────────────┘

        ┌─ sticky note ─┐
        │ "decide later"│
        └───────────────┘

• Drag a frame by its black title bar to reposition.
• Pan the canvas by dragging the empty background (or two-finger trackpad scroll).
• Zoom with ⌘/Ctrl + scroll wheel, or use the +/− buttons in the bottom-right.
• Click a frame's title bar to open the frame toolbar — Delete, Generate 3 ideas, A11y AA/AAA.
• Sticky notes — agent can drop notes on the canvas. Drag, edit, delete.

Scaffolding a new multi-frame page (optional)

If you want a starter file with the frames pre-positioned at standard device sizes, use new-page. You don't need this for hand-authored or AI-generated HTML — those work as-is.

dxeditor new-page screens.html --frames "Home,Add Reminder,Detail" --platform web

| Platform | Frame size | |---|---| | --platform web (default) | 1440 × 900 | | --platform tablet | 820 × 1180 | | --platform mobile | 390 × 844 |

Locking screens into the flow

Each frame title bar shows a tiny lock icon and a hierarchical number (1, 1.1, 1.1.1, 2…).

| Icon | What it means | |---|---| | 🟢 Green lock | This screen is in your canonical flow and wired up | | 🟡 Amber lock | Locked — agent is wiring it up | | ⚪ Grey open lock | Orphan — not part of the flow yet |

Click a grey lock on a new screen to add it to the flow. The agent then automatically:

• Wires it into the flow (forward + back links on the right buttons)
• If you locked a variant of an existing screen (e.g. "Home — Timeline" when "Home Dashboard" is already locked), it swaps the new one in and unlocks the old one
• Creates any supporting screens the new one needs (modals, confirmations) and wires them too

The entry screen is protected — you can't unlock it unless you've locked a replacement of the same kind. The editor will refuse, with a tooltip explaining why.

The commands you'll actually use

dxeditor my-file.html              # open or resume
dxeditor end my-file.html          # end this session
dxeditor stop                      # stop the background server (auto-stops after 30 min idle)

That's the core. Everything else (poll, snapshot, confirm, promote, review, memory, context) is what the agent runs in the background — you don't need to touch them.

Where your sessions live

Every session is saved as a row in ~/.dxeditor/state.json. You can restart any ended session from the homepage at http://127.0.0.1:4487/ — no need to remember file paths.

To open the homepage anytime:

open http://127.0.0.1:4487/

(The server self-stops after 30 minutes idle. Next time you run dxeditor file.html, it spins back up.)

Under the hood (for developers)

Agent-facing CLI

These commands are what the agent runs in the background. You won't normally type them yourself.

| Command | Purpose | |---|---| | dxeditor poll <file> | Long-poll for queued user prompts | | dxeditor poll <file> --agent-reply "<msg>" | Reply in chat, then continue polling | | dxeditor snapshot <file> | Save the current page as the next immutable version | | dxeditor confirm <file> | Record user approval (gate before promote) | | dxeditor promote <file> | Settle the confirmed page as the spec | | dxeditor review <file> | Run the WCAG 2.1 AA accessibility gate | | dxeditor memory <path> | Distill design memory from artefacts | | dxeditor context <path> | Resolve feature/project context + read CLAUDE.md | | dxeditor playbook <id> | Focused guidance per artifact type | | dxeditor sessions <path> | List sessions for a feature/project | | dxeditor design | Print the recommended Tailwind v4 + DaisyUI v5 CDN snippet | | dxeditor install [--here] [--mcp] | Install skill / slash command / MCP | | dxeditor mcp | Run as an MCP server on stdio | | dxeditor setup hooks | Install agent SessionStart hooks |

Configuration (environment variables)

| Variable | Default | What it does | |---|---|---| | DXEDITOR_PORT | 4487 | Server port | | DXEDITOR_STATE_DIR | ~/.dxeditor | Where sessions are saved | | DXEDITOR_IDLE_TIMEOUT_MS | 1800000 (30 min) | Auto-shutdown after this much idle time. Use 0 / off to disable | | DXEDITOR_DEBUG | 0 | Set to 1 to log session/watcher events | | DXEDITOR_TELEMETRY | 1 | Set to 0 / false / off to opt out of anonymous pageviews |

Legacy VEE_* env vars (VEE_PORT, VEE_STATE_DIR, etc.) are still honored as silent fallbacks.

Authoring contract (for files the agent writes)

<div data-vee-frame="Login"
     data-vee-entry
     data-vee-kind="auth"
     data-vee-purpose="composer"
     data-vee-meta="Email + password login screen"
     data-vee-locked
     data-x="0" data-y="0" data-w="390">
  <!-- screen markup -->
</div>

<button data-vee-link="Signup">Create account</button>    <!-- wires the prototype -->
<a href="#Login">Back</a>                                  <!-- anchors work too -->

<div data-vee-note data-x="440" data-y="40">a sticky note</div>
<div data-vee-chart='{"type":"bar","data":[3,7,5]}' data-x="440" data-y="200"></div>

The canvas runtime is inlined into every scaffolded page, so the file renders identically when opened directly in a browser — no editor server required.

Develop on this repo

git clone [email protected]:epmc-uxd/designx-editor.git
cd designx-editor
pnpm install                     # or npm install
node scripts/build.js            # bundles dist/cli.mjs + dist/mcp-server.js
node dist/cli.mjs file.html      # smoke test

Node ≥ 22 required.

Repo layout

| Folder / file | Role | |---|---| | src/server.js | The loopback Express server, SSE chrome + agent long-poll, idle self-shutdown | | src/cli.js | The dxeditor CLI surface | | src/canvas-runtime.js | Self-contained, dependency-free runtime inlined into every multi-frame page (frames, notes, charts, pan/zoom, interactive prototype, lock-flow wiring, status icons, numbering) | | src/chrome-client.js, src/chrome.css | Browser-side editor chrome (top bar, panes, chat, modals, ended overlay) | | src/artifact-sdk.js | In-page annotation SDK injected before </body> | | src/session-store.js | ~/.dxeditor/state.json reader/writer | | src/mcp-server.js | MCP server (stdio) wrapping the CLI | | src/scaffold-page.js | The new-page scaffolder (web / mobile / tablet platforms) | | src/install.js | Skill / slash command / MCP installer | | src/promote.js, src/review.js, src/memory.js | DesignX pipeline integration | | src/playbooks.js | Per-artifact-type focused guidance | | skills/dxeditor/SKILL.md | The Claude Code skill manifest | | commands/dxeditor.md | The /dxeditor slash command | | .mcp.json | MCP server registration snippet | | test/ | Test suite |

License

See LICENSE.