我复刻了一条 4000 赞的博客首页，开源首页设计 Skill

我复刻了一条 4000 赞的博客首页，开源首页设计 Skill

原创

成峰 成峰

AI产品自由

在小说阅读器读本章

去阅读

在小说阅读器中沉浸阅读

前两天，我在 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-landingpage

Agent 会直接生成首图。没有生图能力时，它会给你一条 image2 提示词；生成图片后，再发回给 Agent。

第三步：让首图变成视频

我这次用 Seedance 2，把首图直接做成了视频。

如果你的 Agent 不能直接生视频，它会给你一条图生视频提示词：

第四步：把视频放进首页

把 MP4 发回给 Agent。它会完成首页第一屏，并在浏览器里打开；标题、导航和按钮都可以继续修改。

这样，一个会动的首页就完成了。 04｜当视频生成越来越便宜，首页会更像一段短片

这次复刻给我最大的启发，不是“可以用 AI 做一个酷页面”，而是 AI 编程可以有另一种语言。

随着生视频成本越来越低，过去只有广告片、品牌片才会有的画面，会慢慢进入个人主页、作品集和产品首页。一张定好构图的首图，加一个克制的动作，就能让页面有自己的气氛、材质和情绪。

这不意味着每个网站都要塞视频。代码仍然负责内容和操作，视频只负责让人先感受到一种风格。

但当更多人能把自己的资料做成一段会动的画面，我觉得，世界会越来越丰富多彩。

预览时标签不可点

微信扫一扫 关注该公众号

知道了

微信扫一扫 使用小程序

取消 允许

取消 允许

取消 允许

× 分析

微信扫一扫可打开此内容， 使用完整服务

： ， ， ， ， ， ， ， ， ， ， ， ， 。

视频 小程序

赞 ，轻点两下取消赞 在看 ，轻点两下取消在看 分享 留言 收藏 听过

原文地址: https://mp.weixin.qq.com/s?__biz=MzU3MjU5Mzc2Nw==&mid=2247490064&idx=1&sn=c419f6f06b8108337a0eca334ffeaefc&chksm=fd3f97f43d240e4b1a3afac6f352bd3e2d5c1e5997c799a6555e0c992d02d46e1ec690141f04&mpshare=1&scene=1&srcid=0729xx83XFFzTjkqtgZQyhUb&sharer_shareinfo=912f5fb0edd326bdc98c904906d43efd&sharer_shareinfo_first=912f5fb0edd326bdc98c904906d43efd#rd