AI 做的落地页总有股 AI 味？一位设计师把自己的做法写成了 Skill

一位设计师两个月做的一面墙

这个 Skill 最先火起来，是因为作者在 X 上发了一段视频，一口气翻过一整排落地页，配的话大意是：这些都是我最近两个月做的，用的是 Higgsfield、Claude 和 Cursor，再加上我自己写的一个设计 Skill，这个 Skill 开源了。

下面两张是那段视频里的截图。第一张是一个产品首页的首屏：

第二张是同一批作品里的一个 404 页面，就是网址打错时看到的那一页，也认真做了设计：

这条帖子到 10 月 27 日有一万多人点赞，收藏数比点赞数还高，一万八千多，说明很多人是存下来准备自己动手的。仓库 7 月底建的，到 10 月 27 日有 7881 个 star，MIT 协议，个人商用都免费，作者前一天还在更新。

有一点要先说清楚：Skill 本身不画图。 页面里那些很抢眼的插画，作者是配合 Higgsfield 这个 AI 画图工具做的，Skill 管的是页面结构、文案和排版规矩。这一点后面讲怎么用的时候还会提。

它先问问题，再做页面

仓库里现在有两个 Skill，主角是 landing-page-design。它分成前后两半，前一半管「这页要说什么」，后一半管「这页长什么样」，而且规定必须先把前一半做完。

前一半开头是一组问题，要求 AI 一次性问完，不要挤牙膏：

• 这页只要访客做的那一件事是什么，报名、预约、购买还是下载；
• 访客是谁，他们现在为什么还没下决定，最大的三个顾虑是什么；
• 他们从哪儿来的，广告、搜索、社交平台还是邮件；
• 你手上有什么能证明自己的东西，客户评价、数字、案例、截图；
• 你希望的语气，轻松一点还是正式一点。

你答不上来也没关系，它会自己做一个合理的假设，用一句话告诉你，然后接着往下做，不会卡住。

问完之后，它不急着写代码，先把方案摆给你看：页面分几段、首屏的标题副标题和按钮怎么写、三到五条好处、三步讲清怎么用、六到十二个常见问题，最后推荐用哪种版式、为什么。你看过点头了，它再一段一段地做，先做首屏，再做好处、流程、案例、问答，最后是页尾的按钮。

文案上它也有一套讲究，我挑几条你自己写东西也用得上的：

• 一页只放一个主按钮。 首屏不能同时摆两个抢注意力的按钮。
• 按钮上写「动词加你能拿到什么」，比如「开始免费试用」「预约演示」「领取清单」，不写「了解更多」「提交」。
• 说具体的。不写「节省时间、提升效率」，写「每周的报表从 4 小时缩到 15 分钟」。
• 它还列了一串禁用的空话，「革命性」「毫不费力」「世界一流」「提升到新高度」这一类，一律换成大白话说清楚产品到底干了什么。

后一半：一整套「不许乱来」的视觉规矩

后一半是作者自己的设计规矩，写得非常细，AI 要按表取值，不能临场发挥：

• 字体：只用 Geist、Manrope、Poppins 这几款，明确不用 Inter、Roboto、Arial 这些最常见的；全站只用一种字体，不用斜体，不用最粗的那一档。
• 间距：只能从一张表里的 13 个数值里挑，表外的数一律不许用。
• 圆角：大框套小框时，小框的圆角要按公式算，看着才顺。
• 背景：一律纯色，不用渐变。
• 动效：统一用一条「先快后慢、稳稳落定」的节奏曲线，不用浏览器默认的那种匀速动画；访客在系统里关了动画的，页面也要跟着收敛。
• 还有一节必须要有：页面中间要有一段大字标语，滚动到那儿时，字一个一个从浅灰亮起来。

最后还有一张上线前的检查清单，都是容易忘的小事：页脚要有隐私政策和服务条款、404 页面要单独设计、表单要检查邮箱格式、每张图要有文字说明、网页图标要换成自己的。上面那张宇航员的 404 页，就是这条规矩做出来的样子。