正在加载视频...

视频加载失败

返回首页

刚看完一个演示，网页设计这块真的变天了 有人录了个 19 分钟教程 用 Google Antigravity + GPT Image 2 从零搭了一个带动画的获奖级网站 不是那种“生成个页面草稿”的玩具感 视觉、动效、布局、素材，全部往成品方向推 你看视频里那种复杂网页 放以前至少得设计、前端、动效来回磨好几轮 现在变成： 描述需求 Antigravity 搭结构 GPT Image 2 补视觉资产 然后一路改到能展示 网页设计师这是要被活活逼成导演了 我靠 学了一堆布局细节 结果现在靠嘴就能搓出来 AI真是太棒啦🤓☝️

Soranlan's profile picture

Soran

7,314 subscribers

19,284 次观看 • 4 个月前 •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

8 条评论

狐狸狼 的头像
狐狸狼4 个月前

深度多模态智能体直接消除了设计与开发间的物理墙，真正的零代码即成品时代已经提前到来了。

Soran 的头像
Soran4 个月前

是的，非常方便了

袁老铁 的头像
袁老铁4 个月前

手机APP能搞吗，我现在用codex做的手机APP，UI界面简直就是坨臭狗屎，想20年前网站管理后台的风格

Soran 的头像
Soran4 个月前

可以试试

韦小宝 的头像
韦小宝4 个月前

卧槽这个真的牛逼

Soran 的头像
Soran4 个月前

确实有点意思

白泽2051 的头像
白泽20514 个月前

看了效果，确实强的可怕，但是想想现在只要有创意也可以创造出这么棒的站，也挺兴奋的。

Soran 的头像
Soran4 个月前

哈哈哈是这样的，技术已经那啥了

相关视频

你是不是遇到AI生成的网页，出来全是千篇一律的紫色渐变？满满的AI感。本期分享我在使用的工作流，不仅能 1:1 还原设计稿，还能生成炫酷的网页动效。使用到的工具是 Figma MCP、Claude Code、GLM4.6。 不管你是开发，还是想做个人网页的设计师，学会这套工作流，也能打造出独一无二的网页～
2:49

你是不是遇到AI生成的网页，出来全是千篇一律的紫色渐变？满满的AI感。本期分享我在使用的工作流，不仅能 1:1 还原设计稿，还能生成炫酷的网页动效。使用到的工具是 Figma MCP、Claude Code、GLM4.6。 不管你是开发，还是想做个人网页的设计师，学会这套工作流，也能打造出独一无二的网页～

Paidax

48,894 次观看 • 10 个月前

前段时间分享了一个从html转Design的插件，以往都是用AI直接帮我们实现，今天说一下另外的一个方案，就是网易CodeWave的D2C功能，Design to Code，设计稿转代码。 操作很简单，把设计稿导入进去，几秒钟完整页面就生成了。 支持Figma、Sketch、MasterGo这些主流设计工具，甚至截个图也能识别。 我测试了一下，对于中后台管理页面效果挺好的，可以看一下视频。 为什么质量还不错？主要几个原因： 像素级还原 用深度学习和计算机视觉技术分析设计稿细节，静态布局和响应式布局都能搞定。 组件识别准确 主流设计系统下的组件识别准确率超过80%，ElementUI、Ant Design、Arco Design都支持。自动替换成CodeWave组件，后续调整方便。 大模型加持 背后是自研多模态大模型，有5000多个设计稿、组件、布局的训练数据，不是瞎猜的AI。 我觉得适用的一些场景 比如说PC端中后台页面，表单页、列表页、数据看板之类的。 官网和活动页，PC端和移动端都行，H5页面也没问题。 动效复杂的页面和互动小游戏不太推荐，还是要手动开发。
1:05

