Claude 做的網站只會往下捲？裝官方 Frontend Design skill，再寫一段「滑動劇本」

01同一個 Claude，兩種網站

我們讓 Claude 替「檜 HINOKI」做了兩次官網。第一次只打一句話：「幫我做一個香水品牌官網，品牌叫『檜 HINOKI』台灣檜木香氛，照片在 assets 資料夾。」第二次先裝 Frontend Design skill，再附上一段滑動劇本。品牌一樣，照片也一樣。

一句話的版本不難看：深色、金色、真照片都有。但它的動態只有區塊進場淡入，加上自己播放的漂浮和跑馬燈，跟你的手指沒有關係，滑到後面就是一段一段的小字。寫了劇本的版本，每個畫面只有一個主角，而且完全跟著捲動走：你停，它就停；你往回滑，它就倒帶。

02第 1 步：在 Claude Code 安裝 Frontend Design skill

1. 打開 Claude Code。
2. 輸入：/plugin install frontend-design@claude-plugins-official（也可以輸入 /plugin，到 Discover 裡找 frontend-design）。
3. 裝好之後，做網頁、介面時它會自動啟用。保險起見，prompt 第一句還是寫「用 Frontend Design skill」。

它放在 Anthropic 官方的 plugin 目錄 claude-plugins-official 裡，說明寫的是做出「避開一般 AI 長相」的介面。它讓 Claude 像設計主管一樣做事：先寫設計計畫（4 到 6 個有名字的顏色、字體分工、版面概念），再拿計畫跟你的需求對照，看起來像預設值的地方就改掉，然後才寫程式，邊做邊截圖檢查。

最下面那段最值得看。第一版計畫把「50 ml / 18%」放在開場、每段都用淡入、三個香調做成三張一樣的圓角卡片。它對照需求後自己全部改掉：開場只放瓶子和光圈，數字自己一個畫面，香調改成整個螢幕的橫向滑動。

• Frontend Design plugin（GitHub） — Anthropic 官方 plugin 目錄，Apache 2.0 授權

03第 2 步：準備 2 到 3 張真的照片

滑動網站的主角是照片。沒有照片，Claude 只能畫灰色框，動畫再厲害也撐不起來。我們準備了三張，全部用 ChatGPT 生成：

1. 產品去背圖（透明背景的 PNG）：開場放大、轉角度的就是它。
2. 場景照：起霧的檜木林，當開場背景，也填進 HINOKI 的字母裡。
3. 靜物照：瓶子放在檜木上、黑底，給香調和結尾用。

把照片放進專案資料夾，檔名取清楚，prompt 裡直接點名哪張照片用在哪裡。

04第 3 步：貼上滑動劇本 prompt

這段 prompt 分成四塊：照片、氛圍、滑動劇本、節奏。把［］換成你的品牌，再貼給 Claude Code。

用 Frontend Design skill 幫我做一個［品牌類型］的單頁官網，手機優先，要滑一下就會動。
品牌：「［品牌名＋英文名］」。照片：［照片1］、［照片2］、［照片3］，只用這幾張，不要灰色佔位框。
氛圍：［例如 像美術館的黑，全黑底，產品後面一圈發光的圓］；［例如 香水廣告的質感，只打產品的光，留大量的黑］；［例如 超大的襯線字壓在照片上］。
滑動劇本（照順序，全部跟著捲動走，不要自己播放）：
1. 開場釘住約［3］個螢幕：［產品］從小慢慢放大、轉一點角度，後面的［背景照］往反方向慢慢移動。
2. 一個超大的字「［品牌英文名］」一個字母一個字母擦出來，下面接一句中文。
3. ［三個重點］橫向滑過去（往下捲，畫面往左走），每個一整個螢幕。
4. 數字段：［數字1］、［數字2］，數字跟著捲動往上數。
5. 結尾：［照片］放大＋一顆按鈕「［行動］」。
節奏：開場最長，字母擦出要慢，每個重點停一下，數字快，結尾停住不動。
動畫全部用捲動位置計算（不用計時器）。全部繁體中文。

