motionprompts

motionprompts MCP

一个基于 259 个生产级 GSAP 动效组件目录运行的 MCP 服务 (motionprompts.dev)。精选组件可免费使用，并提供完整提示词；其余组件会返回 12 行预览，除非你提供 Full Stack 密钥 （Authorization: Bearer mpk_...，获取地址：motionprompts.dev/account）。套餐：motionprompts.dev/pricing。它不会生成动画：它会将已经解决并调试好的动画交给你，告诉你如何组合它们，避免彼此冲突；如果目录中没有你要找的内容，也会明确告知。

提供的功能

工具	用途
plan_page	页面信息架构：包含 9–14 个区块，说明各自的角色、作用，以及是否应该动起来。刻意不返回组件。
suggest_mechanics	为一个区块推荐动效机制，并根据其角色的实际属性筛选。知道如何回答「没有合适的内容」。
suggest_page_treatments	与 suggest_mechanics 类似，但推荐适用于整个页面、而非某个区块的动效机制：平滑滚动、区块间的造型边缘、循环背景。
get_integration_contract	针对一组组件提供修复方法、挂载顺序和预算。它能避免两个入场遮罩同时存在；如果提供了 moving_sections，还会直言页面的动效不足。
plan_imagery	按区块规划图像方向：需要什么镜头、使用哪种模型（人物、物体和风景不能互换）、如何获得透明效果，以及真实 Logo 的来源。返回文本，不会生成任何内容。
get_component_prompt	作者提示词的原文 + 动效系统标记 + 自行调整提示词的说明。
search_components	自由文本搜索，带有 lexical_coverage：适合可靠地判断「这里没有相关内容」，不适合判断「这是最好的」。
search_components_motion	根据测量得到的动效元数据（触发方式、簇、缓动、时长）搜索，而不是根据外观搜索。
get_component	元数据、预览、提示词，以及在分发内容包含源码时提供源码。
list_facets · list_components · list_motion_systems · get_motion_system	词汇和标记。
render_prompt	已弃用；请使用 get_component_prompt。

托管端点 — 无需安装

服务运行在 https://motionprompts.dev/mcp（Streamable HTTP，无状态；Bearer 密钥可选，提供密钥可解锁付费提示词）。 只需一条命令即可将其添加到 Claude Code：

claude mcp add --transport http motionprompts https://motionprompts.dev/mcp

发现清单：motionprompts.dev/.well-known/mcp。

本地安装

需要 Node 20 或更高版本。免费组件无需 API 密钥或环境变量；本地软件包只包含完整的免费提示词（付费提示词以预览形式提供），因此如需使用整个目录，请使用带密钥的托管端点。

该软件包已发布到 npm，名称为 motionprompts-mcp — 无需克隆：

claude mcp add motionprompts -- npx -y motionprompts-mcp

也可以从克隆的仓库安装：

git clone https://github.com/VanguardiaAI/motionprompts-mcp.git
cd motionprompts-mcp
npm install

Claude Code

claude mcp add motionprompts -- node /absolute/path/to/motionprompts-mcp/mcp/server.mjs

Claude Desktop 和其他客户端

在客户端的 JSON 配置中：

{
  "mcpServers": {
    "motionprompts": {
      "command": "node",
      "args": ["/absolute/path/to/motionprompts-mcp/mcp/server.mjs"]
    }
  }
}

检查是否正常运行：

npm run verify      # end-to-end battery over the real MCP protocol

如需自托管 HTTP 端点而非 stdio：npm run start:http（默认使用 127.0.0.1:4478；通过 MCP_HTTP_HOST / MCP_HTTP_PORT 配置）。

关于 API 密钥：无需密钥

此服务无需密钥，也不会花费任何人的钱。 它不会读取环境变量，不会索取机密，也不会进行任何网络调用：它会打开磁盘上的文件并返回文本。它是一个目录读取器。

这也包括 plan_imagery，它会讨论图像模型和透明背景：它返回的是文本。它提供的是一份配方，而不是生成器。它会列出我们自己使用的三个模型，因为这类信息很有用——每个模型的用途是什么——但它不会调用其中任何一个；无论你选择哪个服务提供商，撰写文案和抠图规则都一样适用。

如果你是来寻找关于 kie.ai 的说明：该密钥属于另一个创作工具——它生成了示例页面的摄影图片——而这个工具不属于此软件包的一部分。我们特意将其排除在外，因此这里的任何内容都无法生成图像或向任何人收费。如果你想为自己的页面添加摄影图片，请使用你喜欢的服务，并使用自己的账户。

如何有效使用

顺序很重要，也是最难掌握的地方：

