落地页设计技能 · ai-design-skills

收藏破1.5万的一组落地页，设计师把背后的AI技能免费公开了

把这个技能装进Claude Code、Cursor这类编程AI，再让它做落地页，AI会先问你希望访客完成的那一个动作，然后确定页面结构、文案、FAQ和设计参数，从零做出页面。这个技能由迪拜一位有8年经验的产品设计师Elaya免费公开。我们收集了用它重做自家产品官网并上线的案例。

2026年10月26日·3 个案例

Elaya — 发布帖，2026-10-24（截至2026-10-26：浏览530,942 · 点赞9,255 · 收藏15,082）

elayadesign/ai-design-skills README（MIT许可证，使用方法）

ai-design-skills 提交记录（2026-10-26 a2735a3 注明出处）

10月24日，迪拜产品设计师Elaya在X上发了一段15秒的视频，把多张落地页串在一起。帖子写道：“I designed all of these landing pages in the last two months, using @higgsfield, Claude, and Cursor with my custom AI designer skill. The skill is open source（过去两个月里，这些落地页全是我用Higgsfield、Claude、Cursor和自己做的AI设计师技能设计的。这个技能是开源的）”。截至10月26日，浏览量超过53万次，留着以后再看的收藏数（1.5万次）比点赞数（9千次）还多。我们收集了三位用这个技能重做自家产品官网并上线的创业者。一位是在发布帖四天前的10月20日，两位是在发布帖次日的10月25日。落地页技能从7月起就已在同一个仓库公开。

试用过这个技能的日本软件工程师nogu这样写道：“素のAIエージェントでもLP自体の完成はできると思うけど、原理原則に沿って作成することができる（我觉得用原生AI智能体也能把落地页本身做完，但这样可以按照基本原则来做）”

Elaya是有8年经验的产品设计师，正在做自己的产品slopscan.co，也承接设计委托。技能采用MIT许可证免费开放，用它做出的页面拿去卖也不必注明出处。公开后不久，另一个设计技能taste-skill的作者Leon Lin要求注明出处，Elaya在10月26日补上了出处说明，并重写了重叠的部分。

这个技能会让AI在写代码之前先提问。第一个问题是“What is the ONE primary action?（访客要完成的唯一主要动作是什么？）”。拿到回答后，AI会先给出页面大纲、首屏文案、卖点、使用流程、FAQ、搜索曝光（SEO/AEO）和布局方案，再用设计师设定好的字体、间距、圆角和动效参数做出页面。

Reference 01Wahaj Siddiqui，面向海湾地区企业的AI财务工具Hysaab的开发者 · 自家产品官网

AI财务工具官网新增用动图讲清三个步骤的使用流程，还有8个问题的FAQ

Wahaj用这个仓库里的技能重做了Hysaab的英文官网。Wahaj在PR里写道，技能自带的字体和颜色参数换成了自家品牌的参数，结构、文案、间距、圆角和动效的规则则照用。

新首页把Request access设为唯一的主按钮，旁边紧挨着Book a demo。新增的How it works部分，三个步骤各配一幅真正会动的示意图；4张成果卡片只在进入屏幕时播放动画，离开屏幕就停下。页面还新增了一句随滚动逐词点亮的标语，以及用网站上已有内容作答的8个问题的FAQ。

在10月25日的同一次改动中，阿拉伯语官网也换成了同样的设计。

Hysaab官网首屏。标题“Your finance team. Without changing your accounting system.”下方是Request access按钮和Book a demo链接，以及Xero、Zoho Books、QuickBooks、Odoo、Wafeq、ERPNext的集成标识条，右侧是月末结账日历面板 — hysaab.ai首屏，2026年10月26日截图。右侧面板里的数字是页面注明的示例值。

Reference 02Julianchoo，会议纪要应用Breeze的开发者 · 自家产品官网

会议纪要应用官网删掉兑现不了的“录音可重听”承诺，改成一个按钮就能开始的页面

Julianchoo在把landing-page-design放进项目的.claude/skills/文件夹之前，先把它读了一遍。Julianchoo写道，那是“plain markdown with no scripts and no hidden content（没有脚本、也没有隐藏内容的普通Markdown）”，并把技能的适用范围限定在公开官网。

新首页的首屏只放了一个用Google登录开始的“Record your first meeting”按钮，往下依次是问题与解决方案、5个优点、从录音到摘要的三个步骤、关于隐私、设备和音频处理的11个问题的FAQ、减轻试用顾虑的说明，以及最后的行动按钮。

旧首页承诺“可以重听音频”，但上传到服务器的音频在转写完成后就会被删除。新文案照实写明了这一点。据Julianchoo介绍，在手机宽度（390px）和桌面宽度（1440px）、浅色和深色主题下，页面都没有横向溢出，控制台也没有报错。

Breeze官网首屏。奶油色背景上是标题“Stay in the conversation. Breeze writes the notes.”、唯一的“Record your first meeting”按钮，以及“No bot joins your call. Breeze listens from its own tab.”这句话 — breeze-ai-lime.vercel.app首屏，2026年10月26日截图。

