Blog

Notes on designing with agents

Practical workflows for turning visual feedback into shipped code.

Sep 16, 2026

Turn visual edits into precise AI prompts

Make the change on the page. Give your coding agent the values, the context and the boundaries, not another request to make it look better.

Design Mode 2.0.0, now on Firefox, with alignment guides and a calmer color picker

The big one: DIVE now runs on Firefox, from the same single build that already serves Chrome. Plus alignment guides while you drag, and a color picker that stops shouting at you.

Design Mode 1.9.0, design tokens, trigger-first motion, and a dedicated MCP page

A token engine that understands design systems, Motion rebuilt around triggers instead of raw CSS properties, and MCP configuration moved out of Settings into its own page.

Illustrative walkthrough: redesigning a Tailwind landing page with Claude Code

An illustrative workflow for previewing Tailwind page changes, asking Claude Code to map them into source, and reviewing the result. Not a measured case study.

DIVE 1.5.0, changelog deep-dive

Margin/padding overlay bands, a WCAG contrast checker in the colour picker, file-size hints in Media, and the static OG image migration.

Vibe coding: how visual editing fits into the AI-coding-agent workflow

Vibe coding is what happens when you describe a UI change to an AI agent and ship the result. Visual editing is what makes the loop tight.

Why we built an MCP server for design edits

Why a browser visual editor offers both a portable copied prompt and an optional MCP connection to coding clients.