Design Mode
Design directly in the browser. Your agent writes the code.
Design Mode launched on May 20, 2026 with 10 votes, #1,220 of 20,538 launches that month and more than 90% of that year's launches.
What it does
Edit any live website — localhost, staging, or production — and ship the changes to Claude Code, Cursor, or any AI agent as a real diff via MCP. Open-source, MIT. The vibe-coding loop, minus the back-and-forth.
Free, open-source browser extension (Chrome + Firefox) that turns any live website into a visual design surface. Edit layout, typography, colour, spacing, copy, and DOM structure, then ship the diff to Claude Code, Cursor, Claude Desktop, Windsurf, Cline, or any MCP-compatible AI coding agent. One design tool for designers, developers, QA testers, PMs, indie hackers, and vibe coders.
Design Mode is a free, open-source browser extension that turns any live website into a visual design surface — one design tool for every maker, from designers and developers to QA testers, PMs, indie hackers, and vibe coders. Edit layout, typography, colour, spacing, copy and DOM with real controls, then ship the diff to Claude Code , Cursor , Claude Desktop , Windsurf , Cline , or any MCP-compatible AI coding agent. Click any element on any live site and edit its CSS visually. A full design surface in the side panel — not a devtools fork. Drag 8 handles to resize, and see pixel spacing between elements live. Send the diff to Claude Code, Cursor, or any MCP-aware tool. Open source under…from designmode.app
Does a similar job
all alternatives →
Design In The BrowserFeb 2026 · dosmos.app · ▲180Point and click any element in your browser, then let Claude, Cursor, Antigravity, or Qwen write the code. Dosmos bridges visual design and AI-powered frontend development.
CSS Studio. Design by hand, code by agentApr 2026 · cssstudio.ai · ▲175Hi HN! I've just released CSS Studio, a design tool that lives on your site, runs on your browser, sends updates to your existing AI agent, which edits any codebase. You can actually play around with the latest version directly on the site. Technically, the way this works is you view your site in dev mode and start editing it. In your agent, you can run /studio which then polls (or uses Claude Channels) an MCP server. Changes are streamed as JSON via the MCP, along with some viewport and URL information, and the skill has some instructions on how best to implement them. It contains a…
AI Designer MCPApr 2026 · aidesigner.ai · ▲89Give your agent tools to create beautiful, codebase-aware UI
Vibe Annotations2025 · vibe-annotations.com · ▲11810x your vibe-coding workflow writing visual annotations
More ai this month
the category →
Paintings by AI models: programs run through a simulation of oil paint.
AI · 20d ago · stillwet.art
PixVerse R2▲381A real-time world model you can explore and change
AI · 28d ago · world.pixverse.video
Source: Product Hunt launch ↗
Launched alongside, May 2026
the whole month →
Parallel agents, diff reviewer, and multi-model comparisons
Dev tools · May 2026 · kilo.ai
Hey HN, Henry here from Cactus. We open-sourced Needle, a 26M parameter function-calling (tool use) model. It runs at 6000 tok/s prefill and 1200 tok/s decode on consumer devices. We were always frustrated by the little effort made towards building agentic models that run on budget phones, so we conducted investigations that led to an observation: agentic experiences are built upon tool calling, and massive models are overkill for it. Tool calling is fundamentally retrieval-and-assembly (match query to tool name, extract argument values, emit JSON), not reasoning. Cross-attention…
Life & fun · May 2026 · github.com
🌱 Private, quiet space for thinking. Simple app for .md files. - zakirullin/files.md
Dev tools · May 2026 · github.com