试了一下AI 编程网站 Readdy，结果惊艳到我了！

网页美观度是现在同类产品最好的，还有针对普通用户在用同类产品的痛点场景优化：

- 将生成的网页快速导出 Figma
- 一键生成网页对应功能和下级页面
- 一键将表单提交按钮同自带数据库链接
- 一键快速绑定自己的顶级域名

👇具体的教学和测试：mp.weixin.qq.com

我们先来点简单的测试，帮我做一个可以播放白噪音的日签网页。

首次生成的网页基本没啥问题，排版也漂亮，背景图片也加上了背景模糊，同时为了让名人名言部分可读性更强，还加上了更大的模糊。
Spotify 的白噪音播放列表也正常嵌入，没有当时测试时候几个顶尖模型的布局问题。
点击刷新按钮也会刷新对应的名人名言，已经非常完整了，甚至放了一个设计感十足的 Logo 在页面顶部。

然后我点击下面分享按钮的时候，发现下方浮现了一个类似图片中的“Continue to Generate”继续生成按钮，然后我就点了一下，结果他居然真的搞了一个分享弹窗给我。
于是我就又点了一下“生成图片”下面的继续生成按钮，尝试让他帮我生成【生成图片】的功能，点击之后居然真的搞定了，直接就会生成现在网页的截图，而且还排除了 Spotify 的播放弹窗，过于智能了只能说是。
这个交互让 AI 生成新页面和新功能的成本变得非常低，想要补全功能只需要点一下，完全不需要选择元素再描述，哪里没有点哪里就行，天才般的设计。

接下来试试藏师傅的一图流宣传图的网页提示词，我这里转换了一下 Anthropic 新的研究文章。

先来看结果，以往这个提示词直接用模型生成都会有些排版上的小问题，Readdy居然一点问题没有。
每个地方的间距和排版都很舒服，这个很难得，基本上你用我这套提示词在 Readdy 生成分享图会比直接用 Claude 或者 Gemini 稳定性和效果强很多。

另外我之前用这个提示词跟大家说有问题或者自己想改可以导入到 Figma 微调，Readdy 直接做了这个功能。
只需要点击下面的 Export 按钮，在弹窗里面选择 Copy File，之后到 Figma 里面找到 Readdy 插件直接粘贴。
你就会发现网页已经直接被转换成设计稿了，而且他的转换质量比 Html To Design 要好非常多。
所有的内容都是自动布局，你改内容不用担心布局会被破坏，这样删减内容或者替换内容就方便多了。

前面看了美观度的例子，我们再来看看他的能力的上限，这里我用他生成一个商品出入库管理系统，展示 Readdy 一些更强大的能力。

它先是生成了一个很漂亮的 B 端 SAAS 系统首页。
之后我就用之前说过的继续“生成按钮”功能让他生成整个系统的其他页面，比如商品管理页面和系统设置页面。

而且我还发现一个诀窍，就是你可以不通过“继续生成”功能生成其他页面。
可以先生成对应的页面之后，在需要跳转过去的页面用“Selected Area”按钮选中你需要跳转的按钮，点击 link 选择跳转后的页面就行，非常方便。

经过非常简单的操作之后我们已经搭建了一个很复杂的 B 端系统页面了，但是这个系统还不能用，因为你不能操作里面的数据。
然后我发现 Readdy 还有一个非常强的能力，他是有内置数据库的，而且数据库的使用被他们优化到了非常简单的地步。
比如我这里有个新增商品页面，如果需要保存信息，点击相关按钮时，程序就会触发创建数据库的提示。
这时候你只需要点击这个按钮，数据库就已经和页面关联，项目发布后用户填写的数据会被保存到数据库里面。

第一次有产品让 Vibe Coding 工具对于普通人来说脱离了玩具范畴，你可以用它创建带有数据交互的产品了！
最后在部署的时候他们还能让你直接绑定自己已有的域名，终于你的项目不再是各种乱码组成的临时域名了。

这产品这么牛，我自然而然去找了一下背后的开发团队。
发现居然是国内的蓝湖，也就是设计工具 MasterGo 的团队，怪不得在设计稿转换和页面美观度上的有这么强的实力。而且他们在产品上线 4 个月的时间就接近500万美元ARR，增长非常迅猛。

确实也只有关注体验和视觉效果的设计工具团队才能做出这种真正面向普通用户的 AI 编程产品。
也只有这样的团队才会通过体验和技术结合迭代出这么多降低复杂度的交互方案。