Readdy：一款颠覆认知的AI编程神器测评与使用教程
大家好，我是歸藏（guizang），今天给大家带来一款新发现的宝藏 AI 编程产品 Readdy 的测评和使用教学。这款产品由国内蓝湖（MasterGo）团队打造，在页面美观度和用户体验上有着极强的优势，短短四个月就实现了接近 500 万美元 ARR 的惊人增长。
Readdy 解决了哪些痛点？
1. 网页美观度
问题： 传统的 AI 编程工具生成的网页往往设计感不足，难以满足用户对美观度的要求。
Readdy 的解决方案： Readdy 在页面美观度上进行了大量的优化，生成的网页设计感十足，堪称同类产品中的佼佼者。
2. Figma 导出
问题： 将 AI 生成的网页导出到 Figma 进行二次编辑往往存在完整性问题，影响后续的设计调整。
Readdy 的解决方案： Readdy 支持将生成的网页快速导出为 Figma 设计稿，且完整程度远超 Html To Design，方便用户进行精细化调整。
3. 功能扩展
问题： 用户在使用 AI 生成网页时，往往需要手动添加各种功能和下级页面，操作繁琐。
Readdy 的解决方案： Readdy 支持一键快速生成网页对应的功能和下级页面，极大地降低了功能扩展的成本。
4. 数据库连接
问题： 普通用户难以将表单提交按钮与数据库连接，导致无法实现复杂的数据交互功能。
Readdy 的解决方案： Readdy 支持一键将表单提交按钮与自带数据库连接，让普通用户也能轻松实现增删改查等复杂功能。
5. 域名绑定
问题： AI 生成的网页往往使用临时域名，影响用户体验和品牌形象。
Readdy 的解决方案： 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 中输入以上提示词。
- 点击生成按钮，Readdy 会自动生成一个包含白噪音播放、日期显示和名人名言的日签网页。
- 点击“Continue to Generate”按钮，Readdy 会根据当前页面自动生成分享弹窗和生成图片功能。
效果：
Readdy 生成的日签网页排版美观，背景图片带有模糊效果，名人名言部分可读性强，Spotify 白噪音播放列表正常嵌入，点击刷新按钮可以刷新名人名言。
案例二：一图流宣传图网页
需求： 基于产品介绍文章的关键信息，生成一个类似苹果发布会 PPT 的 Bento Grid 风格的中文动态网页展示。
提示词：
基于下面产品介绍文章关键信息，帮我用类似苹果发布会PPT的Bento Grid风格的视觉设计生成一个中文动态网页展示，具体要求为：
1. 尽量在一页展示全部信息，背景为#F8F6F5、卡片背景为白色，文字颜色为#010101，高亮按钮和文字背景色为#F69AAC-DF95E3-7DBDE9 的渐变 ，卡片内的布局为主标题简短表述加大图标
2. 强调超大字体或数字突出核心要点，画面中有超大视觉元素强调重点，与小元素的比例形成反差
3. 网页需要以响应式兼容更大的显示器宽度比如1920px及以上
4. 中英文混用，中文大字体粗体，英文小字作为点缀
5. 简洁的勾线图形化作为数据可视化或者配图元素
6. 运用高亮色自身透明度渐变制造科技感，但是不同高亮色不要互相渐变
7. 数据可以引用在线的图表组件，样式需要跟主题一致
8. 使用HTML5、TailwindCSS 3.0+（通过CDN引入）和必要的JavaScript
9. 避免使用emoji作为主要图标
10. 不要省略内容要点
操作步骤：
- 在 Readdy 中输入以上提示词。
- 点击生成按钮，Readdy 会自动生成一个 Bento Grid 风格的宣传图网页。
- 点击 Export 按钮，选择 Copy File，然后在 Figma 中找到 Readdy 插件直接粘贴，即可将网页转换为设计稿。
效果：
Readdy 生成的宣传图网页排版舒适，图表背景色和图表本身选择合适，设计一致性强。导出的 Figma 设计稿自动布局，方便用户进行内容删减和替换。
案例三：商品出入库管理系统
需求： 创建一个完整的网页版商品管理工具，包含商品管理、库存管理和界面功能。
提示词：
请帮我创建一个完整的网页版商品管理工具，具体要求如下：
功能需求
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 中输入以上提示词。
- 点击生成按钮，Readdy 会自动生成一个 B 端 SAAS 系统首页。
- 使用“Continue to Generate”功能生成商品管理页面和系统设置页面。
- 使用“Selected Area”按钮选择需要跳转的按钮，点击 link 选择跳转后的页面，实现页面之间的跳转。
- 点击新增商品页面中的保存按钮，Readdy 会提示创建数据库，点击确认即可将数据库与页面关联。
效果：
Readdy 生成的商品出入库管理系统包含商品管理、库存管理和界面功能，可以通过内置数据库实现数据的增删改查。
Readdy 的优势总结
- 美观度高： 生成的网页设计感十足，远超同类产品。
- 易用性强： 操作简单，无需专业编程知识即可快速生成网页。
- 功能强大： 支持一键生成功能和下级页面，内置数据库，可实现复杂的数据交互。
- 可扩展性好： 支持导出 Figma 设计稿，方便用户进行二次编辑。
- 部署便捷： 支持绑定用户自己的顶级域名。
我认为：
Readdy 的出现，无疑是 AI 编程领域的一次重要突破。它不仅降低了编程的门槛，让更多人能够参与到网页开发中来，更重要的是，它真正关注用户体验，通过不断迭代和优化，将复杂的技术问题转化为简单易用的交互方式。Readdy 的成功，也再次证明了“用户至上”的设计理念的重要性。正如鲁迅先生所说：“伟大的心胸，应该表现出这样的气概——用笑来迎接悲惨的厄运，用百倍的勇气来应付一切的不幸。” Readdy 正是以这样的勇气和智慧，为我们带来了 AI 编程的无限可能。
,,,
相关文章
