--- title: "MotionSites 是什麼？用 Prompt 就能產出高級動態網站的提示詞庫完整介紹" slug: motionsites-ai-prompt-library url: https://rar.design/posts/motionsites-ai-prompt-library published_at: 2026-04-17 modified_at: 2026-04-17 author: "設計師 Riven" category: "AI 設計" access: public_access --- # MotionSites 是什麼？用 Prompt 就能產出高級動態網站的提示詞庫完整介紹 > 不用寫程式，複製貼上結構化 Prompt 就能產出帶動畫的專業 Hero Section By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-04-17 CHAPTERMotionSites 是什麼？一個讓你用 Prompt 就能產出高級動態網站的提示詞庫當 AI 建站工具越來越成熟，真正的瓶頸不再是「能不能做」，而是「怎麼讓成品看起來像專業團隊花三週做出來的」。MotionSites 想解決的，就是這個品質落差。如果你最近有在關注 AI 建站這個領域，大概會注意到一個趨勢：工具越來越多，但大部分人用 AI 做出來的網站，還是長得像「AI 做的」。排版沒問題、功能可以跑，可就是少了那種讓人多看兩眼的質感。問題不在工具本身的能力，而是你下的 Prompt 不夠精準。一句「做一個深色風格的 Landing Page」和一段定義了字級、間距、Tailwind 色票、Framer Motion 動態、液態玻璃效果的結構化提示，產出的東西完全是兩個世界。MotionSites 就是一個專門收錄這種「高品質結構化提示詞」的資源庫，讓你直接複製貼上到 Lovable、Claude Code 或任何 AI 編程工具裡，幾分鐘內就能產出帶有影片背景、滾動動畫、液態玻璃效果的網站 Hero Section。▲ MotionSites 官方首頁：以動態預覽方式展示各種 Hero Section 風格CHAPTERMotionSites 的定位：不是建站工具，是 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 工具生成CHAPTERMotionSites 使用流程教學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 工具做進一步的迭代修正。▲ 最終產出範例（Grow AI）：帶有漸層文字、CTA 按鈕、Logo Marquee 的完整 Hero SectionCHAPTER一組 MotionSites Prompt 長什麼樣？MotionSites 的提示詞和你平常寫的 Prompt 很不一樣。它不是「做一個暗色系的 SaaS Landing Page」這種模糊指令，而是一份接近技術規格書的結構化文件。以 Viktor 公開分享過的一組 Prompt 為例，裡面會包含這些層次的定義：🔍 Prompt 結構拆解設計系統層CSS 變數定義（色彩、圓角、字型），確保整體視覺一致性版面結構層Navbar 配置、Hero 區塊佈局、CTA 按鈕位置、Logo Marquee 排列排版規格層標題 230px、字重、行高、字距、漸層文字效果的精確參數動態行為層Framer Motion 動畫參數、hover 狀態、影片循環播放與淡入淡出邏輯元件規格層每個 UI 元素的 Tailwind 類名、間距、圓角、透明度，精確到像素這種程度的提示詞，就像是把一位資深前端工程師的設計決策全部預先寫好。AI 工具拿到這份「規格書」後，產出的品質自然會遠超一般泛用提示。▲ Synapse AI Hero：這就是一組結構化 Prompt 的產出——從色彩系統到動畫行為都在提示詞裡預先定義CHAPTERMotionSites 提供哪些類型的 Prompt？根據 Viktor 在 X 上發布的完整目錄，MotionSites 的 Prompt 涵蓋了七大類別：🎬 Cinematic Website Heroes影片背景、液態玻璃效果的高衝擊力首屏📄 Full Landing Page Blueprints完整多區塊 Landing Page，含設計系統📊 Animated Presentation Decks動態簡報，讓提案像產品 Demo💧 Liquid Glass & Micro-Interactions液態玻璃質感與微互動效果的專用 Prompt⚡ One-Shot Premium Workflows一次性產出 Awwwards 等級網站的系統化流程🤖 Claude + Nano Banana Prompts專為 Claude 優化的電影級視覺 PromptCHAPTER更多 Hero Section 風格展示MotionSites 目前收錄了超過數十種不同風格的 Hero Section，涵蓋多種產業和視覺方向。以下是部分範例：▲ New Era Automotive：汽車產業風格的 Hero Section，帶有影片背景和漸層文字▲ 左至右：EcoVolta（電動車）、Bold Portfolio（作品集）、Crypto Wealth（Web3）▲ Space Voyage（左）與 Innovation（右）：從太空探索到科技創新，風格跨度很大CHAPTER影片教學：用 AI 建立高品質動態網站Viktor 在 YouTube 上發布了一支詳細的教學影片，示範如何搭配 MotionSites 的 Prompt 和 AI 工具從零產出一個高品質的動態網站。如果你偏好影片學習，這是入門的最佳起點。▲ 點擊觀看 Viktor 的完整教學影片：如何用 AI 建立高品質 Motion Site（YouTube 連結）CHAPTERMotionSites 價格方案MotionSites 目前採用一次性買斷制，具體方案如下：項目內容方案類型一次性買斷（Lifetime Deal）創始會員價US$29（原價 US$199）包含內容無限存取所有 Hero Prompt、未來 1000+ 資產、商業授權額外福利Design Rocket 課程 50% 折扣、優先支援免費內容Viktor 在 X 和 Threads 上持續分享免費 Prompt值得注意的是，MotionSites 首頁本身就是一個免費的視覺靈感庫，你可以不付費就瀏覽所有動態範例。付費解鎖的是背後那些可直接複製使用的完整 Prompt。CHAPTER使用前該知道的限制MotionSites 有明確的使用邊界，在決定購買前值得先了解：只專注 Hero SectionMotionSites 的核心價值在首屏（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 建站工具訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →