Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

我用LibTV+ Codex做了一个动态个人作品集网站：鼠标滚动，就能控制Hero镜头与页面内容交互，让动态作品真正放进可交互网页里。今晚发完整教程 👀 website with scroll transform interaction #AI #Codex #WebDesign #UIUX #AIDesign

宋夏天Dazzle

1,009 subscribers

13,758 views • 1 month ago •via X (Twitter)

Science & Technology #AI #Codex #WebDesign #UIUX #AIDesign

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

我用 Codex + Grok + FFmpeg，做了一段“宫崎骏感”治愈系动画。全程就只用了这 3 个工具。而且 Grok 额度只消耗了 1% 😂 制作流程其实很简单： 1、Codex 负责创作大脑：生成完整故事，并拆解成 8 个动画分镜。 2、AI分镜提示词优化：把每个镜头的画面、角色、动作、氛围细化，让生成效果更稳定。 3、 Grok 生成动画视频：根据分镜提示词，把文字里的幻想世界变成动态画面。 4、FFmpeg 后期合成：完成视频拼接、处理，让多个镜头变成一支完整动画。目前只是初版测试。下一步准备加入对话

我用 Codex + Grok + FFmpeg，做了一段“宫崎骏感”治愈系动画。全程就只用了这 3 个工具。而且 Grok 额度只消耗了 1% 😂 制作流程其实很简单： 1、Codex 负责创作大脑：生成完整故事，并拆解成 8 个动画分镜。 2、AI分镜提示词优化：把每个镜头的画面、角色、动作、氛围细化，让生成效果更稳定。 3、 Grok 生成动画视频：根据分镜提示词，把文字里的幻想世界变成动态画面。 4、FFmpeg 后期合成：完成视频拼接、处理，让多个镜头变成一支完整动画。目前只是初版测试。下一步准备加入对话

cyberkk

21,884 views • 3 days ago

阿里开源了一个纯JS实现的GUI agent：page-agent，目前已经24000个Star 一行代码就可以将Agent集成到网站里，让用户可以通过自然语言与页面进行交互。主要应用场景有： 1、对接答疑机器人 2、交互升级/智能化改造 3、产品教学 4、无障碍支持开源：

阿里开源了一个纯JS实现的GUI agent：page-agent，目前已经24000个Star 一行代码就可以将Agent集成到网站里，让用户可以通过自然语言与页面进行交互。主要应用场景有： 1、对接答疑机器人 2、交互升级/智能化改造 3、产品教学 4、无障碍支持开源：

松果先森

11,403 views • 1 month ago

花里胡哨，但有人吃这一套！一个有趣的交互，为任何链接制作专属二维码。可以做成动图，放到社交平台上。想起之前费尽心思给公众号做动态二维码。

花里胡哨，但有人吃这一套！一个有趣的交互，为任何链接制作专属二维码。可以做成动图，放到社交平台上。想起之前费尽心思给公众号做动态二维码。

沐阳

23,519 views • 2 days ago

在 GitHub上发现一个能克隆任何网站的项目，已经斩获 2w+ star 一个 /clone-website 指令，AI 就会自动截图分析、提取精确的 CSS 颜色和字体间距、探测点击和全屏滚动等交互状态，然后把整个网站逆向还原成干净的 Next.js 代码支持 Claude Code、OpenCode、Codex、Cursor 等 13 个主流 AI 编程平台，底层用 shadcn/ui 设计系统，既好看又容易二次开发用法也很简单： clone 模板 → npm install 装依赖 → 用 Cursor 打开项目，然后直接让 AI 帮你干活就行了

在 GitHub上发现一个能克隆任何网站的项目，已经斩获 2w+ star 一个 /clone-website 指令，AI 就会自动截图分析、提取精确的 CSS 颜色和字体间距、探测点击和全屏滚动等交互状态，然后把整个网站逆向还原成干净的 Next.js 代码支持 Claude Code、OpenCode、Codex、Cursor 等 13 个主流 AI 编程平台，底层用 shadcn/ui 设计系统，既好看又容易二次开发用法也很简单： clone 模板 → npm install 装依赖 → 用 Cursor 打开项目，然后直接让 AI 帮你干活就行了

