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 自己当质检员。不过需要注意的是，它目前内置的媒体素材主要是通用范例，如果你做的是特定实物商品，依然需要自行准备匹配的高清无底素材，才能完全发挥出这种电影级质感。