面向 React 的可视化 CSS 编辑器，将浏览器内样式微调转化为 AI 编码代理可直接使用的结构化指令。
Handmade（仓库名 made-refine）是一个运行在浏览器中的可视化 CSS 编辑器，专为 React ≥ 18 应用设计。通过 Cmd + . / Ctrl + . 快捷键即可在运行中的应用上方唤起浮动编辑面板，支持对布局、颜色、圆角、边框、阴影、字体、位移、文本内容等进行实时可视化调整。
核心差异：AI Agent-Ready 输出#
编辑完成后点击 Copy，工具会生成包含组件名称、文件路径和精确 CSS 差异的结构化文本，可直接粘贴到 Cursor 或 Claude Code 中，由 AI 代理自动将样式变更写回源码。编辑器本身不直接修改源码，属于非侵入式工具，仅作用于开发环境。
可视化编辑能力#
- Layout：padding、margin、sizing、flex 对齐
- Colors：背景、文字、边框、outline 颜色
- Radius：圆角（支持单独/批量设置）
- Borders：样式、宽度、颜色（可按边设置）
- Shadows：多层 drop shadow
- Typography：字体、字号、字重、间距、对齐
- Move：拖拽重新定位元素
- Text：直接在编辑器内编辑文本内容
框架适配与初始化#
通过 npx made-refine@latest init 一键初始化，自动检测 Next.js / Remix / Vite 等框架并配置 Vite 插件和 Babel 插件实现零配置注入。依赖 Tailwind CSS v4 生态，兼容 shadcn/ui 和 Radix UI。
架构要点#
编辑器以 npm 包形式分发，导出多个入口模块：主入口（made-refine）、工具函数（utils）、预加载脚本（preload / preload.iife）、样式（styles / styles.css）、Babel 插件（babel）、Vite 插件（vite）。注入方式为 Vite 插件 + Babel 插件双通道，preload 脚本在应用启动前完成编辑器环境初始化。UI 面板基于 @base-ui/react 构建，图标使用 lucide-react，样式方案为 Tailwind CSS v4 + tailwind-merge + clsx。构建打包使用 tsup（基于 esbuild），CLI 使用 commander + prompts 实现交互式命令。
AI 代理工作流集成#
仓库内嵌 .claude/docs、CLAUDE.md、AGENTS.md、.codex/environments 等 AI 代理上下文文件，深度适配 Claude Code、OpenAI Codex、Cursor 等工具。官网还描述了将视觉编辑直接转化为 Pull Request 的 Git-Native 扩展能力。
待确认事项#
- npm 包发布状态未直接验证（仓库 Releases 显示 "No releases published"）
- 官网提及 "Download for Mac" 桌面客户端，但仓库中未见对应构建产物
- Git-Native PR 功能是否已在当前版本（0.2.20）实现尚不明确
- 对纯 CSS / CSS Modules / CSS-in-JS 项目的支持程度未明确