efecto-social-media

Efecto — 社交媒体设计指南

使用 Efecto 设计工具创建社交媒体素材——适用于 Instagram、YouTube、TikTok、Twitter/X、LinkedIn、Pinterest、Facebook。掌握恰当的尺寸、大胆的字体排版和各平台的最佳实践。

---

设置

此技能需要 Efecto MCP 服务。请在工具列表中查找 create_session、add_section 或 get_document 等工具，确认其是否可用。

如果 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 客户端

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

安装后，你将可以使用 68 个 MCP 工具，包括图片搜索和原生动画创作功能。MCP 服务会将你的 Agent 连接到 efecto.app 上的 Efecto 设计画布。

工作原理

1. 你的 Agent 通过 MCP 创建 Efecto 会话（create_session）
2. 在浏览器中打开返回的设计 URL
3. Agent 推送设计命令——你可以实时看到每项变更
4. 使用自然语言反复调整，直到设计臻于完美

---

使用 Efecto 工具——快速参考

会话工作流

每项设计都从会话开始：

create_session  label: "Instagram Carousel"

返回 { sessionId, documentId, designUrl }。请告诉用户打开该 URL，然后调用 wait_for_connection（会一直等待，直到连接配对）。如果用户已有包含 ?session=... 的 Efecto URL，请使用该 URL 调用 attach_session，而不是创建重复会话。切勿通过再次调用 create_session 来“重新连接”——已配对的会话会拒绝覆盖，除非设置 force: true。使用 session_status 检查路由状态（传入 { all: true } 可获取完整会话列表）。

创建社交媒体设计

主要工作流为：创建画板 → 使用 JSX 添加版块 → 通过更新进行润色。

# 1. Create an artboard (Instagram post example)
create_artboard  name: "Slide 1"  width: 1080  height: 1080  backgroundColor: "#111827"  className: "flex flex-col"

# 2. Add content with JSX
add_section  parentId: "<artboard-id>"  jsx: '<section name="Carousel Hook" className="flex flex-col items-center justify-center gap-8 p-16 w-full h-full">
  <h1 name="Hook Headline" className="text-7xl font-extrabold text-white text-center leading-none">Stop designing like it&apos;s 2020</h1>
  <p name="Swipe Prompt" className="text-xl text-gray-400 font-medium">Swipe for 5 rules -></p>
</section>'

# 3. Duplicate artboard for carousel slides
duplicate_artboard  artboardId: "<artboard-id>"  newName: "Slide 2"

# 4. Read state and batch-update the duplicate
get_document
batch_update  updates: [
  { nodeId: "abc", textContent: "01" },
  { nodeId: "def", textContent: "White space is not wasted space" }
]

全部 68 个工具

类别	工具
会话	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

范围读取（大型文档）。 默认情况下，get_document 会返回整个树结构——对于包含多个画板的轮播设计，结果可能超出工具输出的令牌上限。建议使用限定范围的模式：outline: true（为每个顶层子项提供单行摘要）、artboardId: "..."（单张幻灯片）、maxDepth: N（限制遍历深度；0 = 仅画板标题，1 = 顶层子项）。响应中会包含近似令牌数，供你判断是否需要扩大范围。之后可使用 get_node_tree 深入查看子树。

路由检查。 默认情况下，session_status 会返回旧版单会话格式（sessionId、paired、browserConnected、knownSessions）。传入 { all: true } 可返回列表格式——包括此 MCP 进程中的每个会话及其 isActive/paired 标记。如果此 MCP 进程已重启，请使用当前浏览器 URL 调用 attach_session，以重新激活该会话。

add_section 的 JSX 格式

使用带有 Tailwind className 的标准 HTML 标签。标签决定节点类型：

<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" />

关键注意事项

