AI 视频创作的新范式：Codex + Remotion
文章探讨了将视频制作转化为代码工程的“视频即代码”新范式。通过结合 Codex（负责编写和迭代代码）与 Remotion（负责 React 组件渲染视频），创作者可以实现视频的组件化、参数化和版本控制，解决高频生产中的可控性与复用难题。文章详细介绍了工作流、工具链选型、项目结构搭建以及避坑指南，强调了从单次生成向系统化生产转变的重要性。
全部文档 / 标签: React
47 篇
用 Codex + Remotion 实现无痛自媒体视频日更
本文介绍了一种利用 Codex 和 Remotion 实现自媒体视频日更的工作流。通过将视频制作转化为可维护的代码项目，将脚本转变为结构化 JSON 数据，作者展示了如何搭建一条自动化的视频生产线，从而替代繁琐的手工剪辑，实现高质量内容的稳定产出。
前端动画王者GSAP发布官方Skill，赋能AI实现Apple级动效
前端动画库GSAP官方推出了全新的gsap-skills工具包。该工具支持Cursor、Claude Code等主流AI Agent，内置25+高级实战案例，涵盖Timeline、ScrollTrigger等核心技能。GSAP现全部免费开源，支持React、Vue等全框架，结合AI可瞬间生成流畅、专业的Apple级网页动效。
AI Agents: 从原理到实战的完整指南
本文是一份关于 AI 智能体的综合指南，涵盖了从基础概念到生产级系统构建的全过程。文章深入解析了 Agent 的核心工作原理，如 ReAct 循环、任务拆解和上下文工程。同时，针对中级开发者，详细介绍了多代理系统的评估体系、记忆与知识管理、安全护栏设计以及四种核心设计模式，旨在帮助读者构建可靠且高效的 AI 应用。
如何使用 Claude 进行 Vibe Code 开发（全流程教程）
本文介绍了“Vibe Coding”这一新兴的编程范式，即通过自然语言描述需求，让 AI 自动生成代码。文章详细阐述了如何利用 Claude 从零开始构建并部署个人应用，无需任何编程基础。核心步骤包括：构思真实需求、用英语描述功能、生成首个版本、迭代优化细节以及保存和分享应用。这标志着软件开发门槛的彻底降低。
在 Luffa SuperBox 上做一本「互动书」保姆级操作指南
这是一份关于如何将书籍转化为小程序互动书的实战指南。文章以《金融周期》为例，详细拆解了从内容设计（核心数学框架、反预期事件）到技术实现（Luffa 注册、数学验证、页面开发、数据代理）的全流程。作者强调AI负责代码实现，人类负责内容把关，并特别指出API密钥安全、数学公式验证及模拟器设计的关键点，旨在帮助非技术人员或AI Coder用户快速上线高质量的互动学习产品。
SkillOS 详解：自进化 Agent 的技能策展机制
文章详细解读了 Google 关于 SkillOS 的最新论文。SkillOS 是一个帮助 LLM Agent 通过管理可复用“技能”来实现自我进化的框架。该框架包含一个冻结的 Agent Executor 和一个可训练的 Skill Curator，后者利用强化学习（RL）从执行轨迹中自动提取、更新或删除技能，从而实现从经验到技能的转化。
有趣的交互式科学应用创意 Part 2
文章展示了作者开发的系列交互式科学应用 Demo，包括黑洞时空扭曲可视化、达芬奇扑翼机机制实现以及科幻彗星探测器等。作者结合了 GPT Images、Nano Banana 2 进行设计，并使用 Gemini 3.1 Pro 编写代码。文章还分享了设计灵感和前端控件交互示例，旨在打造儿时向往的科学杂志风格的互动体验。
递归智能体推理性能测试：DSPy 与 Daytona 的 100 任务实证研究
文章介绍了 Fleet-RLM（基于 DSPy ReAct 智能体与 Daytona 沙箱）在 100 个长程推理任务中的表现。实验对比了递归执行与直接 LLM 推理，结果显示递归执行将准确率从 13% 提升至 33%，并完全消除了任务失败。文章详细分析了逻辑、CS、棋类、数学和化学等不同领域的性能差异，揭示了递归架构在工具调用和错误恢复上的优势。
超越99%人的AI提示词工程：从需求结构化到迭代反馈的实战闭环
文章揭示了AI时代提示词工程的核心不仅是技巧，而是“表达需求的能力”。作者提出了一套系统化的四阶段方法论：需求结构化（COSTAR模版）、推理路径设计（CoT与Few-Shot）、结果校验（自我一致性与ReAct）以及迭代反馈（Reflexion）。通过这套闭环思维，用户可以将简单的问答转化为高质量的决策方案。
DESIGN.md：网页设计的极致工作流升级
文章介绍了一种通过创建 DESIGN.md 文件来规范 AI 辅助网页设计工作流的方法。作者指出，直接使用 AI 生成不同页面（如定价页、着陆页）时，往往会导致风格不统一。解决方法是将字体、配色、动画时间轴、布局规则等提取到 DESIGN.md 中，并将其作为上下文提供给 Claude Design。这样生成的所有页面都能保持一致的视觉风格（如 Liquid Glass 风格），从而实现从“逐个提示”到“系统化构建整个站点”的效率飞跃。
如何用 AI 构建价值 5000 美元的落地页
文章作者 Prajwal Tomar 分享了如何利用 AI 工具（主要是 Lovable）和精准的提示词，打造出一个具有电影级滚动效果、3D 模型和 Shader 动效的高端落地页。文章的核心观点是：AI 生成的页面之所以显得平庸，是因为提示词缺乏具体性。作者详细展示了从 Hero 区域的 3D 倾斜、Spline 3D 模型集成、WebGL 特效到滚动驱动的层级堆叠架构的实现过程，强调了具体参数、代码片段引用以及空间架构定义的重要性。
HyperFrames vs Remotion - a detailed rundown
文章详细对比了 HyperFrames 和 Remotion 两个代码驱动视频渲染工具的差异。作者指出，尽管 Remotion 是成熟的 React 方案，但 HyperFrames 从零构建，选择了 HTML 路线。这主要出于两个考量：一是 Agent 原生工作流，HTML 更符合 LLM 的训练数据，能激发更佳的创意输出；二是人类编辑工作流，HTML 作为渲染层和数据源，使得构建可视化编辑器更加健壮。文章还分析了两者在动画库兼容性（如 GSAP）、原生 HTML 支持以及渲染模式上的技术区别。
Claude Design 系统提示词（中文版）
这是一份 Claude 的设计系统提示词，旨在指导用户通过协作的方式，利用 HTML 创建经过深思熟虑、工程化良好的设计交付物。文档详细规定了工作流程、输出规范（如文件命名、代码拆分、版本控制）、技术限制（React/Babel 版本、样式对象命名）以及设计方法论（探索现有资源、提供多选项变体）。此外，还涵盖了文件跨项目访问、上下文管理、提问技巧等操作指南。
我开源了个新项目，让 AI 帮你盯全网热点！
文章介绍了作者“程序员鱼皮”开源的一个 AI 热点监控工具项目。该项目基于 Express 5、React 19 和 OpenRouter，支持从 Twitter、B 站等 8+ 个信息源自动抓取并分析热点内容，具备 WebSocket 实时推送和 Agent Skills 封装功能。作者旨在通过这套教程，帮助零基础学员掌握 AI 编程全流程，提升开发实战能力与求职竞争力。
我用 Claude 写了一个 DBA 运维 Agent：从零到生产的完整记录
本文记录了作者利用 Claude Code 从零搭建一个能自主诊断 MySQL 和 Linux 的 AI Agent 的全过程。文章深入浅出地讲解了基于 ReAct 模式的 Agent 核心原理，详细拆解了开发所需的“模型、工具、提示词”三要素及六步开发流程。作者分享了实际落地中遇到的坑（如 Socket 连接问题、tail 命令卡死等）及解决方案，并总结出“Agent 效果 = 模型能力 × 工具质量 × Prompt 清晰度”的公式。
Vibe Coding 2.0：成为顶尖 1% 开发者的 18 条规则
文章旨在纠正开发者在构建 MVP 时的常见错误，强调“直觉式编程”的核心在于选择不做某些事情。作者基于交付 50 多个 MVP 的经验，列举了 18 条节省时间的实用规则，涵盖技术选型与避坑指南，如使用 Clerk、Tailwind、tRPC 等成熟工具，避免从零构建认证、支付及原始 CSS。核心思想是善用生态、快速迭代，将精力集中在产品的核心价值上，而非重复造轮子。
