照设计稿做界面
给它看设计稿，看页面一步步追上来。
把截图或设计稿放到参考卡片上，画一条箭头。智能体读取图片、修改组件，每次改动后都在浏览器卡片里查看结果：热更新后的页面、Vite 的错误浮层，以及和设计稿并排的最终截图。
四次修改，从设计稿到一致的页面。批准它想新建的那一个文件。
智能体从参考卡片读取设计稿，重做页面，并在运行中的开发服务器上用浏览器卡片检查每一次修改。
它看得见设计稿
参考卡片上的图片、PDF、文本文件和链接，通过 reference_list 和 reference_get 送到智能体手里——图片也一样。
它看得见页面
browser_screenshot 返回浏览器卡片上的画面；browser_snapshot 以文本返回，连错误浮层也包括在内。
实时热更新
开发服务器一直在终端卡片里运行，每次保存都会在一秒内出现在浏览器卡片里。
新文件由你批准
Claude Code 在创建文件前会先询问——这个问题以“需要你确认”的形式送达。
照设计稿做界面
从设计稿到页面
三张卡片，一个闭环。
01
参考
设计稿和说明放在同一张卡片上。
02
修改
组件在你的仓库里改动。
03
查看
截取运行中页面的截图。
04
对比
直到和设计稿一致。
开发
更多开发场景
每个场景都由你已经见过的卡片组成——挑下一个看看。
把下一份设计稿交给智能体
它在真实浏览器里检查自己的工作。
下载 Windows 版Windows 10 / 11 · 64 位
macOS 和 Linux 版本即将推出。
首次运行向导会帮你安装智能体命令行工具、Git 和听写模型——每一步都可以跳过。