MotionSites Web Builder (claude-skill)

它是什么

一个Claude技能——一个可下载的附加组件，改变Claude构建网站的方式。它不再生成通用的AI布局，而是让Claude制作电影级、"获奖级别"的落地页。

它解决的问题

README指出，AI构建的网站看起来都一样，原因有三：

1. 模糊的计划——编码前没有精确的设计简报
2. 没有真实媒体——没有实际的视频或图像可供使用
3. 没有人查看结果——没有审查或质量检查

这个技能解决了所有三个问题。

工作原理

工作流程如下：

1. Claude研究MotionSites（一个设计画廊网站）上最受欢迎的设计
2. 它选择真实的电影级媒体（视频、3D剪影、图像）
3. 在编写任何代码之前，它编写精确的构建规格
4. 它构建页面
5. 它对自己的工作进行截图并修复，直到通过"画廊级标准"

包含内容

• 40个示例提示——MotionSites上最受欢迎的免费提示。Claude为每个新简报阅读最接近的2-3个，以匹配其细节和品味水平。
• 媒体库——50多个电影级英雄视频、30个透明3D剪影和29张图像，公开托管并显示在编号的联系表上，以便Claude通过视觉选择媒体。
• 55+技术配方，包含可工作的代码，包括：无缝视频循环、液态玻璃、逐词模糊标题、鼠标擦洗视频、聚光灯揭示、深度轮播、滚动故事和真实3D模型（Three.js）。
• 带有真实数字的设计品味规则——字体比例、字距、间距、颜色、动效时间和文案指南。
• 规格模板——Claude在编码前编写的精确简报。README称这是"质量决定之处"。
• 查看和修复循环——一个截图+QA脚本，检查损坏的资产、移动端溢出、字体和视频播放，以及评分标准。
• 提示模式——你可以要求提示而不是代码，针对Lovable、Bolt、v0、Cursor、Manus、Google AI Studio或Kimi进行了调优。

安装

Claude.ai和Claude桌面版：

1. 从最新版本下载motionsites-web-builder.zip
2. 在Claude中：自定义→技能→+→创建技能→上传技能，选择zip文件，并启用它
3. 必须在设置→功能中启用代码执行

Claude Code（插件）：

/plugin marketplace add Motionsites-AI/claude-skill
/plugin install motionsites-web-builder@motionsites

（没有GitHub SSH密钥？改用HTTPS URL变体。）

Claude Code（手动）： 将plugins/motionsites-web-builder/skills/motionsites-web-builder复制到~/.claude/skills/。

**可选以获得最佳效果：**安装Playwright，以便Claude可以看到自己的工作：

pip install playwright && python -m playwright install chromium

如何使用

只需让Claude构建一个网站——技能会自动启动。README中的示例提示：

• "为豪华睡眠追踪戒指构建一个落地页英雄区。"
• "为里斯本的建筑摄影师制作一个作品集主页。编辑风格且安静。"
• "为我的AI旅行应用编写一个Lovable提示，用于候补名单页面。"
• "这是我的当前网站：让它看起来获奖级别。"

免费与付费

这个技能是一个免费样本。一个名为MotionSites Unlimited的付费层级解锁：

• 500多个高级网站提示（适用于Lovable、Bolt、v0、Cursor和Claude）
• 动画英雄背景和部分提示（功能、定价、页脚等）
• 40多个Lovable模板
• MotionSites MCP，让Claude搜索并将任何高级提示拉入构建中
• 用于个人和客户工作

许可证

• 技能的说明和代码是MIT。
• 示例提示和媒体仍归MotionSites所有，但你可以在此技能构建的网站中使用它们。

关键要点

核心思想：Claude不仅仅从模糊的请求生成页面。它研究获奖示例，选择真实媒体，编写精确规格，构建，然后审查自己的截图并迭代，直到结果达到高质量标准。