Motionsites-AI/claude-skill

如果你已经用 Claude 生成前端页面、但嫌结果千篇一律，可以试；如果需要完全自包含的设计系统，或无法开启 Claude 的代码执行和浏览器截图，就不必了。

解决什么问题

让 Claude 写落地页，通常能跑起来，却和别的 AI 生成站点长得一样：布局含糊、渐变凑数、素材像图库。缺失的是三步——具体的视觉参考、有品味的真实素材、以及对渲染结果的检查。这个 skill 把三者打包在一起：Claude 先读一份详细的构建规格，再照着做页面，然后截图检查并修正问题。最终产物仍是可直接部署的 HTML/CSS/JavaScript，只是把原本靠人脑补的规划与验收环节挪进了 skill 的流程里。

有什么不同

它的机制不是框架，而是一套参考资料：40 个取自 MotionSites 最受欢迎免费提示词的示例、一个公开托管的素材架（50 多个主视觉视频、透明 3D 抠图和图片，按编号联系表展示），以及 55 个以上带可用代码的技法配方，包括无缝视频循环、液态玻璃、滚动叙事和 Three.js 场景。还有带具体数值的排版、间距、色彩和动效规则，以及 Claude 在动手前填写的规格模板。截图检查环节依靠一个截图与 QA 脚本，检查资源缺失、移动端溢出、字体和视频播放，并按评分表打分；README 把 Playwright 列为让这一步生效的方式。

代价在于，这个 skill 的品味来自那套参考库，而它只是付费目录的免费样本。README 说明 skill 的说明和代码是 MIT，但示例提示词和素材版权归 MotionSites，只能用于借助该 skill 构建的站点，因此在把它用于模板或客户交付前，值得先读 license 文件。提示词模式还面向 Lovable、Bolt、v0、Cursor、Manus、Google AI Studio 和 Kimi，即使最终不用 Claude 来构建页面，这个 skill 也有用。

谁值得试

适合已经在用 Claude Code 或 Claude.ai 做营销页、并且愿意装 Playwright 让截图自查真正看到页面的开发者或设计师。也适合只想要一份高质量提示词交给其他构建工具的人，因为要 Lovable 或 v0 提示词时完全绕开了代码执行要求。不适合需要确定性组件库、离线素材，或想把提示词和视频再分发的人：素材靠公开托管，素材许可也比代码许可更窄。

使用条件与边界

在 Claude.ai 和 Claude desktop 上要通过 zip 安装，并在 Settings → Capabilities 中开启代码执行，否则 skill 无法运行脚本。Claude Code 用户可以从仓库的插件市场安装，或手动复制 skill 目录。截图检查环节按 README 的说法最好配合 Playwright 使用，这意味着要额外安装 Chromium，多出一个依赖。素材是公开托管而不是随包分发，预览效果取决于这些链接是否一直可用。

更根本的限制是范围和后续维护：库只有 40 个提示词和固定的素材架，高级提示词、区块提示词和 MotionSites MCP 需要付费计划。示例提示词和素材只获准用于借助该 skill 构建的站点，不能随意再分发，完整条款只在 license 链接里。

HotRepo 点评

唯一有日期的信号是 2026-10-27 在 Python 新项目榜上的观测：142 个总 star，排第 23 名；这是快照而非日增，也没有可比历史来判断热度能否持续。只能把它看作一个年轻的、仅有一次记录的项目。采用前先打开 license，确认素材和提示词条款允许你产出什么。

项目源码与说明