双击就能打开的可交互原型！LobeHub 这个设计 Skill 有点东西

做产品设计的时候，你有没有遇到过这种痛苦——想快速验证一个交互想法，得先搭建项目、写代码、跑起来，折腾半天才能看到效果？等效果出来，灵感早凉了。

最近发现 LobeHub 出了一个叫 design-prototype 的 Skill，体验完全反过来了——直接生成一个双击就能打开的 HTML 文件，里面是完整的、真实设计系统的可交互原型。

它是怎么做到的？

这个 Skill 用的是 LobeHub 自己的生产级设计系统：@lobehub/ui + antd 6 + antd-style tokens，完全不是你随便找个 CDN 凑合的假组件——是真的跟 LobeHub 产品里一模一样的组件库。

整个过程不需要构建步骤。Agent 帮你生成一个 HTML 文件，你双击打开，就直接是一个完整可交互的原型。暗色模式跟随系统，组件状态齐全，动效也在——它不是”截图级”原型，是真的可以点、按、跳转的那种。

工作原理大概是：运行时脚本（lobe-prototype-runtime.js）把设计系统的所有依赖打包进原型文件，配合 babel 让原型文件里可以写 ES Module 风格的 import，直接用生产级 React 写法。

适合什么场景？

• 产品经理想快速验证页面流程，不用找前端
• 设计师想做出可交互的设计稿，给开发看完整状态
• 独立开发者想快速原型化一个想法，再决定要不要认真写
• 团队在正式开发前，先用原型做用户测试

怎么用？

最简单的方式是让 Agent 直接帮你生成。如果你想手动操作：先跑一下 build-runtime.sh 脚本，然后把模板 HTML 复制过来，替换里面的 App 内容就行。

生成完记得用 Playwright 做一下无头检查，确认没有任何控制台报错——毕竟原型是要拿来展示的，控制台一片红可不行。

我的感受

这个 Skill 真正有价值的地方在于：它把”有完整交互的设计原型”这件事的门槛，直接降到了零。不需要任何构建工具，不需要 Node 环境，不需要配置，双击打开就是。这是一个真正在创意阶段能跟上你思维速度的工具。

如果你经常做产品原型，或者身边有经常需要快速验证交互想法的团队成员，这个 Skill 值得一试。

GitHub：https://github.com/lobehub/lobehub

GitHub: https://github.com/lobehub/lobehub/tree/main/.agents/skills/design-prototype