AI两月速造专业落地页：三个工具加一个开源技能

一位开发者用AI在两个月内做出了一批视觉专业的落地页，他的做法不是依赖某个万能工具，而是把三项工具与一个开源「技能」组合起来用。这个组合里，Rigs Fill 负责生成视觉资源，Cloud 负责搭建和实现页面结构，Cursor 作为开发环境承载整个流程，而真正决定落地页质量的，是来自 GitHub 上的开源项目 AI Design Skills。

工具分工：谁生成视觉，谁搭结构，谁写代码

这套工作流的分工相当明确。据视频中的说明，Rigs Fill 用于创建页面所需的视觉素材，Cloud 用于结构化并实现页面，Cursor 则充当开发环境。三者各司其职，避免了在单一工具里反复切换提示词的尴尬。

值得留意的是，这里的「Cloud」承载的是页面结构搭建与落地实现，而 Cursor 是编写和调试代码的场所。对于习惯在编辑器里完成大部分工作的开发者来说，这种拆分意味着视觉素材、页面骨架与代码实现不再挤在同一个界面里，每一环都能用更合适的工具处理。

AI Design Skills：把设计规范写进提示词

这套流程里最关键的一环是 AI Design Skills——GitHub 上的一个开源项目。其中的 landing pages 技能专门针对落地页，会指导页面的结构、文案、字体排印、间距以及动画。换句话说，它不是让模型自由发挥，而是把一套设计判断固化成可复用的指令。

这个思路解决了 Vibe Coding 中一个常见的痛点：模型生成代码不难，难的是让页面看起来像经过设计师之手。结构、文案、字体、间距、动画这五项恰好是落地页观感的核心变量，把这些维度写成明确的技能指令，等于给模型提供了一份设计检查清单，而不是笼统地说「做得好看一点」。

Vibe Coding 是 Andrej Karpathy 在 2025 年初提出的说法，指开发者用自然语言描述意图、由大模型直接生成可运行代码，人更多扮演“评审者”而非逐行编写者。它的典型特征是迭代快、上手门槛低，但输出质量高度依赖提示中携带的约束。业界普遍观察到，缺少参考与规范的 Vibe Coding 容易产出“能用但不好看”的界面：布局凑合、排版随意、间距失控。因此后续实践逐渐转向“规格先行”——把设计系统、组件约束、可访问性要求写进模型可读取的文件（如规则文件或技能），让模型在生成时自带检查标准，而非依赖对话中的临时口头要求。

安装与使用：Cloud Code 或 Cursor 都能接入

落地页技能的使用门槛并不高，视频提到它可以安装在 Cloud Code 或 Cursor 中。这意味着无论开发者习惯哪一套工具链，都能把这套设计指令挂载到自己的工作流上，不需要为了使用技能而更换主要编辑器。

安装完成之后，技能会在生成过程中持续约束输出。开发者的精力可以更多放在业务逻辑和素材准备上，而不是一遍遍纠正模型在排版和间距上的随意发挥。

“技能”（Skill）是围绕大模型的一种可复用指令封装：通常以 Markdown 等纯文本描述触发条件、操作步骤和约束清单，模型在相关任务中读取它并按其中的规范执行。与微调不同，技能不改动模型权重，只改变上下文；与普通提示词不同，它可以版本化管理、跨项目复用、被团队共享。Claude Code、Cursor 等工具都支持通过规则文件或技能目录挂载这类指令，从而让“设计偏好”沉淀为工程资产。这也解释了为何同一模型在不同团队手里表现差异巨大——差距往往不在模型，而在是否把经验固化成可加载的技能。

Vibe Coding 的效率来自参考与明确指令

视频里有一句判断值得展开：在 Vibe Coding 中，好的参考和清晰的指令能加速工作。这与「一句话生成整站」的叙事形成对照。两个月做出多个落地页，靠的并不是模型一次成型，而是把参考资料和明确要求前置到提示里。

AI Design Skills 本质上就是这种思路的产物——把优秀落地页的共性抽出来，变成模型能读取的参考。开发者已经在用同类做法的人可以自查：你是否把设计偏好沉淀成了可复用的技能，还是每次都在对话里重新描述一遍？这个问题的答案，往往决定了同样的工具在不同人手里效率差多少。

完整项目与源码的获取

视频末尾提到，如果想要获取可定制、可迭代并用于自己业务的完整项目，可以访问 afcode.com.br 查看，所有项目都附带完整源代码供下载。对于想直接拿现成项目改造成自己业务的开发者，这是一条比从零搭建更快的路径。

从整套流程看，这条路径的价值在于可复用性：视觉素材工具、页面实现工具、开发环境和一个开源设计技能，各自可以替换或升级，而把设计规范写成技能这件事本身，是可以迁移到其他项目类型上的经验。