AnimatedWebs

在 Claude Code 中，将一句话的需求转化为可投入生产的动画网站。
通过一个插件提供电影感模板、实时 WebGL 场景、视频背景、UI 组件和设计系统。

网站 · 模板库 · 文档 · 定价 · 支持

概述

AnimatedWebs 是一个包含 1,400 多个动画网站模板的库，每个模板都配有实时演示和完整的构建提示词。此插件通过 AnimatedWebs MCP 服务将 Claude Code 接入该模板库，并添加了能够使用模板库的技能和命令。

描述你的需求。Claude 会找到最匹配的设计，为你展示实时演示，并将你选择的设计以完整保留其动效、字体排版和布局的方式构建到你的项目中。

• 模板。 完整网站和主视觉区块，包含滚动叙事、WebGL、着色器和粒子场景。
• 电影感背景。 可无缝循环的视频片段，可直接用于主视觉区块。
• UI 库。 提供源代码的动画组件，以及 AI 生成和优化功能。
• 样式。 可作为 DESIGN.md、Tailwind 主题、CSS 变量或令牌提供的设计系统。
• 设计工作室。 私有设计工作区，配有专属 MCP 服务。

安装

在 Claude Code 中添加扩展市场并安装插件：

/plugin marketplace add iboss21/animatedwebs-claude
/plugin install animatedwebs@animatedwebs

首次运行工具时，Claude Code 会打开浏览器，让你登录 AnimatedWebs。免费账户即可开始使用。

使用其他 MCP 客户端？ 直接连接服务：

claude mcp add --transport http animatedwebs https://mcp.animatedwebs.com

Cursor、Codex、VS Code、Windsurf 和 Antigravity 的设置指南见 animatedwebs.com/mcp。

快速开始

用自然语言提问，合适的技能会自动接手：

为我的建筑工作室打造一个高端落地页，风格暗调且充满电影感。

为这个页面设计一个带缓慢视频背景的主视觉区，要宁静、偏蓝色调。

为 AI 产品找一个粒子场景，并将其应用到我的 Next.js 应用中。

命令

命令	描述
/animatedwebs:site <business>	选择最匹配的模板并构建完整网站
/animatedwebs:browse <style>	列出匹配的模板及其实时演示链接
/animatedwebs:hero <idea>	将当前主视觉区替换为电影感设计
/animatedwebs:background <mood>	为主视觉区添加电影感视频背景
/animatedwebs:component <idea>	从库中添加动画 UI 组件，或生成一个组件
/animatedwebs:style <mood>	将设计系统应用为令牌、主题和变量
/animatedwebs:design	连接你的 AnimatedWebs Design Studio 工作区

技能

技能	用于以下请求
animatedwebs-site	构建完整网站或落地页
animatedwebs-hero	创建或升级主视觉区
animatedwebs-backgrounds	添加视频或动态背景
animatedwebs-components	添加动画 UI 组件
animatedwebs-style	应用视觉风格或设计系统
animatedwebs-design	在 Design Studio 中工作

MCP 工具

https://mcp.animatedwebs.com 上的服务提供 22 个工具。每个工具都带有 MCP 注解（只读、破坏性、开放世界）和图标。

领域	工具
模板	search_templates · get_template · get_template_prompt · list_categories · open_in_builder · request_template
UI 库	search_components · list_component_categories · get_component · get_component_source · generate_component · refine_component
电影感背景	search_backgrounds · get_background
风格	search_styles · get_style_reference
设计	get_design_workspace
账户和社区	search_everything · get_account · get_pricing · search_creators · get_creator

精选模板

Noesis WebGL 星座大脑 · AI / SaaS	Orchid 电影感视频主视觉区 · AI 工作室	Amethyst 电影感视频主视觉区 · 旅行
Chrome Capital 液态铬效果 · 金融科技	Aurora Lagoon 电影感视频主视觉区 · 健康养生	Atlas 变形粒子场景 · AI Agent

浏览全部 1,400 多个模板 →

方案

	Free	Pro
免费模板和提示词	不限量	不限量
Pro 模板、背景和组件源代码		不限量
AI 组件生成次数	每天 5 次	每天 100 次
Design Studio AI 请求次数	每天 40 次	每天 600 次
客户项目商用许可		包含

Pro 方案每月 19 美元或每年 149 美元。另提供一次性 Prompt Packs 和终身访问权限。请查看 animatedwebs.com/pricing。

安全与隐私

• 使用浏览器中的 OAuth 登录。插件不会存储密码或 API 密钥。
• 仅读取数据的工具会标记为只读，因此客户端无需额外提示即可运行这些工具。
• 你的代码保留在自己的环境中。服务会返回模板和参考资料，不会读取你的项目文件。

详情请参阅隐私政策。

支持

问题和账户帮助：animatedwebs.com/contact。错误报告和模板请求：提交问题。安全问题报告：请参阅 SECURITY.md。你也可以在 Claude 中使用 request_template 工具来请求模板。

法律声明

AnimatedWebs 模板、提示词、演示和媒体均根据 AnimatedWebs 条款授权。此仓库中的插件清单和技能仅供与 AnimatedWebs 服务配合使用。

发行说明见 CHANGELOG.md，仓库许可证见 LICENSE.md。

Claude 和 Claude Code 是 Anthropic, PBC 的商标。提及的其他名称归各自所有者所有。

_{© 2026 AnimatedWebs}