efecto-social-media

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Efecto — Social Media Design Guide

Efecto — 社交媒体设计指南

Design social media assets — Instagram, YouTube, TikTok, Twitter/X, LinkedIn, Pinterest, Facebook — using the Efecto design tool. Proper sizing, bold typography, and platform-specific best practices.

使用Efecto设计工具制作社交媒体素材——覆盖Instagram、YouTube、TikTok、Twitter/X、LinkedIn、Pinterest、Facebook等平台。遵循规范尺寸、醒目排版和平台专属最佳实践。

Setup

设置

This skill requires the Efecto MCP server. Check if it's available by looking for tools like

create_session

add_section

, or

get_document

in your tool list.

If Efecto tools are NOT available, install the MCP server:

本技能需要Efecto MCP服务器支持。可通过工具列表中是否存在

create_session

、

add_section

或

get_document

等工具来检查其是否可用。

如果未找到Efecto工具，请安装MCP服务器：

Claude Code

bash

claude mcp add efecto -- npx -y @efectoapp/mcp

bash

claude mcp add efecto -- npx -y @efectoapp/mcp

Cursor

Add to

.cursor/mcp.json

json

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

添加至

.cursor/mcp.json

：

json

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

Windsurf / VS Code / Other MCP Clients

Windsurf / VS Code / 其他MCP客户端

json

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

Once installed, you'll have access to 46 design tools plus a standalone image search tool. The MCP server connects your agent to the Efecto design canvas at efecto.app.

json

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

安装完成后，你将获得46款设计工具以及独立的图片搜索工具。MCP服务器会将你的Agent连接至Efecto的设计画布（地址：efecto.app）。

How It Works

工作原理

Your agent creates an Efecto session via MCP (
```
create_session
```
)
You open the returned design URL in your browser
The agent pushes design commands — you see every change live
Iterate with natural language until the design is perfect

你的Agent通过MCP创建Efecto会话（
```
create_session
```
）
在浏览器中打开返回的设计URL
Agent推送设计指令——你可以实时看到每一处修改
通过自然语言反复迭代，直至设计完美

Using Efecto Tools — Quick Reference

Efecto工具快速参考

Session Workflow

会话工作流

Every design starts with a session:

create_session  label: "Instagram Carousel"

Returns

{ sessionId, designUrl }

. Tell the user to open the URL, then poll

session_status

until

browserConnected: true

所有设计都从创建会话开始：

create_session  label: "Instagram Carousel"

{ sessionId, designUrl }

。告知用户打开该URL，然后轮询

session_status

直至

browserConnected: true

。

Building Social Media Designs

构建社交媒体设计

The primary workflow is: create artboard → add sections with JSX → refine with updates.

undefined

核心工作流：创建画板 → 用JSX添加内容块 → 优化调整

undefined

1. Create an artboard (Instagram post example)

1. 创建画板（以Instagram帖子为例）

create_artboard name: "Slide 1" width: 1080 height: 1080 backgroundColor: "#111827" className: "flex flex-col"

2. Add content with JSX

2. 用JSX添加内容

add_section parentId: "<artboard-id>" jsx: '<section className="flex flex-col items-center justify-center gap-8 p-16 w-full h-full">

<h1 className="text-7xl font-extrabold text-white text-center leading-none">Stop designing like it's 2020</h1> <p className="text-xl text-gray-400 font-medium">Swipe for 5 rules -></p> </section>'

add_section parentId: "<artboard-id>" jsx: '<section className="flex flex-col items-center justify-center gap-8 p-16 w-full h-full">

<h1 className="text-7xl font-extrabold text-white text-center leading-none">别再用2020年的思路做设计了</h1> <p className="text-xl text-gray-400 font-medium">滑动查看5条规则 -></p> </section>'

3. Duplicate artboard for carousel slides

3. 复制画板制作轮播图幻灯片

duplicate_artboard artboardId: "<artboard-id>" newName: "Slide 2"

4. Read state and batch-update the duplicate

4. 读取状态并批量更新复制的画板

get_document batch_update updates: [ { nodeId: "abc", textContent: "01" }, { nodeId: "def", textContent: "White space is not wasted space" } ]

undefined

get_document batch_update updates: [ { nodeId: "abc", textContent: "01" }, { nodeId: "def", textContent: "留白不是浪费空间" } ]

undefined

All 46 Tools

全部46款工具

Category	Tools
Session	`create_session` , `wait_for_connection` , `session_status` , `close_session`
Reading	`get_document` , `get_selection` , `get_node_tree` , `list_artboards` , `find_nodes`
Creating	`create_artboard` , `add_section` , `add_node`
Modifying	`update_node` , `update_class` , `update_artboard` , `batch_update` , `replace_section`
Organizing	`move_node` , `duplicate_node` , `duplicate_artboard` , `group_nodes` , `ungroup_node` , `reorder_node`
Selection	`select_nodes` , `deselect_all` , `set_visibility` , `delete_nodes` , `delete_artboard`
Alignment	`align_nodes` , `distribute_nodes`
Fill & Export	`set_fill` , `export_image`
Viewport	`zoom_to_artboard` , `zoom_to_fit` , `set_viewport` , `move_artboard`
Document	`rename_document` , `new_document`
History	`undo` , `redo`
Theme	`get_theme` , `set_theme` , `set_theme_mode` , `reset_theme`
Quality	`audit_design` , `repair_design`

分类	工具
会话管理	`create_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`
元素组织	`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`

JSX Format for

add_section

add_section

的JSX格式

Write standard HTML tags with Tailwind

className

. The tag determines the node type:

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

Icons:

<svg icon="arrow-right" className="w-5 h-5 text-gray-600" />

使用标准HTML标签并搭配Tailwind

