MotionSites 開源 Claude 技能：一句話生成電影級動效落地頁

MotionSites 開源了一套名為 motionsites-web-builder 的 Claude Skill，專門用來幫你在 Claude 裡做出畫廊級別、有電影質感的網頁落地頁，徹底告別以往 AI 生成頁面那種千篇一律的白底方塊風。

普通 AI 做的網站之所以一眼就能看出機味，通常是因為缺乏明確的設計規範、沒有高質量的真實媒體素材，而且模型生成完程式碼自己根本不看。這套技能把作者積累的 700 多個網頁設計經驗轉化成了 Agent 可以執行的規則，專門針對這三個痛點做了補全。

它包含什麼，怎麼做到的

這套技能並不是簡單地往提示詞裡塞幾句「請做得高階一點」，而是提供了一整套工程化的設計系統和自動化質檢流程。

它內建了 40 個來自 MotionSites 最受好評的精選範例，每次收到需求時，Claude 會先調取最相關的兩三個案例，對齊設計顆粒度與審美調性。

為了解決素材問題，它自帶一個公開託管的媒體架子，包含 50 多個電影感背景影片、30 個透明 3D 剪影和 29 張高質量圖片。所有素材都有編號聯絡圖，Claude 可以直接按圖挑素材填入程式碼。

在動效上，它準備了超過 55 種現成的程式碼方案。比如無縫迴圈影片、液體玻璃質感、逐字模糊淡入、滑鼠拖拽控制影片進度、聚焦光暈、深度輪播、滾動敘事，以及基於 Three.js 的真 3D 模型渲染。

更關鍵的是它的自檢閉環。生成頁面後，Claude 會呼叫 Playwright 截圖指令碼自動對頁面進行體檢，檢查是否有資源失效、手機端寬度溢位、字型缺失或影片無法播放等問題，對照評分表反覆修改，直到達到展示級別。

如果你不想直接讓 Claude 寫程式碼，它還提供提示詞模式，能直接為你正在用的 Lovable、Bolt、v0、Cursor、Manus、Google AI Studio 或 Kimi 生成經過專門調優的建站提示詞。

怎麼裝，怎麼跑起來

這套工具使用門檻不高，但需要 Claude 具備程式碼執行許可權。

你可以在 GitHub 的 Motionsites-AI/claude-skill 專案頁面下載最新的 zip 壓縮包，進入 Claude 的自定義設定裡的技能頁面上傳開啟，並在能力設定中確認打開了程式碼執行。

如果你習慣使用終端外掛，也可以直接執行命令列新增外掛市場地址，或者把技能資料夾複製到本地的 Claude 技能目錄下。

為了讓自動截圖檢查功能完全跑通，建議在本地環境安裝 Playwright，執行 pip install playwright 並安裝 chromium 瀏覽器元件。

裝好之後直接用自然語言交代任務即可，比如讓它為奢華睡眠監測指環做一個首屏，或者為某位攝影師搭建極簡風格的個人作品集。

在授權方面，技能本身的指令和程式碼遵循 MIT 開源協議。自帶的提示詞範例和素材版權歸 MotionSites 所有，但允許使用者免費用在自己生成的網站中。他們同時提供了包含 500 多個高階提示詞和 MCP 工具的收費版本。

為什麼重要

對獨立開發者、出海創作者和小型品牌來說，這套工具非常值得一試。以往找外包做一套帶精美 3D 渲染和微動效的品牌落地頁成本極高，而現在只需給 Claude 一個明確需求，就能直接拿到具備上線水準的動效程式碼，省去了繁瑣的前端調優過程。

它的聰明之處在於把設計審美量化成了規則，比如嚴格限制字階、字距、動效節奏和留白比例，同時用自動化截圖讓 AI 自己當質檢員。不過需要注意的是，它目前內建的媒體素材主要是通用範例，如果你做的是特定實物商品，依然需要自行準備匹配的高畫質無底素材，才能完全發揮出這種電影級質感。