A drop-in visual CSS editor for React that formats in-browser style tweaks into structured instructions for AI coding agents.
Handmade (repo: made-refine) is a browser-based visual CSS editor built for React ≥ 18 apps. Triggered via Cmd + . / Ctrl + ., it opens a floating panel over the running application, supporting real-time visual adjustments to layout, colors, radius, borders, shadows, typography, positioning, and text content.
Key Differentiator: AI Agent-Ready Output#
After editing, clicking Copy generates structured text containing the component name, file path, and precise CSS diff, which can be pasted directly into Cursor or Claude Code for AI agents to automatically apply changes to source code. The editor itself never modifies source files directly, operating in a non-invasive manner scoped to the development environment.
Visual Editing Capabilities#
- Layout: padding, margin, sizing, flex alignment
- Colors: background, text, border, outline colors
- Radius: border-radius (individual/per-side batch)
- Borders: style, width, color (per-side)
- Shadows: multi-layer drop shadows
- Typography: font family, size, weight, spacing, alignment
- Move: drag to reposition elements
- Text: inline text content editing
Framework Adaptation & Initialization#
Initialized via npx made-refine@latest init, it auto-detects Next.js / Remix / Vite frameworks and configures Vite and Babel plugins for zero-config injection. Built on the Tailwind CSS v4 ecosystem, compatible with shadcn/ui and Radix UI.
Architecture Highlights#
Distributed as an npm package with multiple entry modules: main (made-refine), utilities (utils), preload scripts (preload / preload.iife), styles (styles / styles.css), Babel plugin (babel), Vite plugin (vite). Injection uses a dual-channel approach via Vite + Babel plugins, with preload scripts initializing the editor environment before app startup. The UI panel is built on @base-ui/react with lucide-react icons, styled with Tailwind CSS v4 + tailwind-merge + clsx. Library bundling uses tsup (esbuild-based); CLI is implemented with commander + prompts.
AI Agent Workflow Integration#
The repository embeds AI agent context files (.claude/docs, CLAUDE.md, AGENTS.md, .codex/environments), deeply integrating with Claude Code, OpenAI Codex, and Cursor. The official website also describes a Git-Native extension capability that converts visual edits directly into Pull Requests.
Unconfirmed Items#
- npm package publish status not directly verified (repo Releases shows "No releases published")
- Official website mentions "Download for Mac" desktop client, but no corresponding build artifacts found in the repo
- Git-Native PR feature availability in current version (0.2.20) is unclear
- Support for pure CSS / CSS Modules / CSS-in-JS projects is unspecified