Landing Page Design Skill：让 AI 生成的页面不再是「AI 味道」的设计系统

Skill超级捕获手 技术创作者 2026-08-30 14 阅读

这是一套给 AI 编程工具用的 landing page 设计技能包——不是 prompt 模板，而是一套完整的设计方法论，涵盖从用户调研、结构规划到视觉系统的全流程。当你的 AI 助手加载这个 Skill，它不再凭”感觉”生成页面，而是按专业着陆页的标准流程执行：先收集目的、受众、转化目标，再选择页面结构，最后落地视觉规范。

设计原则非常明确：一个 Landing Page 只服务一个意图、一个受众、一个主要行动。这跟大多数 AI 生成的”大而全”首页完全不同。Skill 强制要求在动手前完成用户意图采集（ICP、转化目标、流量来源），再按四套结构模板（A. 经典英雄区段、B. 长篇故事型、C. 极简转化页、D. 对比页面）选择其一，然后按 12 个标准区块依次构建。

截至 2026-08-29，该仓库共 1,475 颗星，7 月 29 日才创建，不到一个月就登上了 skilld.dev Trending，单日增长 987 次安装，PulseAugur 记录其单日 star 增量达 254 颗——对于一个细分设计 Skill 而言，热度相当可观。

GitHub 链接：

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

作者是 Elaya（@elayadesign），目前维护一个 AI Design Skills 集合，landing-page-design 是其首个公开 Skill。该账号在 skilld.dev 上有完整的作者页面，定位是 AI 编程工具的设计规则维护者。

介绍

elaya 的 AI Design Skills 仓库将自己定位为”面向 AI 编程工具的设计技能集合”，支持 Claude Code、Cursor、Codex、Windsurf 以及任何读取 Markdown 规则文件的 AI 工具。每个 Skill 都是一个独立文件夹，按需安装，不污染项目。

landing-page-design 是集合中的第一个 Skill，专注于”高转化 landing page 建设系统”。它的核心逻辑分两半：

  • Part A（策略与结构）：从用户意图采集开始，按 12 个标准区块构建页面骨架，覆盖英雄区、中段论证、底部异议处理。
  • Part B（视觉系统）：提供不可协商的视觉规范——字体、间距、圆角、背景、图标、动效，全部精确到具体数值，AI 必须严格遵守。

Skill 附带明确的”何时触发”规则：当用户提到任何 landing page、营销 site、页面 section、组件或原型时，自动激活该 Skill。即使用户没有明确说”设计”或”转化”，Skill 也会强制介入。

特点

  • 结构化构建流程：先采集意图，再选结构模板，最后落地视觉——AI 不再跳步
  • 12 个标准区块：清晰的页面区块清单（Hero → 利益点 → 社会证明 → FAQ → 最终 CTA），确保页面结构完整
  • 四套布局模板：经典英雄区/长篇故事/极简转化/对比页面，覆盖绝大多数业务场景
  • 强制视觉规范：Part B 精确到 px 的typography、spacing、radius、motion规则，防止 AI 输出”通用 AI 风格”页面
  • 设计值可定制：底部设计值区域支持 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 工具的 SaaS landing page，面向独立开发者，主推免费试用”

Agent 会自动激活 Skill，按 Part A 流程先提问（若信息不足），再按结构模板生成页面。

使用场景与人群

适用场景：
– 从零构建产品官网、Landing Page、营销页面
– AI 编程工具（Claude Code / Cursor / Codex）生成前端页面时的设计规范约束
– 需要高转化率页面的 SaaS 产品、API 服务、开源项目主页
– 设计评审：检查现有页面是否符合专业结构标准

目标用户：
– 用 AI 编程工具开发 Web 产品的工程师和产品经理
– 需要快速出高保真原型的独立开发者
– 想让 AI 生成页面不再”看起来像 AI 做的”的设计团队

输入与输出案例

输入：

“帮我设计一个 AI 代码评审工具的 landing page，受众是中型开发团队，主推企业版，流量来自 Google 广告”

Agent 执行流程（Skill 触发后）：

  1. 激活 landing-page-design Skill
  2. 采集缺失信息（若未提供完整）：ICP = 中型开发团队，转化目标 = 企业版销售，流量来源 = Google 广告（匹配广告标题）
  3. 选择布局类型：A（经典英雄区），因为产品从截图即可理解
  4. 按 12 区块构建：Hero（Headline + Subheadline + CTA + 证明信号）→ Problem/Solution → 3–5 个利益点 → How it Works → 社会证明 → FAQ → 风险逆转 → 最终 CTA
  5. 按 Part B 视觉规范落地：字体 / 间距 / 圆角 / 动效全部来自 Skill 定义值
  6. 输出完整、可直接用于生产的 HTML/CSS

典型输出： 一份结构完整、视觉规范遵循设计系统、转化逻辑清晰的 Landing Page HTML，无需人工大幅修改即可上线。

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

评论区

0 条评论

登录后可评论。

Skill超级捕获手 14 阅读