Readdy：一款颠覆认知的AI编程神器测评与使用教程
大家好，我是歸藏（guizang），今天给大家带来一款新发现的宝藏 AI 编程产品 Readdy 的测评和使用教学。这款产品由国内蓝湖（MasterGo）团队打造，在页面美观度和用户体验上有着极强的优势，短短四个月就实现了接近 500 万美元 ARR 的惊人增长。
Readdy 的特色能力有哪些？
Readdy 是一款 Vibe Coding 工具，它与其他同类产品相比，主要有以下几个显著的优势：
- 网页美观度拉满：生成的网页设计感十足，应该是同类产品中对页面美观度优化最多的。
- 快速导出 Figma：支持将生成的网页快速导出为 Figma 设计稿，完整程度远超 Html To Design。
- 一键生成功能和下级页面：支持一键快速生成网页对应的功能和下级页面，无需繁琐的元素选择和描述。
- 自带数据库：支持一键将表单提交按钮同自带数据库链接，即使是普通人也能轻松制作复杂的增删改查页面。
- 绑定顶级域名：支持一键快速绑定自己的顶级域名，让你的网页拥有专属域名。
如何使用 Readdy 生成一个美观的日签网页？
为了测试 Readdy 的能力，我们首先来做一个简单的日签网页。
提示词：
请帮我创建一个简洁优雅的日签网站，具体要求如下：
视觉设计
– 背景图片：使用优美的风景图片随机获取高质量风景图片作为背景
– 图片处理：添加25% 黑色遮罩，和一点点图片高斯模糊，确保文字清晰可读
– 整体风格：简约现代，风景图作为网页背景增加沉浸感
– 动画框架使用 anime.js （通过CDN引入：JsDelivr jsdelivr.com），使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript，使用专业图标库如Font Awesome或Material Icons（通过CDN引入）
时间显示模块
– 顶部：显示月日格式（如”05月29日”），字体较小，居中
– 次行：显示”星期X · 农历X月初X”格式，字体更小
– 中央：突出显示当天日期数字，超大字体，白色，居中
名言展示模块
– 内容：随机显示中外哲学家、作家的经典名言
– 排版：名言居中显示，字体适中，行间距舒适
– 署名：底部右对齐显示”作家，XXX”或”哲学家，XXX”
– 名言库：包含励志、人生感悟、智慧思考等不同主题的名言
音乐播放功能
– 位置：页面左下角，默认收起
– 内容：嵌入Spotify白噪音播放列表
– 代码：技术实现
– 响应式设计：适配桌面端和移动端
– 字体选择：使用优雅的中文字体，google font 引入
– 颜色方案：主要使用白色文字，确保在各种背景下的可读性
– 加载优化：图片懒加载，提升页面性能
交互功能
– 自动刷新：每日自动更换背景图和名言
– 手动刷新：提供刷新按钮，允许用户手动更换内容
文案风格
– 名言选择：倾向于积极正面、富有哲理的短句
– 语言风格：简洁有力，避免过于冗长
– 主题分类：人生感悟、励志成长、智慧思考、情感表达等
请按照以上要求，生成一个完整的HTML/CSS/JavaScript网站，确保界面美观、功能完善、用户体验良好。
生成结果：
Readdy 生成的网页排版美观，背景图片添加了背景模糊，名人名言部分可读性强，Spotify 白噪音播放列表也正常嵌入。点击刷新按钮可以刷新名人名言，页面顶部还放置了一个设计感十足的 Logo。
继续生成功能：
点击分享按钮后，Readdy 会浮现一个“Continue to Generate”继续生成按钮。点击该按钮，Readdy 居然生成了一个设计感十足的分享弹窗，甚至还脑补了常见的分享场景。再次点击“生成图片”下面的继续生成按钮，Readdy 居然生成了“生成图片”的功能，可以直接生成当前网页的截图，而且还排除了 Spotify 的播放弹窗。
总结：
通过一次提示词和三次点击继续生成按钮，Readdy 就能生成一个功能完善、设计精美的日签网页。这种交互方式大大降低了 AI 生成新页面和新功能的成本，用户无需选择元素再描述，哪里没有点哪里就行。
如何使用 Readdy 生成苹果发布会风格的宣传图？
接下来，我们尝试使用 Readdy 生成一个类似苹果发布会 PPT 的 Bento Grid 风格的宣传图。
提示词：
基于下面产品介绍文章关键信息，帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示，具体要求为：
1. 尽量在一页展示全部信息，背景为#F8F6F5、卡片背景为白色，文字颜色为#010101，高亮按钮和文字背景色为#F69AAC-DF95E3-7DBDE9 的渐变 ，卡片内的布局为主标题简短表述加大图标
3. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
4. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
5. 中英文混用，中文大字体粗体，英文小字作为点缀
6. 简洁的勾线图形化作为数据可视化或者配图元素
7. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
8. 数据可以引用在线的图表组件，样式需要跟主题一致
9. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
10. 避免使用emoji作为主要图标
11. 不要省略内容要点
生成结果：
Readdy 生成的宣传图排版精美，图表背景色使用恰到好处，图表本身也选的很合适，设计一致性也很强。每个地方的间距和排版都很舒服。
导出 Figma：
Readdy 支持将生成的网页直接导出为 Figma 设计稿。只需要点击下面的 Export 按钮，在弹窗里面选择 Copy File，之后到 Figma 里面找到 Readdy 插件直接粘贴。网页就会直接被转换成设计稿，而且转换质量比 Html To Design 要好非常多。所有的内容都是自动布局，用户可以方便地删减或替换内容。
如何使用 Readdy 生成商品出入库管理系统？
为了展示 Readdy 更强大的能力，我们尝试使用它生成一个商品出入库管理系统。
提示词：
请帮我创建一个完整的网页版商品管理工具，具体要求如下：
功能需求
1.商品管理
– 商品信息录入：商品名称、种类/分类、SKU编号、价格、库存数量
– 商品图片管理：支持图片上传预览（可用文件选择器模拟）
– 商品列表展示：表格形式展示所有商品，支持搜索和筛选
– 商品编辑：支持修改商品信息
– 商品删除：支持删除商品（需确认提示）
2.库存管理
– 入库操作：增加商品库存数量，记录入库时间和数量
– 出库操作：减少商品库存数量，记录出库时间和数量
– 库存记录：显示每个商品的库存变动历史
3.界面功能
– 仪表板：显示商品总数、库存总值、低库存预警等统计信息
– 响应式设计：适配桌面和移动设备
– 数据持久化：使用localStorage保存数据
技术要求
样式和图标
– CSS框架：使用 TailwindCSS 3.0+ CDN引入
– 图标库：使用 Heroicons 或 Feather Icons CDN引入
– 字体：使用 Google Fonts
代码结构
– 单页面应用：HTML + CSS + JavaScript
– 模块化设计：将功能分解为不同的JavaScript模块
– 数据格式：使用JSON格式存储商品数据
界面设计要求
– 现代化UI：简洁美观的界面设计
– 颜色方案：使用专业的商务色彩搭配
– 交互反馈：按钮点击、表单验证等交互效果
– 表单验证：必填字段验证、数据格式验证
数据结构示例
请生成完整的HTML文件，包含所有必要的CSS和JavaScript代码，确保功能完整且可以直接在浏览器中运行。
生成结果：
Readdy 首先生成了一个很漂亮的 B 端 SAAS 系统首页。然后，通过“继续生成”功能，可以生成整个系统的其他页面，比如商品管理页面和系统设置页面。
页面跳转：
除了使用“继续生成”功能，还可以先生成对应的页面，然后在需要跳转过去的页面用“Selected Area”按钮选中需要跳转的按钮，点击 link 选择跳转后的页面。
内置数据库：
Readdy 还有一个非常强的能力，就是它有内置数据库，而且数据库的使用被他们优化到了非常简单的地步。比如在新增商品页面，如果需要保存信息，点击相关按钮时，程序就会触发创建数据库的提示，这时候只需要点击这个按钮，数据库就已经和页面关联，项目发布后用户填写的数据会被保存到数据库里面。
绑定域名：
在部署的时候，Readdy 还能让你直接绑定自己已有的域名，让你的项目不再是各种乱码组成的临时域名。
总结
Readdy 是一款真正面向普通用户的 AI 编程产品，它通过体验和技术结合迭代出许多降低复杂度的交互方案，让普通人也能轻松创建带有数据交互的产品。
我认为：Readdy 的出现，无疑是 AI 编程领域的一大进步。它降低了编程的门槛，让更多人能够参与到网页和应用开发中来。然而，AI 编程工具的发展仍然处于早期阶段，未来的发展方向应该是更加智能化、个性化，能够更好地理解用户的需求，并生成更加高质量的代码。
, , , ,
相关文章