1. 先用 plan_page。 它返回的是版块，而非组件：页面的丰富程度取决于组成它的列表；如果直接根据动画机制来组合页面，最终会被压缩成五个版块。继续之前，请根据实际需求调整列表。

2. 为每个版块调用 suggest_mechanics，并使用 avoid 排除已经用过的内容。否则你会重复使用组件：宽泛的角色会给出一百多个得分相同的候选项，而且重复使用相同的 need 字符串总会返回第一个匹配项。

   avoid 用来避免重复，而不是减少动画。 如果第一名已被占用，就选第二名——两者得分相同。某个版块仅仅因为它的第一个候选项已被使用就保持静止，是这套流程中代价最高的失误；而且在示例脚本中，这确实只是一个 if 判断。

3. 在写下任何一行内容之前，一次性提供所有 slug，并设置 moving_sections，调用 get_integration_contract：它用于审核覆盖情况。

4. 为每个组件调用 get_component_prompt。重新包装，而不是重新实现：更换图像、文案、配色、字体排版和元素数量，同时保留机制。只有当组件的机制不合适时才舍弃——绝不要只因审美偏好而舍弃。

5. 在撰写任何图像提示词之前，先用同一份版块列表调用 plan_imagery。

有五种角色被标记为目录空缺（faq、data、pricing、testimonial、reference）：259 个组件中没有适用于它们的组件。但“没有组件”并不意味着“这个版块就保持静止”：在 13 个版块的页面中，它们占三到五个版块，而 suggest_mechanics 会为每个版块返回一份用 token 词汇编写的配方（hand_written_recipe）。其他所有情况，都应采用组件。

宁可超量，也不要不足

plan_page 会返回一个 motion_coverage 区块，完成相关计算：应有多少个版块动起来，其中哪些通过采用组件覆盖，哪些通过配方覆盖。任何一个版块最终毫无动效，都是页面设计上的缺陷，而不是风格选择。人们常犯的错误并非动效过多，而是把四种机制集中用在最吸睛的版块上，让其他版块空白。让页面避免杂乱的不是动效稀少，而是所有内容都使用同一种语言动起来；动效系统本身已经会处理这一点。

图像仍然是生成页面露馅的地方

架构和动效都解决后，仍然让人觉得不对劲的是图像。plan_imagery 针对三个经过验证的缺陷及其补救方法进行了编码：

• 图像属于这个行业，而非这个版块。 竞品测试：如果提示词不作任何修改就能用在竞品页面上，那它就很泛泛。提示词必须包含只有当前页面才成立的事实。
• 没有人物。 人物图像只交给 nano-banana-2：另外两个模型生成的人物会带有明显的色调，或者显然无法画好人脸。
• 所有东西都是带背景的矩形。 抠图交给 gpt-image-2.5，并设置 background: transparent，这样会返回真正的 Alpha 通道图像（洋红色抠像只作为旧原始图的备用方案保留）。此外，图像会以 六张为一组 请求——一个看不见的 3×2 网格——因为生成一张和六张的成本相同。如果某个画面有一个细节不理想，就会用它自己的原始图进行图生图修饰，而不是重新生成。

而且绝不生成徽标：它们会从 Wikimedia 查找（Wikidata → P154 → Commons）。没有模型能在不破坏字母的情况下绘制真实的文字徽标，而一排虚构品牌看起来会立刻显得很假。

用它构建的页面

源代码仓库包含使用此服务构建的五个完整页面，每个页面都有一份 README，记录采用了哪些机制、重新设计了哪些机制，以及舍弃了哪些机制，并说明原因。目录中的每个组件都有在线演示和构建说明，详见 motionprompts.dev。

此发行包不包含的内容

组件的源代码。 你可以获得提示词、元数据、组合规则引擎和服务，但无法获得每个组件的 index.html / script.js / styles.css。

这并非遗漏：这些组件本来就应该这样使用。提示词就是产品——它是一份完备的简报，能从头重建机制并适配你的页面，而不是把别人的组件直接粘贴进去。示例页面正是这样构建的：采用机制并重新设计，而非复制代码。

get_component 配合 include: ['source'] 会明确说明这一点，并改为返回在线演示和提示词 URL。其他所有功能——search_components、plan_page、suggest_mechanics、get_integration_contract、get_component_prompt——均保持不变。

许可证

PolyForm Noncommercial 1.0.0，必须注明出处。允许非商业用途；商业用途需要另行获得许可证。任何获准的使用都必须保留声明，并醒目地标注 motionprompts.dev。详见 LICENSE。

它不是 OSI 批准的许可证，因此 npm 和 GitHub 会将其标记为非标准许可证。如果你打算在任何重要场合依赖它，请让律师审阅：我不是律师。