className

。标签类型决定节点类型：

<div>/<section>/<nav>  → 框架容器       <img>     → 图片
<h1>-<h6>/<p>/<span>   → 文本节点        <button>  → 按钮
<a>                    → 链接节点        <svg>     → 图标
<input>                → 输入框       <video>   → 视频

图标用法：

<svg icon="arrow-right" className="w-5 h-5 text-gray-600" />

Critical Gotchas

关键注意事项

Artboard
className
must include
flex flex-col
— without it, children overlap at (0,0)

Artboard
backgroundColor
is a property, NOT a className — use

backgroundColor: "#111827"

, not

className: "bg-gray-900"

Never use arbitrary hex in className —
```
bg-[#f9f9f9]
```
silently fails. Use named colors (
```
bg-gray-50
```
) or inline
```
style
```
Use
grow
instead of
flex-1
—
```
flex-1
```
doesn't work in Efecto
Buttons ignore children — use a flex container with
```
<span>
```
+
```
<svg>
```
instead
Always add
w-full
on direct children of artboards
For carousels: use
```
duplicate_artboard
```
to create slides, then
```
batch_update
```
to change content per slide

画板
```
className
```
必须包含
```
flex flex-col
```
——否则子元素会重叠在(0,0)位置

画板

backgroundColor

是独立属性，而非className——使用

backgroundColor: "#111827"

，而非

className: "bg-gray-900"

切勿在className中使用自定义十六进制颜色——
```
bg-[#f9f9f9]
```
会静默失效，请使用命名颜色（如
```
bg-gray-50
```
）或内联
```
style
```
使用
```
grow
```
替代
```
flex-1
```
——
```
flex-1
```
在Efecto中无法正常工作
按钮会忽略子元素——请使用包含
```
<span>
```
+
```
<svg>
```
的flex容器替代
画板的直接子元素务必添加
```
w-full
```
制作轮播图：使用
```
duplicate_artboard
```
创建幻灯片，再用
```
batch_update
```
修改单张幻灯片的内容

Images — Use Real Photos, Not Placeholders

图片使用：使用真实照片，而非占位符

Use

search_images

to find free, high-quality stock photos from Lummi. No session required — call it anytime.

search_images
  query: "team celebration"
  orientation: "square"
  luminance: "bright"
  limit: 4

Then apply images to your designs:

Image node:

add_node

with

type: "image"

src: "<url>"

alt: "..."

className: "w-full h-full object-cover"

Background fill:

set_fill

with

fill: { type: "image", url: "<url>", size: "cover" }

In JSX:

<img src="<url>" alt="..." className="w-full h-full object-cover" />

Tips for social media: Match

orientation

to the platform format —

square

for Instagram/LinkedIn posts,

vertical

for Stories/Reels/TikTok,

horizontal

for YouTube thumbnails/Twitter. Use

luminance: "dark"

for dramatic social content. Real photos make social media content feel authentic — avoid empty placeholder boxes.

使用

search_images

从Lummi获取免费高质量图库照片。无需会话——可随时调用。

search_images
  query: "team celebration"
  orientation: "square"
  luminance: "bright"
  limit: 4

然后将图片应用到设计中：

图片节点：使用

add_node

，参数为

type: "image"

src: "<url>"

alt: "..."

className: "w-full h-full object-cover"

背景填充：使用

set_fill

，参数为

fill: { type: "image", url: "<url>", size: "cover" }

JSX中使用：

<img src="<url>" alt="..." className="w-full h-full object-cover" />

社交媒体图片技巧：

orientation

匹配平台格式——

square

用于Instagram/LinkedIn帖子，

vertical

用于快拍/Reels/TikTok，

horizontal

用于YouTube缩略图/Twitter。为吸睛的社交媒体内容使用

luminance: "dark"

。真实照片让内容更具真实感——避免使用空白占位框。

Shader Nodes & Visual Effects

着色器节点与视觉效果

Make social media content stand out with shader nodes. Use

add_node

with

type: "shader"

使用着色器节点让社交媒体内容脱颖而出。通过

add_node

并设置

type: "shader"

实现。

Generative Backgrounds

生成式背景

Eye-catching backgrounds without images — perfect for quote cards, carousels, and story slides:

add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-full"

Shader types:

meshGradient

(organic),

liquidMetal

(premium),

chrome

(bold),

pulsar

(energy),

particles

(ambient),

fireworks

(celebration).

无需图片即可制作吸睛背景——非常适合名言卡片、轮播图和快拍幻灯片：

add_node
  parentId: "<artboard-id>"
  type: "shader"
  shaderType: "meshGradient"
  className: "w-full h-full"

着色器类型：

meshGradient

（有机渐变）、

liquidMetal

（质感金属）、

chrome

（醒目镀铬）、

pulsar

（能量脉冲）、

particles

（粒子氛围）、

fireworks

（烟花效果）。

Apply Effects to Photos

为照片添加效果

Process images with ASCII, dither, halftone, or glitch effects for scroll-stopping visuals:

search_images  query: "team photo"  orientation: "square"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "ascii-standard"
  effectEnabled: true
  className: "w-full h-full"

Best effects for social:

ascii-standard

(tech/dev content),

dither-atkinson

(retro),

halftone-mono

(print/zine),

glitch-vhs

(nostalgic),

art-kuwahara

(painterly),

glitch-digital

(edgy).

通过ASCII、抖动、半色调或故障效果处理图片，打造停下滑屏的视觉效果：

search_images  query: "team photo"  orientation: "square"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "ascii-standard"
  effectEnabled: true
  className: "w-full h-full"

社交媒体热门效果：

ascii-standard

（科技/开发者内容）、

dither-atkinson

