MotionSites 案例研究与系统化网站建设工作流设计

一、案例收集结果

MotionSites 是一个 AI 网页设计 Prompt 模板库：每个「案例」= 一个设计方向（Hero / Landing / SaaS / 3D / Portfolio 等），附带一段可直接复制的结构化提示词，用户粘贴到 Lovable / Cursor / Bolt / v0 / Claude 等 AI 建站工具即可生成完整页面。官网经抓取可达，全量提示词原文托管于公开 GitHub 镜像仓库。

1.1 案例库规模与分类

全量 125 个 提示词模板（免费 65 + Pro 60），按类型聚合为：

来源：官网 motionsites.ai 案例分类页（WebFetch 实测）+ GitHub 镜像仓库目录清单（api.github.com 实测，125 个 .md 文件）。

1.2 代表性案例清单（节选，覆盖主要类型）

1.3 代表性 Prompt 原文摘录

免费版（Apex SaaS）：单代码块、描述式，精确到 Tailwind class 与文案。结构是「技术栈 → 字体 → 颜色 Token → 工具类 → 分 Section 元素描述 → 动效 keyframes → 图标库」。

# Apex SaaS  (Category: SaaS / Type: hero / License: free)
## 📋 Prompt
Build a dark SaaS landing page with three sections: a floating glassmorphic
navbar, a hero section, and a social proof section with a background video.
Use React + Tailwind CSS + TypeScript.

Font: Install @fontsource/geist-sans (weights 400,500,600,700).
      Set body font to 'Geist Sans','Inter',system-ui,sans-serif.

Color System (HSL, CSS variables in :root):
  --background: 260 87% 3%    --foreground: 40 6% 95%
  --primary: 262 83% 58%     --primary-foreground: 0 0% 100%
  --card: 240 6% 9%          --radius: 0.75rem
Register hero.heading and hero.sub as Tailwind colors mapped to these variables.

Section 2 — Hero: ... Heading: h1 text-hero-heading text-center
  text-4xl sm:text-6xl lg:text-7xl ... "Accelerate Your" + br + "Revenue Growth Now".
Subheading: p text-hero-sub ... "Drive your funnel forward with clever workflows..."

Marquee Animation (Tailwind config):
  keyframes:{ marquee:{ "0%":{transform:"translateX(0%)"},
    "100%":{transform:"translateX(-50%)"} } }
  animation:{ marquee:"marquee 20s linear infinite" }
Icons: All from lucide-react — ChevronRight, ChevronDown, Clock...
*Generated by MotionSites Export Tool*

Pro 版（Nike Premium Landing）：工程级文件拆分，直接给可运行代码与依赖。

# Nike Premium Landing  (ID / Category: Landing Page / Type: hero)
Create a high-end, interactive Nike hero landing page with two scrolling
sections. The app requires `react-player` and `gsap` for animations.

### 1. Dependencies to Install
Install `react-player` and `gsap`.
### 2. Globals & Configuration (src/index.css)
  @import url('...Instrument+Serif...Manrope...');  @import "tailwindcss";
  @theme { --font-sans:"Manrope"; --font-serif:"Instrument Serif"; }
### 3. Bubble Menu Component (src/components/BubbleMenu.css)  ...
### 4. Bubble Menu Logic (src/components/BubbleMenu.tsx)  ...
（含完整 GSAP 时间轴、stagger 入场、状态管理代码）

二、生成逻辑归纳

MotionSites 的本质是一条「设计系统规范 → AI 代码生成」的单向流水线。提示词不是「一句话指令」，而是一份生产级设计规格书：它把资深前端的隐性知识（配色直觉、动效曲线、组件封装）显式编码为机器可消费的字段。

三、提示词结构模型

跨 15 个代表性模板（免费 + Pro）解析，MotionSites 提示词呈现稳定的八层结构。这是后续「模板构建」阶段的抽象依据。

免费版 vs Pro 版

四、系统化网站建设工作流

将 MotionSites 的「人工选模板→复制→生成」升级为可脚本化、可复用的五阶段流水线。每一阶段都有明确输入、步骤、输出与交付物，使「从 Prompt 库搭建 AI 生成网站」可批量化与自动化。

阶段 1 · 案例筛选（Case Screening）

阶段 2 · 提示词提取（Prompt Extraction）

阶段 3 · 内容分类（Content Classification）

阶段 4 · 模板构建（Template Construction）

阶段 5 · 网站生成（Site Generation）

五、网站基础要素（目标建站系统功能框架）

以下为本次明确要纳入「网站设计」的目标系统功能框架。它定义了由上述工作流搭建出的站点应具备的能力，与 MotionSites 的「视觉炫技」取向互补：外贸 / 企业建站的核心在转化与运营基础设施。

小结：功能框架覆盖「建站基座 → 内容生产 → 全球化 → 获客优化 → 转化承接 → 传播」六环，整体来看功能框架比较全。

六、可复用性与辩证审视