丙酮
具有浏览器覆盖层和MCP接口的本地开发服务器，用于与AI代理一起构建HTML模型。
不是绘图工具，也不是可视化编辑器。 相反，您和代理之间的反馈循环：
- 告诉代理人你想要什么
- 代理生成/修改真实的HTML+顺风
- 在浏览器中实时查看结果
- 指向某个元素 并说“改变这个”
- 代理理解您所指的元素并对其进行修改
为什么选择Aceto
- 令牌效率： 代理不需要读取和解析完整的HTML来理解你的意思。你指向浏览器中的一个元素，代理就会得到一个精确的选择器。默认情况下，写入工具使用当前选择——一次工具调用，没有往返。
- 真实HTML： 没有抽象层，没有组件模型。输出是一个可以阅读的纯HTML文件
cat并通过电子邮件发送。 - 实时反馈循环： DOM变形保持滚动位置和选择状态。您可以立即看到更改，而不会出现页面重新加载闪烁。
特性
悬停突出显示
用户 将鼠标移动到任何元素上——将出现一个蓝色轮廓，其中包含元素的标签和类。
元素选择
用户 单击元素以选择它（粉红色轮廓）。底部的面包屑栏显示了完整的DOM路径。滚轮在树（父/子）上向上/向下导航。
代理商亮点
这 代理 突出显示青色元素以进行视觉交流，例如问“你是说这个吗？”：
highlight_element("section#pricing > div:nth-of-type(2)", {
label: "Make this card wider?",
style: "pulse"
})两个选项（粉红色=用户，青色=代理）可以同时显示。
行内编辑
用户 双击任何可编辑元素，直接在浏览器中对其进行修改：
- 文本元素 （标题、段落、链接等）——编辑文本内容。输入保存，退出取消。
- 输入 --编辑值属性。输入保存，退出取消。
- 文本区域 --编辑该值。Ctrl+Enter保存，Escape取消，Enter添加换行符。
- 复选框/单选按钮 --双击进入编辑模式，空格切换，enter保存，Escape取消。
CSS类编辑器
用户 按压 c 在选定元素上内联编辑其Tailwind类。输入以应用，退出以取消。
表控件
用户 选择一个表格单元格——将出现一个浮动工具栏，其中包含+Row、−Row、+Col、−Col控件。
DaisyUI支持
通过CLI添加组件库——DaisyUI组件在Tailwind v4中开箱即用：
aceto add daisyui更多功能
- 内容快捷方式 --类型
[]或[x]在单元格中插入复选框 - Slash命令 --类型
/list在空元素中打开用于创建的模态 `
/ ` 列表。编辑徽章显示在现有列表中，可通过双击快速重新编辑。
- 元素默认值 --通过以下方式为生成的元素定义默认类
aceto.defaults.json - 粘贴图像 --Ctrl+V可立即插入选择；在没有选择的情况下，将图像分阶段进行代理驱动的放置
- 资产选择器 --报刊
a浏览和重用以前从资源文件夹粘贴的图像 - Yank/Paste --报刊
y为了复制所选元素，p在另一个选择后粘贴它 - 截图 --代理通过以下方式捕获整页或元素级屏幕截图
get_screenshot() - 实时重新加载 --DOM变形保持滚动位置和选择状态，无闪烁
Aceto不能做什么
- 没有编辑——你自己不编辑任何东西，你指导代理人
- 没有构建系统——一个可以阅读的HTML文件
cat - 无框架——Tailwind v4通过CDN，可选DaisyUI/Flowbite
键盘快捷键（选择模式）
| 关键 | 行动 |
|---|---|
| 单击 | 选择元素 |
| 双击 | 内联编辑（文本、输入值、复选框切换） |
| 滚轮 | 导航深度（父/子） |
| Tab/Shift+Tab | 下一个/上一个单元格（在表格编辑期间） |
c | 编辑所选元素的CSS类 |
y | Yank（复制）所选元素 |
p | 选择后粘贴拖动的元素 |
u | 撤消 |
r | 重做 |
d | 选择后插入空div |
a | 打开资产选择器 |
| Del | 删除所选元素 |
| 空格 | 切换复选框/单选（在编辑模式期间） |
| Esc | 关闭模式/取消选择/取消编辑 |
e /Alt | 切换选择/预览模式（清除选择） |
| Ctrl+V | 粘贴图像 |
安装
bun install -g github:alexzeitler/aceto需要 包子 运行时。
MCP设置
曾经 aceto dev 正在运行，将其作为MCP服务器添加到Claude Code中：
claude mcp add aceto -s user --transport http http://localhost:3000/mcp入门指南
# Create a new project
mkdir my-mockup && cd my-mockup
aceto init
# Start the dev server
aceto dev
# Export for production
aceto export --production命令行界面
aceto init # Create index.html + CLAUDE.md + aceto.md
aceto init --eject # Write default instructions into aceto.md
aceto init --preset daisyui # Create project with DaisyUI v5 pre-installed
aceto dev # Start dev server + MCP server
aceto dev about.html # Start with a specific page
aceto dev --port 3001 # Custom port
aceto new about # Create a new HTML page
aceto new dashboard/settings -l daisyui # New page with DaisyUI
aceto add daisyui # Add DaisyUI v5 to an existing project
aceto export # Export HTML with cleanup to dist/
aceto export --production # Export with Tailwind CSS build代理说明
开 aceto init，最小 CLAUDE.md 被创建为告诉代理调用 get_instructions() 通过MCP。此工具返回项目的 aceto.md 如果它有内容，或者内置的默认指令。
要自定义说明，请运行 aceto init --eject 将默认值写入 aceto.md，然后根据您的需要进行编辑。
元素默认值
创建一个 aceto.defaults.json 在项目根目录中为生成的元素定义默认类：
{
"checkbox": "h-4 w-4",
"img": "max-w-full h-auto rounded"
}- 复选框 --应用于通过创建的复选框
[]/[x]捷径 - 图像 --应用于通过粘贴插入的图像（Ctrl+V）
文件是热重新加载的——更改会立即生效，而无需重新启动服务器。
技术栈
Bun运行时，parse5用于HTML解析，css select用于选择器，idiomorph用于DOM变形，MCP SDK用于代理接口。没有Express，没有React，没有构建步骤。