Efecto 社交媒体设计技能用于借助 Efecto 设计工具制作各社交平台素材，覆盖 Instagram、YouTube、TikTok、Twitter/X、LinkedIn、Pinterest、Facebook。其核心是平台适配尺寸、醒目排版与各平台最佳实践。
一、用途 该技能面向社交媒体视觉内容创作，包括 Instagram 帖子、轮播图、快拍、YouTube 缩略图、TikTok 封面、Twitter/X 图片、LinkedIn 幻灯片、Pinterest 等。设计理念强调“像海报而非网站”：社交内容只有 1-2 秒传达时间，因此字号要大、文字要少、每张幻灯片只讲一个观点。
二、主要能力 技能依赖 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 免费图库）、着色器节点（meshGradient、liquidMetal、chrome、pulsar、particles、fireworks 等生成式背景，以及 ascii、dither、halftone、glitch 等图片特效）、后处理（颗粒、暗角、扫描线）和原生动画。
三、使用方式
- 安装 Efecto 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 客户端使用相同 JSON 配置。
- 工作流程：智能体通过 MCP 调用 create_session 创建会话，返回 { sessionId, documentId, designUrl }；用户在浏览器打开返回的设计 URL；智能体推送设计命令，用户实时看到每次更改；用自然语言迭代直至满意。
- 构建设计：创建画板（create_artboard）→ 用 JSX 添加区块（add_section）→ 用更新精修。轮播图可用 duplicate_artboard 复制幻灯片，再用 batch_update 批量修改内容。
- JSX 格式：使用标准 HTML 标签加 Tailwind className，标签决定节点类型（div/section/nav → frame，img → image，h1-h6/p/span → text，button → button，a → link，svg → icon，input → input，video → video）。图标写法：<svg icon="arrow-right" className="w-5 h-5 text-gray-600" />。
- 质量门禁：为每个有意义图层命名语义化 name；每个含两个及以上子元素的 frame 必须显式声明 flex 或 grid；满足 WCAG AA 对比度（正文 4.5:1，大字号 3:1）；构建后调用 audit_design，修复所有对比度、隐式块容器、通用图层名问题，再次审计直至三类问题为零。
四、适用场景
- Instagram：帖子（1080x1080）、竖版帖子（1080x1350）、快拍/Reel（1080x1920）、轮播幻灯片（1080x1080 或 1080x1350）。轮播最佳实践：第 1 张为钩子、统一设计系统、每张一个观点、编号、最后一张 CTA、第 1 张加滑动提示、只用高对比度。
- YouTube：缩略图（1280x720）、频道横幅（2560x1440，安全区中心 1546x423）、片尾画面（1280x720）、社区帖子（1080x1080）。缩略图渲染约 200px 宽，人脸加情绪更有效。
- 其他平台：TikTok 封面、Twitter/X 图片、LinkedIn 幻灯片、Pinterest、Facebook。
五、限制与注意事项
- 必须安装 Efecto MCP 服务器，否则相关工具不可用。
- 画板 className 必须包含 flex flex-col，否则子元素会在 (0,0) 重叠。
- 画板 backgroundColor 是属性而非 className，应写 backgroundColor: "#111827"，不要写 className: "bg-gray-900"。
- 不要在 className 中使用任意十六进制颜色（如 bg-[#f9f9f9] 会静默失败），应使用命名颜色或内联样式。
- 使用 grow 而非 flex-1，flex-1 在 Efecto 中无效。
- 按钮会忽略子元素，应改用 flex 容器加 span 与 svg。
- 画板直接子元素始终加 w-full。
- 动画使用 Efecto 原生图层动画，不要用 Tailwind 的 animate-、transition-、duration-* 类。
- 大文档读取建议使用范围模式（outline、artboardId、maxDepth）以避免超出工具结果 token 上限。
- 不要重复调用 create_session 来“重连”，已配对会话需 force: true 才能覆盖。
- 社交文案规则：标题最多 6-8 个词、每张一个观点、删除填充词、使用句子片段、主动语态现在时、不用段落、CTA 2-3 个词。
- 字号建议：主视觉 text-7xl 至 text-8xl，幻灯片标题 text-4xl 至 text-5xl，辅助文字 text-2xl 至 text-3xl，标签 text-lg 至 text-xl，最小不低于 text-lg。
关于收费、价格、平台支持范围等更多信息，资料中暂未提供。