Landing Page Design Skill：让 AI 一键生成高转化落地页的视觉系统

Landing Page Design Skill 让 AI 编程工具拥有”高转化落地页”设计能力——从用户调研、页面结构、转化文案到字体/间距/动效的完整视觉系统，全部封装成一个开箱即用的 Skill。上线不到一个月已斩获 1,240 Star，7 月底还在持续更新，是当前设计类 Skill 中增长最猛的新晋项目之一。

GitHub：https://github.com/elayadesign/ai-design-skills
Star：1,240（截至 2026-08-22）
Forks：88
作者：elayadesign
更新：2026-07-29

功能与原则

这个 Skill 解决的是一个具体但高频的痛点：AI 生成的页面”能用但不好看”，或者”好看但不转化”。它把一整套落地页设计方法论——从需求挖掘、页面结构、转化文案到视觉规范——打包成可强制执行的规则文件，让 AI 在任何时候都遵循同一套标准，而不是随机发挥。

核心原则两条：功能优先（先搞清楚”One offer → One audience → One action”），视觉系统不可协商（字体、间距、圆角、背景、动效全部有硬性数值）。

认可度

链接

https://github.com/elayadesign/ai-design-skills

原作者

elayadesign，一个专注 AI 设计技能开发的独立开发者。同一仓库下还规划了 redesign-existing-projects（重设计现有站点的 Skill），说明这是一个有长期路线图的 Skill 系列。

介绍

落地页是数字产品的”成交现场”——用户带着明确意图到达，需要在几秒内被说服采取行动。AI 编程工具（Claude Code、Cursor、Codex 等）在生成代码方面已经非常强，但在设计层面往往缺乏系统性。

这个 Skill 的核心文件是 landing-page-design/SKILL.md，分 A/B 两部分：Part A 是内容与结构逻辑（受众挖掘→页面模块→转化文案），Part B 是硬性视觉规范（字体族、字号层级、间距数值、圆角、背景、动效时序）。两部分顺序执行——先说清楚”写什么”，再规定”怎么画”。

Skill 适用于任何 Web UI 工作：落地页、营销站、组件、仪表盘、原型，以及设计评审。当规则与框架默认值冲突时，此 Skill 文件优先级更高；当用户明确指令与规则冲突时，用户指令优先。

特点

• 双层结构：Part A（内容）× Part B（视觉）分离，逻辑清晰，避免 AI 边写边调样式导致的来回迭代
• 完整落地页模块清单：12 个标准区块（Hero → Problem/Solution → Benefits → How It Works → Social Proof → FAQ → Risk Reversal → Final CTA），直接对应”不知道下一步做什么”的卡点
• 硬编码视觉系统：字体族、字号层级、间距、圆角、背景色、动效时序全部给出具体数值，不是”建议用和谐配色”，而是”间距必须为 4px 的倍数、动效时长 200-300ms”
• 支持所有主流 Agent 工具：Claude Code、Cursor、Codex、Windsurf、Cline，SKILL.md 格式天然跨平台
• MIT 协议，可自由 Fork：可以把这个 Skill 整体 Fork 走，只改视觉系统部分，其他规则自动跟随

使用方法

Claude Code 安装：

mkdir -p .claude/skills
git clone https://github.com/elayadesign/ai-design-skills.git /tmp/ai-design-skills
cp -r /tmp/ai-design-skills/skills/landing-page-design .claude/skills/

Cursor 安装：

mkdir -p .cursor/rules
curl -o .cursor/rules/landing-page-design.md 
  https://raw.githubusercontent.com/elayadesign/ai-design-skills/main/skills/landing-page-design/SKILL.md

装好后直接用自然语言描述需求，例如：”帮我做一个 AI 代码审核工具的落地页，目标用户是独立开发者，主推免费试用”——AI 会自动走 Part A 的需求挖掘流程，再进入 Part B 的视觉输出。

使用场景与人群

适用场景：
– 从零搭建产品落地页（ SaaS 、工具、 AI 应用等）
– AI 工具营销页面设计与评审
– 设计系统落地时，对 AI 生成结果进行一致性审查
– 快速出原型时需要一套可落地的设计规范

目标用户：
– 产品经理、增长负责人，需要快速验证落地页方向
– 前端开发者，用 AI 辅助生成但不想在设计决策上反复拉锯
– AI 编程工具（Claude Code / Cursor / Codex）用户，想让 AI 生成结果自带设计感

输入与输出案例

Input：

帮我做一个 AI 代码审核工具的落地页，目标是让独立开发者免费开始使用。产品叫 CodeReviewPro，核心功能是自动审查 PR 并给出修改建议。

Output（AI 执行流程）：

Part A 需求确认（AI 主动提问）：

• Primary action：免费注册试用
• ICP：独立开发者 / 小团队，每天提交 PR
• Top objections：担心误报率高、集成麻烦、免费版功能太少
• Traffic source：预计来自 Hacker News / Twitter

Part B 视觉系统输出（部分示例）：

• Hero headline 格式：”[Outcome] for [Audience]” → “Ship cleaner PRs without the review backlog”
• 动效规则：Fade-in + slight upward translate, 200-250ms, ease-out
• 间距基准：4px 网格系统，section 之间间距 48-64px

最终 AI 生成的页面遵循上述规范，而不是随机输出一个”功能齐全但看起来像模板”的结果。

GitHub: https://github.com/elayadesign/ai-design-skills