DesignJS: AI-Powered HTML/CSS Design Canvas

DesignJS gives AI coding agents eyes. A local-first MCP canvas where agents and humans co-design in real HTML/CSS — no translation gap.

DesignJS is an open-source, local-first visual design canvas that AI coding agents can see and edit through the Model Context Protocol. Instead of generating UI blind from text prompts, your agent reads the canvas, inserts components, updates styles, and captures screenshots — all in real HTML and CSS that ships directly to production.

Quick Start

Install DesignJS and open your first canvas in under five minutes.

Connect an Agent

Wire Claude Code, Cursor, or VS Code to your canvas over MCP.

MCP Tools Reference

Explore all 20+ tools agents use to read and write the canvas.

Editor Guide

Learn the three-pane editor, block palette, layers tree, and style manager.

How it works

DesignJS connects your AI agent to a live HTML/CSS canvas through a WebSocket bridge. Every agent edit and every human edit converge on the same component model — one source of truth, saved to a git-diffable .designjs.json file.

1. Start the canvas

   Run pnpm dev to open the canvas at http://localhost:3000. The MCP WebSocket bridge starts automatically on port 29170.

2. Register the MCP server

   Run designjs init in your project directory. It detects your IDE and writes the correct MCP config file automatically.

3. Open your agent

   Start a new Claude Code, Cursor, or VS Code Copilot session. The agent connects to the canvas and can immediately call tools like get_screenshot, add_components, and update_styles.

4. Design together

   Ask your agent to build UI. It sees the canvas, inserts HTML with Tailwind classes, refines styles, and sends screenshots back — all without leaving your editor.

Claude Code

Auto-configure for Claude Code

Cursor

Set up the Cursor MCP integration

VS Code

Configure VS Code Copilot