Design Mode
Design directly in the browser. Your agent writes the code.
Start new thread
Sandeep Baskaran

Design Mode - Design directly in the browser. Your agent writes the code.

by•
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.

Add a comment

Replies

Best
Sandeep Baskaran
Maker
📌
Hey Product Hunt 👋 I'm Sandeep — solo maker of Design Mode. It's a Chrome extension that turns any live website into a design surface. You edit layout, type, colour, spacing, structure visually on the page — then ship the changes to Claude Code, Cursor, or any AI coding agent as a real code diff over MCP. No mock files, no copy-paste, no "imagine if the button were 8 pixels taller." I built it because the loop I kept hitting as a designer-developer was: design in Figma → describe the change → paste into the agent → realise it doesn't fit the real DOM → repeat. Design Mode makes the running app the design tool, and MCP lets the agent see your edits directly. Free, open-source, MIT. The whole monorepo — extension, MCP servers, website — is on GitHub. Three MCP connection modes (Local / Cloud / Self-hosted) so you can pick what matches your setup. Honest feedback welcome — bugs, missing features, things that should work differently. I'll be here. — https://github.com/SandeepBaskar...