（复古风格）、

halftone-mono

（印刷/杂志风）、

glitch-vhs

（怀旧故障）、

art-kuwahara

（绘画质感）、

glitch-digital

（前卫故障）。

Post-Processes

后期处理

Add film grain, vignette, or scanlines for texture:

postProcesses: [
  { type: "grain", enabled: true, settings: { intensity: 0.3 } },
  { type: "scanlines", enabled: true, settings: { intensity: 0.2 } }
]

添加胶片颗粒、暗角或扫描线增加质感：

postProcesses: [
  { type: "grain", enabled: true, settings: { intensity: 0.3 } },
  { type: "scanlines", enabled: true, settings: { intensity: 0.2 } }
]

Mindset: Think Poster, Not Website

设计思维：像做海报一样做社交媒体内容，而非网页

When you design a website, you're writing for someone who stopped scrolling and is reading. On social media, you have 1-2 seconds to communicate before they scroll past. This changes everything:

Type big. The canvas is 1080px wide but renders at ~375px on a phone screen. A
```
text-base
```
paragraph that's perfectly legible on a website becomes unreadable squished into an Instagram card. Default to
```
text-xl
```
or
```
text-2xl
```
where you'd normally use
```
text-base
```
.
Write less. If a slide has more than 2-3 short lines, it has too much text. Cut ruthlessly. One idea per slide.
Think like a billboard. Would you put a paragraph on a highway billboard? No. Same energy.

设计网页时，你是为停下来阅读的用户创作。但在社交媒体上，你只有1-2秒的时间传递信息，否则用户就会滑走。这完全改变了设计逻辑：

字体要大。画布宽度为1080px，但在手机上显示时仅约375px。网页上清晰可读的
```
text-base
```
段落，压缩到Instagram卡片上会变得完全无法辨认。默认使用
```
text-xl
```
或
```
text-2xl
```
替代网页中的
```
text-base
```
。
文字要少。如果一张幻灯片有超过2-3行短文本，就太多了。果断删减。每张幻灯片只传递一个观点。
像设计广告牌一样思考。你会在高速公路广告牌上放一段段落吗？不会。社交媒体设计也是同样的道理。

Typography for Social Media

社交媒体排版

Choose font sizes based on the role, not a formula. The canvas is large (1080px+) but the content is consumed small — so sizes need to be generous.

Role	Size	Weight	Example
Hero / Impact	`text-7xl` to `text-8xl`	`font-extrabold` or `font-black`	A single punchy statement
Slide headline	`text-4xl` to `text-5xl`	`font-bold` or `font-extrabold`	The main point of each slide
Supporting text	`text-2xl` to `text-3xl`	`font-medium` or `font-normal`	One sentence of context
Labels / tags	`text-lg` to `text-xl`	`font-semibold`	Category labels, @handles
Smallest allowed	`text-lg`	any	Nothing smaller than this. Ever.

Key insight: Where you'd use

text-base

on a website, use

text-xl

on social. Where you'd use

text-2xl

for a web heading, use

text-4xl

text-5xl

on social. It's not scaling — it's choosing the right size for a medium that gets consumed at 1/3 the designed resolution.

根据文字角色选择字体大小，而非固定公式。画布尺寸大（1080px+）但实际显示尺寸小——因此字体要足够大。

角色	尺寸	字重	示例
主标题/吸睛文字	`text-7xl` 至 `text-8xl`	`font-extrabold` 或 `font-black`	简短有力的核心语句
幻灯片标题	`text-4xl` 至 `text-5xl`	`font-bold` 或 `font-extrabold`	每张幻灯片的核心观点
辅助文字	`text-2xl` 至 `text-3xl`	`font-medium` 或 `font-normal`	一句上下文说明
标签/标识	`text-lg` 至 `text-xl`	`font-semibold`	分类标签、@账号
最小允许尺寸	`text-lg`	任意	绝对不要使用比这更小的字体

核心要点：网页中使用

text-base

的地方，社交媒体用

text-xl

；网页中用

text-2xl

做标题的地方，社交媒体用

text-4xl

至

text-5xl

。这不是简单缩放——而是为实际显示分辨率仅为设计尺寸1/3的媒介选择合适的大小。

Copywriting: Gen-Z Designer Energy

文案撰写：Z世代设计师风格

Social media copy is NOT web copy. Write like a creative director at a streetwear brand, not a SaaS marketing team.

Rules:

Max 6-8 words per headline. "Ship faster. Break nothing." not "Our platform helps engineering teams ship code faster while maintaining quality."
One idea per slide. If you need a comma, you probably need two slides.
Kill filler words. No "that", "just", "really", "very", "in order to", "leverage", "utilize".
Use sentence fragments. "Built different." "Zero to launch." "Your next big thing." Complete sentences are optional.
Active voice, present tense. "Build" not "Building". "Ship" not "Shipping".
No paragraphs. If text wraps more than 2 lines on a social media slide, rewrite shorter.
CTAs are 2-3 words. "Follow for more" / "Save this" / "Link in bio" / "Try it free"

Bad (website brain):

"Our comprehensive platform provides teams with everything they need to design, build, and deploy modern web applications efficiently."

Good (social media brain):

"Design. Build. Ship."

社交媒体文案≠网页文案。要像街头潮牌的创意总监一样写作，而非SaaS营销团队。

规则：

