Design Mode
Design Mode is a free, open-source Chrome extension that transforms any live website into a visual design tool. Users can inspect elements, edit layout, typography, colors, spacing, copy, and DOM structure directly in the browser using real controls. Changes can be sent as a diff to Claude Code, Cursor, or any MCP-compatible AI coding agent. It is designed for designers, developers, QA testers, PMs, and indie hackers working in the AI-assisted coding workflow.
FreeMITWebEmbeddableSelf-hosted
5stars
6features
2026since
Overview
6 featuresIn the Design & Creative space, Design Mode takes a focused approach. Visually designing and iterating on live websites without manually writing or describing CSS changes to AI coding agents. Design Mode is a consumer product aimed at designers and developers. It is available for free. Design Mode is available on the web and embeddable surfaces, and it can be self-hosted.
Behind Design Mode is Design Mode, and it first shipped in 2026. Development happens publicly on GitHub with 188 commits in the last 90 days. Among its 6 catalogued features are Visual CSS editing, live website inspection, and drag to resize. It exposes integrations via an MCP server and a public API.
- Visual CSS editing
- Live website inspection
- Drag to resize
- Pixel measurement
- Ship diff to AI
- DOM structure editing
Tags
visual-editorlive-website-editingai-agent-integrationchrome-extensiondesign-to-code
Built with & integrations
Framework
Next.js
Hosting
Vercel
AI providers
anthropic
Connectors
MCPAPI
Runs on
BrowserEmbeddableSelf-hosted
Detected from
- Next.js
- x-nextjs-prerender header · /_next/static/ in the HTML · __next_f in the HTML
- Vercel
- x-vercel-id header · x-vercel-cache header
Trust & compliance
License
MIT
Verified signals
Legal
Indexing history
1What PulseGate has recorded for this listing
Frequently asked questions about Design Mode
- What is Design Mode?
- Visually designing and iterating on live websites without manually writing or describing CSS changes to AI coding agents. It is catalogued under Design & Creative on PulseGate.
- Who is Design Mode for?
- Design Mode is a consumer product built for designers and developers.
- Is Design Mode free?
- Yes — Design Mode is free to use.
- What platforms does Design Mode run on?
- Design Mode runs on the web and embeddable surfaces. It can also be self-hosted.
- Is Design Mode still active?
- The GitHub repository shows 188 commits in the last 90 days.
- Who makes Design Mode?
- Design Mode is developed by Design Mode.
- When did Design Mode launch?
- Design Mode first shipped in 2026.
- Is Design Mode open source?
- Design Mode has a public GitHub repository.
Similar apps
Closest matches by what these projects do