作者通过四个实操案例展示如何用 Astra 进行视觉动效高保真复刻：高级动效视频复刻、业务介绍动效视频改写、ElevenLabs 动态背景复刻（WebGL+GLSL 技术栈）以及语音交互光球效果移植。文章强调分步验证、单点把控的方法论，如先验证背景再加图文音轨、把视觉效果与交互功能拆开验证等，并分享核心提示词「一边参考原片一边修改直到近乎一样」，总结 AI 自查与人工定点反馈两种协作路径，附通用 Prompt 模板与止损建议，展示普通人无需懂代码也能参与 AI 视觉制作的生产力价值。
本文是Remotion入门系列的第一篇，介绍基于React的视频制作工具Remotion及其常用组件。作者整理了十个官方动态案例，包括旋转文字轮、文字高亮、画中画转场、柱状图、地图飞行、胶囊字幕、示波器、屏幕消息、旋转卡片和液态轮廓，说明各自适用场景。文章还推荐了Remotion Elements、RenderComp Free、RemotionUI、Remocn、snapcn等资源站点，帮助读者通过代码控制视频效果，更顺畅地与AI协作制作产品演示和口播动画。
作者学习了Punk大佬的网页系列教程，利用周末两天时间，通过Codex独立完成了一个个人网页的开发并成功上线。文章分享了三个核心经验：1. 开发前需与AI充分沟通设计方案，确保方案清晰可执行；2. 迭代时可将对标网页的动效录屏给AI，通过拆帧理解并复述确认；3. 若无法清晰描述动效，可让ChatGPT生成布局图，再交给Codex实现。作者强调与AI交互的重要性，并计划继续优化网页。
作者开发了一个免费开源的雅思背单词网站「词光」，收录 7298 个雅思词汇，每个词配有原创插画、英音美音发音和例句真人配音（使用 ElevenLabs 生成）。网站无需注册即可使用，通过词汇星图点亮星星的互动方式增加学习趣味。文章发布后获得大量好评，网友建议包括做成 App、支持自定义每日单词量、优化字体、改善配图记忆技巧等，作者均积极回应并表示会跟进改进，还计划支持初高中词库和扩展到其他学习领域。
本文介绍用AI搭建个人网站的最佳实践：先整理个人内容到飞书文档，再参考优质网站让AI抓取代码与风格。作者系统整理了8大类60多个网页设计资源，涵盖组件库（shadcn/ui、Aceternity UI、Magic UI等）、动效与3D工具（Motion、GSAP、Three.js、Spline等）、整站灵感网站（Awwwards、Land-book等）、产品界面参考（Mobbin、Page Flows等）以及配色素材、AI建站和Claude Skills等类别。每个资源均附特色说明与具体用法，可让AI直接复用代码和Prompt，适合从零搭建或迭代优化个人网站时收藏使用。
作者将《红楼梦》中的大观园重建为可在浏览器中漫游的三维世界，把文本与空间放进同一窗口。项目整理了二十处景致，涵盖五十九回原文、三十三首诗词和一百五十八位人物。读者可点选景致查看对应原文与诗笺，跟随第十七回贾政游园路线导览，或在漫步模式中自由行走，并可切换四季、昼夜与天气共三十六种环境状态。整个项目依据原著游园路线与北京大观园复建格局推定，最终打包为约 2.7 MB 的 HTML 文件，离线也能体验，成为一份可交互、可行走的阅读批注。
作者分享在开发 APP 时使用的 Apple Design Skill，它将 Apple WWDC 设计分享中的界面与动效原则整理成 AI 指导，帮助改善界面层级、反馈和整体连贯性，效果接近苹果原生 App 风格。该 Skill 来自 Linear 设计师 Emil Kowalski 开源的 AI Agent Skills 项目（GitHub Star 近 4w），还包括设计工程总则、动画制作与审查、原型方案生成、移动端网页优化、Swift 编写、UI 组件库选择等多个实用 Skill，适合前端与设计开发场景使用。
作者分享了使用 Vibe Coding 进行 UI 设计的实践经验，总结了 7 个关键技巧：明确页面目标、具体化视觉描述、从产品提取视觉元素、使用参考图、描述交互流程、明确限制条件、多设备测试。这些方法能帮助 AI 生成更顺眼、更完整的产品级 UI。
开发者Hailey发布了开源项目video-shotcraft，将Codex转化为产品视频导演。该项目能自动完成视觉定调、分镜设计、动画实现等流程，内置104套镜头配方、161种动效预览和149个音效，帮助非专业人士制作SaaS、App等产品的电影感宣传片。
文章指出在交互和视频制作中，单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题，文章推荐了一个简短的视频教程，该视频整理并演示了 13 类常见的 Motion 动效名称（如 Push Slide, Staggered Entrance, FLIP 等）。掌握这些标准术语，可以帮助用户更准确地向 AI、设计师或开发者表达需求，大幅提升沟通效率。
作者介绍了一套自研的视频动效系统，旨在利用AI技术辅助视频制作。该系统通过GitHub开源，用户只需三步即可生成专业视频动效：安装系统、修改文案数字、渲染下载。此外，该系统可与Codex结合，甚至喂给本地Agent（如Cola）进行动效管理。
文章介绍了 6 款适用于 AI 编程 Agent 的视频处理 Skills，包括 HyperFrames、FFmpeg、OpenMontage、Remotion、Video-Use 和 Manim。作者指出，做视频的痛点在于脚本、转码等重复性工作，通过为 AI 安装这些技能，可以实现从图文转视频、素材剪辑、批量生成到科普动画的流程自动化。文章详细对比了各工具的适用场景，并建议小白从 FFmpeg 和 Video-Use 入手。
作者基于 10 年 UI/UX 设计经验，结合 AI 工具实践，总结出一套设计审美方法论。文章实测了 5 个 GitHub 上星数最多的 AI 设计 Skill：UI UX Pro Max（自动匹配行业风格）、Taste Skill（原创设计方向）、Impeccable（逐块打磨去 AI 味）、Emil Kowalski Skills（动效细节）、Hallmark（上线前检查），并配以场景演示。作者还分享了 8 条可复用的设计原则，包括先定义再动手、拆解好设计不照搬、先出全貌再逐块改、统一视觉规则等，强调工具在变但好的设计判断力依然无法被 AI 替代。