氛圍那三句，是我們看完參考圖後整理出來的重點，例如「像美術館的黑：全黑底，瓶子後面一圈發光的圓」。寫畫面，不要寫形容詞：「高級感」Claude 看不懂，「全黑底、只打產品的光」它就做得出來。

05劇本 5 段，逐段看成品

下面是 Claude 照劇本做出來的畫面，用手機寬度截圖。劇本裡的「釘住幾個螢幕」，意思是這段畫面固定在螢幕上，讓你滑多久它才放開。

第 1 段・開場：瓶子從小放大、轉正，光圈跟著亮起來，後面的森林往反方向移動、慢慢變暗。標題「把一整座山的霧，裝進一只瓶子」一開始滑就往上淡出，最後只剩瓶子、光圈和「台灣檜木香氛」。

第 2 段・大字擦出：一個比手機還寬的「HINOKI」往左移，每個字母經過一條固定的線時被擦出來，字母裡填的是森林照。全部寫完後，整個字縮回剛好一個螢幕寬，下面的中文一個字一個字出現。

第 3 段・橫向香調：你往下捲，畫面往左走。前調檜木、中調雪松、後調琥珀，各佔一整個螢幕，每個停一下才換下一個。直排的大字壓在照片邊緣，比照片還搶眼。

第 4、5 段・數字和結尾：50 ml 和 18% 跟著捲動往上數，數字大到佔滿螢幕寬。結尾的靜物照放大、變亮，只留一顆「預約試香」按鈕，然後完全停住。

06第 4 步：用手機寬度打開，一段一段調節奏

第一版做好後，用手機（或瀏覽器的手機模式）從頭滑到尾。哪一段太快或太慢，就只改那一段的捲動長度。Claude 做的檔案裡，每段的長度就是一個高度數字，扣掉一個螢幕就是釘住的長度：

1. 開場 400vh：釘住約 3 個螢幕，全站最長。
2. 大字 300vh：約 2 個螢幕，字母擦出要慢。
3. 香調 380vh：三個香調加上中間的停頓。
4. 數字 250vh：比較短，數字要快。
5. 結尾 100vh：一個螢幕，不再動。

我們實際修過三個地方，你很可能也會遇到：

1. HINOKI 那段結束時，大字滑到上方導覽列底下，跟品牌名疊在一起。改成這段最後 10% 先整段淡出，下一段再從黑色浮上來。
2. 導覽列壓到產品。導覽列加一層由黑到透明的漸層。
3. 段落交接時，有一兩個畫面只剩一行字、其他全黑。調整那段開始釘住和放開的位置。

第［2］段太快了，捲動長度加長一個螢幕，其他段不要動。
第［2］段結束時，字會滑到導覽列下面。請在這段最後 10% 先整段淡出，下一段從黑色淡入。

07要注意

1. 「檜 HINOKI」是虛構品牌，50 ml、18% 這些規格和文案都是示範用的。網站由 Claude Code 加 Frontend Design skill 在 2026 年 10 月生成，照片由 ChatGPT 生成。
2. 官方 plugin 目錄也提醒：安裝任何 plugin 前，先確認你信任它。
3. 劇本最後那句「動畫全部用捲動位置計算」也照顧到手機開了「減少動態」的人：我們這個版本會直接顯示每段完成的畫面。上線前自己開一次這個設定確認。
4. 字體要用可商用的。我們用 Libre Baskerville 和 Noto Sans TC，兩個都是 SIL OFL 授權，字型檔放在專案裡。
5. 正式上線前，把 AI 生成的產品照換成實拍，客人看到的瓶子才會跟收到的一樣。
6. 參考圖只拿來寫氛圍句子，不要把別人的照片或設計放進你的網站。