• Artboard 的 className 必须包含 flex flex-col——否则子元素会重叠在 (0,0) 位置
• Artboard 的 backgroundColor 是属性，而不是 className——使用 backgroundColor: "#111827"，不要使用 className: "bg-gray-900"
• 切勿在 className 中使用任意十六进制颜色值——bg-[#f9f9f9] 会静默失效。请使用命名颜色（如 bg-gray-50）或内联 style
• 使用 grow 而不是 flex-1——flex-1 在 Efecto 中不起作用
• 按钮会忽略子元素——请改用包含 <span> 和 <svg> 的 flex 容器
• Artboard 的直接子元素始终要添加 w-full
• 对于轮播图：使用 duplicate_artboard 创建幻灯片，然后使用 batch_update 更改每张幻灯片的内容

必需结构与质量门槛

• 为图层命名，语义明确。 为每个分区、布局组、卡片、文本块、控件、图像和图标添加简洁且有意义的 name 属性（例如，<section name="Carousel Hook">、<div name="Slide Copy">、<h1 name="Hook Headline">）。切勿使用 Frame、Text 或 Icon 等通用名称；未命名的纯装饰叶子节点是唯一例外。
• 声明嵌套布局。 每个包含两个或更多子元素的框架都必须在 className 中显式包含 flex 或 grid，包括嵌套包装元素。添加相应的方向、对齐、间距和换行类；不要依赖隐式块级布局。
• 符合 WCAG AA 对比度要求。 普通文本对比度必须达到 4.5:1，大号文本必须达到 3:1。根据文本实际渲染时的背景评估对比度：如果文本有自身背景，则使用该背景；否则，逐层检查祖先框架，直至 Artboard，并将不透明度／Alpha 合成考虑在内。判断对比度前，先解析当前模式下的语义主题令牌。
• 反复审查，直至没有问题。 构建或编辑后，调用 audit_design。使用 batch_update 或 replace_section 修复所有 contrast-ratio、implicit-block-container 和 generic-layer-name 问题，然后再次调用 audit_design。如果使用 repair_design，请检查其更改并重新审查。只有当这三类问题均为零时才能宣布完成，并使用 get_document 确认有意义的图层保留了语义名称。

---

图像 — 使用真实照片，而非占位图

使用 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——Instagram／LinkedIn 帖子使用 square，Stories／Reels／TikTok 使用 vertical，YouTube 缩略图／Twitter 使用 horizontal。对于戏剧化的社交内容，使用 luminance: "dark"。真实照片能让社交媒体内容更显真实——避免使用空白占位框。

---

着色器节点与视觉效果

使用着色器节点让社交媒体内容脱颖而出。使用 add_node，设置 type: "shader"。

生成式背景

无需图像也能打造引人注目的背景——非常适合引言卡片、轮播图和故事幻灯片：

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

着色器类型：meshGradient（有机）、liquidMetal（高级质感）、chrome（醒目）、pulsar（能量感）、particles（环境氛围）、fireworks（庆祝氛围）。

为照片应用效果

为图像添加 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（前卫）。

后期处理

添加胶片颗粒、暗角或扫描线，营造纹理效果：

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

---

原生动画

社交媒体帖子、快拍、Reels 和轮播幻灯片可以使用原生 Efecto 图层动画。不要使用 Tailwind 的 animate-*、transition-* 或 duration-* 类。

工作流：检查选中的画板或节点，调用 list_animation_presets，然后使用 apply_animation_plan。先为核心内容添加动画：背景／照片、主标题、辅助文案、滑动提示或 CTA，然后再处理装饰细节。对于轮播／快拍动画，只有在用户要求片尾或视频风格的序列时才添加退出动画。

推荐默认值：标题或主视觉图片设为 0.35-0.6s，徽章／图标／细节设为 0.18-0.35s，错开间隔设为 0.04-0.1s。若品牌需要让人停下滑动的冲击力，可使用 pop-spark、bounce-in、mask-in、fade-mask-in、slide-mask-in 或 scale-mask-in；将 maskStyle 设为 linear、diagonal 或 iris，并在揭示效果需要更有设计感时使用 maskDirection／maskOrigin。否则，只用 fade-in、slide-in 和 scale-in。

---

思维方式：把它当海报，而不是网站

设计网站时，你是在为已经停下滚动并准备阅读的人写内容。而在社交媒体上，你只有 1-2 秒传达信息，之后用户就会继续滑动。这会改变一切：

• 字号要大。 画布宽 1080px，但在手机屏幕上显示时约为 375px。在网站上清晰易读的 text-base 段落，挤进 Instagram 卡片后就会变得难以辨认。通常应使用 text-xl 或 text-2xl，而不是 text-base。
• 文案要少。 如果一张幻灯片超过 2-3 行短句，文字就太多了。大胆删减。一张幻灯片只讲一个想法。
• 像设计广告牌一样思考。 你会把一段话放在高速公路广告牌上吗？不会。保持同样的冲击力。

---

社交媒体排版

根据用途选择字号，而不是套用公式。画布很大（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 大小被观看的媒介选择合适字号。

---

文案写作：Gen-Z 设计师风格

社交媒体文案不是网页文案。要像街头服饰品牌的创意总监那样写，而不是像 SaaS 营销团队那样写。

规则：

• 每条标题最多 6-8 个词。 写“快速发布。毫不妥协。”，不要写“我们的平台帮助工程团队在保证质量的同时更快地发布代码。”
• 每张幻灯片只讲一个想法。 如果需要逗号，你可能就需要分成两张幻灯片。
• 删掉填充词。 不要用“那个”、“只是”、“真的”、“非常”、“为了”、“利用”、“运用”。
• 使用不完整句。 “与众不同。”“从零到上线。”“你的下一个大项目。”完整句子不是必需的。
• 使用主动语态和现在时。 写“构建”，不要写“正在构建”。写“发布”，不要写“正在发布”。
• 不要写段落。 如果社交媒体幻灯片上的文字换行超过 2 行，就缩短文案。
• CTA 控制在 2-3 个词。 “关注获取更多”／“保存这条”／“链接见简介”／“免费试用”

不佳（网站思维）：

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

优秀（社交媒体思维）：

“设计。构建。发布。”

---

Instagram

画板尺寸

格式	宽度	高度	用途
帖子（正方形）	1080	1080	信息流帖子、单张图片
竖版帖子	1080	1350	信息流帖子（占用更多屏幕空间）
快拍 / Reels	1080	1920	快拍、Reels、竖屏视频封面
轮播幻灯片	1080	1080	轮播中的每张幻灯片
轮播（竖版）	1080	1350	轮播、竖版格式

轮播最佳实践

1. 第 1 张幻灯片 = 吸引点。 标题醒目、引人注目、文字精简。这是用户信息流中的缩略图，决定了他们是否会停下滑动。
2. 保持设计系统一致。 所有幻灯片使用相同的背景、字体样式和布局。只更改内容。
3. 每张幻灯片只讲一个要点。 不是三个，也不是两个，而是一个。
4. 为要点编号。 使用大号粗体数字（01、02、03）为每张幻灯片定位，并营造递进感。
5. 最后一张幻灯片 = 行动号召。 “关注以获取更多内容” / “保存以便稍后查看” / “个人简介中的链接”。
6. 在第 1 张幻灯片上提示滑动。 使用箭头、圆点或“向右滑 ->”，让人们知道后面还有内容。
7. 只用高对比度。 细微的颜色差异会被 JPEG 压缩和小屏幕削弱。

轮播模板

// 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>

快拍模板

<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>

---

YouTube

画板尺寸

格式	宽度	高度	用途
缩略图	1280	720	视频缩略图（16:9）
频道横幅	2560	1440	频道图片（安全区域：中心 1546x423）
片尾画面	1280	720	片尾画面叠加层
社区帖子	1080	1080	社区标签页图片

缩略图最佳实践

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

1. 人脸 + 情绪效果最好。 如果适用，带有夸张表情的人脸胜过其他一切。照片应使用大面积图像填充。
2. 最多 3-5 个词。 标题负责解释，缩略图负责吸引点击。“不要这样做”胜过“开发者部署时常犯的 5 个错误”。
3. 文字要够大。 使用 text-6xl 到 text-8xl 的 font-black。如果缩到 200px 宽时看不清，那就太小了。
4. 使用高对比度描边。 文字需要从任何背景中凸显出来。使用对比色，或在浅色文字后添加深色容器。
5. 采用分区构图。 左半部分放文字/图形，右半部分放人脸/主体，反之亦可。不要把所有内容都放在中央。
6. 最多使用 2-3 种颜色。 颜色过多的缩略图在小尺寸下会显得杂乱。选一种醒目的强调色。
7. 不要使用细字体。 所有文字都应使用 font-bold 或更粗的字重。细字体会消失。

缩略图模板

<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>

频道横幅模板

// 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>

---

TikTok

画板尺寸

格式	宽度	高度	用途
视频封面	1080	1920	视频缩略图 / 封面图片
个人资料照片	200	200	账号头像

TikTok 提示

• 优先采用竖屏设计——所有内容都是 9:16
• 安全区域很重要。 底部 20% 会被字幕/UI 遮挡。顶部 15% 显示用户名/关注按钮。将关键内容放在中央 65% 区域。
• 比 Instagram 更醒目——TikTok 的节奏更快
• 文字必须在视频画面上清晰可读——在文字后使用纯色块或深色叠加层
• 标题使用 text-5xl 到 text-7xl，不要小于 text-xl

TikTok 封面模板

<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>

---

Pinterest

画板尺寸

格式	宽度	高度	用途
标准 Pin	1000	1500	标准 Pin（2:3 比例）
长 Pin	1000	2100	信息图 / 长 Pin
正方形 Pin	1000	1000	正方形格式
看板封面	600	600	看板缩略图

Pinterest 提示

• Pinterest 是搜索引擎，而不是信息流。图钉通过关键词被发现，而非通过关注者。
• 竖版图钉更出彩。 2:3 的比例在瀑布流网格中占据更多屏幕空间。信息图或分步内容可使用长图钉（1000x2100）。
• 叠加文字必不可少。 Pinterest 用户会扫视缩略图来决定点击什么。如果图钉只是一张照片，就会被直接划过。
• 将文字放在顶部 60% 区域——在网格视图中，底部会被裁切。
• 在 Pinterest 上，暖色、明亮的颜色比深色设计效果更好（与 Instagram/YouTube 相反）。
• 添加清晰的 CTA：“阅读更多”“获取免费指南”“立即选购”。

图钉模板

<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>

---

Facebook

画板尺寸

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

Facebook 提示

• Facebook 会大幅压缩图片——使用纯色，而非细微渐变
• 链接预览图片（1200x630）是最常见的格式——分享 URL 时会显示
• 封面照片在移动端和桌面端的裁切方式不同。将关键内容放在中心 820x312 的安全区域内。
• 广告投放会降低文字较多的图片的展示优先级——广告图片中的文字应少于图片面积的 20%
• 信息流使用较宽的宽高比（1200x630），快拍使用竖版（1080x1920）

帖子模板

<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>

---

Twitter / X

画板尺寸

格式	宽度	高度	用途
图片帖子	1200	675	标准推文图片（16:9）
卡片图片	1200	628	链接预览卡片
横幅	1500	500	个人资料横幅
双图帖子	700	800	双图推文中的每张图片
串文配图	1200	675	串文中统一的视觉风格

Twitter 提示

• 信息流甚至比 Instagram 更快、更密集
• 标题：text-5xl 到 text-7xl font-extrabold
• 正文：最大使用 text-2xl 到 text-3xl
• 力求让人一眼就能看到一个句子
• 高对比度和醒目的色块效果很好
• 串文配图：所有图片使用统一模板，并采用编号系统（1/7、2/7 等）

推文图片模板

<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>

---

LinkedIn

画板尺寸

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

LinkedIn 提示

• 比 Instagram 稍显精致，但同样适用字号规则
• 轮播幻灯片：每张幻灯片展示一条编号见解
• 每张幻灯片都添加姓名 / Logo，以提升品牌辨识度
• 专业不等于无聊——仍要使用醒目的字体和强烈的对比
• LinkedIn 轮播以 PDF 形式上传——每个画板都会成为一页

LinkedIn 轮播模板

// 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>

---

通用设计规则

布局

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

颜色与对比度

• 最低对比度为 4.5:1——信息流图片会经过 JPEG 压缩，低对比度内容会变得模糊
• 为保证文字易读性，纯色背景优于渐变背景
• 深色模式设计（深色背景上的白色）在信息流中往往更醒目
• 避免粉彩色搭配粉彩色——缩略图尺寸下看起来会褪色

多页一致性

• 每张幻灯片使用相同的背景颜色
• 标题位置相同（各张幻灯片的 y 坐标相同）
• 相同用途的字体大小一致（所有标题保持一致，所有正文保持一致）
• 每张幻灯片上的品牌元素（@handle 或 logo）位置相同

平台速查表

平台	最佳格式	文本风格	氛围
Instagram	1080x1350 纵向	粗体、居中	视觉优先、美观
YouTube	1280x720 缩略图	超大、高对比度	标题党风格、人物面孔
TikTok	1080x1920 竖屏	粗体，留出安全区域	快节奏、有冲击力、紧跟潮流
Pinterest	1000x1500 纵向长图	温暖、清晰的叠加文字	令人向往、由搜索驱动
Facebook	1200x630 横向	简洁、易读	面向广大受众、适合分享
Twitter/X	1200x675 横向	一句话、粗体	观点鲜明、极简
LinkedIn	1080x1080 方形	专业、醒目	思想领导力、简洁