把 claude.ai 搬进本地 IDE：解构 baoyu-design 的 Artifact 离线引擎与 Agent 协同总线
自 Anthropic 推出 Claude Artifacts 以来，以交互式画板、可编辑幻灯片、动态设计系统与数据仪表盘为代表的视觉交付形态，彻底颠覆了以往纯文本与散装代码片段的原型构思方式。然而在长期的工程实战中，这种封闭在 claude.ai 云端 SaaS 容器内的交互机制始终让我感到束手束脚：生成的原型既无法直接读取我本地工程里的真实数据表与组件库，也无法纳入 Git 版本控制；每次想要对画板做微调，只能在网页端来回复制粘贴 Prompt，或者被困在缓慢的云端重新生成等待中。
最近，我深度研读并上手了由 Jim Liu（宝玉）开源的 baoyu-design（GitHub 开源仓库：JimLiu/baoyu-design）。它没有重复造轮子去写一套粗糙的 HTML 模板生成器，而是完成了一项极具巧思的系统级逆向与解耦重构：将 Anthropic 原生 Claude Design 的完整 Artifact 运行时机制与前端可视化编辑器整体剥离并离线化，封装成标准的 Agent Skills 协议。无论是在 Cursor、Claude Code、Codex 还是 DeepSeek Harness 中，本地 Agent 都能直接在工程磁盘上创建符合原生规范的幻灯片、多画板设计画布、设计系统与实时数据看板；配合其自研的零依赖本地 HTTP 伺服总线与双向视觉评论流（Send to agent），我与 Agent 实现了在本地 localhost 画布上的毫秒级双向人机协同。在本文中，我将以第一视角深入剖析 baoyu-design 的底层离线架构、双向同步协议与工程实现细节。