阿西_出海

11,540 views • 1 month ago

高级感拉满！太丝滑了！！我怎么现在才发现！以防有人不知道，再分享一下！ animejs，能给你的网站或视频添加炫酷动画！而且，直接丢进ClaudeCode或者Codex就能用！！ CSS、SVG、数值变化、时间轴、交错动画、拖拽交互，各种动画真的是应有尽有。

高级感拉满！太丝滑了！！我怎么现在才发现！以防有人不知道，再分享一下！ animejs，能给你的网站或视频添加炫酷动画！而且，直接丢进ClaudeCode或者Codex就能用！！ CSS、SVG、数值变化、时间轴、交错动画、拖拽交互，各种动画真的是应有尽有。

沐阳

151,855 views • 2 months ago

🚨 Netflix 花 500 万美元制作一集动画。一个 21 岁的人上个月花了 124 美元，收入 12,345 美元。他用的是这套流程： → Claude 写脚本：10 分钟 → Midjourney 出画面：20 分钟 → Runway 做动态：15 分钟 → ElevenLabs 配音：10 分钟 → Suno 作曲：5 分钟 → 发布全平台：自动完成一小时一集。六个工具。一个人。睡着了，钱还在进来。

🚨 Netflix 花 500 万美元制作一集动画。一个 21 岁的人上个月花了 124 美元，收入 12,345 美元。他用的是这套流程： → Claude 写脚本：10 分钟 → Midjourney 出画面：20 分钟 → Runway 做动态：15 分钟 → ElevenLabs 配音：10 分钟 → Suno 作曲：5 分钟 → 发布全平台：自动完成一小时一集。六个工具。一个人。睡着了，钱还在进来。

千寻｜AI 分享 🌸

1,935,874 views • 1 month ago

Claude + Seedance 制作登录页 UI/UX 首页案例测试+ 在Claude里写前端时，可以用背景图作为基础，再生成一张纯“烟雾火星”的透明层，做 Overlay（叠加），这样即便鼠标不交互，页面也会有天然的流动感。 Z-Axis Animation: 给背景容器设置 transform-style: preserve-3d;。当滚动条向下时，通过 translateZ 让主体缓慢“靠近”用户。 Blur Transition: 进入页面前 2 秒，给背景图一个 filter: blur(10px) 到 blur(0px) 的渐变转场，配合烟雾升起

Claude + Seedance 制作登录页 UI/UX 首页案例测试+ 在Claude里写前端时，可以用背景图作为基础，再生成一张纯“烟雾火星”的透明层，做 Overlay（叠加），这样即便鼠标不交互，页面也会有天然的流动感。 Z-Axis Animation: 给背景容器设置 transform-style: preserve-3d;。当滚动条向下时，通过 translateZ 让主体缓慢“靠近”用户。 Blur Transition: 进入页面前 2 秒，给背景图一个 filter: blur(10px) 到 blur(0px) 的渐变转场，配合烟雾升起

李狗蛋3.0 🔶

22,398 views • 4 months ago

很多人吐槽自媒体们（包括我）只展示Gemini 3.0的前端能力，非常片面。确实是这样，在社交平台，视觉化的、尤其是能动起来的东西才能吸引注意力。但对于一个非程序员用户来说，前端能力很重要。我们日常的交互原型是用Gemini或者Cursor做的，临时给博物馆做个静态网站用的是Trae，我闺女科学课上的一些复杂概念我也会写个动态的演示页面，辅助讲解。下面是给我闺女做的演示案例，之前要用5～8轮才可以完成，用新模型一次就搞定了。

很多人吐槽自媒体们（包括我）只展示Gemini 3.0的前端能力，非常片面。确实是这样，在社交平台，视觉化的、尤其是能动起来的东西才能吸引注意力。但对于一个非程序员用户来说，前端能力很重要。我们日常的交互原型是用Gemini或者Cursor做的，临时给博物馆做个静态网站用的是Trae，我闺女科学课上的一些复杂概念我也会写个动态的演示页面，辅助讲解。下面是给我闺女做的演示案例，之前要用5～8轮才可以完成，用新模型一次就搞定了。

