DOMideas
Overview
1. The Problem
The traditional design-to-development feedback loop is broken. Designers review UIs in browsers, take screenshots, annotate them in Figma or Slack, and write ambiguous text descriptions like "make it bigger" or "more spacing." Developers must then interpret these vague instructions and implement changes, often requiring multiple rounds of revision. This creates a time-consuming back-and-forth where visual intent gets lost in translation, and non-technical stakeholders struggle to give precise, actionable feedback.
2. The Solution
DOMideas is a self-contained, framework-agnostic visual editing layer that allows designers and stakeholders to make UI changes directly in the browser. Users activate Designer Mode via keyboard shortcut or URL parameter, click on elements, adjust styles visually (colors, spacing, typography), and export an AI-optimized diff containing precise CSS changes, component context, and governance classifications. This structured markdown output is pasted directly into AI coding agents like Claude Code, which interpret and apply the changes to source code automatically.
3. Innovation and Features
4. Libraries and Frameworks
Design Process Summary
The design process began with identifying the core pain point in designer-developer collaboration: the loss of fidelity between visual feedback and code implementation. We mapped the existing workflow (screenshot → annotation → interpretation → implementation → review) and designed a streamlined alternative that eliminates the "interpretation" step entirely. The architecture was deliberately framework-agnostic, using a DOM overlay approach that works on any live running application without modifying source code. Component detection leverages React Fiber internals and Vue instance properties to extract component names and file paths, enabling governance classification. The diff format was iteratively refined through testing with Claude Code to ensure AI agents could reliably parse and implement changes. The SaaS layer was added to empower designers with self-service configuration, removing the need for developer involvement in feature toggles and session setup.