前段时间分享了一个从html转Design的插件，以往都是用AI直接帮我们实现，今天说一下另外的一个方案，就是网易CodeWave的D2C功能，Design to Code，设计稿转代码。 操作很简单，把设计稿导入进去，几秒钟完整页面就生成了。 支持Figma、Sketch、MasterGo这些主流设计工具，甚至截个图也能识别。 我测试了一下，对于中后台管理页面效果挺好的，可以看一下视频。 为什么质量还不错？主要几个原因： 像素级还原 用深度学习和计算机视觉技术分析设计稿细节，静态布局和响应式布局都能搞定。 组件识别准确 主流设计系统下的组件识别准确率超过80%，ElementUI、Ant Design、Arco Design都支持。自动替换成CodeWave组件，后续调整方便。 大模型加持 背后是自研多模态大模型，有5000多个设计稿、组件、布局的训练数据，不是瞎猜的AI。 我觉得适用的一些场景 比如说PC端中后台页面，表单页、列表页、数据看板之类的。 官网和活动页，PC端和移动端都行，H5页面也没问题。 动效复杂的页面和互动小游戏不太推荐，还是要手动开发。

泊舟

27,888 次观看 • 8 个月前

测试一下Qwen3.8正式版的前端能力,进步很大呀！ 这几天带小侄子来我这玩，他突然问我：汽车发动机里面是样子？ 我叽里咕噜给他讲了一遍，感觉他没听懂，很快又开始玩手机了。 为了激发他的学习兴趣，我决定自己用AI搓一个3D交互网页。 顺便测试一下Qwen3.8这个新模型！！ 我输入我的懒人提示词： 我现在想一个互动模拟器设计、网页设计专家，擅长设计这种用于互动教学的3D展示页面。你有什么，你可以先采访我，了解完需求 回答几个问题后，就被拉出去吃饭了，吃饭时候心里还惦记着要写代码。 但没想到回来的时候就给我整好了！！而且，模型，讲解，演示动画全自动弄好了。 咋给我弄好了呢？ 看了一下，原来是开了bypass模式，Qwen3.8疯狂吐token，全程埋头写！！ 说真的，这个3d演示效果很不错👇
1:22

测试一下Qwen3.8正式版的前端能力,进步很大呀！ 这几天带小侄子来我这玩，他突然问我：汽车发动机里面是样子？ 我叽里咕噜给他讲了一遍，感觉他没听懂，很快又开始玩手机了。 为了激发他的学习兴趣，我决定自己用AI搓一个3D交互网页。 顺便测试一下Qwen3.8这个新模型！！ 我输入我的懒人提示词： 我现在想一个互动模拟器设计、网页设计专家，擅长设计这种用于互动教学的3D展示页面。你有什么，你可以先采访我，了解完需求 回答几个问题后，就被拉出去吃饭了，吃饭时候心里还惦记着要写代码。 但没想到回来的时候就给我整好了！！而且，模型，讲解，演示动画全自动弄好了。 咋给我弄好了呢？ 看了一下，原来是开了bypass模式，Qwen3.8疯狂吐token，全程埋头写！！ 说真的，这个3d演示效果很不错👇

铁锤人

103,280 次观看 • 2 个月前

国外大神录了一个11分钟的教程，用 AI 从零做了一个赛博朋克动画网站，看完我沉默了（已加中文字幕） 滚动页面背景视频跟着播、鼠标移动有视差、卡片是磨砂玻璃质感、字体是定制艺术体。这种效果找外包做报价至少大几千 他用 GPT 5.5 + Codex，11分钟搞定 最绝的是他的工作流： 不是上来就让 AI 写代码，先去 Pinterest 找视觉参考，去 找现成的动画效果提示词，用 生成赛博朋克视频素材 然后把这些参考图、现成的 CSS 代码、具体的交互描述一起喂给 Codex。AI 拿到的不是一句模糊的"做个酷网站"，是精确的视觉方向 + 可用的代码片段 滚动驱动视频播放、液体玻璃效果这些以前要手写 GSAP 调半天的东西，他一个提示词就出来了 React + Vite + TypeScript + Tailwind + GSAP，全套技术栈 AI 自动配好 看完最大的感受是：差距不在工具上，在于怎么用。同一个 Codex，大部分人做出来像学生作业，这哥们做出来像设计公司的作品
11:00

