为什么想做滚动动画网站
你一定见过那种像 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 做出的成果可用于你自己或客户的商业项目，不需要标注来源。