AI 做的网页已经形成了一套固定审美：大标题、渐变背景、三个并排的功能卡片、一排头像几个数字。单看每一处都挑不出错，拼在一起就是那股熟悉的模板味。
2026 年 10 月底，设计师 Elaya 在 X 上公开了自己两个月来用 Claude、Cursor 和 Higgsfield 做的一组网页作品，同时把背后支撑的设计规则也开源了——一份叫 landing-page-design 的 Skill 文件。灯塔照向人群的营销页、驾驶舱视角的旅行页、漂着宇航员的 404 页，都是同一套规则的产物。
这份文件值不值得拿来用，下面拆开讲。
30 秒速答
- 是什么：设计师写成 Markdown 的落地页设计规则，开源免费（MIT 许可）
- 解决什么：AI 生成网页时审美随机漂移，每次生成发明一套新标准
- 怎么用：把 SKILL.md 文本交给 Claude Code、Cursor 等支持读取规则的工具
- 在哪拿：GitHub 仓库 elayadesign/ai-design-skills，skills 目录下的 SKILL.md
- 前置条件：国内用 Claude 得先解决网络环境，见下一节
开始之前：网络环境
Claude 官网和 API 国内直连不通，这是开工前的第一道门槛。浏览器能打开 ChatGPT 不代表终端工具能用 Claude，两回事。
没解决网络的先看这篇：科学上网教程，从客户端到节点一条龙。已经能用 Claude 写代码、但终端经常连接超时的，问题多半出在终端不走系统代理，排查方法在 Claude Code 教程里写得很细。
网络通了再往下走，不然后面每一步都会卡在奇怪的超时上。
一、它管住了 AI 的三个坏习惯
这份 Skill 最先规定的不是怎么好看，而是先想清楚：一个落地页，围绕一种产品、面向一类人、推动一个主要动作。注册、预约演示、下载还是购买，先定下来。
接着它会逼你回答几个问题：访问者是谁、想解决什么问题、为什么到现在还没行动、从哪里过来、手里有哪些真实的截图和案例。
这些问题不炫，但直接决定页面长相。同一款视频工具，给没听过的人看，先放成片；给准备试用的人看，给入口和价格就够了。把两种人塞进同一张页面，就会越做越满——AI 味的第一个来源，其实是需求没想清。
第二个坏习惯是整页重做。Skill 要求按区块推进：首屏、收益、流程、案例，逐块往下。改一句标题没必要让后面的布局跟着重新抽签。
第三个是「高级一点」这类指令。字体、字号、间距、圆角全部写成了可执行的选择，具体到什么程度，下一节拆。
二、把审美写成具体规则
字体：只允许 Geist、Manrope、Geist Mono、Poppins 几种，一个网站一种主字体，代码和数字界面才补等宽。
字号：不能随手写 19 或 22，从既定档位里选。
间距：8、12、16、24、32 像素，一张表管到底。这些数字本身没魔法，好处是 AI 做到第三个区块时不会给自己发明新标准。
圆角：这是最见功力的一条。外层卡片 16 圆角、内嵌图片经常被 AI 设成同样的 16，看着总不贴合——Skill 规定内层圆角等于外层减去间隙：外 16、间隙 8，里面就用 8。
布局：大标题别把一个词单独甩到最后一行；正文别横跨整个屏幕；图标别混用几套粗细不同的线条。
配色：限制深色底和渐变的滥用，首屏标题可以用指定的文字渐变。配套的改版 Skill 更直接，把满大街的紫蓝 AI 渐变点了名。
视觉张力可以从图片、光线和构图来，界面本身不必同时争着发光。
三、好看之后，还得像个能用的东西
Skill 对交互状态的要求很全：按钮的划过、按下、键盘聚焦、加载中，空页面不能一片白，报错别只弹一个 Oops，404 也要接着网站的视觉语言做下去——Elaya 那个宇航员 404 页就是示范。
失效链接、没有返回入口、表单不校验、图片没有替代文字，这些都在交付检查清单里。
一句话：AI 写出能打开的页面之后，还得把这些状态补齐，页面才算做完。
四、中文页面别照抄
这是用之前必须知道的一件事：规则里的字体是拉丁字体，中文会回退到系统默认，行长和换行观感完全不同。字体部分要换成自己的中文字体清单，档位和间距的思路可以保留。
动效也别全盘照搬。文件里连大段标语的逐字显现都设成了必选项，每张页面都这么做，很快会长出另一种模板味。
还有一条底线：Skill 建议把整齐的假数字改成更自然的数字来消除占位感，但真实上线时，用户数、评分、客户评价必须用真实材料。小数点不会把编造变成证据。
五、怎么用：完整流程
- 打开仓库，复制 skills/landing-page-design/SKILL.md 的文本
- 交给支持读取规则文件的工具——Claude Code、Cursor 都行，工具怎么选看 AI 编程 Agent 横评
- 第一次别让它改全站，先让它结合现有页面列问题和首屏建议
可以直接抄的起手提示词：
先阅读这份设计规则和我的现有页面。页面面向第一次了解产品的人，主要动作是预约演示。请先列出影响理解和视觉一致性的问题，再给首屏修改建议，保留现有功能。没有依据的客户评价和数字不要补写。
手里已经有网站、只想改版不想重做的，配套还有一份 redesign-skill：先读现有代码查框架和样式，诊断过宽的正文、全居中、三列等大卡片这些症状，然后按字体配色 → 交互状态 → 布局间距的顺序小步改，不推倒重来。
常见问题
Claude 网页设计 Skill 是什么？
设计师 Elaya 公开的一份 Markdown 设计规则文件，放在 GitHub 仓库 ai-design-skills 里，MIT 许可免费可用。把它交给支持读取规则文件的 AI 编程工具（Claude Code、Cursor 等），AI 生成的落地页会遵守字体、间距、圆角、状态这些具体规范，而不是每生成一次就随机发明一套审美。
这份 Skill 收费吗？
不收费。仓库 MIT 许可开源，任何人可读可用可改。配套的旧网站改版 Skill redesign-skill 在另一个仓库，同样公开。
国内能用 Claude 做网页吗？
能，但 Claude 官网和 API 国内直连不通，先解决网络环境再开工，具体节点和客户端配置看科学上网教程，终端工具的代理细节看 Claude Code 教程。
Skill 里的字体和字号档位适用中文页面吗？
不直接适用。规则里的 Geist、Manrope 等是拉丁字体，中文会回退到系统默认字体，行长和换行观感也完全不同。字体部分要换成自己的中文字体清单，档位思路可以保留。
不会写代码能用它做网页吗？
可以，配合 Cursor、Claude Code 这类 AI 编程工具，用自然语言描述需求即可。但落地页上线前的事实性内容（用户数、评价、案例）要自己核实填写，AI 会按 Skill 要求留出位置但不该替你编数字。
哪里下载这份 Skill？
GitHub 搜 elayadesign/ai-design-skills，打开 skills 目录下的 landing-page-design 文件夹，SKILL.md 就是完整设计规则，直接复制文本即可使用。
写在最后
这份 Skill 最值得学的不是那几个字号档位，而是它把「不满意」往下拆的能力：到底是字太散、图片没在讲同一件事，还是按钮和报错根本没做完。判断写清楚了、沉淀成文件了，下次就不必再从「帮我做得高级一点」开始。
AI 工具的横评和选型在 AI 工具指南，刚起步的从 ChatGPT 入门开始补基础。