国外大神录了一个11分钟的教程，用 AI 从零做了一个赛博朋克动画网站，看完我沉默了（已加中文字幕） 滚动页面背景视频跟着播、鼠标移动有视差、卡片是磨砂玻璃质感、字体是定制艺术体。这种效果找外包做报价至少大几千 他用 GPT 5.5 + Codex，11分钟搞定 最绝的是他的工作流： 不是上来就让 AI 写代码，先去 Pinterest 找视觉参考，去 找现成的动画效果提示词，用 生成赛博朋克视频素材 然后把这些参考图、现成的 CSS 代码、具体的交互描述一起喂给 Codex。AI 拿到的不是一句模糊的"做个酷网站"，是精确的视觉方向 + 可用的代码片段 滚动驱动视频播放、液体玻璃效果这些以前要手写 GSAP 调半天的东西，他一个提示词就出来了 React + Vite + TypeScript + Tailwind + GSAP，全套技术栈 AI 自动配好 看完最大的感受是：差距不在工具上，在于怎么用。同一个 Codex，大部分人做出来像学生作业，这哥们做出来像设计公司的作品

Vincent

23,380 次观看 • 3 个月前

最近看到很多人在聊 Vibe Coding，我也下了软件试了下。 作为一个没有任何编程和计算机基础的人，竟然真的靠“聊天”做出了一个在线个人网页😂 过程其实很有意思： 我负责描述想要的 vibe和网页内容：自我介绍，风格类似iOS17 玻璃质感、淡绿色、按钮要更深一点… 然后用 GPT 帮我把这些抽象需求翻译成可执行的 prompt，Cursor 再根据 prompt 自动改代码、预览效果。 等于我完全不写代码，只是在指导两个 AI 结对编程： GPT 负责把我的中文需求变成工程语言 Cursor 负责真正写代码、渲染页面 我只需要根据网页呈现的结果反馈给GPT：这不够玻璃，再绿一点，加点光效等 最后用 Vercel，上线成一个真正的网址（但Deploy完显示404了..🥹 一套下来体验感就是——我们都向往“Vibe Coding” 的理想目标——那种“言出法随”的魔法，只要说话，AI就能完美实现一切。 但我们必须承认一个现实：以当前AI（无论是Claude、GPT）的能力，目前还远不足以支撑这个理想。 尝试AI“对齐颗粒度“，以学习的姿态打造AI时代的「超级个体」
0:20

最近看到很多人在聊 Vibe Coding，我也下了软件试了下。 作为一个没有任何编程和计算机基础的人，竟然真的靠“聊天”做出了一个在线个人网页😂 过程其实很有意思： 我负责描述想要的 vibe和网页内容：自我介绍，风格类似iOS17 玻璃质感、淡绿色、按钮要更深一点… 然后用 GPT 帮我把这些抽象需求翻译成可执行的 prompt，Cursor 再根据 prompt 自动改代码、预览效果。 等于我完全不写代码，只是在指导两个 AI 结对编程： GPT 负责把我的中文需求变成工程语言 Cursor 负责真正写代码、渲染页面 我只需要根据网页呈现的结果反馈给GPT：这不够玻璃，再绿一点，加点光效等 最后用 Vercel，上线成一个真正的网址（但Deploy完显示404了..🥹 一套下来体验感就是——我们都向往“Vibe Coding” 的理想目标——那种“言出法随”的魔法，只要说话，AI就能完美实现一切。 但我们必须承认一个现实：以当前AI（无论是Claude、GPT）的能力，目前还远不足以支撑这个理想。 尝试AI“对齐颗粒度“，以学习的姿态打造AI时代的「超级个体」

Mercy

32,119 次观看 • 9 个月前

现在我们 vibe coding 做产品，基本都是交给 AI 一把梭。 功能写得飞快，但设计这块，像UI、颜色、字体这些，基本都是AI 给啥就是啥，能用就行 就算想改，也不知道该怎么改，纯靠主观感觉 后来我才发现不是不在乎设计，而是根本不知道一个「好的设计」应该是什么样 这个时候，一个成熟、完整的设计标准规范就显得很重要了 而这个东西，叫「设计系统」。 设计系统本质上就是一整套涵盖颜色、排版、间距、icon、组件等的标准规范，在做产品时，按照这个规范来实现就好了 但我们这种非设计师出身的，要想设计一套靠谱的设计系统，那真是太难了 今天我来分享一个网站，收录了各家大厂的设计系统，像Apple、Adobe、Google、Ant Design。颜色系统、icon、排版、字体等，整理得非常完整，都能在里面找到
0:37

