本文是Remotion入门系列的第一篇，介绍基于React的视频制作工具Remotion及其常用组件。作者整理了十个官方动态案例，包括旋转文字轮、文字高亮、画中画转场、柱状图、地图飞行、胶囊字幕、示波器、屏幕消息、旋转卡片和液态轮廓，说明各自适用场景。文章还推荐了Remotion Elements、RenderComp Free、RemotionUI、Remocn、snapcn等资源站点，帮助读者通过代码控制视频效果，更顺畅地与AI协作制作产品演示和口播动画。
作者通过四个实操案例展示如何用 Astra 进行视觉动效高保真复刻：高级动效视频复刻、业务介绍动效视频改写、ElevenLabs 动态背景复刻（WebGL+GLSL 技术栈）以及语音交互光球效果移植。文章强调分步验证、单点把控的方法论，如先验证背景再加图文音轨、把视觉效果与交互功能拆开验证等，并分享核心提示词「一边参考原片一边修改直到近乎一样」，总结 AI 自查与人工定点反馈两种协作路径，附通用 Prompt 模板与止损建议，展示普通人无需懂代码也能参与 AI 视觉制作的生产力价值。
作者学习了Punk大佬的网页系列教程，利用周末两天时间，通过Codex独立完成了一个个人网页的开发并成功上线。文章分享了三个核心经验：1. 开发前需与AI充分沟通设计方案，确保方案清晰可执行；2. 迭代时可将对标网页的动效录屏给AI，通过拆帧理解并复述确认；3. 若无法清晰描述动效，可让ChatGPT生成布局图，再交给Codex实现。作者强调与AI交互的重要性，并计划继续优化网页。
作者整理了 20 种与动画、物理、3D、声音及交付相关的开源技能与工具库，涵盖 Remotion、HyperFrames、Anime.js、React Spring、PixiJS、p5.js、Paper.js、Matter.js、Three.js、Rapier、OGL、tsParticles、glTF Transform、GL Transitions、OBS Studio、Chatterbox、Tone.js、faster-whisper、OpenCut 和 FFmpeg。每个工具附有简介和 GitHub 链接，覆盖从视频渲染、动画编排、图形绘制到配音、字幕转录和视频编码交付的完整创作流程。
文章介绍了 Codex 的 UI/UX 设计增强工具 UI UX Pro Max，包含 192 条行业设计规则、79 种 UI 风格、192 套配色方案、74 种字体组合，并支持 React、Next.js、Vue、Flutter 等 22 种技术栈。作者演示了如何通过一段提示词在 Codex 中安装配置该 Skill，并用其生成高端 AI SaaS 官网，解决了以往 AI 生成页面廉价感强、配色布局千篇一律的问题。评论区也讨论了 Skill 作为能力封装新形态的意义与实际效果。
作者分享了用 Claude 编写程序生成动画的完整攻略。Claude 不直接生成视频画面，而是通过写代码逐帧渲染视频。文章梳理了 4 条技术路线：代码生成视频（Remotion、HyperFrames、Manim 等）、网页即动画（Claude Artifacts、p5.js、Three.js）、通过 MCP 操作专业软件（Blender、After Effects），以及 AI 素材与代码组装的混合编排。同时总结 11 种动画风格，包括产品发布片、动态排版、数据信息图、数学讲解、名画风、生成艺术、3D 场景等，每种风格附样例、适用场景和工具推荐，并附有素材来源、提示词模板、做片流程和开源 skill，是一份可直接上手的实操指南。
本文介绍用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，适合从零搭建或迭代优化个人网站时收藏使用。
这是一篇面向零基础用户的详细教程，作者手把手讲解如何从零安装 Claude 客户端，通过 CC-Switch 工具一键导入第三方模型供应商的中转配置，避免官方账号注册与封号问题，再进入 Claude Code 页面选择文件夹和 Opus 5.5 模型。教程覆盖 Mac 与 Windows 双平台，包含客户端安装、CC-Switch 配置导入的常见坑、密钥创建与启用等步骤。最后作者用两段提示词让 Claude 搭建 Remotion + React + TypeScript 环境，并生成一支抽象风格的国庆放假宣传片，展示了 AI 编程工具在视频制作上的实际效果。
作者分享了使用 Codex 结合 Remotion 制作动画的实战经验。文章指出写代码反而是最简单的部分，难点在于动画的节奏、连续性和可读性等细节判断。作者介绍了 Remotion 的帧驱动原理、useCurrentFrame 和 interpolate 等核心 API，以及如何通过 Remotion 官方 Agent Skills 让 Codex 更高效地生成动画代码。文章还系统讲解了时间、状态、Keyframe、Easing、Spring 等动画基础概念，并结合自媒体口播视频的 A-roll、B-roll、动画三类画面整合需求，说明了构建完整视频生产工作流的方法与踩坑经验。
开发者Hailey发布了开源项目video-shotcraft，将Codex转化为产品视频导演。该项目能自动完成视觉定调、分镜设计、动画实现等流程，内置104套镜头配方、161种动效预览和149个音效，帮助非专业人士制作SaaS、App等产品的电影感宣传片。
React Bits 是一个包含140+免费组件的动画组件源码库，支持复制源码或通过 shadcn CLI 安装。它适合制作产品官网、作品集等需要强视觉效果的页面，可与 shadcn/ui 搭配使用，但需注意部分组件对性能的影响。
本文介绍如何利用 Claude Code 和 Remotion，无需编程和剪辑基础制作自媒体视频。文章详细讲解了从搭建模板、策划脚本、生成配音到渲染成片的完整流程，并提供万能提示词及变现建议，帮助读者通过 AI 提升内容生产效率。
文章指出在交互和视频制作中，单纯向 AI Agent 描述动画效果往往效率低下且容易产生误解。为了解决这个问题，文章推荐了一个简短的视频教程，该视频整理并演示了 13 类常见的 Motion 动效名称（如 Push Slide, Staggered Entrance, FLIP 等）。掌握这些标准术语，可以帮助用户更准确地向 AI、设计师或开发者表达需求，大幅提升沟通效率。
