完全用 AI 帮我从设计到 coding 实现 Scrollytelling 风格的 landingpage

[LuliYanng]

先丢个目前的效果：

更好的效果可以去网页看看，因为主要是通过动画效果呈现的： https://nono-landing-page.vercel.app/

---

ok ，下面进入正题！

这几天给我的 Nono Cowork 项目重新设计了一版 Scrollytelling 风格的 Landing Page ，灵感主要来自 Cora （ https://cora.computer/?utm_source=everywebsite ） 这个产品。看着 Cora 这么优秀的页面，我就琢磨了：我既不太懂不懂前端也不懂设计的，要怎么样才能做出类似的效果呢？

正好前段时间 gpt image 2 各种刷屏，刚好这次拿来试试 image 2 的能力。我就试着把 Cora 的页面截图丢给 GPT 做参考，然后结合 Nono 项目的特点，让它帮我生成一版设计。



一开始只是想着让他出一版概念图，给我提供灵感而已，不过等结果出来的时候，真的有被惊艳到，完成度真的高啊！不仅整体效果很棒，而且一次就出来了，我连抽卡的不用了，非常准确地抓住了我想用画面来表现产品特点这个核心。

那还说啥，设计图效果这么好，直接开干了！剩下的工作就是让 gpt 把设计图里的元素一个个提取出来，我再作为素材丢给 claude coding 就好了。不过这一步能实现还有一个关键：就是 gpt 真能生成透明底图的 png 文件，而且非常稳定。但是我去 banana 试了一下，只会给我马赛克背景的伪透明图😅

下面是提取出来的一部分素材图了，有了这些基本上整个页面 ui 就出来了，剩下就是跟 ai 缠斗🥵，把我想要的动画效果做出来。

[imqiyue]

不错，很喜欢

[qianlifeng]

正好这两天也在用 AI 实现 LandingPage. 这要是放在以前你让我码代码可以, 但是做这种 UI 动效, 真的会很头大

[LuliYanng]

@imqiyue 感谢老哥喜欢😁

[LuliYanng]

@qianlifeng 是的 ui 动效是很难搞的，涉及到复杂一点的其实 ai 也很吃力，一开始 opus 4.6 也做不好，后来换成 gpt 5.4 把基础打好了之后，后续的再让 opus 接着干