一张截图=一个网站：我用Readdy.ai完美复刻博客园的神操作

2024年最野的网页开发方式：截图→上传→生成代码。我用GoFullPage截了博客园全站，扔给AI，然后...发生了魔法。

事情是这样开始的

之前刷V2EX，看到这个帖子说13radar.com (美股投资大师跟踪的网站，还行，大家可以看看效果) 是用Readdy.ai做的。作为一个喜欢研究新工具的人，我收藏了起来。今天有空想起注册了账号。

注册后发现免费250个token到手，还不错

 

我盯着屏幕思考：怎么玩出花来？

突然，一个想法闪过——如果我直接截图博客园，让AI照着做呢？

于是就有了接下来这个可能会改变你对"网页开发"认知的故事。

神级操作：截图即原型

第一步：创建项目

首先创建了一个纯html的项目

 

第二步：GoFullPage完整截图

打开博客园，Chrome插件GoFullPage一键截图。这个插件的妙处在于能截取整个页面，不只是可见部分。一会后，一张帅气的完整博客园首页图片到手。

第三步：史上最短Prompt

 

第四步：见证奇迹

25个token后，Readdy.ai吐出了一个完整的网页。我点击预览——

妈呀，这还原度，还真不错！

 

第五步：生成新闻列表页面

测到Bug了，系统输出的确认提示词出现一堆html代码，无法生成页面。

 

重试了2次仍然失败，更换提示词后正常了，效果如下：

 

第六步：生成博客详情页面

仍然是截图+提示词 

 

优点

1，还原度不错，带交互功能。

2，可以点击链接生成下一个页面，即使不给提示词也可以生成，这样页面的整体样式保持的比较好。

缺点

1，出现了多次确认的AI提示词出现一堆html代码，无法正常生成页面。

2，oken消耗不透明，失败了也扣token

3，免费版不能下载代码

 

总得来说还是不错的，只是费用感觉贵了一些，每个月15-25美金。欢迎大家评论拍砖。