MotionSites 是什麼？用 Prompt 就能產出高級動態網站的提示詞庫完整介紹
2026年4月17日 上午 6:11
AI 設計CHAPTER
MotionSites 是什麼？一個讓你用 Prompt 就能產出高級動態網站的提示詞庫
當 AI 建站工具越來越成熟，真正的瓶頸不再是「能不能做」，而是「怎麼讓成品看起來像專業團隊花三週做出來的」。MotionSites 想解決的，就是這個品質落差。
如果你最近有在關注 AI 建站這個領域，大概會注意到一個趨勢：工具越來越多，但大部分人用 AI 做出來的網站，還是長得像「AI 做的」。排版沒問題、功能可以跑，可就是少了那種讓人多看兩眼的質感。
問題不在工具本身的能力，而是你下的 Prompt 不夠精準。一句「做一個深色風格的 Landing Page」和一段定義了字級、間距、Tailwind 色票、Framer Motion 動態、液態玻璃效果的結構化提示，產出的東西完全是兩個世界。
MotionSites 就是一個專門收錄這種「高品質結構化提示詞」的資源庫，讓你直接複製貼上到 Lovable、Claude Code 或任何 AI 編程工具裡，幾分鐘內就能產出帶有影片背景、滾動動畫、液態玻璃效果的網站 Hero Section。
CHAPTER
MotionSites 的定位：不是建站工具，是 Prompt 武器庫
先釐清一件事：MotionSites 不是 Framer、Webflow 或 Lovable 那類建站平台。它不託管網站、不提供 CMS、也不幫你部署。它賣的是「提示詞」本身。
更精確地說，MotionSites 是一個以網站 Hero Section 為核心的 Prompt 資料庫。每一組提示詞都經過結構化設計，涵蓋了 React 元件結構、Tailwind CSS v4 樣式定義、動畫行為、字級排版、hover 狀態，甚至是背景影片的播放邏輯。你把它複製到 AI 工具裡，就能直接跑出接近成品的畫面。
以下是 MotionSites 上不同類型的 Hero Section 範例：
▲ 左至右：Agency 類（Buzzentic）、SaaS 類（Apex）、Portfolio 類（Viktor Portfolio）
🎬 Hero Section 提示詞
高衝擊力的首屏設計，包含影片背景、自訂字型、液態玻璃效果和流暢動畫。涵蓋 Agency、SaaS、Portfolio、Fintech、Automotive、Web3 等類型。
📐 結構化 Prompt 設計
不是模糊的靈感描述，而是精確到 CSS 變數、Tailwind 類名、Framer Motion 參數的完整提示。直接貼進 AI 工具就能用。
🔗 搭配 AI 建站工具使用
主要搭配 Lovable、Claude Code 等 AI 輔助工具。選擇視覺方向 → 複製 Prompt → 貼入工具 → 產出動態網站。
「AI 建站的品質瓶頸不在工具，而在提示。MotionSites 把專業級的 Prompt 打包成可複用的設計資產。」
CHAPTER
背後的人：Viktor Oddy 與 Design Rocket 生態系
MotionSites 的創辦人是 Viktor Oddy，一位擁有超過十年設計經驗的創業者。他在社群上非常活躍，X（Twitter）上有超過兩萬追蹤者，也經常在 Threads 和 Instagram 分享 AI 設計的實作流程。
MotionSites 其實是他更大的產品體系 Design Rocket 的一部分。Design Rocket 是一個 AI 設計教學平台，教使用者如何用 AI 工具設計出高品質的網站和數位產品。MotionSites 就像是從這個教學體系裡獨立出來的「素材包」——把他長期累積和分享的 Hero Section Prompt 整理成一個可以一鍵複製的資料庫。
如果你有在追蹤 AI 建站的社群討論，可能看過他用 Claude Opus 搭配 Nano Banana 和 Google Flow 做出電影級動態網站的示範。他的核心主張很明確：現在即使是初階設計師，也能借助 AI 做出過去需要資深前端花好幾天才能完成的動態效果。
▲ Viktor 的代表性 Prompt 產出：液態玻璃 Agency（左）與 Celestia（右），都是透過結構化 Prompt 搭配 AI 工具生成
CHAPTER
MotionSites 使用流程教學
MotionSites 的使用邏輯非常直覺。以下是實際操作的步驟：
1
瀏覽 Hero Section 模板庫
打開 motionsites.ai，你會看到依類型分類的 Hero Section 範例（Agency、SaaS、Portfolio 等）。每一個都有動態預覽，讓你直覺地挑選視覺方向。
▲ MotionSites 的模板預覽：每一個都展示不同視覺方向，供你快速挑選
2
選擇模板並複製 Prompt
選定一個你喜歡的風格後，點擊即可取得對應的結構化提示詞。這些 Prompt 通常很長，會定義完整的設計系統，從 CSS 變數、色彩、排版到動畫行為。
3
貼入 AI 建站工具
把 Prompt 貼到 Lovable、Claude Code、Cursor 或其他 AI 輔助編程工具裡。工具會根據提示詞自動生成包含 React 元件、Tailwind 樣式和動畫效果的完整 Hero Section。
4
微調與客製化
產出後根據你的品牌需求調整文案、色彩、圖片和影片。可以截圖回傳給 AI 工具做進一步的迭代修正。
CHAPTER
一組 MotionSites Prompt 長什麼樣？
MotionSites 的提示詞和你平常寫的 Prompt 很不一樣。它不是「做一個暗色系的 SaaS Landing Page」這種模糊指令，而是一份接近技術規格書的結構化文件。
以 Viktor 公開分享過的一組 Prompt 為例，裡面會包含這些層次的定義：
🔍 Prompt 結構拆解
設計系統層
CSS 變數定義（色彩、圓角、字型），確保整體視覺一致性
版面結構層
Navbar 配置、Hero 區塊佈局、CTA 按鈕位置、Logo Marquee 排列
排版規格層
標題 230px、字重、行高、字距、漸層文字效果的精確參數
動態行為層
Framer Motion 動畫參數、hover 狀態、影片循環播放與淡入淡出邏輯
元件規格層
每個 UI 元素的 Tailwind 類名、間距、圓角、透明度，精確到像素
這種程度的提示詞，就像是把一位資深前端工程師的設計決策全部預先寫好。AI 工具拿到這份「規格書」後，產出的品質自然會遠超一般泛用提示。
CHAPTER
MotionSites 提供哪些類型的 Prompt？
根據 Viktor 在 X 上發布的完整目錄，MotionSites 的 Prompt 涵蓋了七大類別：
CHAPTER
更多 Hero Section 風格展示
MotionSites 目前收錄了超過數十種不同風格的 Hero Section，涵蓋多種產業和視覺方向。以下是部分範例：
▲ 左至右：EcoVolta（電動車）、Bold Portfolio（作品集）、Crypto Wealth（Web3）
▲ Space Voyage（左）與 Innovation（右）：從太空探索到科技創新，風格跨度很大
CHAPTER
影片教學：用 AI 建立高品質動態網站
Viktor 在 YouTube 上發布了一支詳細的教學影片，示範如何搭配 MotionSites 的 Prompt 和 AI 工具從零產出一個高品質的動態網站。如果你偏好影片學習，這是入門的最佳起點。
CHAPTER
MotionSites 價格方案
MotionSites 目前採用一次性買斷制，具體方案如下：
| 項目 | 內容 |
|---|---|
| 方案類型 | 一次性買斷（Lifetime Deal） |
| 創始會員價 | US$29（原價 US$199） |
| 包含內容 | 無限存取所有 Hero Prompt、未來 1000+ 資產、商業授權 |
| 額外福利 | Design Rocket 課程 50% 折扣、優先支援 |
| 免費內容 | Viktor 在 X 和 Threads 上持續分享免費 Prompt |
值得注意的是，MotionSites 首頁本身就是一個免費的視覺靈感庫，你可以不付費就瀏覽所有動態範例。付費解鎖的是背後那些可直接複製使用的完整 Prompt。
CHAPTER
使用前該知道的限制
MotionSites 有明確的使用邊界，在決定購買前值得先了解：
只專注 Hero Section
MotionSites 的核心價值在首屏（above-the-fold）設計加速，並非完整網站模板。如果你需要包含內頁、後台、部署的全套方案，它可能不夠用。
需要搭配 AI 工具
Prompt 本身不會自己跑起來，你需要有 Lovable、Claude Code、Cursor 等工具才能實際使用。對完全不碰程式碼的人來說，仍有學習門檻。
文件與說明不多
官網以視覺展示為主，對於支援哪些工具、Prompt 的格式標準、更新頻率等細節缺乏清楚的文件說明。
技術棧相對固定
目前公開的 Prompt 主要以 React + Tailwind CSS v4 + Framer Motion 為主。如果你的技術棧不同，可能需要額外調整。
CHAPTER
設計師可以怎麼用 MotionSites
對設計師來說，MotionSites 的價值不只是「省時間」，更重要的是它重新定義了設計師的工作流程。以下是幾個實際應用場景：
快速提案與客戶溝通：接到新案子時，直接從 MotionSites 挑選幾個風格方向，用 AI 在半小時內產出三個動態原型。比起靜態 Mockup，帶有動畫的互動原型更容易讓客戶做出決定。
學習高品質 Prompt 寫法：即使你不買付費版，光是研究 Viktor 免費分享的 Prompt 結構，就能大幅提升你自己寫 AI 建站提示的品質。它的每組 Prompt 就像一份設計規格書的範本。
作品集與個人品牌網站：設計師最頭痛的往往是自己的網站。用 MotionSites 的 Portfolio 類 Prompt 搭配 Lovable，可以快速做出帶有動態效果的作品集首頁。
擴展動態設計能力：不是每位設計師都熟悉前端動畫。MotionSites 的 Prompt 讓你不用學 GSAP 或 Framer Motion 的語法，也能產出流暢的滾動動畫和互動效果。
▲ Portfolio 類型的 Hero Section：Cosmic Portfolio（左）與 3D Jack Portfolio（右），都可以直接用來做設計師作品集首頁
「MotionSites 最大的價值，可能不是它賣的 Prompt 本身，而是它示範了一種新的設計工作方式：用結構化提示取代手動編碼。」
📝 重點整理
MotionSites 是一個 AI 建站用的結構化 Prompt 資料庫，專注在網站 Hero Section
提示詞涵蓋 React + Tailwind CSS v4 + Framer Motion，精確到像素級的設計規格
搭配 Lovable、Claude Code 等 AI 工具使用，複製貼上即可產出動態網站
七大類別：Cinematic Heroes、Landing Page、簡報、Liquid Glass、One-Shot 流程、Claude 專用、Gemini 專用
創始會員價 US$29 一次買斷，含商業授權和未來更新
適合自由接案者、獨立設計師和小型團隊，用於加速首屏設計
限制：僅提供 Hero Section Prompt，不含部署或 CMS 功能，文件說明較少
延伸資源
✦MotionSites 官方網站：瀏覽所有 Hero Section 動態範例
✦Design Rocket：Viktor Oddy 的 AI 設計教學平台
✦20 UI Design Prompts 完整目錄：Viktor 在 X 上公開的免費 Prompt 合集
✦YouTube 教學影片：如何用 AI 建立高品質動態網站
✦Lovable：最常搭配 MotionSites Prompt 使用的 AI 建站工具