陈言Linkc-Chen

50,180 views • 9 months ago

学习这个用 Anime.js 的 scrambleText 做了一个文字切换滚动的特效让 Codex 重新设计和整理了一下，支持各种字符 blocks / symbols / numbers / braille ，真的好帅啊，特别适合 geek 风网站的标题滚动效果之后准备封装成一个 npm 包，支持不同框架，并且可以快速使用。还有就是 Anime.js 好强啊，觉得做动画效果他真的是第一选择。

学习这个用 Anime.js 的 scrambleText 做了一个文字切换滚动的特效让 Codex 重新设计和整理了一下，支持各种字符 blocks / symbols / numbers / braille ，真的好帅啊，特别适合 geek 风网站的标题滚动效果之后准备封装成一个 npm 包，支持不同框架，并且可以快速使用。还有就是 Anime.js 好强啊，觉得做动画效果他真的是第一选择。

Viking

44,493 views • 3 months ago

OpenAI 刚给 Codex 加了个录屏回放功能，有点意思。你在 Codex 里做的那些操作流程——写代码、调 API、跑测试、部署上线——它全给你录下来，存成一个可复用的 "AI 技能"。下次遇到类似的活儿，直接回放，不用重新来一遍。说白了就是把你的人工操作变成了一段 AI 可以自己重复跑的自动化流程。

OpenAI 刚给 Codex 加了个录屏回放功能，有点意思。你在 Codex 里做的那些操作流程——写代码、调 API、跑测试、部署上线——它全给你录下来，存成一个可复用的 "AI 技能"。下次遇到类似的活儿，直接回放，不用重新来一遍。说白了就是把你的人工操作变成了一段 AI 可以自己重复跑的自动化流程。

Vincent

14,794 views • 2 months ago

只需要一个 IP，就能出一整套角色延展和角色动画，下面这个视频我用了Ai 半天时间就搭建出来的效果，不知道大家有没有兴趣了解，我周末做一个全流程的视频讲解，从 IP生成、角色动画到开发交互给大家一次讲清楚

只需要一个 IP，就能出一整套角色延展和角色动画，下面这个视频我用了Ai 半天时间就搭建出来的效果，不知道大家有没有兴趣了解，我周末做一个全流程的视频讲解，从 IP生成、角色动画到开发交互给大家一次讲清楚

Paidax

197,863 views • 10 months ago

建议大家都去用 Codex 做视频，全自动化太爽了！我只把Giggle Academy 的官网发给 Codex，其他什么都没说，它就自动去调查整个网站、分析内容、抓图片然后调用 HyperFrames（一个能让 AI 把动画代码直接渲染成专业 MP4 视频的工具）剪辑，10分钟就生成了这种质量的宣传片... 全程我完全没干预，它自己调研、自己策划、自己设计动画、自己加字幕、自己配音乐，然后自己输出成视频... 如此低成本就做出这种质量的视频，我真的为剪辑师捏一把汗😂 CZ 🔶 BNB 大表哥以后做产品宣传视频，还请剪辑师吗👀

建议大家都去用 Codex 做视频，全自动化太爽了！我只把Giggle Academy 的官网发给 Codex，其他什么都没说，它就自动去调查整个网站、分析内容、抓图片然后调用 HyperFrames（一个能让 AI 把动画代码直接渲染成专业 MP4 视频的工具）剪辑，10分钟就生成了这种质量的宣传片... 全程我完全没干预，它自己调研、自己策划、自己设计动画、自己加字幕、自己配音乐，然后自己输出成视频... 如此低成本就做出这种质量的视频，我真的为剪辑师捏一把汗😂 CZ 🔶 BNB 大表哥以后做产品宣传视频，还请剪辑师吗👀

梭哈.AI

119,690 views • 3 months ago