现在我们 vibe coding 做产品，基本都是交给 AI 一把梭。 功能写得飞快，但设计这块，像UI、颜色、字体这些，基本都是AI 给啥就是啥，能用就行 就算想改，也不知道该怎么改，纯靠主观感觉 后来我才发现不是不在乎设计，而是根本不知道一个「好的设计」应该是什么样 这个时候，一个成熟、完整的设计标准规范就显得很重要了 而这个东西，叫「设计系统」。 设计系统本质上就是一整套涵盖颜色、排版、间距、icon、组件等的标准规范，在做产品时，按照这个规范来实现就好了 但我们这种非设计师出身的，要想设计一套靠谱的设计系统，那真是太难了 今天我来分享一个网站，收录了各家大厂的设计系统，像Apple、Adobe、Google、Ant Design。颜色系统、icon、排版、字体等，整理得非常完整，都能在里面找到

Corey Chiu

38,008 次观看 • 8 个月前

卧槽，我终于搞定了！带演示动效的 PPT 生成 Agent ！ 是我这个 PPT 生成 Skills 的迭代版本。 测试了一下，没想到效果还挺好：支持导出完整的视频，以及在网页上可以随意地控制速度去浏览 。 首页动画为了适应演示的等待时间，做成了无限循环的版本。每一页 PPT 切换的时候都有动效。 哈哈，这个应该是目前所有 PPT 生成独一份的，没有产品有，对演示的支持也非常好
1:00

卧槽，我终于搞定了！带演示动效的 PPT 生成 Agent ！ 是我这个 PPT 生成 Skills 的迭代版本。 测试了一下，没想到效果还挺好：支持导出完整的视频，以及在网页上可以随意地控制速度去浏览 。 首页动画为了适应演示的等待时间，做成了无限循环的版本。每一页 PPT 切换的时候都有动效。 哈哈，这个应该是目前所有 PPT 生成独一份的，没有产品有，对演示的支持也非常好

歸藏(guizang.ai)

201,589 次观看 • 8 个月前

刚发现一个神站！🚀 里面全是高端AI网站提示词，复制粘贴给你的AI就能秒出带动画的超美落地页、SaaS、作品集…… 几分钟做出以前要花几天做的效果，太香了！
1:06

刚发现一个神站！🚀 里面全是高端AI网站提示词，复制粘贴给你的AI就能秒出带动画的超美落地页、SaaS、作品集…… 几分钟做出以前要花几天做的效果，太香了！

雨哥向前冲

88,776 次观看 • 2 个月前

个人觉得，世界最顶级的网页效果教程分享社区： Design Engineer 一定不能错过的！ 前端开发+视觉设计的最终交汇点！ 比如，这里是之前 HaoqiWen 个人主页的技术解析文章，作者亲自写背后的那些技术细节和设计思路：
0:36

个人觉得，世界最顶级的网页效果教程分享社区： Design Engineer 一定不能错过的！ 前端开发+视觉设计的最终交汇点！ 比如，这里是之前 HaoqiWen 个人主页的技术解析文章，作者亲自写背后的那些技术细节和设计思路：

Jackywine

12,151 次观看 • 1 个月前