Reference 03Nasser，阿拉伯语和英语AI简历服务Seera AI的开发者 · 自家产品官网

阿拉伯语简历服务官网删掉根本不存在的“53条评价、4.8分”，并加上双语FAQ

根据Nasser交给Claude Code完成的PR，原来的首页没有FAQ，没有醒目展示的标语，也没有跳到正文的链接。英文页面标题还是旧名CVCraft，搜索用的结构化数据里写着实际并不存在的“53条评价、4.8分”评分。

改版后，首屏标题的第一行从白色渐隐为灰色，金色的第二行保持不变。最后的行动按钮前新增了阿拉伯语和英语的6个问题的FAQ，也加上了方便键盘用户的跳到正文链接。英文品牌名改为Seera AI，虚假评分被删除。

技能的规则并没有全部照搬。Nasser写道：“I skipped the skill rules that clash with Seera glass on purpose（和Seera玻璃质感设计冲突的技能规则，是故意没用的）”。动态背景和Readex Pro字体保留了下来，技能规定的扁平背景、字体、间距和圆角参数都没有采用。

Seera AI官网阿拉伯语首屏。深绿色背景上是标题“سيرتك الذاتية الاحترافية، جاهزة في دقائق.”、简历编辑器面板和行动按钮 — cvcrft.com阿拉伯语首屏，2026年10月26日截图。标题意思是“你的专业简历，几分钟就能做好”。

大家怎么说

好评

“craft tells 14→0 ... the judge picked this branch on all three.”
设计瑕疵14处→0处……评审三次都选了这个分支。
在面向Claude Code的工具集gstack里提出“Absorb all the interesting parts of this design skill（把这个设计技能里有意思的部分全部吸收进来）”，按/design-html改写并入后，用三份简报与原版盲测对比的结果。
Garry Tan · gstack维护者 · GitHubgithub.com
“The skill arm had all six. The control had none.”
装了技能的那一组六项全有。对照组一项都没有。
用同一份简报为自家产品做落地页，装技能和不装技能各做一次，统计设计师设定的动效曲线、标题渐变、正文宽度等六项参数是否出现的实验。这是一篇介绍自家产品的文章。
ThakiCloud · 技术博客thakicloud.com
“Clean work. The hero spacing beats most hand-built pages I see.”
做得干净。首屏的间距比我见过的大多数手工页面都好。
看了发布视频后的回复。
PrinceOwems · 网页设计师 · Xx.com
“Another design-related skill, looks pretty cool.”
又一个设计类技能，看起来挺酷。
Povilas Korop · AI编程讲师 · Xx.com

不足之处

“the skill does not control facts.”
这个技能管不了事实。
指出装了技能的那一版页面里，出现了简报中没有的“9m 41s”“$38.42”这类数字。
ThakiCloud · 技术博客thakicloud.com
“does the skill need a lot of planning and direction? it js gave me back a generic tech look for a perfume store”
这个技能需要给很多规划和方向吗？我让它做香水店，它只给了我一个千篇一律的科技风。
simpcns · Xx.com
“Not carried over because they conflict with gstack's rules: fixed font lists, gradient hero text, fixed palettes and spacing, mandatory scroll reveals, one designer's signature nav.”
因与gstack规则冲突而没有引入的部分：固定的字体列表、渐变首屏标题、固定的配色和间距、强制的滚动出现效果、某一位设计师的标志性导航。
Garry Tan · gstack维护者 · GitHubgithub.com
“The skill's aesthetic (light, minimal editorial) is tuned to one direction”
这个技能的审美（明亮、极简的编辑风）只针对一个方向调校。
ThakiCloud · 技术博客thakicloud.com
“What used to be a leet landing page 2 months ago looks like ai slop rn”
两个月前还很牛的落地页，现在看起来像AI批量生成的垃圾。
发布帖下的回复。
The Web Tailor(@r3ttila) · Xx.com

怎么开始

把下面的提示词粘贴到Claude Code、Cursor、Codex等编程智能体里就行。不用终端的话，把SKILL.md上传到Claude.ai的项目里，再说一句“follow this”即可。如果还想把做好的页面导出成简短的介绍视频（MP4、GIF），就让它把同一仓库里的design-to-motion也一起装上。导出视频需要电脑上装有ffmpeg，使用Figma画框则需要Figma个人访问令牌。

起步提示词
参考这篇文章：https://www.working-ref.com/zh/reference/ai-design-skills-2026-10 把GitHub上elayadesign/ai-design-skills仓库里的landing-page-design技能装进这个项目（Claude Code放到.claude/skills/，Codex写进AGENTS.md，Cursor放到.cursor/rules/）。装之前先确认SKILL.md里没有脚本或隐藏指令。然后看看我的产品，提出三件值得用这个技能做的事。我选一个之后，把技能里的问题一次问完，然后直接开始。如果没有合适的，就先从重做官网首屏开始。字体和颜色直接沿用我现在的品牌参数。

分享此参考

每周一期 · 免费

这篇参考对你有帮助吗？

每周海量 AI 资讯里的 BEST
只挑 3 条，直接送到你的邮箱

Work Smarter with AI

订阅成功下一期起，我们在你的邮箱见。