Claude Code 新增了一个 /powerup 交互式教学模式可以在终端里可直接进行交互式学习在终端里输入这个命令，会启动一套交互式课程，带动画演示，手把手教你怎么用 Claude Code。比如你刚装完 Claude Code，不知道从哪开始，输入 /powerup 它会用动画演示展示基础操作流程，斜杠命令怎么用、文件怎么引用、怎么跑 bash 命令，边看边练。不用切到浏览器查文档，不用看 YouTube 视频，直接在你工作的环境里学。

Claude Code 新增了一个 /powerup 交互式教学模式可以在终端里可直接进行交互式学习在终端里输入这个命令，会启动一套交互式课程，带动画演示，手把手教你怎么用 Claude Code。比如你刚装完 Claude Code，不知道从哪开始，输入 /powerup 它会用动画演示展示基础操作流程，斜杠命令怎么用、文件怎么引用、怎么跑 bash 命令，边看边练。不用切到浏览器查文档，不用看 YouTube 视频，直接在你工作的环境里学。

小互

35,224 views • 4 months ago

Claude Opus 4.8 出来之后，我第一时间拿它做了个小测试。给我们ZenStellar 的 AI 陪伴手链做产品展示页，我一直想做一个能让用户近距离观察手链细节的网站：鼠标移动可以放大看水晶纹理、芯片主珠的细节，像在珠宝展厅里看产品一样。原本以为这种页面至少要折腾半天，结果把手链细节图丢给 Claude Opus 4.8，再给它一段提示词，大概 5 分钟左右，一个可用的 Demo 就出来了。比较惊喜的是，它不只是生成静态网页，而是真的把产品展示逻辑想明白了：悬浮、缩放、视差、灯光效果这些细节都直接帮我做了出来。不过最近直接使用 Claude 其实有点麻烦，我身边不少朋友都遇到过账号限制或者地区问题。我这次是在 ZenMux 里面直接调用 Claude Opus 4.8，用起来就顺手很多，也不用来回切账号或者切平台。对于做独立站、产品展示页或者 Kickstarter 页面的人来说，Claude Opus 4.8 现在已经不是写代码工具了，更像是一个懂设计的前端合伙人。说实话，如果放在两年前，我肯定不会相信一个产品展示页能在几分钟内完成第一版。大家可以从这里进去试试：

Claude Opus 4.8 出来之后，我第一时间拿它做了个小测试。给我们ZenStellar 的 AI 陪伴手链做产品展示页，我一直想做一个能让用户近距离观察手链细节的网站：鼠标移动可以放大看水晶纹理、芯片主珠的细节，像在珠宝展厅里看产品一样。原本以为这种页面至少要折腾半天，结果把手链细节图丢给 Claude Opus 4.8，再给它一段提示词，大概 5 分钟左右，一个可用的 Demo 就出来了。比较惊喜的是，它不只是生成静态网页，而是真的把产品展示逻辑想明白了：悬浮、缩放、视差、灯光效果这些细节都直接帮我做了出来。不过最近直接使用 Claude 其实有点麻烦，我身边不少朋友都遇到过账号限制或者地区问题。我这次是在 ZenMux 里面直接调用 Claude Opus 4.8，用起来就顺手很多，也不用来回切账号或者切平台。对于做独立站、产品展示页或者 Kickstarter 页面的人来说，Claude Opus 4.8 现在已经不是写代码工具了，更像是一个懂设计的前端合伙人。说实话，如果放在两年前，我肯定不会相信一个产品展示页能在几分钟内完成第一版。大家可以从这里进去试试：

Ashlyn He

32,177 views • 2 months ago

