Media
1 item
Description
Visual design editor for modifying UI properties with Claude Code integration Dev Canvas Studio is a visual UI inspection and styling workspace built into Chrome's side panel. Select an element on the current page, explore its styles, preview changes instantly, and keep precise diffs ready for your development workflow. When you are working on a local project, Dev Canvas Studio can also send those diffs to a user-controlled localhost bridge so Claude Code can update source files. Key Features Visual inspector for the current page Live CSS preview before you commit a change Side-panel controls for layout, spacing, typography, backgrounds, borders, shadows, and more Advanced tools for gradients, transforms, responsive preview, accessibility checks, CSS variables, and style presets History and prompt generation for queued visual changes Framework-aware inspection for modern frontend stacks Localhost Apply Workflow Dev Canvas Studio supports visual inspection on web pages in Chrome, but source-code application is intentionally local-first. Inspect and experiment on the current page in the browser Queue style changes in the side panel Optionally send those diffs only to a localhost bridge that you control Keep bridge-based code application separate from remote websites Designed To Fail Safely The extension is built to handle unexpected states without taking down the whole UI. Bridge disconnects are surfaced clearly in the interface Invalid or missing page state falls back to contained error views instead of crashing the panel Prompt generation and local history remain available when the bridge is offline Startup and runtime errors are caught and reported through visible fallback states Privacy-Focused By Default No accounts No analytics or advertising SDKs Settings, presets, and queued changes are stored locally in Chrome storage Page data is not sent to a remote public service as part of the extension itself Any transfer of style diffs is limited to a localhost bridge that the user explicitly configures and triggers Who It Is For Frontend engineers Design engineers UI-focused QA workflows Teams iterating on local product interfaces with Claude Code