支持私有化部署
AI知识库

53AI知识库

学习大模型的前沿技术与行业应用场景


我们在极速建站的 AI Agent 里,获得了「瞬间成就感」

发布日期:2025-06-27 08:11:38 浏览次数: 1538
作者:十字路口Crossing

微信搜一搜,关注“十字路口Crossing”

推荐语

AI建站神器Readdy如何让创业者在1分钟内搭建精美网站?揭秘这款4个月斩获500万美金ARR的超级单品。

核心内容:
1. Readdy极速建站的核心技术优势与行业积累
2. AI增强模块化设计带来的流水线式迭代体验
3. 从"能用就行"到"视觉精美"的AI产品设计范式转变

杨芳贤
53AI创始人/腾讯云(TVP)最具价值专家

我们正在目睹「瞬间成就感」的 Agent 时代。


loading

👦🏻 作者: 镜山

🥷 编辑: Koji

🧑‍🎨 排版: NCon


loading


从 AI 产品上线那一刻开始,时间争分夺秒,ARR 的增长曲线已经不仅仅只是财务指标,更是一条 AI 初创企业的生命线—— 越陡峭越好,越快越安全


AI 初创产品的窗口期极其短暂。


大量产品默默无闻,但也有些「超级单品」脱颖而出,占领用户心智。


其中一款就是 Readdy —— 增速极的 AI 出海应用,4 个月,接近 500 万美金 ARR。


在海外,它凭借出色的「网站界面」生成能力,让众多 KOL 在 Youtube 等平台上获得了爆炸性流量。


早在 3 月底,Readdy 就登上了 ProductHunt 周榜第一的位置。


loading


Readdy 出自于蓝湖和 MasterGo 背后的团队,这两款产品在国内设计工作站领域的影响力无需赘述。


Readdy 联合创始人朱峰和 Koji 是「街旁」时期的老同事。最近,我们与 Readdy 的创始团队进行了一次交流 ——良好的用户口碑以及得到市场验证的「超级单品」,让我们认为它值得一次深度测评。

🚥

Readdy 精准找到了一个产品切入点 —— 快速且精美地「建网站」。


为什么是 Readdy?

1)做原型:快

对于 AI 产品以及其他领域的产品的创业者,他们需要在最短时间内验证商业想法的可行性。


Readdy 可以在 1 分钟内就搭好一个基础原型框架,并在十几分钟内迭代几十个版本。


我们通过实际体验,分析了背后的 3 个原因:


1】行业知识积累

Readdy 可以依靠背后团队之前的创业产品技术的沉淀,让 Readdy 有了对各个行业的各种产品框架的感知。因此,它能够快速且准确地分析用户的需求,并将它反馈到生成的原型框架中


【2】让原型中的每个模块都可以被 AI 增强

Readdy 把网页拆成一个个功能块,用户可以选中任意一个模块,让 AI 来重新设计这部分内容。这样就很好地限制了 AI 的「过度反应思维」,并且充分利用 AI 的增强能力,快速地重新设计每一个模块。


【3】 流水线式快速迭代

原型中的每个功能模块都能独立优化,就像工厂流水线一样。用户可以同时改多个模块,或者一个接一个快速调整,让「做产品原型和 UI 界面」成为「流水线作业」,迅速迭代。


2)生成的界面:美

Readdy 能够快速生成精美的网站原型,这种视觉上的吸引力让普通用户也愿意去尝试和使用


loading
Readdy 所生成的网页主视觉


我们认为现在正处于 AI Agent 发展的一个关键节点。在此之前,AI 工具往往专注于功能实现,界面设计粗糙,背后的主逻辑是「能用就行」。


然而,技术门槛正在快速降低,用户开始把这些 AI Agent 当作日常的工具来看待,期望也越来越高。


在产品原型设计上,我们已经看到许多优秀探索:有专注于前端设计的 AI Agent,有深耕后端开发的 AI Coding IDE,还有一些非常有「野心」的 AI Agent,正试图将前后端融合


在各个方向的探索中,我们都能看到一条主故事线 —— 在界面精美度上「突飞猛进」


3)风格一致性:高

对于企业用户和设计师来说,他们需要在品牌形象和专业标准上保持统一。