标题最多6-8个单词。用“更快交付，零故障。”而非“我们的平台帮助工程团队更快交付代码，同时保持质量。”
每张幻灯片一个观点。如果需要逗号，可能需要拆成两张幻灯片。
删除冗余词汇。去掉“that”“just”“really”“very”“in order to”“leverage”“utilize”这类词。
使用句子片段。“与众不同的构建。”“从0到上线。”“你的下一个爆款。”完整句子并非必须。
主动语态，现在时态。用“Build”而非“Building”。用“Ship”而非“Shipping”。
不要段落。如果社交媒体幻灯片上的文字超过2行，就改写得更短。
行动号召（CTA）控制在2-3个单词。“关注获取更多”/“收藏此内容”/“链接在简介”/“免费试用”

反面示例（网页思维）：

“我们的综合平台为团队提供设计、构建和部署现代Web应用所需的一切，助力高效开发。”

正面示例（社交媒体思维）：

“设计。构建。交付。”

Instagram

Instagram设计指南

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Post (Square)	1080	1080	Feed posts, single images
Portrait Post	1080	1350	Feed posts (more screen real estate)
Story / Reel	1080	1920	Stories, Reels, vertical video covers
Carousel Slide	1080	1080	Each slide in a carousel
Carousel (Portrait)	1080	1350	Carousel, portrait format

格式	宽度	高度	使用场景
帖子（方形）	1080	1080	动态帖子、单张图片
竖版帖子	1080	1350	动态帖子（占据更多屏幕空间）
快拍/Reel	1080	1920	快拍、Reels、竖版视频封面
轮播图幻灯片	1080	1080	轮播图中的单张幻灯片
竖版轮播图	1080	1350	竖版格式轮播图

Carousel Best Practices

轮播图最佳实践

Slide 1 = the hook. Bold headline, eye-catching, minimal text. This is the thumbnail in someone's feed — it decides if they stop scrolling.
Consistent design system. Same background, type styles, and layout across all slides. Only the content changes.
One point per slide. Not three. Not two. One.
Number your points. Big, bold numbers (01, 02, 03) anchor each slide and create a sense of progression.
Last slide = CTA. "Follow for more" / "Save this for later" / "Link in bio".
Swipe cue on slide 1. Arrow, dots, or "Swipe ->" so people know there's more.
High contrast only. Subtle color differences get crushed by JPEG compression and small screens.

第一张幻灯片=钩子。醒目标题、吸睛视觉、最少文字。这是用户动态中的缩略图——决定用户是否停下滑屏。
统一设计系统。所有幻灯片使用相同背景、字体样式和布局。仅改变内容。
每张幻灯片一个观点。不是三个，不是两个，只一个。
为观点编号。醒目大号数字（01、02、03）锚定每张幻灯片，营造递进感。
最后一张幻灯片=行动号召。“关注获取更多”/“收藏此内容”/“链接在简介”。
第一张幻灯片添加滑动提示。箭头、圆点或“滑动 ->”提示用户还有更多内容。
仅使用高对比度。细微的颜色差异会被JPEG压缩和小屏幕消解。

Carousel Template

轮播图模板

jsx

// Slide 1 — Hook (bold, minimal, scroll-stopping)
<section className="flex flex-col items-center justify-center gap-8 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-7xl font-extrabold text-white text-center leading-none tracking-tight">Stop designing like it's 2020</h1>
  <p className="text-xl text-gray-400 font-medium">Swipe for 5 rules -></p>
</section>

// Slide 2-N — Content (one idea, big number, short text)
<section className="flex flex-col justify-center gap-8 p-16 bg-gray-900 w-full h-full">
  <span className="text-8xl font-black text-blue-400">01</span>
  <h2 className="text-4xl font-bold text-white leading-snug">White space is not wasted space</h2>
  <p className="text-2xl text-gray-400 leading-relaxed">Let your design breathe. Cramped layouts feel amateur.</p>
</section>

// Last Slide — CTA (simple, direct)
<section className="flex flex-col items-center justify-center gap-6 p-16 bg-gray-900 w-full h-full">
  <h2 className="text-5xl font-extrabold text-white text-center">Found this useful?</h2>
  <p className="text-3xl text-blue-400 font-bold text-center">Save it. Share it.</p>
  <p className="text-xl text-gray-500 font-medium">@yourbrand</p>
</section>

jsx

// Slide 1 — 钩子（醒目、简洁、吸睛）
<section className="flex flex-col items-center justify-center gap-8 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-7xl font-extrabold text-white text-center leading-none tracking-tight">别再用2020年的思路做设计了</h1>
  <p className="text-xl text-gray-400 font-medium">滑动查看5条规则 -></p>
</section>

// Slide 2-N — 内容（一个观点、大号数字、简短文字）
<section className="flex flex-col justify-center gap-8 p-16 bg-gray-900 w-full h-full">
  <span className="text-8xl font-black text-blue-400">01</span>
  <h2 className="text-4xl font-bold text-white leading-snug">留白不是浪费空间</h2>
  <p className="text-2xl text-gray-400 leading-relaxed">让你的设计呼吸。拥挤的布局显得业余。</p>
</section>

// 最后一张幻灯片 — 行动号召（简洁直接）
<section className="flex flex-col items-center justify-center gap-6 p-16 bg-gray-900 w-full h-full">
  <h2 className="text-5xl font-extrabold text-white text-center">觉得有用？</h2>
  <p className="text-3xl text-blue-400 font-bold text-center">收藏它。分享它。</p>
  <p className="text-xl text-gray-500 font-medium">@yourbrand</p>
</section>

Story Template

快拍模板

jsx

<section className="flex flex-col items-center justify-center gap-10 px-12 py-24 bg-gray-900 w-full h-full">
  <span className="text-xl font-semibold text-blue-400 uppercase tracking-widest">New drop</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight">Your bold statement here</h1>
  <p className="text-2xl text-gray-400 text-center leading-relaxed max-w-[900px]">One short sentence of context.</p>
  <button className="px-10 py-5 text-xl font-bold text-gray-900 bg-white rounded-2xl">See more</button>
