免费落地页设计规则库：Claude Code与Cursor实测指南

AI编程助手写出来的落地页，十有八九长一个样：大标题居中、三个图标并列、一个渐变按钮。这种"AI审美"已经成为开发者圈子的公开吐槽。一位叫 Elia 的设计师把解决方案直接开源了——一份专为 Claude Code 和 Cursor 准备的落地页设计技能，MIT 协议，完全免费，在 GitHub 上已经拿到接近 9000 颗星。

这个技能到底怎么用

据 YouTube 频道对这份技能的介绍，它的名字叫 Landing Page Design，本质是一份结构化的 markdown 指令文件，放进 Claude Code 或 Cursor 的项目里就能被读取和执行。

使用流程的第一步不是让它写代码，而是先"审问"你三个问题：你的产品/服务是什么（offer）、面向谁（audience）、你希望访客完成的唯一动作是什么。这三个答案决定了后面所有设计决策的走向，也避免了 AI 在信息真空里自由发挥、产出一堆放之四海皆准的模板文案。

从结构开始，而不是从颜色开始

拿到这三个答案后，技能会规划出 12 个页面区块，从主标题开始，一路排到 FAQ 和最终的行动按钮。先定骨架再填肉，这个顺序本身就很设计。很多 AI 生成页面的问题恰恰出在跳过结构、直接堆视觉元素，结果页面看起来挺花哨，转化路径却是断的。

视觉规则是硬约束

真正的差异点在字体和间距这两块。技能把字体限制在一个白名单里：Geist、Manrope、Geist Mono、Poppins、Never、Intel、Roboto。间距则从一份固定的 13 个数值列表里取值。

这种"限制作业"的思路值得展开说说。生成式 AI 的默认行为是尽可能发散，而设计恰恰需要收敛——字体选择太多、间距随手设定，页面就会失去节奏感。用白名单和固定数值把可选空间压窄，反而让输出更接近专业设计的质感。这和很多设计系统的底层逻辑是一致的：约束不是自由的敌人，是质量的保证。

Claude Code 与 Cursor 是当前两类主流的 AI 编程工具形态。Claude Code 是 Anthropic 推出的命令行代理工具，运行在终端中，能够读写项目文件、执行命令并自主完成多步任务；Cursor 则是基于 VS Code 改造的编辑器，把 AI 对话、代码补全与上下文检索内置到 IDE 里。两者都支持通过项目内的 markdown 文件（如 CLAUDE.md、.cursorrules 或规则目录）向模型注入持久化的指令与约束。所谓「技能」，本质上就是这类被工具自动读取的规则文档——它不改动模型权重，而是通过上下文注入影响生成行为，因此可移植、可版本化，也便于团队共享和二次修改。

字体白名单里的几个名字值得稍作说明。Geist 与 Geist Mono 是 Vercel 发布的开源字体家族，前者为无衬线正文体、后者为等宽体，带有明显的现代科技产品气质；Manrope 是一款几何风格开源无衬线字体，常用于简洁的 SaaS 界面；Poppins 源自印度字体项目，字形圆润、几何感强，适合友好型品牌；Roboto 是 Google 的系统级字体，覆盖面广、兼容性好。把候选字体压缩到这一小撮，实质上是预先替使用者完成了字体配对与调性筛选，避免出现衬线体与几何无衬线体随意混搭、或引入商用授权风险字体的问题。间距的固定数值列表起的是同样的作用：用一套有节奏的刻度替代随手填写的像素值，让区块之间的留白保持内在一致性。

Redesign：给已有页面做减法

同一个设计师还发布了另一个免费技能叫 Redesign。用法很直接：把它指向你已经上线的网站，它会找出页面里的"通用化模式"——也就是那些一看就是模板痕迹的地方——然后动手修复。

这两个技能形成了互补：Landing Page Design 管从零开始，Redesign 管存量改造。对于手里已经有一堆 AI 生成页面、又不知道怎么系统改进的团队来说，后者的实用价值可能更高。

几个需要留意的坑

动效技能已不在仓库中

视频里给了一个明确提醒：关于 motion 动效的那个技能，从当天起已经不在这个仓库里了，新仓库尚未公开。如果你在网上看到有人推荐它、链接却打不开，原因就在这里。

星数不等于设计质量

接近 9000 颗星是很亮眼的数字，但视频本身也在提醒：star 多不代表设计就好。

这个提醒相当克制，也相当必要。GitHub 的星标反映的是传播度和话题热度，不是实际产出效果。同一份规则库，用在不同的产品、不同的品牌调性上，效果会差很远。最靠谱的验证方式只有一个：拿你自己的页面跑一遍，看看出来的东西能不能用。

GitHub 星标是一种单向、低成本的收藏行为，用户点星往往发生在「看到一条推文或视频、觉得有用、先存下来」的瞬间，而非真正使用并验证之后。因此星数更接近传播指标，衡量的是曝光与话题度，与仓库内容的实际有效性之间存在明显偏差。判断这类规则库是否值得采用，更可靠的信号包括：是否有具体的使用示例与产出截图、issue 区是否有人反馈实际效果、规则是否持续更新、以及作者是否说明了适用边界。最直接的检验仍然是把它接入自己的项目跑一遍，用真实产品信息生成页面，再对照转化目标做人工评估。

为什么这类"设计规则库"值得关注

把设计师的判断力编码成 AI 可执行的约束，正在成为一种新的协作形态。过去要获得这种级别的设计指导，要么雇一位设计师，要么啃完一整本设计规范。现在它以 markdown 文件的形式存在，MIT 协议，随手就能接进工作流。

对个人开发者和小团队来说，这意味着门槛的实质性下降——不必懂字体配对和间距体系，也能让 AI 帮忙产出一个结构完整、视觉不跑偏的落地页。对更有经验的团队，它的价值则在于把设计规则显性化，变成可以讨论、可以修改、可以版本化的东西。

需要保持清醒的是，规则库解决的是"下限"问题：让 AI 别产出太差的东西。至于上限——真正打动人的设计——仍然需要人来做判断。工具负责消除平庸，人负责制造惊喜。