作为一个成熟的「建站」AI  Agent,当网站包含多种不同元素时(各种艺术风格的文字、图片、视频、视觉等等),很重要的一点就是在整个网站的框架内,添加风格统一的元素,而不是随意拼凑。


当基础大模型能力还无法完全支撑 Agent 从 0 到 1 再走向 N 时,Readdy 的策略就是先快速且稳定地从 0 到 0.99。


Readdy 的稳定性、风格和元素的一致性让它成功实现了这一步。


loading
ProductHunt 评论区


稳定就意味着生产力。


如何能实现「拿着一张 Roadmap 走到头」,是 Agent 从「玩具」走向「具有实际价值工具」的路径。 


接下来是我们的深度实测部分:

迅速迭代的原型验证


现在,Readdy 最多能接受 2000 字的提示词,所以我们可以在设计提示词时,套用「主要目的+AI 生成视觉交互设计」的方式提出,比如:




prompt:做一个红牛极限运动的宣传官网,内容为10大雪山攀岩 + 视觉交互设计(AI 生成)


loading


Readdy 会自动分析并生成一份结构化的提示词指令。如果觉得不够准确,还可以继续补充要求:


loading


点击「Generate」后,Readdy 开始建站,几乎在 1 分钟内,第一版就呈现出很完整的主体架构,还带有基础的动画交互效果


同时,Readdy 做好的首次页面(First Page)上的导航栏也可以精确跳转到指定页面:


loading
loading


虽然「First Page」的效果很完整,但是许多地方细看仍有瑕疵。


这时,令人惊艳的是网页里几乎「所有的元素」都可以通过右下角的「选择区域」功能,用自然语言告诉 AI 重新设计,或者直接链接到 Readdy 内部已经做好的网页模板中。


loading


先来看看选中区域再用 AI 重新设计的功能有多好用。


文字部分可以直接进行 AI 替换,图片部分则提供了四种功能:上传本地图片直接替换、移除背景、AI 文字生成图片,甚至是 AI 文字生成视频进行替换。


loading
loading


它几乎将 AI 能力运用在了网页的每个模块中。我录制了一个 GIF,你会发现每一个功能模块都可以完全重新生成


loading


之后,你就可以用「简单的提示词去指挥 AI 」的方式,进行快速迭代了:


loading


在这次深度测评中,大概 30 分钟左右就能让网站原型快速迭代出 20 多个版本(每一句话的修改要求,哪怕是很小的改动也算一个版本),并且更改后的原型如果不满意,可以随时回滚


loading


最后,光是这一个「First Page」展现出的效果就足够令人满意了。


让我们来看看网页上各个模块从最初第 1 版到最终第 22 版的对比。通过这个大工程,直观地感受 Readdy 的快速产品迭代能力。


左侧为第 1 版,右侧则为对应的第 23 版。


网页的主视觉,从静态照片到动态雪山全景图:

loading
loading


第 1 版的十大雪峰只有相同的线条,并且是静态的。而现在的最新版本,除了黑白滤镜的雪山图,还有了模拟山峰形状的动态线条,以及点击即可放大的「雪山影展」:


loading
loading


红牛 X-SNOW 活动的时间线的动态交互设计更加丰富了,现在可以点击右上角的「放大」按钮,欣赏一个极具美感的、可上下滑动的极限活动黑白展览:


loading
loading


为了更直观一点,我又截了两张最新的长图:


loading
loading


关于极限活动的展示部分,也加入了更多的交互设计。


比如,点击文字模块可以「以像素展开的风格」呈现,并且右侧的「高度线条」可以是交互的了,无论怎么用鼠标「打扰」它,线条都可以到达终点:


loading
loading


我录制了完整的一段视频,可以看看整体的效果:



而这,其实只是「First page」而已。


Readdy 还支持在界面内部直接选择任意一个可编辑模块,通过「Link」引入到「Second Page」。


比如,先输入一段提示词,让 Readdy 在网页内部加一个模块,介绍两位极限运动里我个人最欣赏的运动家:




prompt:在「RED BULL X-SNOW TIMELINE」模块上方加个页面。 两个人物卡片(分别是David Lama;Will Gadd) 风格:黑白,像素,动态交互


点击这两个人物卡片时,会有细微的像素动效:


loading


这时,我们可以回到 Readdy 的起始界面,重新走一遍网页生成流程,输入一段提示词,为极限运动家制作一个个人网页:





prompt:为威尔·加德(Will Gadd)制作一个个人履历网页。 他于2015年成为首位成功攀登冰冻尼亚加拉大瀑布(一个51米高的垂直冰瀑)的人。 网页应包含他在极限运动方面的成就时间线,例如登山和冰攀。 网页背景应展示他曾攀登过的雪山。 整体风格为黑白像素艺术风。


这回,展示的只是 Readdy 生成的第一版,一笔未改:


loading


同样地,也为 David Lama 制作一个主页:





prompt:为大卫·拉马(David Lama)制作一个个人履历网页。 他于2018年成为首位单人成功登顶喜马拉雅山脉鲁朗里峰(Lunag Ri,海拔6,907米)的人。 网页应包含他在极限运动方面的成就时间线,例如登山和冰攀。 背景应展示他曾攀登过的雪山,整体风格为黑白像素艺术风。


同样是第一版:


loading


这个时间轴很有趣,整体为黑白像素风格,不光是时间线的展示,「Difficulty」的显示也很可爱!


loading


然后,选中一个模块区域,利用「Link」功能,就可以直接选定需要跳转的「Second Page」:


loading


效果如下:


loading


Readdy 还支持数据收集功能,网站最下方可以设置一个「订阅」模块,里面所填的数据全部可以直达后台数据库:


loading
loading


除此之外,它也支持分享非常干净的代码,支持导入到其他 IDE 中继续深度开发:


loading


如果注册了域名,甚至可以一键「Publish」,成为一个比较成熟的网站:


loading


这个案例的 Link 为:

https://readdy.link/share/74cb61778b510650ffd37d31d891e420

视觉精美的交互界面


Readdy 的页面设计在美观程度上已经相当成熟了,而且它还支持参考别的网站的截图,只需要上传一张图片,它就能识别和借鉴图片中的「排版布局、配色方案、文案风格」这些视觉元素。


比如,我随意上传了一个网站的图片并输入了一句极简单的提示词:




prompt:中国舞蹈只此青绿表演订票网站
loading


仅需要短短的几次改动,我就获得了一个中国舞蹈「只此青绿」的购票网站:



「只此青绿」的精彩瞬间模块,也非常像一个成熟网站会展示出来的形式:


loading


除了在对话框选中区域修改之外,Readdy 还提供了非常简单的「完善网站」的功能:只要点击网页里的任意一个按钮并「Continue」就能根据这个按钮在网页中的功能扩展为一个网页


比如,当我点击「立即购票」:


loading


Readdy 自动分析,并给出了一段提示词,无需再去琢磨该如何设计提示词:




Readdy 自动分析后提供的 prompt:  用户点击了「立即购票」按钮,希望购买《只此青绿》舞剧全国巡演的门票。 用户需要一个购票页面或弹窗,可以选择演出场次、城市、座位等信息并完成购票流程。


之后,Readdy 几乎只用了 1 分钟的时间,就完整地生成了一整套界面很简洁精美的购票网站。


这不是简单的几个页面拼凑,而是包含了选座位、填信息、确认订单等完整流程的专业购票系统:


loading
loading


甚至 Readdy 还准备好了支付页面,当用户点击「确认支付」后会看到什么样的结果,它都提前设计出来了:


loading
loading


除此之外,我们还做了一些界面非常好看的案例:


loading
loading
loading
loading
loading


可以说,Readdy 已经开始具备了真正理解用户需求、并且能够提供完整解决方案的能力。在此之上,它在构建所有模块时都考虑到了界面的「精美度」。


如果想让用户「打开并停留」在一个网站里,这个产品就不能是一个界面粗糙、配色难看的网站。


Agent 在做这些的时候,应该一直记得:让每个页面、每个模块都足够好看。

协调统一的元素风格


Readdy除了在快速迭代和美观度方面表现出色之外,还有一个特别让我印象深刻的优点:整个网站的「协调统一」做得非常好。


简单来说,一个成熟的网站或者是应用界面应该让用户感知所有的元素都像是出自同一个设计师之手——颜色搭配和谐、图片风格一致、字体大小合适,整体看起来就是一个「完整的作品」,而不是东拼西凑的大杂烩。