</section>

jsx

<section className="flex flex-col items-center justify-center gap-10 px-12 py-24 bg-gray-900 w-full h-full">
  <span className="text-xl font-semibold text-blue-400 uppercase tracking-widest">新品发布</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight">你的醒目宣言在此</h1>
  <p className="text-2xl text-gray-400 text-center leading-relaxed max-w-[900px]">一句简短的上下文说明。</p>
  <button className="px-10 py-5 text-xl font-bold text-gray-900 bg-white rounded-2xl">查看更多</button>
</section>

YouTube

YouTube设计指南

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Thumbnail	1280	720	Video thumbnail (16:9)
Channel Banner	2560	1440	Channel art (safe area: 1546x423 center)
End Screen	1280	720	End screen overlay
Community Post	1080	1080	Community tab image

格式	宽度	高度	使用场景
缩略图	1280	720	视频缩略图（16:9）
频道横幅	2560	1440	频道封面图（安全区域：中间1546x423）
片尾画面	1280	720	片尾叠加层
社区帖子	1080	1080	社区板块图片

Thumbnail Best Practices

缩略图最佳实践

YouTube thumbnails are the most competitive visual format on the internet. They render at ~200px wide in sidebar suggestions and ~360px in search results.

Face + emotion wins. If applicable, a human face with an exaggerated expression outperforms everything. Use large image fills for photos.
Max 3-5 words. The title does the explaining — the thumbnail does the selling. "DON'T DO THIS" beats "5 Common Mistakes Developers Make When Deploying".
Massive text.
```
text-6xl
```
to
```
text-8xl
```
```
font-black
```
. If you can't read it at 200px wide, it's too small.
High contrast outlines. Text needs to pop against any background. Use contrasting colors or add a dark container behind light text.
Split composition. Left half = text/graphic, right half = face/subject. Or vice versa. Don't center everything.
2-3 colors max. Thumbnails with too many colors look chaotic at small sizes. Pick one bold accent color.
No thin fonts. Everything
```
font-bold
```
or heavier. Thin type disappears.

YouTube缩略图是互联网上竞争最激烈的视觉格式。在侧边栏推荐中显示尺寸约为200px宽，在搜索结果中约为360px宽。

人脸+情绪制胜。如果适用，带有夸张表情的人脸效果远超其他元素。为照片使用大尺寸图片填充。
最多3-5个单词。标题负责解释，缩略图负责吸引点击。“别这么做”比“开发者部署时的5个常见错误”效果更好。
超大字体。使用
```
text-6xl
```
至
```
text-8xl
```
的
```
font-black
```
字重。如果在200px宽时无法阅读，就太小了。
高对比度轮廓。文字需要在任何背景下都醒目。使用对比色或在浅色文字后添加深色容器。
分割构图。左半部分=文字/图形，右半部分=人脸/主体。反之亦然。不要所有内容都居中。
最多2-3种颜色。颜色过多的缩略图在小尺寸下显得杂乱。选择一种醒目的强调色。
不要细字体。所有文字使用
```
font-bold
```
或更粗的字重。细字体在小尺寸下会消失。

Thumbnail Template

缩略图模板

jsx

<section className="flex items-center gap-8 p-12 bg-blue-600 w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <h1 className="text-7xl font-black text-white leading-none uppercase">Stop doing this</h1>
    <p className="text-3xl font-bold text-blue-200">5 design mistakes</p>
  </div>
  <div className="w-[400px] h-[400px] bg-blue-800 rounded-3xl"></div>
</section>

jsx

<section className="flex items-center gap-8 p-12 bg-blue-600 w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <h1 className="text-7xl font-black text-white leading-none uppercase">别这么做</h1>
    <p className="text-3xl font-bold text-blue-200">5个设计误区</p>
  </div>
  <div className="w-[400px] h-[400px] bg-blue-800 rounded-3xl"></div>
</section>

Channel Banner Template

频道横幅模板

jsx

// Safe area is center 1546x423 — keep all important content there
<section className="flex flex-col items-center justify-center gap-4 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-6xl font-extrabold text-white tracking-tight">Your Channel Name</h1>
  <p className="text-2xl text-gray-400 font-medium">Design tips every week</p>
</section>

jsx

// 安全区域为中间1546x423 — 所有重要内容请放在此区域
<section className="flex flex-col items-center justify-center gap-4 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-6xl font-extrabold text-white tracking-tight">你的频道名称</h1>
  <p className="text-2xl text-gray-400 font-medium">每周分享设计技巧</p>
</section>

TikTok

TikTok设计指南

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Video Cover	1080	1920	Video thumbnail / cover image
Profile Photo	200	200	Account avatar

格式	宽度	高度	使用场景
视频封面	1080	1920	视频缩略图/封面图
头像	200	200	账号头像

TikTok Tips

TikTok设计技巧

Vertical-first — everything is 9:16
Safe zones matter. Bottom 20% is covered by captions/UI. Top 15% has the username/follow button. Keep key content in the center 65%.
Even bolder than Instagram — TikTok moves faster
Text must be readable over video frames — use solid color blocks or dark overlays behind text
```
text-5xl
```
to
```
text-7xl
```
for headlines, nothing below
```
text-xl
```

竖屏优先——所有内容均为9:16比例
安全区域至关重要。底部20%会被字幕/UI遮挡。顶部15%包含用户名/关注按钮。关键内容请放在中间65%区域。
比Instagram更醒目——TikTok节奏更快
文字必须在视频帧上清晰可读——在文字后使用纯色块或深色遮罩
标题使用
```
text-5xl
```
至
```
text-7xl
```
，最小不小于
```
text-xl
```

TikTok Cover Template

