# AI 写落地页总是一股 AI 味？原则、Skill、组件库三步搞定
**作者**: Yihui
**日期**: 2026-07-18T00:07:43.000Z
**来源**: [https://x.com/yihui_indie/status/2078270454767231179](https://x.com/yihui_indie/status/2078270454767231179)
---
用 AI 生成落地页，现在是真的快。一句话，五分钟，页面就出来了。
但你多半也发现了：生成出来的页面，能用，就是拿不出手。配色像没改过的默认模板，图标和内容对不上，整个页面透着一股说不上来的"AI 味"。当产品官网挂出去？心里发虚。
难的从来不是"生成"，是生成得好看、可信、有转化。
这篇给你一套完整打法，就三件事：
1.懂原则：什么样的结构能转化，哪些错误一犯页面就废
2.上 Skill：两个设计 Skill，让 AI 的审美和动效直接上一个台阶
3.用现成的：把模板和组件库喂给 AI，不从零造轮子
顺序是"先懂原则 → 再动手实战 → 最后升级质感"，每一步都能照着操作。
> 一句话总结：把落地页结构、设计 Skill 和现成组件库喂给 AI，它才能从"能用"做到"能转化"。
# 1. 先懂原则：能转化的落地页长什么样
## 1.1 先提高审美：三个灵感网站
AI 生成的页面质量，上限取决于你的判断力。你自己都不知道什么是好的，AI 给你一版半好不坏的，你也提不出修改意见。
判断力不是凭空来的，先去大量看好东西。三个网站：
Pinterest——品牌设计金矿。海量品牌视觉案例和配色方案，每天刷 15 分钟，灵感爆棚。
https://www.pinterest.com/search/pins/?q=landing page
Mobbin——UX/UI 设计宝典。收录全球顶尖产品的界面原型，从交互逻辑到图标细节全解析。
https://mobbin.com
Landingfolio——落地页专门户。精选高转化率的落地页案例，看多了你自然知道什么样的首屏能留住人。
https://www.landingfolio.com
## 1.2 首屏必须讲清楚三件事
用户点进你的落地页，三秒钟之内要看明白：
- 这东西给谁用
- 解决什么问题
- 我能得到什么结果
三秒看不明白，关掉走人。首屏文案就围绕这三个问题写，别堆形容词。
## 1.3 高转化落地页的标准结构
成熟的高转化落地页，几乎都是同一套区块从上到下排：
- Navbar（导航栏）
- Hero（首屏：标题 + 副标题 + 主 CTA 按钮）
- Benefits（核心收益：用户能得到什么）
- Use Cases（适用人群）
- Features（功能列表）
- Testimonials（用户证言）
- Integrations（集成与生态）
- Pricing（定价）
- FAQ（常见问题）
- Final CTA（页尾再次行动召唤）
- Footer（页脚）
CTA 就是 Call to Action，让用户点的那个主按钮，比如"免费试用""查看本周推荐"。
写提示词的时候，直接把这套结构报给 AI，生成的页面骨架就不会跑偏。下面是一条完整的示例提示词，产品是虚构的「周末去哪儿」，你可以原样复制去跑：
```
初始化一个 next.js的模板项目，文件叫做 init-landing-page
请生成一个中文落地页（不要使用任何SKILL），产品名叫「周末去哪儿」，帮助城市年轻人发现展览、市集、演出、徒步和亲子活动。页面结构：Navbar、Hero、Benefits、适用人群、Features、Testimonials、Tools & Integrations、Pricing、FAQ、Footer。
Navbar：Logo「周末去哪儿」，导航：活动类型、适合谁、会员、FAQ，CTA「查看本周推荐」。
Hero：
标题：不用再刷半天，周末好去处已经帮你选好了
副标题：根据城市、预算、兴趣和同行人群，推荐真正适合你的周末活动。
主 CTA：查看本周推荐
视觉内容：活动推荐卡片流，包括展览、市集、Live、徒步、亲子活动。
Benefits：
1. 节省筛选时间：按兴趣和距离推荐活动。
2. 更少踩雷：结合评分、热度和真实反馈。
3. 适合不同场景：约会、朋友聚会、亲子和独处都能找。
适用人群：
城市年轻人：发现新鲜、有趣的周末体验。
情侣：快速找到适合约会的活动。
亲子家庭：筛选安全、轻松、有教育意义的活动。
Features：
个性化推荐、城市活动日历、预算筛选、路线建议、收藏清单、活动提醒。
Testimonials：
「终于不用每周五临时问朋友去哪儿了。」
「推荐比普通榜单更贴合我的兴趣。」
「亲子筛选很实用，少踩很多坑。」
Tools & Integrations：
微信提醒、高德地图、日历、猫眼、大麦、小红书链接。
Pricing：
免费版：查看基础推荐。
Plus：¥19/月，个性化推荐、收藏清单、路线规划。
家庭版：¥39/月，亲子筛选、多人偏好、专属周末计划。
FAQ：支持哪些城市？推荐会不会有广告？可以按预算筛选吗？活动信息是否实时？能否收藏和分享？
Footer：Logo、城市活动、会员、合作入口、隐私政策、社交媒体。
```
提示词里特意写了「不要使用任何SKILL」，是为了留一个"素颜版"。第 3 节装完 Skill 再跑一次，好做对比。
# 2. 图像复刻法：看到好页面，让 AI 照着做
看到一个好看的落地页，最快的学习方式不是分析它为什么好看，是让 AI 直接 1:1 复刻它。三步走。
## 第一步：搞到完整截图
去 Landingfolio 这类灵感网站，找到目标页面的完整长截图。这里用 Bugster 这个页面做例子：
https://www.landingfolio.com/inspiration/post/bugster
## 第二步：截图和提示词一起丢给 AI
```
请你基于该图片，1:1 还原出这个的落地页：
1. 使用Next.js
2. 需要抽取设计风格文件 DESIGN.md，确保后续项目开发能有统一的设计风格
```
注意第 2 条，这是整个复刻法的关键动作：让 AI 抽取一份 DESIGN.md 设计风格文件。
它会把配色、字体、间距、圆角这些设计决策沉淀成一个文档。之后项目里所有页面都引用这份文档，整个产品的视觉风格才能统一，不会做一页换一个风格。
## 进阶：拿得到源码，就别用截图
如果你能拿到原网站的源码，就不用靠截图"猜"了。直接把源码复制给 AI，还原精度会高得多。
截图复刻是通用手段，源码复刻是有条件时的最优解。
# 3. 两个 Skill，把质感拉上来
直接生成的页面能用，但 AI 味很重。两个 Skill，一个管审美，一个管动效。
没接触过 Skill 的，把它理解成给 AI 装的"专业技能包"：装上之后，它干某类活就会按专家级的规范来。
## 3.1 taste-skill：解决审美问题
地址：https://github.com/leonxlnx/taste-skill
安装很简单，把这句话发给 AI 就行：
```
帮我安装这个skill: npx skills add leonxlnx/taste-skill
```
装好后，把第 1 节那条「周末去哪儿」提示词拿出来，删掉「（不要使用任何SKILL）」，在最前面加上 /design-taste-frontend，其他内容一个字不改，再跑一次：
```
/design-taste-frontend 初始化一个 next.js的模板项目，文件叫做 init-landing-page
请生成一个中文落地页，产品名叫「周末去哪儿」……（后面的内容和第 1 节那条完全相同）
```
对比两次生成的结果，配色、排版、留白的质感提升是肉眼可见的：
一个小提醒：网站图标 AI 很难配得合适，得你自己动手替换。用这两个网站基本就够了：
- iconfont：https://www.iconfont.cn/
- LobeHub Icons：https://icons.lobehub.com/
## 3.2 emilkowalski/skills：解决动效问题
地址：https://github.com/emilkowalski/skills
作者 Emil Kowalski 是 animations.dev 课程的作者，前端动效圈的老师傅。这套 Skill 是目前最专业的前端动效 AI 指导工具，里面有三个子 Skill：
安装：
```
帮我安装这个skill: npx skills add emilkowalski/skills
```
最常用的是 emil-design-eng。装上之后，AI 写动效代码会自动遵守一套规矩，挑几条你感受一下：
- 高频操作不加动画。一天要点一百次的按钮，加动画就是折磨
- 永远不用默认的 ease 缓动，用自定义 cubic-bezier（比如 cubic-bezier(0.23, 1, 0.32, 1)）
- UI 动画不超过 300ms；按钮反馈 100-160ms，弹窗 200-500ms
- 弹窗从触发按钮的位置展开，不从屏幕中心蹦出来；入场从 scale(0.95) 开始，不从 scale(0)
- 永远不用 ease-in，它会延迟用户最关注的初始运动，让界面显得迟钝
这些都是人类动效工程师踩了多年坑攒下的经验，现在 AI 直接按这个标准写。
用法示例，给已经生成的页面补动效：
```
优化 init-landing-page 的落地页动效，给落地页中的各个section区块组件添加合适的动效
```
# 4. 模板和组件库：三层积木
不是所有区块都值得让 AI 从零写。把现成的资源喂给 AI，让它在高质量的基础上组装页面，效率和效果都会好得多。
动手之前，先搞清楚三个概念。它们是落地页开发里从小到大的三层积木：
Components（组件）：最小的 UI 原子。一个按钮、一张卡片、一个弹窗。它们不能独立成为页面的完整区域，但你可以用它们拼出任何东西。用法：在提示词里指定"按钮用 shadcn/ui 的 Button"，或者把某个动画组件的代码贴给 AI。
Blocks（区块）：多个组件组合成的完整页面段落。一个 Hero、一个定价表、一个 FAQ 手风琴，每一个都是能直接塞进页面的"乐高模块"。用法：复制某个 Block 的代码交给 AI，让它改文案和配色。
Templates（模板）：多个 Blocks 组装好的完整落地页。拿来就是一整个页面，改改内容就能上线。用法：克隆模板仓库，让 AI 在这个基础上改。
三者的关系：Components 拼成 Blocks，Blocks 组装成 Templates。
知道了这三层，你就知道什么阶段用什么：从零拼页面用 Components + Blocks，赶时间直接拿 Templates 改。
## 4.1 Components（组件库）
提供原子级 UI 组件，适合在提示词里指定"用 XX 库的 XX 组件"，提升单个元素的质感和交互。
## 4.2 Blocks（区块库）
提供完整的页面区块，Hero、Pricing、FAQ、CTA、Footer 都有。拿来就是一个完整段落，改文案就能用。
## 4.3 Templates（完整模板）
组装好的完整落地页，克隆后改内容就能上线。适合赶时间或想快速出原型。
## 4.4 模板技术栈不一样怎么办
下载模板后最常遇到的问题：技术栈不统一。有的模板是纯 HTML，有的是老版本 Next.js，有的是纯前端的 React SPA。直接把模板代码拖进你的项目，大概率跑不起来。
但这不重要。只要模板和你的项目都在 React 体系里（Next.js、TanStack Start 都算），就能用一个技巧把任何模板"翻译"成你的技术栈。
核心思路：不直接用模板代码，让 AI 读完模板，在你的项目里重新实现一遍。
以 Float UI 的免费模板为例（https://floatui.com/templates），三步操作：
1. 初始化一个全新的 Next.js 项目（或者你在用的框架）
2. 把下载的模板文件夹拖进项目目录，比如放在 /reference-template/ 下
3. 把下面这条提示词发给 AI：
```
我在项目的 /reference-template/ 目录下放了一个下载的落地页模板。请你：
1. 先阅读 /reference-template/ 里的所有页面代码，理解它的页面结构、布局方式、配色和设计风格
2. 然后在我当前的 Next.js 项目按照这个模板的设计风格，复刻出同样效果的落地页
3. 不要直接复制模板代码——用我项目的技术栈重新实现，确保代码规范统一
4. 同时抽取一份 DESIGN.md，记录模板中使用的配色、字体、间距、圆角等设计决策
```
这样做的好处：你拿到了模板的设计质量，代码又完全符合自己项目的规范，后续维护和扩展不会有兼容性问题。
# 写在最后
用 AI 做落地页，拼的不是谁的提示词写得长，是你往它嘴里喂什么。
只说一句"帮我做个好看的落地页"，它只能靠猜。把结构报给它，把 DESIGN.md 抽出来，把两个 Skill 装上，把现成的组件库指给它，它就能按图施工，又快又好。
想看更多 AI 编程实战教程和工具评测的，我的 AI 编程课目前已经有 3000 多位 AI Builder 加入，祝你 Vibe Coding 愉快，我们下篇见。
课程地址： https://happyaicoding.com
## 相关链接
- [Yihui](https://x.com/yihui_indie)
- [@yihui_indie](https://x.com/yihui_indie)
- [1.4K](https://x.com/yihui_indie/status/2078270454767231179/analytics)
- [https://mobbin.com](https://mobbin.com/)
- [https://www.landingfolio.com](https://www.landingfolio.com/)
- [https://www.landingfolio.com/inspiration/post/bugster](https://www.landingfolio.com/inspiration/post/bugster)
- [DESIGN.md](http://design.md/)
- [https://github.com/leonxlnx/taste-skill](https://github.com/leonxlnx/taste-skill)
- [https://www.iconfont.cn/](https://www.iconfont.cn/)
- [https://icons.lobehub.com/](https://icons.lobehub.com/)
- [https://github.com/emilkowalski/skills](https://github.com/emilkowalski/skills)
- [animations.dev](https://animations.dev/)
- [https://floatui.com/templates](https://floatui.com/templates)
- [DESIGN.md](http://design.md/)
- [https://happyaicoding.com](https://happyaicoding.com/)
- [Upgrade to Premium](https://x.com/i/premium_sign_up)
- [8:07 AM · Jul 18, 2026](https://x.com/yihui_indie/status/2078270454767231179)
- [1,445 Views](https://x.com/yihui_indie/status/2078270454767231179/analytics)
---
*导出时间: 2026/7/18 09:20:55*