AI 在同时处理文字、图片、布局等不同类型内容时,保持整体风格的统一是一个重要的「品质」。


1)Q 版简笔画美术馆


我们模拟一个案例,制作一个 Q 版简笔画美术馆:




prompt:向日葵、星空、睡莲等世界名画的Q版简笔画改编美术馆。 将世界最著名的美术作品Q版简笔化。 艺术家风格,简笔画,ins风,整个画面只有黑白两种颜色,无其他颜色,线条感明显,Q版可爱。 所有线条都是不规则的。


Readdy 的第一版就可以给出非常「整齐划一」的网站原型,所有的画作、框架布局都是同一种风格:


loading


这些作品可以点击放大,来看看「向日葵」、「星月夜」和「蒙娜丽莎」三幅作品的对比和介绍:


loading
loading
loading


除了画作之外,艺术家简介部分也同样维持了「艺术家风格,简笔画,ins风,整个画面只有黑白两种颜色,无其他颜色,线条感明显,Q版可爱」的要求:


loading
loading


2)实用工具界面


除了网站界面之外,还能够体现风格和元素的一致性的一个很好的场景就是:实用工具界面。


我们发现 Readdy 累积了很多行业的界面知识,它能生成各个行业的应用界面。


比如,电子产品的 OS 界面。毕竟,所有的应用程序都需要在同一个系统环境下「协调统一」。


我们也简单试了试,可以只给一段非常简单的提示词:




设计一个 iPad 的主界面


Readdy 就可以非常简单地直出一个 iPad 界面:


loading


之后就可以多次自然语言对话,逐步设计一个还算「看得过去」的 iPad 操作界面。


比如:灵动岛里可以出现「千千阙歌」的播放界面;点击右上角可以出现「控制中心」;APP 应用块可以放大等等效果:


loading


甚至一键点击 APP,就可以生成应用界面。像是,APP Store 以及 Kindle:


loading
loading


再比如一个可交互的「Photoshop」界面:


loading


一个自带广告的微博热搜界面:


loading


甚至是剪映视频编辑器界面:


loading


或者是,一个要素非常全的 Bilibili 的视频网站界面:


loading


我们观察到,Readdy 就像一个经验丰富的设计师,已经掌握了大量界面设计的「套路」。这意味着开发者不用再花时间学习各种设计规范,直接就能做出专业的界面,提高生产力


Readdy 制作界面时很有「整体观念」。它不会东拼西凑地把功能随意摆放,而是像搭积木一样,用同一套设计规则来安排所有的按钮、文字和图片,让整个界面看起来协调统一。


另外我们还发现,Readdy 生成的界面可以直接导入到 MasterGo 和 Figma 这些专业设计软件里,方便设计师进一步调整和完善。

建站时的「First Page 」速度,真的很关键


在实际的创业和产品开发中,时间往往非常珍贵。一个创业团队可能需要在一周内测试三个不同的产品想法。


传统的「需求分析→设计稿→开发→测试→部署」的线性流程,正在被「想法→AI 即时原型→ AI 快速迭代→ 真实用户试用反馈→AI 持续优化」的敏捷模式所替代,AI 正是这个复杂流程中的「最佳粘合剂」。

在这种新模式下,产品界面验证不再是开发流程的终点,而是起点。

🚥

站在 2025 年的时间节点上,我们正在见证一个有趣的现象:那些能让普通人「哇」一声的 AI 产品,往往比那些功能复杂的工具活得更好。


在 30 分钟内,迭代几十个版本,全程自然语言对话,做出一个「看起来还不错的网站原型」—— 这种「瞬间成就感」,比任何营销手段都要有效。


那些能让用户立刻看到效果、马上想分享给朋友的产品,往往走得更远。


或许,未来的 AI Agent 都能让每一个不懂代码的普通人对着屏幕,喊出一声:


我也能做出这么酷的东西!



loading

53AI,企业落地大模型首选服务商

产品:场景落地咨询+大模型应用平台+行业解决方案

承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业

联系我们

售前咨询
186 6662 7370
预约演示
185 8882 0121

微信扫码

添加专属顾问

回到顶部

加载中...

扫码咨询