TikTok封面模板

jsx

<section className="flex flex-col items-center justify-center gap-8 px-12 py-48 bg-gray-900 w-full h-full">
  <span className="px-6 py-2 text-lg font-bold text-white bg-red-500 rounded-full uppercase">Part 3</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight">The trick nobody talks about</h1>
  <p className="text-2xl text-gray-400 text-center">Watch till the end</p>
</section>

jsx

<section className="flex flex-col items-center justify-center gap-8 px-12 py-48 bg-gray-900 w-full h-full">
  <span className="px-6 py-2 text-lg font-bold text-white bg-red-500 rounded-full uppercase">第3部分</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight">没人说过的技巧</h1>
  <p className="text-2xl text-gray-400 text-center">看到最后</p>
</section>

Pinterest设计指南

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Standard Pin	1000	1500	Standard pin (2:3 ratio)
Long Pin	1000	2100	Infographic / tall pin
Square Pin	1000	1000	Square format
Board Cover	600	600	Board thumbnail

格式	宽度	高度	使用场景
标准图钉	1000	1500	标准图钉（2:3比例）
长图钉	1000	2100	信息图/长图内容
方形图钉	1000	1000	方形格式
板块封面	600	600	板块缩略图

Pinterest Tips

Pinterest设计技巧

Pinterest is a search engine, not a feed. Pins are discovered through keywords, not followers.
Tall pins win. 2:3 ratio takes more screen space in the masonry grid. Long pins (1000x2100) for infographics or step-by-step content.
Text overlay is essential. Pinterest users scan thumbnails to decide what to click. If your pin is just a photo, it gets scrolled past.
Keep text in the top 60% — the bottom gets cropped in grid view.
Warm, bright colors outperform dark designs on Pinterest (opposite of Instagram/YouTube).
Include a clear CTA: "Read more", "Get the free guide", "Shop now".

Pinterest是搜索引擎，而非信息流。图钉通过关键词被发现，而非粉丝。
长图钉更受欢迎。2:3比例在瀑布流中占据更多屏幕空间。长图钉（1000x2100）适合信息图或分步内容。
文字叠加必不可少。Pinterest用户通过扫描缩略图决定是否点击。如果你的图钉只有照片，会被直接滑过。
文字放在上半部分60%区域——下半部分在网格视图中会被裁剪。
温暖明亮的颜色在Pinterest上比深色设计表现更好（与Instagram/YouTube相反）。
包含清晰的行动号召：“阅读更多”、“获取免费指南”、“立即购买”。

Pin Template

图钉模板

jsx

<section className="flex flex-col items-center justify-between gap-8 px-12 py-16 bg-amber-50 w-full h-full">
  <div className="flex flex-col items-center gap-6">
    <span className="text-lg font-bold text-amber-700 uppercase tracking-widest">Free Guide</span>
    <h1 className="text-5xl font-extrabold text-gray-900 text-center leading-tight">10 Design Rules Every Beginner Needs</h1>
    <p className="text-2xl text-gray-600 text-center">Save this pin for later</p>
  </div>
  <div className="w-full h-[500px] bg-amber-100 rounded-3xl"></div>
  <p className="text-xl font-semibold text-amber-700">yourdomain.com</p>
</section>

jsx

<section className="flex flex-col items-center justify-between gap-8 px-12 py-16 bg-amber-50 w-full h-full">
  <div className="flex flex-col items-center gap-6">
    <span className="text-lg font-bold text-amber-700 uppercase tracking-widest">免费指南</span>
    <h1 className="text-5xl font-extrabold text-gray-900 text-center leading-tight">新手必知的10条设计规则</h1>
    <p className="text-2xl text-gray-600 text-center">收藏此图钉备用</p>
  </div>
  <div className="w-full h-[500px] bg-amber-100 rounded-3xl"></div>
  <p className="text-xl font-semibold text-amber-700">yourdomain.com</p>
</section>

Facebook

Facebook设计指南

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Post Image	1200	630	Shared image / link preview
Cover Photo	1640	856	Page cover (safe: center 820x312)
Event Cover	1920	1005	Event banner
Story	1080	1920	Facebook Story
Ad (Square)	1080	1080	Feed ad
Ad (Landscape)	1200	628	Feed ad, landscape

格式	宽度	高度	使用场景
帖子图片	1200	630	分享图片/链接预览
封面照片	1640	856	主页封面（安全区域：中间820x312）
活动封面	1920	1005	活动横幅
快拍	1080	1920	Facebook快拍
广告（方形）	1080	1080	信息流广告
广告（横版）	1200	628	信息流广告（横版）

Facebook Tips

Facebook设计技巧

Facebook compresses images aggressively — use solid colors over subtle gradients
Link preview images (1200x630) are the most common format — they appear when sharing URLs
Cover photos get cropped differently on mobile vs desktop. Keep critical content in the center 820x312 safe zone.
Text-heavy images get penalized in ad delivery — keep text under 20% of the image area for ads
Wider aspect ratios (1200x630) for feed, vertical (1080x1920) for Stories

Facebook会大幅压缩图片——使用纯色背景而非渐变，以保证文字可读性
链接预览图片（1200x630）是最常用的格式——分享URL时会显示
封面照片在移动端和桌面端的裁剪方式不同。重要内容请放在中间820x312的安全区域
广告中文字占比超过20%会影响投放效果——广告图片中文字尽量少
信息流使用宽比例（1200x630），快拍使用竖版（1080x1920）

Post Template

帖子模板

jsx

