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

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

评论区全是”求 prompt！”。

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

今天我帮你把底裤扒了。

🎯 博主们的秘密武器

网址：https://motionsites.ai/

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

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

MotionSites.ai 模板库，Jack 3D Portfolio 模板展示

就这么简单。很多你看到的”vibe coding 炫酷效果”短视频，prompt 的来源就是这个网站。上面这个叫 “Hi, I’m Jack” 的 3D Portfolio 模板，就是最典型的例子——暗黑主题、巨型渐变标题、3D 装饰元素、滚动动画，一应俱全。

🔍 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。

🧪 实测：Zcode 一键复刻 Asme 模板

光说不练假把式。我们从 MotionSites 选了一个免费模板 Asme —— 一个电影感的 Liquid Glass 风格 Hero Section，包含全屏视频背景、玻璃态导航栏、渐变按钮和邮箱订阅表单。

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

出来的效果：

Zcode 复刻 Asme 模板效果

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

Zcode 复刻 Asme 完整页面

Zcode 甚至自动处理了视频配置（muted + autoplay + playsinline）、淡入动画系统、Liquid Glass 布局适配。这就是一段精心调教的 Prompt 的威力。

🎓 提示词深度解析：13,877 字符的工程文档

MotionSites 最有价值的不是那些漂亮的预览图，而是背后的 Prompt。

我扒了其中一个模板（3D Portfolio）的完整 Prompt，13,877 个字符。这不是”帮我设计一个好看的网页”——这是一个完整的工程文档。

让我们拆解看看。

第一层：全局视觉规范

Background: #0C0C0C on html, body, #root, and the main wrapper
Font family: ‘Kanit’, sans-serif
CSS class .hero-heading: gradient text using background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%) with -webkit-background-clip: text and -webkit-text-fill-color: transparent

没有模糊的描述。背景色精确到 hex 值，字体指定 Google Fonts 上的 Kanit，字重范围 300-900。渐变标题不是”灰色到白色渐变”，而是 linear-gradient(180deg, #646973 0%, #BBCCD7 100%) + -webkit-background-clip: text。

这就是 AI 能理解的”好看”。 模糊的形容词（”高级感”、”科技风”）对 AI 来说就是噪音，精确的 CSS 属性才是信号。

第二层：响应式断点策略

整个 Prompt 用 Tailwind CSS 的响应式前缀处理断点，而不是手写 media query：

Font sizes: text-[14vw] sm:text-[15vw] md:text-[16vw] lg:text-[17.5vw]
Padding: px-6 md:px-10 pt-6 md:pt-8

使用 vw 视口单位做流式字号，配合 sm:/md:/lg: 断点微调。这种写法的好处是：字号会随屏幕宽度平滑变化，不会在断点处突然跳变。

更聪明的是 clamp() 的运用：

Font size: clamp(3rem, 12vw, 160px)

最小 3rem（48px），最大 160px，中间跟着视口宽度的 12% 走。一个函数搞定三套设备。

第三层：动画系统的精密编排

这段 Prompt 对动画的描述尤其精彩。不是简单说”加个淡入动画”，而是每个元素都有独立的动画参数：

FadeIn animations: Navbar fades in with delay 0, y -20. Heading: delay 0.15, y 40. Left text: delay 0.35, y 20. Contact button: delay 0.5, y 20. Portrait: delay 0.6, y 30.

注意延迟时间的递进：0 → 0.15 → 0.35 → 0.5 → 0.6。这是精心编排的入场节奏——导航栏先到，标题跟上，文字和按钮依次出现，人像最后落位。每个元素的初始位移方向也不同（导航栏从上方 y:-20 进入，标题从下方 y:40 进入），制造层次感。

更硬核的是 Marquee（滚动图片墙）的实现：

Scroll offset calculated as: (window.scrollY - sectionTop + window.innerHeight) * 0.3
Row 1: moves RIGHT on scroll (translateX(offset - 200))
Row 2: moves LEFT on scroll (translateX(-(offset - 200)))

不是简单的 CSS 动画，而是基于滚动位置的视差效果。两行图片反向运动，0.3 的系数控制敏感度。还特别标注 willChange: 'transform' 和 passive 事件监听器——这是前端性能优化的细节，确保动画不卡。

第四层：可复用组件设计

Prompt 定义了三个可复用组件，每个都有完整的 API 描述：

Magnet（磁力跟随）：

Tracks mouse position relative to element center, applies translate3d transform divided by strength factor. Activates when cursor is within padding distance of element edge.

鼠标靠近时元素被”吸引”过去，strength 参数控制吸力大小。激活/恢复用不同的 transition 时间（0.3s 进，0.6s 出），制造”快吸慢放”的弹性手感。

AnimatedText（逐字滚动揭示）：

Each character goes from opacity 0.2 to 1 based on its position in the text relative to scroll progress.

整段文字不是一次性出现，而是随着滚动逐字点亮。每个字符的透明度跟它在文本中的位置和滚动进度挂钩——这是 Framer Motion 的 useScroll + useTransform 的高级用法。

💡 这说明了什么？

Prompt 质量 = AI 输出质量

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

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

对开发者的启示

如果你想学 Prompt 工程，MotionSites 的免费模板是最好的教科书。

看看人家怎么描述一个网页的——不是”好看一点”，是 linear-gradient(180deg, #646973 0%, #BBCCD7 100%)。不是”加个动画”，是 delay 0.15, y 40, duration 0.7, easing [0.25, 0.1, 0.25, 1]。

这种精确度才是 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