efecto-graphic-design

用途

Efecto 图形设计技能用于借助 Efecto 设计工具创建各类图形资产，涵盖演示文稿、路演幻灯片、活动海报、邮件头图、博客配图、OG 卡片、名片、简历、菜单、信息图、邀请函、简报和文档等。

主要能力

该技能依赖 Efecto MCP 服务器，安装后可获得 68 个 MCP 工具，包括图片搜索和原生动画创作。工具按类别划分：

会话：create_session、attach_session、wait_for_connection、session_status、close_session
读取：get_document、get_selection、get_node_tree、list_artboards、find_nodes
创建：create_artboard、add_section、add_node
修改：update_node、update_class、update_artboard、batch_update、replace_section
动画：list_animation_presets、apply_animation_plan、clear_animations
组织：move_node、duplicate_node、duplicate_artboard、group_nodes、ungroup_node、reorder_node
选择：select_nodes、deselect_all、set_visibility、delete_nodes、delete_artboard
对齐：align_nodes、distribute_nodes
填充与导出：set_fill、export_image
视口：zoom_to_artboard、zoom_to_fit、set_viewport、move_artboard
文档：rename_document、new_document
历史：undo、redo
主题：get_theme、set_theme、set_theme_mode、reset_theme
质量：audit_design、repair_design

此外支持通过 search_images 搜索 Lummi 免费高质量图库照片，以及使用 shader 节点添加生成式背景和视觉效果（如 meshGradient、dotGrid、voronoi、liquidMetal、chrome、pulsar、blackHole、glass、spiral、particles、fireworks 等），并可对图片应用 ASCII、Dither、Halftone、Glitch、Art 等效果及 grain、vignette、bloom 等后处理。

使用方式

安装 MCP 服务器

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 客户端：

{
  "mcpServers": {
    "efecto": {
      "command": "npx",
      "args": ["-y", "@efectoapp/mcp"]
    }
  }
}

工作流程

智能体通过 MCP 创建 Efecto 会话（create_session）
用户在浏览器中打开返回的设计 URL
智能体推送设计命令，用户实时看到每次改动
用自然语言迭代，直到设计满意

构建设计

主要工作流为：创建画板 → 用 JSX 添加区块 → 通过更新精修。

# 1. 创建画板
create_artboard  name: "Slide 1"  width: 1920  height: 1080  backgroundColor: "#1a1a1a"  className: "flex flex-col"

# 2. 用 JSX 添加内容（最高效的构建方式）
add_section  parentId: "<artboard-id>"  jsx: '<section name="Title Slide" className="flex flex-col items-center justify-center gap-6 p-24 w-full h-full">
  <h1 name="Presentation Title" className="text-7xl font-extrabold text-white text-center">Your Title Here</h1>
  <p name="Presentation Subtitle" className="text-2xl text-gray-400">Subtitle text</p>
</section>'

# 3. 读取当前状态以获取节点 ID
get_document

# 4. 用批量更新精修
batch_update  updates: [
  { nodeId: "abc", className: "text-8xl font-black text-white" },
  { nodeId: "def", textContent: "New text" }
]

JSX 格式

使用标准 HTML 标签配合 Tailwind className，标签决定节点类型：

<div>/<section>/<nav> → frame
<h1>-<h6>/<p>/<span> → text
<a> → link
<input> → input
<img> → image
<button> → button
<svg> → icon
<video> → video

图标写法：<svg icon="arrow-right" className="w-5 h-5 text-gray-600" />

关键注意事项

画板 className 必须包含 flex flex-col，否则子元素会在 (0,0) 处重叠
画板 backgroundColor 是属性而非 className，应使用 backgroundColor: "#1a1a1a"，而非 className: "bg-gray-900"
不要在 className 中使用任意十六进制颜色，bg-[#f9f9f9] 会静默失败；请使用命名颜色（bg-gray-50）或内联样式
使用 grow 而非 flex-1，flex-1 在 Efecto 中不生效
按钮会忽略子元素，应改用包含 <span> + <svg> 的 flex 容器
画板的直接子元素始终添加 w-full

结构与质量要求

为有意义的图层命名：每个区块、布局组、卡片、文本块、控件、图片和图标都应有简洁的语义化 name 属性，不要使用 Frame、Text、Icon 等通用名称
声明嵌套布局：任何有两个或以上子元素的 frame 都必须在 className 中显式包含 flex 或 grid，并添加匹配的方向、对齐、间距和换行类
满足 WCAG AA 对比度：正文文本需达到 4.5:1，大号文本需达到 3:1
构建或编辑后调用 audit_design，修复所有对比度、隐式块容器和通用图层名称问题，再次调用 audit_design，直到三类问题均为零

图片使用

使用 search_images 从 Lummi 查找免费高质量图库照片，无需会话即可随时调用：

search_images
  query: "conference stage audience"
  orientation: "horizontal"
  luminance: "dark"
  limit: 4

应用图片的方式：

图片节点：add_node 使用 type: "image"、src、alt、className
背景填充：set_fill 使用 fill: { type: "image", url, size: "cover" }
JSX 中：<img src="<url>" alt="..." className="w-full h-[400px] object-cover rounded-2xl" />

原生动画

当用户要求动效、幻灯片、Reels 或演示播放时，可使用 Efecto 原生图层动画。不要使用 Tailwind 的 animate-、transition- 或 duration-* 类。

工作流：检查目标 → 调用 list_animation_presets → 用 apply_animation_plan 应用紧凑计划。先动画层级：背景或主视觉、标题、辅助细节、CTA 或活动详情，然后是次要装饰。

推荐默认值：主视觉/标题动效 0.35-0.6 秒，较小细节 0.18-0.35 秒，错开 0.04-0.12 秒，入场用 ease-out，退场用 ease-in。

适用场景

演示文稿与路演幻灯片：标准 16:9（1920×1080）、宽屏 16:10（1920×1200）、经典 4:3（1440×1080）
活动海报：快速浏览，需要醒目标题、必要信息（日期、地点、CTA）和强烈视觉识别
邮件头图：600px 宽，需在众多邮件中脱颖而出
博客配图：为文章定调，可氛围化、排版化或插画化
OG/分享卡片：链接的第一印象，需在缩略图和全尺寸下都可用
名片、简历、菜单、信息图、邀请函、简报和文档

限制

需要安装 Efecto MCP 服务器才能使用
画板 className 必须包含 flex flex-col
画板 backgroundColor 必须作为属性而非 className 传递
不支持在 className 中使用任意十六进制颜色
不支持 flex-1，需使用 grow
按钮忽略子元素
动画不使用 Tailwind 的 animate-、transition-、duration-* 类
关于收费、价格、平台支持范围等具体信息暂未提供