<section className="flex items-center gap-12 p-16 bg-white w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <span className="text-xl font-semibold text-blue-600 uppercase tracking-wide">Announcement</span>
    <h1 className="text-5xl font-extrabold text-gray-900 leading-tight">We just launched something big</h1>
    <p className="text-2xl text-gray-500">Link in comments</p>
  </div>
  <div className="w-[350px] h-[350px] bg-blue-100 rounded-3xl"></div>
</section>

jsx

<section className="flex items-center gap-12 p-16 bg-white w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <span className="text-xl font-semibold text-blue-600 uppercase tracking-wide">公告</span>
    <h1 className="text-5xl font-extrabold text-gray-900 leading-tight">我们刚刚发布了大动作</h1>
    <p className="text-2xl text-gray-500">链接在评论区</p>
  </div>
  <div className="w-[350px] h-[350px] bg-blue-100 rounded-3xl"></div>
</section>

Twitter / X

Twitter / X设计指南

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Image post	1200	675	Standard tweet image (16:9)
Card image	1200	628	Link preview card
Banner	1500	500	Profile banner
Two-image post	700	800	Each image in 2-image tweet
Thread graphic	1200	675	Consistent visual for threads

格式	宽度	高度	使用场景
图片帖子	1200	675	标准推文图片（16:9）
卡片图片	1200	628	链接预览卡片
个人资料横幅	1500	500	个人资料横幅
双图帖子	700	800	双图推文中的单张图片
线程图文	1200	675	线程推文的统一视觉模板

Twitter Tips

Twitter设计技巧

Even more aggressive than Instagram — the timeline is dense and fast
Headlines:
```
text-5xl
```
to
```
text-7xl
```
```
font-extrabold
```
Body:
```
text-2xl
```
to
```
text-3xl
```
max
Aim for one sentence visible at a glance
Works well with high contrast and bold color blocks
Thread graphics: use a consistent template across all images with a numbering system (1/7, 2/7, etc.)

比Instagram节奏更快——时间线内容密集且更新迅速
标题：使用
```
text-5xl
```
至
```
text-7xl
```
的
```
font-extrabold
```
字重
正文：最大使用
```
text-2xl
```
至
```
text-3xl
```
目标是一眼可见一句话
高对比度和醒目色块效果更佳
线程图文：为所有图片使用统一模板，并添加编号系统（如1/7、2/7等）

Tweet Image Template

推文图片模板

jsx

<section className="flex flex-col items-center justify-center gap-6 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-6xl font-extrabold text-white text-center leading-tight">Hot take incoming</h1>
  <p className="text-2xl text-gray-400 text-center">Your bold opinion in one sentence.</p>
  <p className="text-xl text-blue-400 font-semibold">@yourhandle</p>
</section>

jsx

<section className="flex flex-col items-center justify-center gap-6 p-16 bg-gray-900 w-full h-full">
  <h1 className="text-6xl font-extrabold text-white text-center leading-tight">热门观点来袭</h1>
  <p className="text-2xl text-gray-400 text-center">你的大胆观点，一句话概括。</p>
  <p className="text-xl text-blue-400 font-semibold">@yourhandle</p>
</section>

LinkedIn设计指南

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Post	1200	1200	Square feed post
Portrait post	1080	1350	Takes more feed space
Carousel slide	1080	1080	Document carousel
Banner	1584	396	Profile/company banner
Article cover	1200	644	Newsletter header

格式	宽度	高度	使用场景
帖子	1200	1200	方形信息流帖子
竖版帖子	1080	1350	占据更多信息流空间
轮播图幻灯片	1080	1080	文档轮播图
个人资料横幅	1584	396	个人/公司主页横幅
文章封面	1200	644	新闻通讯标题

LinkedIn Tips

LinkedIn设计技巧

Slightly more polished than Instagram, but same type-size rules apply
Carousel slides: numbered insights, one per slide
Include name/logo on every slide for brand recognition
Professional does not equal boring — still use bold type and strong contrast
LinkedIn carousels are uploaded as PDFs — each artboard becomes a page

比Instagram更正式，但字体大小规则相同
轮播图幻灯片：为每个见解编号，每张幻灯片一个观点
每张幻灯片添加姓名/Logo以提升品牌辨识度
专业≠无聊——仍需使用醒目字体和高对比度
LinkedIn轮播图以PDF格式上传——每个画板对应一页

LinkedIn Carousel Template

LinkedIn轮播图模板

jsx

// Cover slide
<section className="flex flex-col items-center justify-center gap-8 p-16 bg-white w-full h-full border-2 border-gray-100">
  <span className="text-xl font-semibold text-blue-600">Your Name | Topic</span>
  <h1 className="text-5xl font-extrabold text-gray-900 text-center leading-tight">7 lessons from building a design system</h1>
  <p className="text-2xl text-gray-500 text-center">A thread. Slide -></p>
</section>

// Content slide
<section className="flex flex-col justify-center gap-8 p-16 bg-white w-full h-full border-2 border-gray-100">
  <span className="text-7xl font-black text-blue-600">01</span>
  <h2 className="text-4xl font-bold text-gray-900 leading-snug">Start with your constraints, not your aspirations</h2>
  <p className="text-2xl text-gray-500 leading-relaxed">A design system for 3 engineers looks nothing like one for 300.</p>
  <p className="text-lg text-gray-400 font-medium">Your Name</p>
</section>

jsx

// 封面幻灯片
<section className="flex flex-col items-center justify-center gap-8 p-16 bg-white w-full h-full border-2 border-gray-100">
  <span className="text-xl font-semibold text-blue-600">你的姓名 | 主题</span>
  <h1 className="text-5xl font-extrabold text-gray-900 text-center leading-tight">构建设计系统的7个经验</h1>
  <p className="text-2xl text-gray-500 text-center">一篇线程推文。滑动查看 -></p>
</section>

