挖到宝！这款AI编程神器让我扔掉Figma和代码编辑器

作者｜毕乐天

来源｜AI先锋官

（先甩结论：5 分钟生成网站 + 代码，设计师和前端看了都沉默）

想必大家或多或少的了解过AI编程，在AI编程圈摸爬滚打，试了Cursor和Trae后，本以为AI也就那样了，

直到刷到Readdy.ai——这简直是宝藏工具！

那么他的特点都有哪些呢?

• 文字生成界面：输入简单文字，直接生成网页或移动端界面。

• 参考图生成：上传图片，按其风格和布局快速生成新界面。

• 元素编辑：可选中界面里的图片或文字区域，替换风格、内容或图片。

• 多页面设计：自动生成风格统一的多页面设计稿，保证交互和视觉一致。

• 原型链接一键生成：生成原型链接，方便分享给团队、客户评审反馈。

• 高质量代码输出：生成HTML、CSS、JavaScript、React等语言框架的代码，还原度高，可直接用于开发。

• 设计文件导入：支持导入MasterGo/Figma文件，无缝接入现有设计开发流程。

话不多说，我们开始下面的测试和怎样使用。

我们打开他的网址readdy.ai，点击注册。

选择我们自己的定位。

创建完成后，紧接着会出现让我们创建文件夹，这个和Cursor和Trae很像，创建我们单独的文件设计，界面也是很干净清晰直白。

我随便取个名字，然后点击创建。

进入首页，页面非常的清爽干净，

中间有两个选项，桌面和移动，下面就是对话框。

右下角还可以上传图片参考，让我意外的是上传图片之后，他还有参考，如布局、颜色、文案等。

这在Cursor和Trae可是从来没有的。

在对话框内输入提示词即可全自动建站。

第一次创建过程中，官方会弹出使用教程视频。

在视频中，它会向你介绍一些非常亮眼的功能，如：编辑界面、创建第二页面，收集表格单、发布网站等。

在完成网页的制作之后，我们还可以分享到figma进行编辑，这对于设计的朋友来说简直天大的好消息。

还可以进行在线编辑图片以及添加链接！！！

选中图片区域直接上传素材，文字双击就能改字体 ——重点是改完实时预览！

这是要在Cursor和Trae想都不敢想，这一点不管是设计师还是前端设计师看到后他们之间都恩怨沟通终于可以解决了。

整体的交互感觉也是非常不错，随着按钮不断的变化很nice的，整体的UI界面也是很漂亮，层次分明，很清晰。

让我们来看看整体效果。

看到这里，你是不是也想赶快的试一试。

提示词我已经分享给大家了，有兴趣的小伙伴可以试试。

1.总体设计理念设计采用了精致的深色主题和丰富的大地色调，重点是通过逼真的图像和电影般的过渡来营造身临其境的教育体验。布局采用纵向全屏结构，并采用有机、不对称的构图。2.色调主色调：深林绿（#1A332F）辅助色： 石灰色（#2C3539）点缀：海洋蓝（#1B3F8B海洋蓝 (#1B3F8B)高光熔岩红 (#8B3232)背景：浓黑 (#0A0A0A)浓黑 (#0A0A0A)3.着陆页面结构具有视差效果的全屏森林背景使用 CSS 粒子实现微妙的雾动画效果标题居中，采用自定义排版（衬线字体，营造科学感）连续旋转的浮动指南针/地球仪元素具有发光效果的 "开始探索 "CTA 按钮底角的环境音切换按钮4.导航系统显示部分位置的最小侧点自定义滚动触发的页面转换以高度/深度计为风格的进度指示器通过自然手势显示隐藏菜单5.内容版块布局生物群落部分：全视角生态系统过渡动态纹理叠加环境声音集成信息面板从自然元素中浮现构造力三维火山动画交互式板块运动图熔岩和烟雾的粒子效果细微的屏幕晃动效果天气和气候动态天气转换动画气象叠加交互式温度梯度图大气粒子系统河流与地貌作为内容分隔线的水平河流动画地形高程指示器侵蚀模式动画图层显示互动6.互动元素滚动触发动画基于自然物理的动作环境粒子系统触摸/点击波纹效果有深度的悬停状态7.排版标题：科学权威的衬线字体正文：简洁的无衬线字体，便于阅读根据视口调整大小与滚动位置相关联的文本动画8.响应式考虑因素适用于所有视口尺寸的流体缩放移动优化动画便于触摸的交互区域减少运动选项复杂动画的性能优化9.技术特点用于复杂动画的 WebGL用于平滑过渡的 CSS 变换用于滚动触发器的交点观察器用于粒子效果的画布元素用于环境音效的音频 API10.性能优化针对重型媒体的延迟加载渐进式图片加载动画节流预加载资产以实现平滑过渡支持缩减运动媒体查询

看到这里，有的小伙伴们就会问免费的吗，很可惜，他不是。

不过他有免费额度500点数，大家可以简单的玩一玩。

如果是重度用户的话，可以参考一下官方的价格：

• Free（免费版）：免费送500点数，用于AI生成和编辑，代码导出功能，支持2个项目选项。

• Starter（入门版）：$20/月，包含免费版所有功能，10倍于免费版的AI使用点数（5000点数），支持10个项目选项。

• Pro（专业版）：$40/月，包含入门版所有功能，22倍于免费版的AI使用点数（11,000点数），无限项目支持，优先客户支持

测试下来让我眼前一亮的是首页界面的简单直接，可以在页面直接编辑（设计师的福音）。

当然缺点也有，但我愿意忍，也有一些bug是AI编程的通病，有的组件不是很好的能体现出来，需要几次尝试修改，但是不得否认readdy在众多AI编程产品中还是有一席之地的。

毕竟是AI，能做到80%完美已经吊打手动了。

希望Readdy能给我们带来更多惊喜，小编也是非常的期待。

（文：AI先锋官）