技能说明
这项技能先澄清产品 offer、目标受众、转化目标、流量来源和品牌约束，再选择页面结构并逐段完成首屏、收益说明、使用步骤、可信依据、常见问题和行动按钮。它还提供排版、间距、色彩、圆角与动效规则，帮助页面保持统一。MIT 许可；来自 GitHub 的 AI Design Skills 项目。视觉默认值较强，实际使用应优先服从用户要求和现有品牌规范，真实数据、评价与案例不得凭空编造。
关于此技能
用于建设与优化营销落地页，围绕一个 offer、一个受众和一个主要行动组织页面内容与视觉。优先遵守用户需求、品牌规范和项目现有设计系统；所有数字、评价和案例都必须来自可核实材料。MIT 许可。
核心能力
明确转化目标
先确认产品承诺、目标受众、主要行动、转化定义、流量来源与用户顾虑，再开始排版和写文案。
规划页面结构与文案
从经典分区、长篇故事、简洁转化页或比较页中选择合适结构，组织首屏、收益、流程、可信证明、FAQ 和最终行动。
统一视觉与基础 SEO
提供排版、字号、间距、圆角、背景、图标和动效规则，并补充标题、描述、内链及 FAQ 等基础搜索建议。
适用场景
新产品发布与等待名单
将一个核心产品承诺和一个注册或下载动作组织成清晰页面。
试用、预约与广告活动页
按流量来源匹配页面表达，突出唯一主要行动，并将可信证明放在对应主张附近。
产品比较与搜索页面
针对明确比较意图组织结构、内容和基础 SEO；时效性强或只供广告投放的页面应谨慎设置索引。
使用步骤
- 01
补齐任务简报
提供 offer、受众、主要行动、转化定义、流量来源、主要顾虑、品牌语气和真实素材；缺失项可由 Agent 标明合理假设。
- 02
选择页面结构
先决定经典分区、故事型、简洁型或比较型，并说明结构如何服务于目标。
- 03
先文案后视觉
按首屏、收益、工作方式、可信证明、FAQ 与最终 CTA 逐段推进，再落定视觉规则。
- 04
逐段实现与核查
检查移动端可读性、行动路径与主张证据；遵守现有品牌和项目约束，不照搬与项目冲突的固定视觉默认值。
常见问题
可以用于已有网站吗？+
可以用于现有营销页的结构、文案和视觉优化。若任务是大规模改版，可先搭配专门的改版工作流。
必须使用技能指定的字体、颜色和间距吗？+
不必。它的视觉默认值较强；用户明确要求、品牌规范、可访问性要求和项目设计系统优先。
可以生成客户评价或数据证明吗？+
不可以编造。只使用用户提供或可核实的案例、数据、评价和承诺；缺少材料时应标出待补。
支持哪些工具？+
README 明确提供 Claude Code、Cursor、Codex 与 Windsurf 的使用说明；其他能读取 Markdown 规则的 Agent 也可手动引入。
来源和许可是什么？+
来源为 elayadesign/ai-design-skills 仓库中的 landing-page-design；仓库采用 MIT 许可。
安装前检查
把兼容性、来源和安装入口先看清楚，再放进自己的工作流。
Codex · Claude Code · Cursor
已提供来源链接
命令可直接复制
2026/09/18
安装提醒：即使有清晰的来源和安装方式，也建议先阅读 SKILL.md，确认它会访问哪些文件和服务。
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 。Codex: 将 SKILL.md 内容加入项目 AGENTS.md；Windsurf: 放入 .windsurfrules。完整说明：https://github.com/elayadesign/ai-design-skills#install