MockPilot

Hey Product Hunt 👋

我做 MockPilot 的初衷，是源于我在每个团队里反复看到的一个很具体的痛点：产品经理（或设计师、客户支持负责人、创始人）对一个功能或现有界面的改动有清晰的想法，但就是没有快速展示出来的方法。于是他们写一段文字、截个图再加几个箭头，然后祈祷开发者能按他们理解的意思去实现。结果十有八九对不上。

MockPilot 解决了这个问题。你只要给它一个 URL——你自己的产品、竞品，任何地方都可以——它就会把页面（或某个组件）抓取下来，变成一个完全可编辑的 mockup。抓取的同时，它会把站点的设计系统拆解成一个可复用的素材库：字体、颜色、组件、图标。

然后你只要用自然语言描述你想要什么就行。比如“在这两个定价档位之间加一档”“复用同一个卡片样式”“把这个空白状态换成导入数据的 CTA”“让导航栏固定并加一个搜索框”。AI 会利用它已经提取的素材，保持品牌风格来做修改。不需要 Figma，不需要 CSS，不需要设计背景。

改满意之后，你可以导出一份干净的 HTML、直接部署，或者截图发给开发者。突然间，“这就是我想要的效果”变成了一个真实的产物，而不再是一段文字加一句祈祷。

它是个 Electron 应用，完全本地运行（抓取的数据不会离开你的电脑），开源且免费。macOS 和 Windows 版本都在 GitHub releases 页面上。

有几个点特别希望听听大家的反馈：

1. 产品经理们尤其——你们现在“描述一个 UI 改动”的工作流是什么样的？MockPilot 在哪些方面还不足以替代它？
2. 要怎样让交接给开发的过程更顺畅？加注释？加差异对比视图？Figma 导出？
3. 哪些网站抓取时会出现问题？非常欢迎报 bug。

有问必答——感谢大家来体验！🚀

这个不错！我想重点测试的是那些客户端渲染或滚动时懒加载的网站。抓取时会不会等 DOM 稳定下来？会不会抓到只加载了一半的组件？

本地抓取这一点是我最信任的部分。在 PM 到开发的交接过程中，难点通常是让 mockup 贴近现有的设计系统，而不是生成一个漂亮但实现不了的界面。好奇资产复用的严格程度——如果要一个新组件，它会优先从已抓取的 token/组件里组合，还是直接创造新的 CSS？

“一段文字加一句祈祷”精准概括了 PM 到开发交接的痛点——把真实页面变成可编辑的 mockup 是一个很好的解决办法。而且本地优先、开源这点也很赞。恭喜发布！有没有考虑加注释或差异视图来让交接更清晰？

听起来超级有趣，尤其是抓取网站的设计特征、颜色、字体、图标等……这比直接发一个完整的 CSS 文件简单多了。

这个"不需要Figma"的切入点很聪明——设计师反正还是会用，但这让其他人也能用了。对于动画或滚动效果很重的网站，它处理得怎么样？