// 内容幻灯片
<section className="flex flex-col justify-center gap-8 p-16 bg-white w-full h-full border-2 border-gray-100">
  <span className="text-7xl font-black text-blue-600">01</span>
  <h2 className="text-4xl font-bold text-gray-900 leading-snug">从约束条件开始，而非目标愿景</h2>
  <p className="text-2xl text-gray-500 leading-relaxed">3人工程师团队的设计系统与300人团队的完全不同。</p>
  <p className="text-lg text-gray-400 font-medium">你的姓名</p>
</section>

General Design Rules

通用设计规则

Layout

布局

Center-align most content (social is not web's default left-align)
Generous padding:
```
p-12
```
to
```
p-16
```
minimum — don't crowd the edges
Vertically center:
```
justify-center
```
on slides — content should sit in the middle, not hang from the top
w-full h-full
on top-level sections to fill the artboard completely

大多数内容居中对齐（社交媒体默认不是网页的左对齐）
充足内边距：至少
```
p-12
```
至
```
p-16
```
——不要让内容紧贴边缘
垂直居中：幻灯片使用
```
justify-center
```
——内容应位于中间，而非顶部
顶层内容块添加
```
w-full h-full
```
以完全填充画板

Color & Contrast

颜色与对比度

Minimum 4.5:1 contrast ratio — feed images get JPEG-compressed, low contrast disappears
Solid backgrounds beat gradients for text readability
Dark mode designs (white on dark) tend to pop more in feeds
Avoid pastel-on-pastel — it looks washed out at thumbnail size

最小对比度4.5:1——信息流图片会被JPEG压缩，低对比度会完全消失
纯色背景比渐变更利于文字可读性
深色模式设计（深色背景配白色文字）在信息流中更醒目
避免浅色系搭配——在缩略图尺寸下会显得苍白

Multi-Slide Consistency

多幻灯片一致性

Same background color on every slide
Same headline position (same y-position across slides)
Same font sizes for the same role (all headlines match, all body text matches)
Brand element (@handle or logo) in the same spot on every slide

所有幻灯片使用相同背景色
相同角色的标题位置一致（所有幻灯片的标题y坐标相同）
相同角色的字体大小一致（所有标题大小相同，所有正文大小相同）
品牌元素（@账号或Logo）在所有幻灯片的相同位置

Platform Quick Reference

平台快速参考

Platform	Best Format	Text Style	Vibe
Instagram	1080x1350 portrait	Bold, centered	Visual-first, aesthetic
YouTube	1280x720 thumbnail	Massive, high-contrast	Clickbait energy, faces
TikTok	1080x1920 vertical	Bold with safe zones	Fast, punchy, trending
Pinterest	1000x1500 tall	Warm, clear overlay	Aspirational, search-driven
Facebook	1200x630 landscape	Clean, readable	Broad audience, shareable
Twitter/X	1200x675 landscape	One-liner, bold	Opinionated, minimal
LinkedIn	1080x1080 square	Professional-bold	Thought leadership, clean

平台	最佳格式	文字风格	整体氛围
Instagram	1080x1350竖版	醒目、居中	视觉优先、美学导向
YouTube	1280x720缩略图	超大字体、高对比度	吸睛导向、突出人脸
TikTok	1080x1920竖版	醒目、安全区域适配	快速、有力、紧跟趋势
Pinterest	1000x1500长图	温暖、清晰叠加文字	aspirational、搜索驱动
Facebook	1200x630横版	简洁、可读	受众广泛、易于分享
Twitter/X	1200x675横版	一句话、醒目	观点鲜明、极简风格
LinkedIn	1080x1080方形	专业醒目	思想领导力、简洁干净

efecto-social-media

Original

Translation

Efecto — Social Media Design Guide

Efecto — 社交媒体设计指南

Setup

设置

Claude Code

Claude Code

Cursor

Cursor

Windsurf / VS Code / Other MCP Clients

Windsurf / VS Code / 其他MCP客户端

How It Works

工作原理

Using Efecto Tools — Quick Reference

Efecto工具快速参考

Session Workflow

会话工作流

Building Social Media Designs

构建社交媒体设计

1. Create an artboard (Instagram post example)

1. 创建画板（以Instagram帖子为例）

2. Add content with JSX

2. 用JSX添加内容

3. Duplicate artboard for carousel slides

3. 复制画板制作轮播图幻灯片

4. Read state and batch-update the duplicate

4. 读取状态并批量更新复制的画板

All 46 Tools

全部46款工具

JSX Format for add_section

add_section的JSX格式

Critical Gotchas

关键注意事项

Images — Use Real Photos, Not Placeholders

图片使用：使用真实照片，而非占位符

Shader Nodes & Visual Effects

着色器节点与视觉效果

Generative Backgrounds

生成式背景

Apply Effects to Photos

为照片添加效果

Post-Processes

后期处理

Mindset: Think Poster, Not Website

设计思维：像做海报一样做社交媒体内容，而非网页

Typography for Social Media

社交媒体排版

Copywriting: Gen-Z Designer Energy

文案撰写：Z世代设计师风格

Instagram

Instagram设计指南

Artboard Sizes

画板尺寸

Carousel Best Practices

轮播图最佳实践

Carousel Template

轮播图模板

Story Template

快拍模板

YouTube

YouTube设计指南

Artboard Sizes

画板尺寸

Thumbnail Best Practices

缩略图最佳实践

Thumbnail Template

缩略图模板

Channel Banner Template

频道横幅模板

TikTok

TikTok设计指南

Artboard Sizes

画板尺寸

TikTok Tips

TikTok设计技巧

TikTok Cover Template

TikTok封面模板

Pinterest

JSX Format for
`add_section`

`add_section`
的JSX格式