前两天，我在 X 上刷到一条帖子。
网页很好看，有 4 千多个赞。下面是视频效果
花了一天时间，也复刻出了一版自己的动态首页。
01｜它不是纯用代码写的，而是代码加视频
我原以为，复刻这个首页，就是把它重新用代码写一遍。
普通首页：所有内容都在一个平面里
常见的首页像搭积木：先划出导航、文字、图片等区域，再往每个区域里放内容。
比如，一个常见的 SaaS 首页通常这样排：
动态首页：让代码浮在视频上
这个首页没有给视频单独划一块区域。
看起来是一个页面，实际是两个前后叠放的平面。
先锁住构图，再让画面动起来
这一步靠首图定位。
制作视频之前，先把首页架构定好：左边放文字，右边放画面。然后按照这个架构生成首图，把木偶和手放在右边，把左边完整地空出来。
生成视频时，不让模型重新构图，而是把这张首图作为第一帧。左边继续留空，右边主体只在原来的区域运动。
视频完成后，代码再把标题、导航和按钮放进左边的空白区域。
看起来是视频决定页面，实际是页面架构先决定视频。
02｜同一套方法，做出三种不同的首页
木偶是一次复刻。后面两个，是我用同一套结构做出的新首页。
它们共用的不是风格，而是结构：先给文字留出左侧空位，再把主体放进右侧；视频只让主体完成一个有意义的动作。
01｜船闸
要表达的事：把 AI 能力推进真实工作。
画面怎么动：巨手转动阀门，闸门打开，小船前行。
02｜光圈
要表达的事：把前沿AI 聚焦到一件真实工作。
画面怎么动：巨大的光圈缓慢收束，一束光落在画面中央。
三个画面不同，但顺序一致：先定首图，再让视频 动起来，最后叠上可编辑的网页内容。
03｜我把这套方法做成了一个首页设计 Skill
我把这次复刻的流程整理成了一个开源的首页设计 Skill，名字叫 chengfeng-landingpage 。
第一步：把 Skill 装进 Agent
打开 Agent，把下面这段话发给它：
帮我安装首页设计 Skill：chengfeng-landingpage
安装命令：
npx -y github:Agentchengfeng/chengfeng-landingpage install第二步：把资料发给 Agent
把个人介绍、文章、作品或产品资料发给 Agent，然后输入：
/chengfeng-landingpageAgent 会直接生成首图。没有生图能力时，它会给你一条 image2 提示词；生成图片后，再发回给 Agent。
第三步：让首图变成视频
我这次用 Seedance 2，把首图直接做成了视频。
如果你的 Agent 不能直接生视频，它会给你一条图生视频提示词：
第四步：把视频放进首页
把 MP4 发回给 Agent。它会完成首页第一屏，并在浏览器里打开；标题、导航和按钮都可以继续修改。
这样，一个会动的首页就完成了。
04｜当视频生成越来越便宜，首页会更像一段短片
这次复刻给我最大的启发，不是“可以用 AI 做一个酷页面”，而是 AI 编程可以有另一种语言。
随着生视频成本越来越低，过去只有广告片、品牌片才会有的画面，会慢慢进入个人主页、作品集和产品首页。一张定好构图的首图，加一个克制的动作，就能让页面有自己的气氛、材质和情绪。
这不意味着每个网站都要塞视频。代码仍然负责内容和操作，视频只负责让人先感受到一种风格。