这两天看到我一直很喜欢的设计师阿哲 阿哲Phil 的个人网站，我挺喜欢他个人主页的那个风格。 看着看着突然冒出一个念头： 这种个人审美很强的网站，模型光看录屏，能不能做出来？ 于是我顺手录了 10 秒左右，从页面上划过去，直接把视频丢给 Ling-3.0-flash-VL，让它照着做一版。 没给源码，也没拆页面，更没写一大段提示词。输入就那段录屏，加上一句很简单的需求。其实扔进去的时候，我没抱多大期待。视频一晃就过去了，有些细节让我自己暂停看，也未必记得住。 Ling-3.0-flash-VL 是百灵在 Ling-3.0-flash 上加了视觉理解和 visual agent 的版本。官方提到的能力挺多，视觉感知、STEM、文档、前端编码、医疗报告都在里面。我这次没全测，就看一件事：它能不能看完一段网站录屏，真把页面做出来。 结果打开以后，我确实愣了一下。 按肉眼看，和阿哲的原版大概有七成像。大的版式、配色和页面感觉都抓到了，生成出来的也不只是一个摆着看的空壳。按钮能点，交互能跑，放进浏览器里，已经像个可以接着改的半成品。 当然，剩下那三成也挺明显。风格不够细腻，字体没那么贴，交互还是有点僵，一些细节只学到了大概。把两个页面并排放在一起，差距还是能看出来。要我直接拿去上线，我肯定不会；拿它当第一版，我觉得够了。 以前脑子里有个页面的样子，最麻烦的是说不清。你跟开发说想要“有点设计感”“交互顺一点”，讲了半天，对方可能还是不知道你想要什么。自己不会写代码的话，很多想法就一直停在收藏夹里。 现在简单多了。先找一个接近自己想法的网站，录一小段，让模型搭出来。哪里不对，直接看着页面改。它没有把阿哲的网站原样搬过来，但它把一张白纸直接做到了七成。 所以这次测完，我还挺愿意安利 Ling-3.0-flash-VL。离专业前端当然还有距离，但对没代码基础、想做个人网站或者产品 Demo 的人来说，先把第一版弄出来，已经能省不少事了。 感兴趣的都可以去试一试：
1:17

这两天看到我一直很喜欢的设计师阿哲 阿哲Phil 的个人网站，我挺喜欢他个人主页的那个风格。 看着看着突然冒出一个念头： 这种个人审美很强的网站，模型光看录屏，能不能做出来？ 于是我顺手录了 10 秒左右，从页面上划过去，直接把视频丢给 Ling-3.0-flash-VL，让它照着做一版。 没给源码，也没拆页面，更没写一大段提示词。输入就那段录屏，加上一句很简单的需求。其实扔进去的时候，我没抱多大期待。视频一晃就过去了，有些细节让我自己暂停看，也未必记得住。 Ling-3.0-flash-VL 是百灵在 Ling-3.0-flash 上加了视觉理解和 visual agent 的版本。官方提到的能力挺多，视觉感知、STEM、文档、前端编码、医疗报告都在里面。我这次没全测，就看一件事：它能不能看完一段网站录屏，真把页面做出来。 结果打开以后，我确实愣了一下。 按肉眼看，和阿哲的原版大概有七成像。大的版式、配色和页面感觉都抓到了，生成出来的也不只是一个摆着看的空壳。按钮能点，交互能跑，放进浏览器里，已经像个可以接着改的半成品。 当然，剩下那三成也挺明显。风格不够细腻，字体没那么贴，交互还是有点僵，一些细节只学到了大概。把两个页面并排放在一起，差距还是能看出来。要我直接拿去上线，我肯定不会；拿它当第一版，我觉得够了。 以前脑子里有个页面的样子，最麻烦的是说不清。你跟开发说想要“有点设计感”“交互顺一点”，讲了半天，对方可能还是不知道你想要什么。自己不会写代码的话，很多想法就一直停在收藏夹里。 现在简单多了。先找一个接近自己想法的网站，录一小段，让模型搭出来。哪里不对，直接看着页面改。它没有把阿哲的网站原样搬过来，但它把一张白纸直接做到了七成。 所以这次测完，我还挺愿意安利 Ling-3.0-flash-VL。离专业前端当然还有距离，但对没代码基础、想做个人网站或者产品 Demo 的人来说，先把第一版弄出来，已经能省不少事了。 感兴趣的都可以去试一试：

阿川 | AI thinking

37,185 次观看 • 20 天前

不二本周的幸福时刻就是偶然在Jackywine 老师的评论里发了一下我的个人网页，结果被好多老师们看到了！！！🥰一天涨粉1000成就达成！于是赶紧拍个视频跟大家分享一下我全程是怎么和我的Agent @ColaOSofficial 一起把我的个人网页搓出来的！！（努力的小女孩一枚！ 欢迎来我的主页玩：
11:07