Codex 5.6 装上这 6 个插件，你比别人厉害 10 倍！你知道你和专业工程师的差距在哪里吗？真正的 Vibe Coding 全栈工程师，不只是让 AI 写代码，而是让 AI Agent 参与到完整的软件交付流程中这 6 个插件，就是 Codex 5.6 的全栈工作流套装： 1️⃣ Figma：UI/UX 设计稿直接连接开发流程，解析页面布局、组件结构和 Design System，快速转换为可运行的响应式代码。 2️⃣ Build Web Apps：从产品需求、技术架构、前后端开发到 Web App 测试验证，覆盖完整 Full Stack 开发流程。 3️⃣ GitHub：打通代码仓库、Pull Request 和 Issue 管理，让 AI Agent 参与代码分析、Bug 修复和版本迭代。 4️⃣ Browser：AI 驱动浏览器自动化测试，模拟真实用户操作，验证页面交互、用户流程和功能稳定性。 5️⃣ Codex Security：代码安全扫描，识别漏洞、敏感信息泄露和潜在风险，并提供安全修复方向。 6️⃣ Sentry：连接线上监控系统，自动分析 Error、定位异常原因，辅助生成问题修复方案。让 Codex 真正做到完整的链路闭环：设计 → 开发 → 测试 → 安全 → 部署 → 监控从此让你成为真正的软件交付专家。赶快去安装插件，试试吧！

Codex 5.6 装上这 6 个插件，你比别人厉害 10 倍！你知道你和专业工程师的差距在哪里吗？真正的 Vibe Coding 全栈工程师，不只是让 AI 写代码，而是让 AI Agent 参与到完整的软件交付流程中这 6 个插件，就是 Codex 5.6 的全栈工作流套装： 1️⃣ Figma：UI/UX 设计稿直接连接开发流程，解析页面布局、组件结构和 Design System，快速转换为可运行的响应式代码。 2️⃣ Build Web Apps：从产品需求、技术架构、前后端开发到 Web App 测试验证，覆盖完整 Full Stack 开发流程。 3️⃣ GitHub：打通代码仓库、Pull Request 和 Issue 管理，让 AI Agent 参与代码分析、Bug 修复和版本迭代。 4️⃣ Browser：AI 驱动浏览器自动化测试，模拟真实用户操作，验证页面交互、用户流程和功能稳定性。 5️⃣ Codex Security：代码安全扫描，识别漏洞、敏感信息泄露和潜在风险，并提供安全修复方向。 6️⃣ Sentry：连接线上监控系统，自动分析 Error、定位异常原因，辅助生成问题修复方案。让 Codex 真正做到完整的链路闭环：设计 → 开发 → 测试 → 安全 → 部署 → 监控从此让你成为真正的软件交付专家。赶快去安装插件，试试吧！

govin.eth | G哥

61,930 views • 9 days ago

这个工具火了，可以用自然语言一键生成安卓和iOS App，Emergent刚上的新功能以前可以用vibecoding做网页，现在直接出Android / iOS 安装包，比如“帮我做个记账App”即可另外还上了一个Emergent Pro模式，Agent能力更强，能处理错误、动态调整计划，内置Linux 虚拟机，可访问互联网网友反馈Emergent的一键生成体验比较好，输入需求即可获得完整应用，从规划到编程、测试、调试和部署，端到端自动化 #AIagent #Emergent #APP生成工具

这个工具火了，可以用自然语言一键生成安卓和iOS App，Emergent刚上的新功能以前可以用vibecoding做网页，现在直接出Android / iOS 安装包，比如“帮我做个记账App”即可另外还上了一个Emergent Pro模式，Agent能力更强，能处理错误、动态调整计划，内置Linux 虚拟机，可访问互联网网友反馈Emergent的一键生成体验比较好，输入需求即可获得完整应用，从规划到编程、测试、调试和部署，端到端自动化 #AIagent #Emergent #APP生成工具

AIGCLINK

64,446 views • 1 year ago

我用 AI 制作了一条广告片。成本不到 10 美金，播放量突破8W。很多人问我怎么制作的？这次我把完整流程拆出来：从产品、人物、、镜头设计，到最后成片逻辑。每个提示词、每个技巧，都放在下面⬇️。

我用 AI 制作了一条广告片。成本不到 10 美金，播放量突破8W。很多人问我怎么制作的？这次我把完整流程拆出来：从产品、人物、、镜头设计，到最后成片逻辑。每个提示词、每个技巧，都放在下面⬇️。

小宇Chengzi

21,817 views • 2 months ago