让落地页讲清卖点，引导访客点击
让访客看懂你提供什么，并知道下一步点哪里。landing-page-design 先梳理受众、页面结构和文案，再逐段完成设计，统一字体、间距与动效。
可用于 Claude Code · Cursor · Codex · Windsurf · Cline
前置要求
- Git
概览
你会得到什么
- 编码前先得到页面大纲、首屏文案、价值说明、常见问题和布局建议。
- 统一字体、间距、圆角、图标和动效的视觉规则。
- 逐段完成页面，并完善手机布局和交互状态。
适用场景
- 为产品、服务、注册或预约制作目标明确的落地页。
- 让页面文案、视觉设计和主要按钮围绕同一个目标。
教程
从案例看懂落地页要引导什么动作
落地页做出来了，访客却看不懂你提供什么，也不知道该点哪里？landing-page-design 先梳理受众、卖点和主要动作，再安排文案、版块与视觉。
上方视频是 Elaya 的落地页作品合集。看睡眠服务页面时，可以留意：
- 标题先说收益：标题中的“Restorative Sleep”点出睡好后恢复精力的收益，配图再营造放松的氛围。
- 按钮靠近说明：邮件输入框和主要按钮放在标题下方，方便访客继续。
与同类技能的区别
- huashu-design：先比较三套视觉方向，覆盖网页、PPT 和 App 原型。
landing-page-design更侧重落地页的受众、卖点与主要动作，再用内置的字体、间距和动效规则完成页面。 - Emil 界面技能合集：侧重界面动效、交互细节和代码评审。
landing-page-design先梳理页面要表达的内容，再指导你逐段完成整页。
装好规则，准备你的产品资料
下面用摄影预约页练习，请求由本站编写。
- 在准备制作页面的项目目录打开终端，按仓库 README 的 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/- 查看项目中的
.claude/skills/landing-page-design/SKILL.md。在同一项目打开 Claude Code，要求它读取并使用landing-page-design。让它概括“先定内容、再做视觉”的流程，确认读到了规则。
其他工具的设置
其他工具按 README 设置：
| 工具 | 设置位置 |
|---|---|
| Cursor | 下载技能的 SKILL.md，保存为 .cursor/rules/landing-page-design.md，或粘贴到项目规则中 |
| Codex | 将技能内容合并到项目已有的 AGENTS.md，保留原有约定 |
| Windsurf / Cline | 分别合并到 .windsurfrules / .clinerules |
准备好作品照片、服务介绍和预约链接。再补一句：谁会来这个页面，他们最担心什么？例如，第一次拍人像的人可能担心不会摆姿势，页面就应说明拍摄时如何获得引导。
先定文案与结构，再制作首屏
在 AI 编程工具的对话中发送下面的请求，先替换方括号内容：
使用 landing-page-design，制作一个人像摄影预约落地页。
受众：第一次预约人像拍摄的人。
主要目标：让访客查看可约时段并预约。
访客顾虑：不会摆姿势，不清楚拍摄流程和包含的服务。
作品照片：[照片文件或链接]。
服务资料：[拍摄地点、流程、包含内容和可公开价格]。
预约链接：[真实预约地址]。
先给页面大纲、首屏标题与说明、主按钮文字、拍摄体验与交付内容、流程和常见问题。
同时建议是否允许搜索引擎收录，并说明布局选择。
使用我提供的事实，缺失信息列为待补资料。
先不要写代码，等我确认方案。读方案时，先看标题是否说清拍什么、适合谁，按钮是否说清下一步。例如，“查看可约时段”比“了解更多”更具体。再看照片和服务说明，是否回答了访客对姿势、流程和交付的顾虑。
方案合适后，继续发送：
按刚才确认的方案，先完成首屏。
保留已经确认的标题、说明和照片，主按钮写“查看可约时段”。
按钮使用我提供的预约链接。
按 landing-page-design 的视觉规则设置字体、间距、圆角与动效。
交付 index.html 和所需素材，说明如何在浏览器预览。
完成首屏后停下来，等我反馈再继续。打开首屏，检查标题、照片和按钮是否各有重点。先把这一屏改顺，再往下做，后续版块就有了可沿用的视觉基础。
逐段完善页面，检查按钮和手机布局
确认首屏后，让 AI 接着完成后续内容：
保留已经确认的首屏，按之前的大纲逐段完善页面。
依次完成拍摄体验与交付说明、拍摄流程、作品或客户反馈、常见问题和末尾预约按钮。
作品与反馈使用我提供的材料，缺少的内容先列为待补项。
加入技能要求的独立大字标语区，滚动时按阅读顺序逐词显现。
所有主要预约按钮都使用同一个预约链接。
沿用首屏的字体、间距和动效，并完成手机布局。
交付更新后的文件及预览方式，说明本轮完成了哪些版块。这套技能有自己的视觉规则，包括字体选择、字号与间距，以及独立标语区的滚动动效。品牌规范与默认视觉规则不一致时，在请求中写清具体要求；技能明确以用户要求为先。
按交付说明打开页面，做三项检查：
- 读一遍内容：从首屏往下看，确认每个版块都在回答“为什么值得预约”，服务说明和常见问题与资料一致。
- 走一遍按钮：分别点击首屏和页尾的预约按钮，确认都到达你提供的地址。用键盘 Tab 移到按钮，确认能看清当前选中的位置。
- 换到手机宽度：看标题是否断在合适的位置、照片是否遮住文字、按钮是否好点。继续滚动，检查标语显现和导航是否正常。
发现问题时，指出具体位置和预期变化。例如：“手机上首屏标题把按钮挤出屏幕，请缩短副标题并调整间距，保留照片和整体布局。”
换成自己的产品，调整文案与视觉规则
如果页面显得太冷，可以只改文案和强调色：
保留现有版块顺序、照片和预约链接。
只调整首屏标题与说明，让语气更亲切，突出拍摄时有人引导。
把强调色改成我提供的品牌色：[色值]。
同步调整按钮、链接和选中状态，保持文字清楚易读。
其他字体、间距与动效沿用当前方案。给我修改前后的截图。换成软件试用页时，重新确定受众、使用收益和主要动作：预约时段变成开始试用，摄影作品变成产品截图，拍摄流程变成上手步骤。围绕新的顾虑重写内容，保留“先定方案、再逐段制作”的方法。
可以用下面的模板开始：
使用 landing-page-design，为 [产品或服务] 制作落地页。
受众与来访场景：[谁，从哪里来到页面]。
最想解决的问题：[一个主要问题]。
希望访客采取的动作：[预约 / 试用 / 下载 / 注册]。
已有材料：[产品资料、图片、客户反馈、目标链接]。
品牌要求：[字体、颜色、语气、必须保留的内容]。
先给内容与布局方案，我确认后从首屏开始逐段制作。
交付形式：[当前项目中的页面 / HTML 文件]。