不二本周的幸福时刻就是偶然在Jackywine 老师的评论里发了一下我的个人网页，结果被好多老师们看到了！！！🥰一天涨粉1000成就达成！于是赶紧拍个视频跟大家分享一下我全程是怎么和我的Agent @ColaOSofficial 一起把我的个人网页搓出来的！！（努力的小女孩一枚！ 欢迎来我的主页玩：

Esther

24,930 次观看 • 2 个月前

想做网站不是一天两天了， 最近看了不少网页案例，很喜欢那些丝滑炫酷的动画， 一个大神告诉我，新手做网页， 做动画最省事的方式，就是找个开源库， 选择喜欢的效果，然后自定义修改一下就行。 又发现一个，Reactbits，各种动画都分好类的， 几行代码就能用上，也太方便了！！
0:31

想做网站不是一天两天了， 最近看了不少网页案例，很喜欢那些丝滑炫酷的动画， 一个大神告诉我，新手做网页， 做动画最省事的方式，就是找个开源库， 选择喜欢的效果，然后自定义修改一下就行。 又发现一个，Reactbits，各种动画都分好类的， 几行代码就能用上，也太方便了！！

沐阳

72,652 次观看 • 3 个月前

这个帖子应该叫「1 分钟生成超高质 PPT，这款 AI 工具堪比专业设计」😏 刚试用了 Gamma，被惊艳到了，这生成网页的效果不亚于 bolt 啊，没细看代码，但视觉效果，包括动效跟响应式绝对出彩！😍 👇评论放了链接跟 PPT 的生成效果，分分钟可以直接上台演讲了
1:07

这个帖子应该叫「1 分钟生成超高质 PPT，这款 AI 工具堪比专业设计」😏 刚试用了 Gamma，被惊艳到了，这生成网页的效果不亚于 bolt 啊，没细看代码，但视觉效果，包括动效跟响应式绝对出彩！😍 👇评论放了链接跟 PPT 的生成效果，分分钟可以直接上台演讲了

MapleShaw

52,126 次观看 • 1 年前

AGI怕是真的要来了！！ 现在所有3D建模师都可以下岗了！ 我宣布，GPT-6 Astra 就是3D建模唯一的神！！ 事情是这样的： 我给GPT-6 Astra提供了几张我在澳洲留学时住的宿舍房间照片，让他建立了一个loop循环，使用three.js和blender来设计一个交互式3d场景， 并把场景做成一个演示视频，展示我的作品。 二十几分钟后我得到了这个视频！！！😮
0:45

AGI怕是真的要来了！！ 现在所有3D建模师都可以下岗了！ 我宣布，GPT-6 Astra 就是3D建模唯一的神！！ 事情是这样的： 我给GPT-6 Astra提供了几张我在澳洲留学时住的宿舍房间照片，让他建立了一个loop循环，使用three.js和blender来设计一个交互式3d场景， 并把场景做成一个演示视频，展示我的作品。 二十几分钟后我得到了这个视频！！！😮

Rion Wu

126,388 次观看 • 29 天前

推荐一下 张咋啦 的 PPT Skill：frontend-slides。 对于我这种不爱做 PPT，但又有演示需求的人来说，实在是太友好了。 这个 Skill 的思路是把 PPT 变成网页。 并且动画效果比 PowerPoint 好、生成的是单个 HTML 文件、浏览器直接打开。 AI 会生成多个不同风格的预览，每个风格都是定制的，字体、配色、动画都不一样。 同时还能直接在浏览器里编辑文字，改完自动保存。 如果你有现成的 .pptx 文件，也能直接转成网页版。 经常做 PPT 的话，可以试试，链接放评论区。
1:02

推荐一下 张咋啦 的 PPT Skill：frontend-slides。 对于我这种不爱做 PPT，但又有演示需求的人来说，实在是太友好了。 这个 Skill 的思路是把 PPT 变成网页。 并且动画效果比 PowerPoint 好、生成的是单个 HTML 文件、浏览器直接打开。 AI 会生成多个不同风格的预览，每个风格都是定制的，字体、配色、动画都不一样。 同时还能直接在浏览器里编辑文字，改完自动保存。 如果你有现成的 .pptx 文件，也能直接转成网页版。 经常做 PPT 的话，可以试试，链接放评论区。

余温

117,049 次观看 • 6 个月前