概述
Efecto 是一款实时网页设计工具，可由 AI 智能体以程序化方式控制。工作流程是：智能体创建会话，用户在浏览器中打开返回的链接，智能体推送设计指令并即时渲染。每个节点都映射到真实的 HTML 元素，使用 Tailwind CSS 控制样式，因此设计成果是网页原生、语义化且像素精确的。
安装与前置条件
该技能依赖 Efecto MCP 服务器。安装后可使用 68 个 MCP 工具，包括图片搜索和原生动画编排。MCP 服务器将智能体连接到 efecto.app 的设计画布。
Claude Code 安装命令：
claude mcp add efecto -- npx -y @efectoapp/mcp
Cursor 安装（添加到 .cursor/mcp.json）：
{
"mcpServers": {
"efecto": {
"command": "npx",
"args": ["-y", "@efectoapp/mcp"]
}
}
}
Windsurf / VS Code / 其他 MCP 客户端使用相同的 JSON 配置。
会话机制
数据流为：智能体 POST /execute 到服务器，服务器通过 SSE 推送到浏览器实时渲染；浏览器 POST 返回结果，智能体轮询或接收响应。会话在 2 小时无活动后过期，工具调用执行前浏览器必须已连接。若 MCP 进程重启或丢失，应调用 attach_session 附着到用户当前的 Efecto URL，而不是重复创建会话。
主要能力
- 会话与连接：create_session 创建会话并返回 sessionId、documentId、designUrl；attach_session 恢复已有 URL 会话；wait_for_connection 等待浏览器配对；session_status 查看路由状态。
- 读取状态：get_selection 返回当前选中节点；get_document 以 JSX 返回文档，支持 outline、artboardId、maxDepth 等作用域模式；list_artboards 列出画板；find_nodes 按名称、文本、类型或 className 搜索节点；get_node_tree 序列化单个子树。
- 创建内容：create_artboard 创建画板；add_section 通过 JSX 添加复杂布局（推荐方式）；add_node 添加单个节点。
- 修改内容：update_node 更新任意节点属性；update_class 仅替换 className；update_artboard 更新画板属性；batch_update 批量更新；replace_section 用新 JSX 替换节点及子节点。
- 动画：list_animation_presets 列出原生动画预设；apply_animation_plan 一次性应用多层动画方案；clear_animations 清除原生动画。
- 结构组织：move_node、duplicate_node、duplicate_artboard、group_nodes、ungroup_node、reorder_node。
- 显示与选择：select_nodes、set_visibility、delete_nodes、delete_artboard。
- 对齐分布：align_nodes、distribute_nodes。
- 历史与视口：undo、redo；zoom_to_artboard、zoom_to_fit、set_viewport、rename_document、new_document。
- 填充与导出：set_fill 设置纯色、渐变或图片填充；export_image 导出画板或节点为 PNG、JPEG、WebP、SVG，返回 base64 data URL。
- 主题：get_theme、set_theme、set_theme_mode、reset_theme 管理颜色、字体、圆角等主题令牌及明暗模式。
- 设计校验：audit_design 按专业质量规则审查字体排版、颜色、间距与 AI 套路化布局；repair_design 一次性应用安全确定性修复，支持 dryRun 预览。
- 图片搜索：search_images 搜索 Lummi 免费图库，无需会话即可调用，支持 query、orientation、type、luminance、limit 过滤器。
- 着色器节点：通过 add_node 设置 type: "shader"，支持 11 种生成式着色器（meshGradient、dotGrid、voronoi、liquidMetal、chrome、pulsar、blackHole、glass、spiral、particles、fireworks），并可叠加 28 种视觉效果（ASCII、抖动等），输入源可为着色器、图片、视频或纯色填充。
使用方式
快速建页流程为 7 步：创建会话 → 等待浏览器连接 → 创建画板（建议 className 设为 flex flex-col）→ 用 JSX 添加分区 → get_document 读取当前状态 → 用 batch_update 微调 → 重复迭代。动画方面提供了时长与缓动的建议默认值，并说明了各预设的适用场景。
适用场景
适用于借助 AI 实时搭建网页落地页、应用界面、多屏流程，并进行即时预览、动画编排、图片替换与导出。
限制
会话 2 小时无活动后过期；工具调用前浏览器必须已连接；不得使用 Tailwind 的 animate-、transition-、duration-* 类作为动画编写路径，应使用原生动画系统。资料未提供定价、平台兼容性范围等更多信息。