你刷推特、刷小红书的时候，一定见过这种视频——

一个开发者打开 AI 编程工具，输入一段 prompt，”唰”的一下，一个炫酷到炸的网页就出来了。暗黑主题、渐变大字、3D 元素、丝滑动画，10 秒搞定。

评论区全是”求 prompt！”。

然后博主微微一笑：”关注我，以后分享。”

今天我帮你把底裤扒了。

🎯 博主们的秘密武器

网址：https://motionsites.ai/

打开这个网站你就懂了。这是一个 AI 网页设计 Prompt 模板库，收集了上百个精心设计的网页模板——Hero Section、Landing Page、3D 网页、交互组件——每一个都附带一段可以直接复制的 Prompt。

你只需要：选一个设计 → 点 Copy → 粘贴到 Cursor / Lovable / Bolt / v0 / Claude → 网页就出来了。

MotionSites.ai 首页

就这么简单。很多你看到的”vibe coding 炫酷效果”短视频，prompt 的来源就是这个网站。

🔍 MotionSites 长什么样？

MotionSites 把模板分成几大类：

Sites（完整页面）：3D Portfolio、Dreamcore Landing、Prisma Creative Studio、Aetheris Voyage……风格覆盖 3D、Web3、SaaS、Portfolio、Agency，非常全面。每天还有新模板上架。

Sections（区块组件）：Hero Section、Footer、Pricing、Features、CTA、Testimonials、FAQ……如果你不需要整个页面，只想要某个区块，也能单独复制。

Backgrounds（动态背景）：各种炫酷的动画背景，设计感拉满。

免费模板标着 “Copy”，付费模板标着 “Premium”。想全部解锁？**$239/年，或 $349 终身买断**（创始人促销价，原价 $759）。

$349 一次性买断，比请一个设计师做一页 Landing Page 便宜多了。他们的 FAQ 里写得很直白：自由职业者做一个 Landing Page 收费 $500-$2000，Agency 做一个网站起步 $5000。

🧪 实测：两条路线复刻

光说不练假把式。我们从 MotionSites 选了两个免费模板，用两种方式复刻。

路线一：Cursor + Prompt（接近满分还原）

模板选择：Asme — 一个全屏视频背景的 Hero Section，风格是电影感的 Liquid Glass 设计。

操作过程：从 MotionSites 复制 Prompt → 粘贴进智谱 Zcode → AI 自动生成 React + Tailwind CSS + Framer Motion 项目。

出来的效果：

Cursor 复刻 Asme 模板效果

导航栏的 glassmorphism 透明效果、全屏视频背景自动播放、”Built for the curious” 大标题、邮箱订阅表单、”Read the manifesto” 渐变按钮——基本 1:1 还原。

Zcode 甚至自动处理了视频配置（muted + autoplay + playsinline）、淡入动画系统、Liquid Glass 布局适配。整个流程不到 5 分钟。

路线二：纯 HTML 手撸（轻量复刻）

模板选择：3D Portfolio — 一个叫 Jack 的 3D 创作者作品集页面。

这段 Prompt 有多详细？13,877 个字符。

它规定了：

  • 全局背景色 #0C0C0C，字体 Kanit，字重 300-900
  • Hero 标题渐变色 linear-gradient(180deg, #646973 0%, #BBCCD7 100%)
  • 联系按钮渐变背景角度 123deg，四个色标精确到百分比
  • 滚动 Marquee 双行图片的偏移公式
  • 甚至每个元素的 Framer Motion 入场动画 delay 精确到 0.15 秒

这不是”帮我设计一个好看的网页”。这是一个完整的工程文档。

我按这段 Prompt 用纯 HTML/CSS/JS 复刻：

3D Portfolio 复刻版 Hero Section

3D Portfolio 复刻版全页面

核心视觉全部还原：暗黑主题、渐变大标题、渐变按钮、Marquee 滚动、Services/Projects 布局。还原度大约 85%。

差异在哪？Framer Motion 的卡片堆叠 scale 效果、磁力跟随组件、逐字滚动渐显动画——这些需要 React 环境才能完整实现，纯 HTML 版只能做简化版。

这是 MotionSites 上的原版预览：

MotionSites 原版 3D Portfolio 模板

📊 两条路线对比

智谱 Zcode + Prompt 纯 HTML 手撸
还原度 ~95% ~85%
耗时 5 分钟 30 分钟
技术门槛 会用 Zcode 就行 得懂 CSS/JS
可维护性 标准 React 项目 单文件，好部署
动画效果 完整 Framer Motion CSS animation 简化版
适合场景 给客户交付 快速预览/演示

结论很明确：如果你用 AI 编程工具（Zcode、Cursor、Lovable、v0），MotionSites 的 Prompt 基本可以一键还原。 如果不用这些工具，还原度会打折扣，但视觉框架照样能出来。

💡 这说明了什么？

Prompt 质量决定 AI 输出质量

同一个人用同一个 AI 工具，”设计一个炫酷的网页”和”设计一个背景 #0C0C0C、Kanit 字体、渐变色 #646973→#BBCCD7 的 3D 创作者 Portfolio”出来的效果天差地别。

MotionSites 卖的不是设计——是精心调教过的 Prompt。 这些 Prompt 有人反复测试、调整、打磨，确保粘进 AI 工具就能出好东西。

商业模式很聪明

免费模板引流，Premium 模板变现。成本是什么？设计能力和 Prompt 工程能力——边际成本几乎为零。一个 Prompt 写好了，可以卖给无数个人。

$349 终身买断，对自由职业者来说一个项目就回本。

对开发者的启示

如果你想学 Prompt 工程，MotionSites 的免费模板是最好的学习材料。

看看人家怎么描述一个网页的——不是”好看一点”，是 linear-gradient(180deg, #646973 0%, #BBCCD7 100%) + -webkit-background-clip: text。这种精确度才是 AI 能理解的”好看”。

🤔 我的评价

优点：

  • 模板设计水平高，不是随便糊的
  • Prompt 精确到 CSS 属性级别，AI 工具直接能用
  • 分类清晰（Sites / Sections / Backgrounds），按需取用
  • $349 终身买断的价格对职业设计师/自由职业者合理

不足：

  • 免费模板数量有限，大部分好看的标了 Premium
  • Prompt 基于特定技术栈（React + Framer Motion + Tailwind），换技术栈需要自己翻译
  • 偏视觉设计，缺乏内容策略（文案、转化优化等）

适合谁？

  • 自由职业设计师/开发者，需要快速出高质量 Landing Page
  • 做 AI 网页生成内容的自媒体博主（废话，他们就在用）
  • 想学 Prompt 工程的创业者

不适合谁？

  • 不碰前端的人
  • 需要深度定制功能型产品的人（这是设计模板，不是功能模板）

参考链接

  1. MotionSites.ai 官网：https://motionsites.ai/
  2. MotionSites Sections 区块库：https://motionsites.ai/sections
  3. MotionSites 定价页：https://motionsites.ai/unlimited
  4. 智谱 Zcode（AI 编程工具）
  5. Cursor：https://cursor.sh
  6. Lovable：https://lovable.dev
  7. v0 by Vercel：https://v0.dev