為什麼想做滾動動畫網站
你一定看過那種像 Apple 產品頁的網站：一往下捲，畫面就像影片一樣播放，料理一層層組合、產品慢慢旋轉。我是產品經理，不是工程師，但我想替一個餐廳網站做出這種效果。以下是我用 Claude Code 搭配 EMBER TABLE Skill 的實際流程，在 Codex 和 Cursor 裡也一樣可行。
滾動逐格動畫是怎麼運作的？
它不是影片。網頁裡放了一連串靜態圖片（EMBER TABLE 的示範素材包有 192 張影格），依照你捲動的位置，把對應的那一張畫到 canvas 上。往下捲就往前播，往上捲就倒轉。要做得流暢，得處理預先載入、捲動位置對應影格、Retina 螢幕清晰度、手機的輕量版本。這些很難用一句提示詞講清楚，而 Skill 已經把它們寫好交給 AI。
你需要準備
- 已安裝並登入 Claude Code（或 Codex／Cursor）
- 一個空的專案資料夾
- 從 Skill 頁面 取得 EMBER TABLE Skill（任何方案都包含，見方案價格）
- 餐廳名稱與一段品牌故事。可以先用示範素材包（192 張動畫影格＋15 張照片），之後再換成自己的
第一次用 Skill？先看什麼是 Skill、怎麼使用。
步驟 1：在 Claude Code 開啟專案資料夾
建立資料夾（例如 ember-site），在那裡開終端機並輸入 claude。把示範影格和照片放進資料夾（或 assets 子資料夾），讓 AI 讀得到。
步驟 2：貼上 Skill
複製完整的 EMBER TABLE Skill，當作第一則訊息貼上。也可以存成 SKILL.md 放進 skills 資料夾，之後直接叫用。Skill 會告訴 Claude 要做什麼（開場動畫、線上菜單、點餐、訂位表單）、要問你什麼、以及如何檢查成果。
步驟 3：回答它的問題
Claude 會詢問餐廳名稱、故事、素材位置等。用一般口語回答即可，不需要懂 HTML、CSS 或 JavaScript；產出的是完整的純 HTML、CSS、JavaScript 網站。
步驟 4：打開成果並捲動
完成後用瀏覽器打開 index.html，慢慢捲過首屏。檢查三件事：動畫是否雙向跟著捲動、有沒有閃爍、上方文字是否清楚。
步驟 5：用口語反覆調整
大部分時間會花在這裡，這很正常。好用的說法：
- 「動畫播太快，把首屏的捲動距離拉長。」
- 「手機上有點卡，寬度 768px 以下改用較少、較小的影格。」
- 「如果訪客開啟減少動態效果，只顯示一張靜態圖。」
- 「標題改成……，字體不變。」
描述你看到的狀況，而不是怎麼寫程式。出錯時把瀏覽器的錯誤訊息貼上，或直接說哪裡怪。
步驟 6：檢查手機與桌機
Skill 的版面已在 360 px 手機到 1440 px 桌機之間檢查過，但發布前仍建議用瀏覽器的裝置預覽自己看一次。
步驟 7：換成自己的影格
想用自己的動畫：拍或用 AI 生成一段短片，轉成編號圖片（可用 ezgif 的影片轉圖片免費工具，或請 Claude 幫你跑 FFmpeg），放進影格資料夾並告訴 Claude 張數。影格越多越順，但網頁也越重，請取得平衡。
想先免費試試這套流程？
同樣的「貼上、調整」流程也適用於免費專區的 Skill，例如 WORLDVIEW SAAS。它沒有逐格動畫，但能讓你零成本先熟悉流程，再解鎖 EMBER TABLE。
常見問題
需要會寫程式嗎？
不用。貼上 Skill、回答問題、用口語描述修改即可，會開終端機和瀏覽器就夠了。
只能用 Claude Code 嗎？
不是。Sketchry 的 Skill 是為 Claude Code、Codex 和 Cursor 撰寫的。
滾動動畫是影片嗎？
不是，是依捲動位置把一張張靜態圖畫到 canvas 上，所以能順暢倒轉。
手機會不會很慢？
影格太大就可能。請 AI 在小螢幕改用較少或較小的影格，並在減少動態效果時顯示靜態圖。
做好的網站可以交給客戶嗎？
用 Sketchry Skill 做出的成果可用於你自己或客戶的商業專案，不需標註來源。