efecto-graphic-design

Efecto — 图形设计指南

使用 Efecto 设计工具创作图形素材——演示文稿、路演材料、活动海报、邮件页眉、博客图片、OG 卡片、名片、简历、菜单、信息图、邀请函、新闻通讯和文档。

---

设置

此技能需要 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: "Pitch Deck"

返回 { 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
create_artboard  name: "Slide 1"  width: 1920  height: 1080  backgroundColor: "#1a1a1a"  className: "flex flex-col"

# 2. Add content with JSX (most efficient way to build)
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. Read current state to get node IDs
get_document

# 4. Fine-tune with batch updates
batch_update  updates: [
  { nodeId: "abc", className: "text-8xl font-black text-white" },
  { nodeId: "def", textContent: "New text" }
]

全部 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（幻灯片接受 speakerNotes，动画接受 timelineDuration）、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" />

重要注意事项

• 画板的 className 必须包含 flex flex-col——否则子元素会重叠在 (0,0) 处
• 画板的 backgroundColor 是一个属性，而不是 className——使用 backgroundColor: "#1a1a1a"，而不是 className: "bg-gray-900"
• 切勿在 className 中使用任意十六进制颜色值——bg-[#f9f9f9] 会静默失效。请使用命名颜色（bg-gray-50）或内联 style
• 使用 grow 替代 flex-1——flex-1 在 Efecto 中不起作用
• 按钮会忽略子元素——请改用包含 <span> 和 <svg> 的 flex 容器
• 画板的直接子元素始终添加 w-full

必需结构与质量门槛

• 为图层命名，且名称应有意义。 为每个区块、布局组、卡片、文本块、控件、图像和图标添加简洁且有语义的 name 属性（例如，<section name="Title Slide">、<div name="Metric Group">、<h1 name="Presentation Title">）。切勿使用 Frame、Text 或 Icon 等通用名称；未命名的纯装饰性叶节点是唯一例外。
• 明确声明嵌套布局。 每个包含两个或更多子元素的框架都必须在 className 中明确包含 flex 或 grid，包括嵌套包装器。添加匹配的方向、对齐、间距和换行类；不要依赖隐式块级流。
• 达到 WCAG AA 对比度标准。 普通文本对比度必须达到 4.5:1，大号文本必须达到 3:1。根据文本实际渲染时的背景评估对比度：若文本自身有背景，则使用该背景；否则沿祖先框架逐层向上检查，直到画板，并计入不透明度／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: "conference stage audience"
  orientation: "horizontal"
  luminance: "dark"
  limit: 4

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

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

平面设计提示：让 orientation 与画板方向相匹配（海报／故事图片用竖向，横幅／演示文稿用横向，社交卡片用正方形）。深色主题设计请使用 luminance: "dark"。设计前先搜索——围绕真实图像构建布局，不要使用空白灰色框。

---

着色器节点与视觉效果

使用着色器节点为平面设计添加视觉效果。使用 type: "shader" 调用 add_node。

生成式背景

无需图像即可创建引人注目的背景：

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

着色器类型：meshGradient（有机混色）、dotGrid（科技／数据）、voronoi（有机细胞）、liquidMetal（高级质感）、chrome（反光）、pulsar（能量）、blackHole（戏剧效果）、glass（磨砂）、spiral（活泼）、particles（氛围感）、fireworks（庆祝）。

为图像应用效果

使用 ASCII、抖动、半色调、故障或艺术效果处理照片：

search_images  query: "portrait"  orientation: "vertical"  limit: 1
add_node
  parentId: "<artboard-id>"
  type: "shader"
  inputType: "image"
  mediaInput: { mediaUrl: "<url>", mediaType: "image", objectFit: "cover" }
  effectId: "halftone-mono"
  effectEnabled: true
  className: "w-full h-full"

效果类别：ASCII（ascii-standard、ascii-dense、ascii-minimal、ascii-blocks）、抖动（dither-floyd-steinberg、dither-atkinson）、半色调（halftone-mono、halftone-cmyk）、故障（glitch-vhs、glitch-digital）、艺术（art-kuwahara、art-crosshatch、art-lineart、art-engraving、art-stipple）。

后期处理

叠加其他效果：grain、vignette、bloom、scanlines、noise、pixelate、sepia、color-tint。

add_node
  parentId: "<id>"
  type: "shader"
  shaderType: "meshGradient"
  postProcesses: [
    { type: "grain", enabled: true, settings: { intensity: 0.3 } },
    { type: "vignette", enabled: true, settings: { intensity: 0.5 } }
  ]
  className: "w-full h-full"

适用于：演示文稿背景、海报视觉素材、活动图形、博客主视觉图片，以及具有独特视觉效果的 OG 卡片。

---

原生动画

当用户需要动效、幻灯片、短视频或演示文稿播放效果时，图形素材可以使用原生 Efecto 图层动画。不要使用 Tailwind 的 animate-*、transition-* 或 duration-* 类。

工作流：检查目标，调用 list_animation_presets，然后使用 apply_animation_plan 应用精简方案。优先为视觉层级添加动画：背景或主视觉、标题、辅助细节、CTA 或活动详情，最后再处理次要装饰元素。若需要有意设计结尾，请使用带有 timelineDuration 的 update_artboard。

推荐默认值：主视觉或标题动效时长为 0.35-0.6s，较小细节为 0.18-0.35s，错开时间为 0.04-0.12s；进入使用 ease-out，退出使用 ease-in。标题文本使用 appearBy: "word" 或 "line"；仅在动态海报场景中使用 "char"。对于海报、幻灯片和画面揭示效果，优先选择明确的遮罩预设（mask-in、fade-mask-in、slide-mask-in、scale-mask-in），并在揭示形状重要时设置 maskStyle、maskDirection 或 maskOrigin。

---

思维方式：根据场景设计

每张图形都有决定设计规则的使用场景：

• 演示文稿幻灯片通过投影或屏幕共享展示——文字要大，布局要简洁，每张幻灯片只表达一个想法
• 活动海报需要快速浏览——醒目的标题、必要信息（日期、地点、CTA）和鲜明的视觉形象
• 电子邮件页眉宽 600px，还要在数十封其他邮件中脱颖而出——简洁有力、体现品牌、以行动为导向
• 博客主视觉图片为文章定下基调——可营造氛围，也可采用排版或插画风格
• OG/分享卡片是链接给人的第一印象——既要适用于缩略图尺寸，也要适用于完整尺寸

共同原则：**少即是多。**每个元素都必须证明自己值得占据版面。

---

演示文稿与路演幻灯片

画板尺寸

格式	宽度	高度	用途
标准（16:9）	1920	1080	演示文稿、屏幕共享
宽屏（16:10）	1920	1200	Mac 原生演示文稿
经典（4:3）	1440	1080	传统幻灯片、投影仪

幻灯片设计规则

1. **每张幻灯片表达一个想法。**如果需要使用项目符号，每个要点都应该单独做成一张幻灯片。
2. **30pt 规则。**宽度为 1920px 时，字号不得小于 text-3xl（30px）。如果用于投影，最低字号甚至应为 text-4xl。
3. **每行 6 个词，最多 6 行。**越少越好。如果有一整段文字，那就是文档，不是幻灯片。
4. **全幅视觉素材。**使用图像时，让它铺满整张幻灯片。将文字叠加在纯色深色块上（不要使用渐变——使用纯色）。
5. **保持网格一致。**选定一种布局系统，并在所有幻灯片中保持一致。标题始终放在相同位置。
6. **幻灯片编号。**低调但清晰可见——有助于问答期间导航。

幻灯片类型

标题页

<section className="flex flex-col items-center justify-center gap-6 p-24 bg-gray-900 w-full h-full">
  <span className="text-xl font-semibold text-blue-400 uppercase tracking-widest">Q4 2026 Update</span>
  <h1 className="text-7xl font-extrabold text-white text-center leading-none tracking-tight">Building the Future of Design</h1>
  <p className="text-2xl text-gray-400 font-medium">Acme Inc. / October 2026</p>
</section>

章节分隔页

<section className="flex flex-col items-start justify-center gap-4 px-24 py-16 bg-blue-600 w-full h-full">
  <span className="text-xl font-bold text-blue-200 uppercase tracking-widest">Part 02</span>
  <h2 className="text-6xl font-extrabold text-white leading-tight">Product Strategy</h2>
</section>

内容页（文字 + 视觉素材）

<section className="flex items-center gap-16 px-24 py-16 bg-white w-full h-full">
  <div className="flex flex-col gap-6 grow">
    <h2 className="text-4xl font-bold text-gray-900 leading-snug">Revenue grew 3x in 12 months</h2>
    <p className="text-2xl text-gray-500 leading-relaxed">We hit $10M ARR ahead of schedule, driven by enterprise adoption and a 95% retention rate.</p>
  </div>
  <div className="w-[600px] h-[500px] bg-gray-100 rounded-3xl"></div>
</section>

大数字/统计数据页

<section className="flex flex-col items-center justify-center gap-6 p-24 bg-gray-900 w-full h-full">
  <span className="text-9xl font-black text-blue-400">3x</span>
  <h2 className="text-4xl font-bold text-white text-center">Revenue growth in 12 months</h2>
  <p className="text-xl text-gray-500">$3.2M to $10M ARR</p>
</section>

引言页

<section className="flex flex-col items-center justify-center gap-8 px-32 py-24 bg-gray-50 w-full h-full">
  <p className="text-4xl text-gray-700 text-center leading-relaxed italic">"The best tool we've adopted this year. Our design velocity doubled."</p>
  <div className="flex items-center gap-4">
    <div className="w-16 h-16 bg-gray-300 rounded-full"></div>
    <div className="flex flex-col">
      <span className="text-xl font-semibold text-gray-900">Jamie Rivera</span>
      <span className="text-lg text-gray-500">Head of Design, Linear</span>
    </div>
  </div>
</section>

结束页/CTA 页

<section className="flex flex-col items-center justify-center gap-8 p-24 bg-gray-900 w-full h-full">
  <h2 className="text-6xl font-extrabold text-white text-center">Let's build together</h2>
  <p className="text-2xl text-gray-400 text-center">[email protected]</p>
  <div className="flex items-center gap-2">
    <div className="w-10 h-10 bg-blue-600 rounded-lg"></div>
    <span className="text-xl font-bold text-gray-400">Acme Inc.</span>
  </div>
</section>

路演演示文稿结构（10 页）

1. 标题 — 公司名称、标语、日期
2. 问题 — 存在哪些痛点（一项数据或一段引述）
3. 解决方案 — 你们做什么（一句话 + 视觉素材）
4. 演示 / 产品 — 截图或模型图（全幅）
5. 市场 — TAM/SAM/SOM 或市场规模数据
6. 业绩 — 关键指标（醒目的数字）
7. 商业模式 — 如何盈利（简明图示）
8. 团队 — 创始人 + 关键新成员（照片 + 一行简介）
9. 需求 — 需要什么（融资金额、合作伙伴关系）
10. 结束页 — 联系方式、致谢

演讲者备注

每个画板都有一个 speakerNotes 字段，内容为纯文本，演示者可在 Efecto 的「演示 + 控制」模式中查看。创建幻灯片时请设置此字段。

• 将 speakerNotes 传递给 create_artboard 和 update_artboard。
• 通过 list_artboards 读取现有备注（结果中会显示该字段），或通过 get_document 读取（渲染后会作为 Artboard 标签上的 speakerNotes="..." 属性显示）。
• 撰写演讲者的讲稿，而不是幻灯片内容。幻灯片是标题，备注则是要说出来的话。
• 每张幻灯片写 2–4 句话。围绕要点展开，并衔接到下一张幻灯片。
• 如果幻灯片内容一目了然（标题卡、单词陈述页），可留空。

create_artboard:
  name: "03 — Traction"
  width: 1920
  height: 1080
  backgroundColor: "#0a0a0a"
  className: "flex flex-col"
  speakerNotes: "Walk through the 3x ARR growth. Highlight that 80% came from enterprise upgrades, not net-new logos. Set up the next slide on retention by saying 'and the reason this is durable is...'."

演示播放

最终用户可在 Efecto 的「播放」下拉菜单中启动演示文稿：原型（应用内模拟器）、演示（单窗口全屏）或演示 + 控制（观众窗口 + 演讲者控制器，显示当前幻灯片、下一张幻灯片、备注和计时器）。默认情况下，幻灯片顺序与图层面板中的顺序一致；对于空间布局的演示文稿，控制器提供视觉 (y, x) 切换选项。你的工作是创作幻灯片和备注，用户自行选择播放模式。

---

活动海报与传单

画板尺寸

格式	宽度	高度	用途
数字海报	1080	1350	线上活动、分享
A4 纵向	794	1123	印刷海报（96dpi 下为 210x297mm）
Letter 纵向	816	1056	美国信纸印刷（96dpi 下为 8.5x11in）
宽幅横幅	1920	600	网站活动横幅
正方形	1080	1080	多用途、适应性强

活动海报层级

每张活动海报都需要以下 4 个元素，并按此优先级排列：

1. 内容 — 活动名称（字号最大，是视觉焦点）
2. 时间 — 日期和时间（字号第二大，必须一眼就能读清）
3. 地点 — 地点或「线上」（清晰醒目）
4. 行动号召 —「立即注册」/「获取门票」/「回复出席」（按钮或醒目文本）

其他内容（演讲者、赞助商、说明）均为次要信息。

活动海报模板

<section className="flex flex-col justify-between p-16 bg-gray-900 w-full h-full">
  <div className="flex items-center justify-between">
    <span className="text-lg font-bold text-gray-400 uppercase tracking-widest">Design Conf 2026</span>
    <div className="w-12 h-12 bg-blue-500 rounded-xl"></div>
  </div>
  <div className="flex flex-col gap-6">
    <h1 className="text-7xl font-black text-white leading-none">The Future of Interface Design</h1>
    <div className="flex flex-col gap-2">
      <p className="text-3xl font-bold text-blue-400">March 15, 2026</p>
      <p className="text-2xl text-gray-400">San Francisco / Moscone Center</p>
    </div>
    <button className="w-fit px-10 py-4 text-xl font-bold text-gray-900 bg-white rounded-2xl">Get Tickets</button>
  </div>
</section>

会议演讲幻灯片

<section className="flex items-end gap-8 p-16 bg-gray-900 w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <span className="text-lg font-semibold text-purple-400 uppercase tracking-wider">Keynote</span>
    <h1 className="text-5xl font-extrabold text-white leading-tight">Designing with AI: What Changes and What Doesn't</h1>
    <div className="flex items-center gap-3">
      <div className="w-12 h-12 bg-gray-700 rounded-full"></div>
      <div className="flex flex-col">
        <span className="text-lg font-semibold text-white">Pablo Stanley</span>
        <span className="text-lg text-gray-500">Founder, Efecto</span>
      </div>
    </div>
  </div>
</section>

---

邮件页眉与新闻通讯图形

画板尺寸

格式	宽度	高度	用途
邮件页眉	600	200	邮件顶部横幅（最大宽度 600px）
邮件主视觉	600	400	新闻通讯中的主视觉图片
宽幅邮件主视觉	1200	400	Retina 邮件主视觉（缩放至 600px）

邮件设计规则

• 最大宽度为 600px 是通用的邮件限制。请按 600px 或 1200px（Retina 2x）设计。
• 布局务必简洁。 邮件渲染引擎还停留在 2005 年。请采用单栏或最多双栏布局。
• 行动号召要醒目易懂。 每封邮件只设一个主要操作。按钮要醒目到绝不会被忽略。
• 文字尽量精简。 邮件正文负责传达信息，图形只是视觉吸引点。
• 强化品牌元素。 Logo、品牌色，以及所有邮件中保持一致的页眉。在收件箱中，品牌识别很重要。

邮件页眉模板

<section className="flex items-center justify-between px-8 py-6 bg-gray-900 w-full h-full">
  <div className="flex items-center gap-3">
    <div className="w-8 h-8 bg-blue-500 rounded-lg"></div>
    <span className="text-xl font-bold text-white">Acme Weekly</span>
  </div>
  <span className="text-lg text-gray-400">March 2026</span>
</section>

新闻通讯主视觉模板

<section className="flex flex-col items-center justify-center gap-6 px-12 py-12 bg-blue-600 w-full h-full">
  <h1 className="text-4xl font-extrabold text-white text-center leading-tight">What we shipped this week</h1>
  <p className="text-xl text-blue-100 text-center">3 features, 2 fixes, 1 big announcement</p>
  <button className="px-8 py-3 text-lg font-bold text-blue-600 bg-white rounded-xl">Read the update</button>
</section>

---

博客与文章主视觉图片

画板尺寸

格式	宽度	高度	用途
博客主视觉（16:9）	1200	675	标准博客页眉
博客主视觉（2:1）	1200	600	宽幅博客页眉
Medium 文章	1400	788	Medium.com 页眉
Substack	1456	816	Substack 页眉图片

博客主视觉提示

• 博客主视觉旨在营造氛围，而非传递信息。可以更抽象、更具氛围感。
• 主视觉上可选择不放标题文字——许多博客会在图片下方以 HTML 呈现标题。
• 如果包含文字：使用 text-5xl 到 text-6xl，居中排布，并留出充足空间。
• 纯色背景搭配少量文字，适合打造简洁、现代的视觉效果。
• 摄影类主视觉可使用图像填充（set_fill，类型为 "image"）。

博客主视觉模板

<section className="flex flex-col items-center justify-center gap-6 px-16 py-16 bg-gray-900 w-full h-full">
  <span className="text-lg font-semibold text-blue-400 uppercase tracking-widest">Engineering</span>
  <h1 className="text-5xl font-extrabold text-white text-center leading-tight max-w-[900px]">How we reduced build times by 80%</h1>
  <p className="text-xl text-gray-500 font-medium">March 2026 / 8 min read</p>
</section>

---

OG 图片与分享卡片

画板尺寸

格式	宽度	高度	用途
Open Graph	1200	630	用于链接预览的 og:image（Facebook、Discord、Slack、iMessage）
Twitter 卡片	1200	628	用于推文链接预览的 twitter:image
WhatsApp 预览	1200	630	聊天中的链接预览

OG 图片最佳实践

有人分享 URL 时会显示 OG 图片。不同平台上的呈现尺寸各异（Slack 上为 300px，Facebook 上为 500px，某些聊天应用中为 120px）。

1. 标题最重要。 页面标题或文章标题应在图片中占据主导地位。使用 text-5xl 到 text-6xl。
2. 品牌标识。 在角落放置 Logo 或品牌名称，并在所有 OG 图片中保持一致。
3. 避免精细细节。 许多平台上的显示尺寸很小。采用简洁布局、高对比度和大字。
4. 文字左对齐效果很好——许多平台会在移动设备上裁切右侧边缘。

OG 图片模板

<section className="flex items-center gap-12 px-16 py-12 bg-white w-full h-full">
  <div className="flex flex-col gap-4 grow">
    <div className="flex items-center gap-2">
      <div className="w-8 h-8 bg-blue-600 rounded-lg"></div>
      <span className="text-lg font-bold text-gray-400">acme.com</span>
    </div>
    <h1 className="text-5xl font-extrabold text-gray-900 leading-tight">How we reduced build times by 80%</h1>
    <p className="text-xl text-gray-500">A deep dive into our new CI/CD pipeline.</p>
  </div>
  <div className="w-[250px] h-[250px] bg-blue-100 rounded-3xl"></div>
</section>

---

证书与奖项

画板尺寸

格式	宽度	高度	用途
横向证书	1400	1000	课程结业、奖项
A4 横向	1123	794	可打印证书

证书模板

<section className="flex flex-col items-center justify-center gap-8 p-24 bg-white w-full h-full border-8 border-gray-200">
  <div className="flex items-center gap-3">
    <div className="w-10 h-10 bg-blue-600 rounded-lg"></div>
    <span className="text-2xl font-bold text-gray-900">Acme Academy</span>
  </div>
  <span className="text-xl text-gray-400 uppercase tracking-widest font-semibold">Certificate of Completion</span>
  <h1 className="text-5xl font-extrabold text-gray-900 text-center">Advanced Design Systems</h1>
  <p className="text-2xl text-gray-500 text-center">Awarded to</p>
  <p className="text-4xl font-bold text-blue-600">Jane Smith</p>
  <div className="flex items-center gap-12">
    <div className="flex flex-col items-center gap-1">
      <span className="text-lg text-gray-400">Date</span>
      <span className="text-lg font-semibold text-gray-700">March 6, 2026</span>
    </div>
    <div className="flex flex-col items-center gap-1">
      <span className="text-lg text-gray-400">Instructor</span>
      <span className="text-lg font-semibold text-gray-700">Pablo Stanley</span>
    </div>
  </div>
</section>

---

名片

这是平面设计中限制最多、最依赖精细制作的格式。每个像素都至关重要。

核心原则

• 克制至关重要。 名片的可用面积约为 30 cm²。每个元素都必须有其存在的理由。
• 通过尺寸对比建立层级。 姓名用大号字，职位用中号字，联系方式用小号字。最多分三级。
• 留白是奢侈品。 最令人难忘的名片往往留白最充足。不要试图填满空间。
• 设置一个标志性元素。 醒目的色块、超大首字母、几何装饰——选一个即可。

画板设置

• 标准尺寸：336x192（96 DPI 下为 3.5" x 2"），或使用 672x384 以获得更高保真度
• 正反面使用两个画板："Front" 和 "Back"
• 正面：姓名 + 职位 + 品牌。背面：联系方式 + 地址。
• 并排放置：正面 x=0，背面 x=width+60

正面布局样式

• 经典：Logo 位于左上角，姓名居中或左对齐，职位在姓名下方。简洁、专业。
• 醒目：姓名使用 text-3xl 或 text-4xl，占据名片的大部分宽度。职位使用 text-xs，并设置大写和极宽字距。
• 极简：只放姓名，居中排布，四周留出充足边距。正面不放其他内容。
• 不对称：姓名左对齐，右侧三分之一处设置大色块或装饰图形。
• 品牌风格：使用铺满全版的品牌色，并搭配反白（白色）文字。

背面布局样式

• 信息纵列：左对齐排列电话、电子邮件、网站和地址。可选用小图标。
• 双列布局：左侧放联系方式，右侧放地址。
• 居中布局：所有信息居中，并用细分隔线或间距分隔。

排版

• 名称：text-xl 到 text-3xl，使用 font-bold 或 font-extrabold。这是名片的视觉焦点。
• 职位／角色：text-xs 到 text-sm，使用 font-medium 和 text-muted-foreground。低调、次要。
• 联系方式：text-xs，使用 font-normal。清晰易读，但字号较小。全大写标签使用 tracking-wide。
• 名片上的字体粗细绝不超过 2 种：粗体 + 常规体，仅此而已。

色彩规则

• 最多使用两种颜色（黑白除外）：品牌色 + 中性色。
• 满版色彩背景能让名片更醒目。
• 深色名片（bg-zinc-950、bg-slate-900）显得高档。

规则

• 不要写段落，不要写完整句子。只放姓名、职位和联系信息。
• 不要在整张名片周围添加装饰性边框——这会显得过时。
• 务必包含：姓名、职位／角色，以及至少邮箱和电话。
• 横向是标准版式。纵向大胆而醒目——可推荐给创意专业人士。

---

简历

一页式专业文档，必须能在 6 秒内快速浏览。

核心原则

• 几秒内即可浏览。 招聘人员查看每份简历的时间为 6-10 秒。视觉层级至关重要。
• 信息密集但条理清晰。 简历包含大量内容。设计的任务是让信息密度清晰易读，而非杂乱无章。
• 内敛而优雅。 大胆的设计选择应当含蓄——例如醒目的强调色或独特的版式，而不是实验性设计。
• 内容为王。 文本比样式更重要。切勿为了视觉装饰而牺牲信息空间。

画板设置

• US Letter：816x1056（96 DPI 下为 8.5" x 11"）
• A4：794x1123（96 DPI 下为 210mm x 297mm）
• 单个画板——简历应为一页。

版式模式

• 双栏（最常见）：窄侧边栏（w-1/3）放置联系方式、技能和教育经历 + 宽主栏（w-2/3）放置工作经历和项目。
• 单栏：通栏、传统布局。页眉 -> 简介 -> 工作经历 -> 教育经历 -> 技能。经典且适合 ATS。
• 顶部页眉 + 单栏：使用醒目的页眉色带展示姓名和联系方式，下方为单栏内容。
• 非对称布局：侧边栏使用强调色背景，以形成视觉区分。

章节层级

1. 姓名 + 联系方式——text-2xl 到 text-3xl，font-bold；下方以 text-xs 显示邮箱、电话、所在地和 LinkedIn
2. 工作经历——公司 + 职位 + 日期，每段经历配 2-3 条成就要点
3. 教育经历——学位、学校、年份
4. 技能——按类别分组（语言、框架、工具）
5. 可选：简介（最多 2 行）、项目、认证

排版

• 姓名：text-2xl 到 text-3xl，font-bold。页面上唯一的大号文本。
• 章节标题：text-sm、大写、tracking-widest、font-bold——作为视觉锚点
• 公司／职位：公司使用 text-sm 和 font-semibold，职位使用 font-medium
• 正文／要点：text-xs 到 text-sm，font-normal。紧凑但易读。
• 日期：text-xs、text-muted-foreground，右对齐或与正文同行

配色策略

• 仅使用一种强调色，用于章节标题、侧边栏或姓名。保持含蓄——不要用彩虹色。
• 深色：正文使用 slate-900 或 zinc-900。不要使用纯黑色。
• 可选强调色：blue-700（专业）、emerald-700（创意）、slate-700（保守）、amber-700（温暖）
• 侧边栏背景：使用低饱和的强调色，例如 slate-50、blue-50，或其他浅色调

规则

• 一页。除非明确要求多页简历，否则没有例外。
• 除非明确要求，否则不要放照片（简历是否放照片因文化而异）。
• 联系方式不要使用图标——会浪费空间。直接使用文本。
• 不要添加装饰元素。每个像素都应传达信息。
• 使用一致的日期格式：“Jan 2023 - Present” 或 “2023 - Present”
• 使用贴近现实的内容，不要写 “Lorem ipsum”。职位名称、公司和要点都应符合真实情况。

---

传单（详细设计指南）

在上文“活动海报和传单”一节的基础上，进一步介绍独立宣传传单的布局模式、色彩心理学和排版规则。

核心原则

• 三英尺外也能吸引目光。 传单要在公告栏、堆叠的纸张和屏幕上争夺注意力。标题必须足够醒目。
• 只保留必要信息。 内容 + 时间 + 地点 + 参与／购买／报名方式。其他都是干扰。
• 大胆的视觉层级。 分为三个层级：（1）标题／活动名称——超大，（2）关键信息——中等，（3）小字说明——小号。
• 充满活力的构图。 传单应富有动感——倾斜文字、色块、重叠元素、强烈对比。

画板设置

• 标准传单：816x1056（美国 Letter）或 794x1123（A4）
• 半页：816x528 或紧凑尺寸 540x720
• 社交媒体／数字传单：1080x1080（正方形）或 1080x1350（4:5）

布局模式

• 粗体堆叠式：顶部放超大标题，中间放图片／图形，底部放详细信息。按从上到下的顺序阅读。
• 满版图片 + 覆盖层：照片铺满画板，添加半透明覆盖层，让文字清晰易读。效果醒目。
• 分区构图：顶部为色块（标题），底部为白色／深色区域（详细信息）。分区清晰。
• 斜向动感：用倾斜分隔线划分图片区和文字区。充满活力与动感。
• 居中堆叠式：所有内容居中，纵向堆叠。适合优雅／极简风格的活动。
• 纯字体式：不使用图片——仅靠文字。超大标题，详细信息采用对比鲜明的字重／字号。大胆且富有编辑感。

字体排版

• 标题：text-5xl 到 text-9xl，使用 font-extrabold 或 font-black，并设置 tracking-tight。建议使用全大写。
• 日期：text-xl 到 text-2xl，使用 font-bold。可考虑使用大写字母搭配 tracking-widest 来增强强调效果。
• 详细信息：text-sm 到 text-base，使用 font-normal。低调但清晰易读。
• 详细信息的字号最多 2 种（日期 + 地点应采用相近字号）。标题字号应与之明显不同。

活动配色心理学

• 音乐会／派对：黑底搭配霓虹色（在 zinc-950 上使用 emerald-400、fuchsia-500、cyan-400）。充满活力。
• 会议／专业活动：白底搭配深蓝色或石板灰。简洁且权威。
• 社区／文化活动：奶油色或深色背景搭配暖色调（琥珀色、橙色、玫瑰色）。
• 促销／优惠活动：红色 + 黄色／白色。营造紧迫感的配色。bg-red-600 text-white。
• 艺术／画廊：单色搭配黑色 + 一种强调色。简约而优雅。

规则

• 不要使用过小的文字。如果日期在手臂伸直的距离看不清，字号就太小了。
• 不要堆砌大段文字。传单不是宣传册。最多使用 3-4 个简短文本块。
• 始终注明日期、时间、地点和参与方式。信息缺失 = 传单毫无用处。
• 对比度必不可少。无论背景如何，文字都必须一眼清晰可读。

---

餐厅／咖啡馆菜单

一份实用的文档，既要美观、易于浏览，也要让食物听起来令人垂涎。

核心原则

• 首先确保易于浏览。 顾客会按 F 型或 Z 型路径浏览菜单。分类标题必须一眼可见。
• 让菜品成为主角。 菜品名称和描述应占据视觉焦点，而不是装饰元素。
• 价格对齐。 价格必须容易找到，但不能过于突出。统一格式，右对齐。
• 通过设计营造氛围。 菜单就是餐厅的品牌。风格应与用餐体验相匹配。

画板设置

• 单页菜单：816x1056（Letter）或 794x1123（A4）
• 折叠菜单（每个面板）：408x528 或类似的半页尺寸
• 紧凑型／桌牌菜单：540x720 或 480x640
• 多页菜单：将多个画板并排创建

布局模式

• 单栏：按类别从上到下排列。最适合较短的菜单（少于 20 个菜品）。
• 双栏：左栏 + 右栏。最大限度利用页面容纳更多菜品。适用于较长的菜单。
• 优雅居中式：所有内容居中，留白充足。适合菜品较少的高级餐厅。
• 网格卡片式：菜品放在卡片式区块中，并预留图片位置。适合现代休闲餐厅。
• 非对称式：一列较宽，用于展示特色菜；另一列较窄，用于展示特餐／饮品。

版块结构

STARTERS          <- Category header: text-lg to text-xl, font-bold, uppercase tracking-widest

Bruschetta ............... $12    <- Item name: text-sm font-semibold, price right-aligned
  Tomato, basil, balsamic         <- Description: text-xs text-muted-foreground

Burrata Salad ............ $16
  Heirloom tomato, arugula, olive oil

排版

• 餐厅名称：text-3xl 到 text-5xl，风格鲜明。奠定整体基调。
• 类别标题：text-lg 到 text-xl，font-bold，uppercase，tracking-wide。使用清晰的分隔线。
• 菜品名称：text-sm 到 text-base，font-semibold。每行的焦点。
• 描述：text-xs 到 text-sm，font-normal，text-muted-foreground。令人垂涎，同时简洁明了。
• 价格：text-sm，font-medium，右对齐或显示在点状引导符之后。

按餐厅类型设定风格

• 高档餐厅：简约，营造衬线字体的感觉（使用 font-light + tracking-wide）。留白充足。使用深色背景或象牙白。
• 休闲餐厅／小酒馆：暖色调，略带活泼感。分区采用圆角。使用 bg-amber-50 或 bg-stone-50。
• 现代／潮流餐厅：简洁的无衬线字体，采用深色主题（bg-zinc-950），用强调色突出特色菜。装饰保持简约。
• 咖啡馆：明亮、通透。使用 bg-white 或 bg-stone-50。建议添加小插图。
• 酒吧／鸡尾酒吧：深沉、氛围感强。使用 bg-zinc-950 或 bg-slate-900。搭配金色或琥珀色点缀，营造氛围。

规则

• 不要隐藏价格，也不要让价格难以查找。价格透明有助于建立信任。
• 每个类别不超过 7-9 道菜品。选项太多会让食客难以抉择。
• 始终包含：餐厅名称、类别、菜品名称、描述、价格。
• 使用令人垂涎的描述：“自制”“慢烤”“时令”“新鲜”——不要用“好”或“美味”。
• 饮食标记（V、VG、GF）应低调呈现：使用 text-xs，放在菜品名称之后，并采用柔和的颜色。

---

信息图表／数据可视化

以视觉叙事让数据更引人入胜、更令人难忘，也更便于分享。

核心原则

• 故事优先，数据其次。 信息图表讲述一个故事，数据则为故事提供支撑。先呈现叙事脉络，而不是原始数字。
• 一个核心洞见。 每张信息图表都应传达一个让观众牢记的要点。其他内容都应服务于这个洞见。
• 视觉编码。 将数字转化为形状、大小、颜色和位置。不要只呈现文字和数字——应将数据转化为视觉模式。
• 从上到下的流动。 信息图表应像滚动页面一样阅读。各部分清晰划分，过渡明确。

画板设置

• 标准：800x2400 到 1080x3200（纵向、可滚动）
• 适合社交媒体：1080x1920（9:16）或 1080x1350（4:5）
• 演示文稿：1920x1080（横向，呈现一个核心图表）
• 使用一个纵向画板，不要使用多个。信息图表应是单幅连续作品。

分区流程

1. 标题横幅 — 用醒目的标题点明主题。“……的现状”“X 如何改变 Y”“用数字看：Z”
2. 关键数据 — 用一个超大数字（text-7xl 到 text-9xl）吸引注意力。“73% 的……”或“4.2 万亿美元”
3. 背景说明 — 用 2-3 句话解释其重要性。text-base，max-w-xl。
4. 数据分区（2-4 个）— 每个分区可视化数据的一个方面。每个分区使用不同的视觉编码方式。
5. 对比 — 并排比较或展示前后变化，清晰呈现差异。
6. 结论／行动号召 — 重申核心要点，并注明来源。

数据可视化模式（使用 Efecto Nodes）

由于 Efecto 没有内置图表组件，可通过布局以视觉方式呈现数据：

• 条形图：使用宽度与数值成比例的水平框架。左侧标注，右侧显示条形。
• 数据卡片：大号数字（text-6xl font-bold）+ 标签（text-xs uppercase）。排列 3-4 张卡片的网格。
• 对比列：并排排列两列，每列包含堆叠项目。用颜色区分。
• 时间线：垂直线（w-0.5 bg-border），搭配左右交替排列的内容节点。
• 图标阵列：排列小图标网格（w-4 h-4），用彩色与柔和色调表示比例。
• 排名列表：带编号的项目，并用条形显示数值大小。列出 1-5 个项目。

排版

• 标题：text-3xl 到 text-5xl，font-extrabold，tracking-tight。点明主题。
• 关键数据：text-7xl 到 text-9xl，font-black。视觉焦点。
• 分区标题：text-xl font-bold。区分各个数据分区。
• 标签：text-xs uppercase tracking-widest font-medium。用于数据注释。
• 正文：text-sm，每个分区最多 2-3 行。起辅助作用，不要堆砌内容。
• 来源：text-xs text-muted-foreground，置于信息图表底部。

色彩策略

• 一种主数据色 + 中性色：在白色背景上使用 blue-600 柱形，在 slate-50 背景上使用 emerald-500 柱形。
• 顺序色：为排序数据使用同一颜色由浅到深的色阶（blue-200 → blue-800）。
• 发散色：使用两种颜色进行对比（emerald-500 与 rose-500，分别表示“好”与“坏”）。
• 分类色：使用 3-4 种不同颜色区分不同类别（蓝色、琥珀色、翡翠绿、玫瑰红）。
• 背景：使用极浅的色调（slate-50、stone-50、zinc-50）或白色。信息图整体切勿使用深色背景。

规则

• 数据板块不超过 4 个。超过 4 个后，注意力会急剧下降。
• 不要使用原始数据表格。将每个数字都转化为视觉元素。
• 务必注明来源（底部使用 text-xs）。即使写上“来源：Company Annual Report 2025”，也能增加可信度。
• 使用听起来真实的数据。“73% 的远程工作者更喜欢异步沟通”——不要写“X% 的人会做 Y”。
• 切勿让板块过于拥挤。数据块之间留出 gap-8 到 gap-12 的间距，让每个板块都有舒展的空间。

---

邀请函／公告卡片

用于活动的个人化作品，通常带有情感色彩，为活动定下基调。

核心原则

• 情感优先。 邀请函承载着情感——庆祝、优雅、兴奋、温馨。设计必须唤起活动的氛围。
• 精美排布必要信息。 主办方是谁、活动是什么、何时举行、地点在哪里，以及如何回复。呈现时应从容优雅。
• 令人难忘。 一个出乎意料的元素——放大的字母、醒目的颜色、优雅的边框——就能让人印象深刻。
• 与活动风格一致。 黑领结晚宴的邀请函，与儿童生日派对的邀请函截然不同。正式程度必须精准匹配。

画板设置

• 标准卡片：672x480（7" x 5"）或 480x672（5" x 7" 纵向）
• 正方形：540x540 或 648x648
• A5 横向：794x559
• 创建两个画板：“Front”和“Back”（或“Details”），以制作完整的邀请函

布局模式

• 经典居中：所有内容居中，留出充足的边距。姓名／活动名称较大，详细信息较小并置于下方。经久不衰。
• 边框式：使用纤细的装饰边框（border-2 rounded-xl，内边距 p-8 到 p-12）。内容在边框内居中。
• 分栏式：左半部分为色块或图片，右半部分放置文字。现代且有条理。
• 顶部突出式：顶部使用大型装饰性页眉（色块、图案或图片），详细信息放在下方三分之一处。
• 极简式：只在浓郁的背景色上放置文字。极致克制。适用于正式活动。

内容层级

1. 主办方文字（可选）——“与家人共同邀请”或“诚邀您参加”——text-xs 到 text-sm，font-light
2. 活动／姓名——视觉中心。“Sarah & James”“年度晚宴”“你要满 5 岁啦！”——text-3xl 到 text-5xl
3. 活动类型——“婚礼庆典”“生日派对”“盛大开业”——text-sm 到 text-base
4. 日期 + 时间——醒目呈现。text-lg font-semibold。可考虑使用装饰性排版。
5. 场地——名称 + 地址。text-sm 到 text-base。
6. 回复确认——说明回复方式。text-xs 到 text-sm。“请于 3 月 15 日前回复 [email protected]”
7. 补充信息——着装要求、停车信息、饮食备注。text-xs text-muted-foreground。

不同活动类型的风格

• 婚礼：优雅，带有衬线字体的感觉。柔和的颜色（rose-50、stone-50、amber-50）。姓名使用 Tracking-wide。装饰尽量简洁。
• 成人生日：可以大胆或优雅。深色背景（zinc-900 + 金色点缀）或明亮配色（紫红、琥珀色）。
• 儿童生日：明亮、活泼。大胆的颜色（yellow-400、sky-400、rose-400）。使用醒目有趣的大字。整体采用圆润造型。
• 企业活动：简洁、专业。品牌色 + 白色。层级清晰。避免俏皮风格。
• 节日活动：使用主题色（圣诞节用红色 + 绿色，万圣节用橙色 + 黑色）。温暖而喜庆。
• 迎婴派对：柔和的浅色（sky-100、rose-100、薄荷绿）。温婉、精致。留白充足。

规则

• 不要杂乱。邀请函应给人宽敞、用心设计的感觉。拿不准时，就删掉元素。
• 不要使用 lorem ipsum。使用真实的姓名（“Emma & Lucas”）、真实的日期和真实的场地。
• 始终包含：活动名称、日期、时间、地点、RSVP 方式。
• 婚礼邀请函：新人姓名是设计的核心，而不是细节。要让它们熠熠生辉。

---

电子邮件简报（完整布局指南）

扩展上文的“电子邮件页眉与简报图形”部分——本节涵盖完整的简报布局设计，而不仅是页眉／主视觉图形。

核心原则

• 单栏至上。 邮件客户端难以预测。单栏（max-w-xl 至 max-w-2xl）适用于所有场景。
• 内容区块便于浏览。 读者通常会快速浏览简报。每个内容区块都应独立完整：图片／标题／摘要／链接。
• 清晰的视觉节奏。 各部分之间保持一致的间距。重复的模式应便于读者预判。
• 每个部分设置一个 CTA。 每个内容区块应当只有一个操作——“阅读更多”、“观看”或“注册”。

画板设置

• 标准尺寸：600x900 至 640x1200（电子邮件宽度通常为 600px）
• 最大宽度设为 640——电子邮件客户端会裁切更宽的布局
• 使用单个高画板。简报采用纵向滚动。

布局模式

• 页眉 → 主视觉 → 卡片 → CTA → 页脚：最常见的简报结构。
• 博客摘要：用重复卡片呈现 3-5 篇文章（图片在左、文字在右，或上下堆叠）。
• 单篇故事：一篇大型精选文章，搭配辅助图片和引文。
• 精选链接：带简短描述的编号链接列表。尽量少用图片。
• 混合式：精选文章 + 快速链接 + 活动宣传 + 页脚。

部分结构

HEADER — Logo left, date/issue right. bg-background, py-4 px-6. Thin bottom border.

HERO — Featured story. Large image (rounded-xl), headline below (text-xl font-bold),
  2-line excerpt, "Read more" link.

CONTENT CARDS (x3-5) — Repeating pattern:
  Image thumbnail (w-24 h-24 rounded-lg) left + headline (text-base font-semibold)
  + excerpt (text-sm) + link

DIVIDER — Simple horizontal rule (h-px bg-border) between sections.

CTA SECTION — "Subscribe", "Share", or event promo. bg-muted rounded-xl p-6, centered.

FOOTER — Unsubscribe link, company address, social icons. text-xs text-muted-foreground.

排版

• 页眉：Logo 文字或图片。text-lg font-bold。
• 标题：text-lg 至 text-xl，font-bold。应具有可点击的视觉感受。
• 正文／摘要：text-sm，font-normal。每张卡片最多 2-3 行。
• 链接：text-sm font-medium text-primary。添加下划线或明显的颜色变化。
• 部分标签：text-xs uppercase tracking-widest font-semibold text-muted-foreground。
• 页脚：text-xs，text-muted-foreground。

规则

• 最大宽度 640px。绝不能更宽。
• 不要使用复杂布局。最多两栏，并优先采用单栏。
• 始终包含：带品牌标识的页眉、内容部分、退订链接和页脚。
• 每张内容卡片都需要清晰的操作链接。不要让读者猜该点击哪里。

---

商务文档／报告

专业商务文档——结构清晰、权威且信息丰富。

核心原则

• 结构营造可信度。 组织良好的文档能在读者处理内容之前建立信任。
• 内容密集但便于浏览。 商务文档包含大量文本。设计的任务是帮助读者找到所需内容。
• 专业而克制。 不要使用炫目的设计。采用清晰的排版、一致的间距和细腻的点缀。
• 层级至关重要。 标题 → 章节 → 子章节 → 正文 → 说明文字。设置五个鲜明的视觉层级。

画板设置

• US Letter：816x1056
• A4：794x1123
• 多页文档：创建多个画板，尺寸相同，纵向排列
• 页面命名：“01 — 封面”、“02 — 执行摘要”、“03 — 分析”

文档类型

报告／白皮书：

• 封面页：标题（text-4xl font-bold）、副标题、作者、日期、公司 Logo
• 目录（可选）：章节编号 + 标题 + 页码
• 各章节：大标题（text-2xl font-bold）+ 正文（text-sm）+ 提示框

提案：

• 封面：项目名称 + 客户名称 + 日期。专业且贴合客户需求。
• 问题 → 解决方案 → 方法 → 时间线 → 定价 → 条款

宣传册：

• 两栏或三栏布局
• 特色内容框：bg-muted rounded-xl p-6，包含图标 + 标题 + 描述
• 封底：联系信息、地点、网站

单页简介／事实清单：

• 所有内容放在一页上。信息密度最大化。
• 顶部色带包含标题 + Logo，正文采用 2-3 栏布局并设置信息统计框

排版

• 文档标题：text-3xl 到 text-4xl，font-bold。用于封面主视觉。
• 章节标题：text-xl 到 text-2xl，font-bold。清晰划分章节。
• 小节标题：text-base 到 text-lg，font-semibold。
• 正文：text-sm，font-normal，leading-relaxed。段落易于阅读。
• 图注：text-xs，text-muted-foreground，italic。置于图表下方。

结构元素

• 引文：bg-muted p-6 rounded-xl，text-lg font-medium，border-l-4 border-primary
• 数据框：bg-primary text-primary-foreground p-4 rounded-xl，大号数字 + 标签
• 表格：全宽，标题行使用 bg-muted，行采用交替底纹，文字大小为 text-xs 到 text-sm
• 分隔线：主要章节之间使用 h-px bg-border

规则

• 正文必须使用 text-sm 和 leading-relaxed。行距太紧会让人疲惫。
• 正文最多分 2 栏。长篇阅读最稳妥的布局是单栏。
• 始终包含：标题、日期、作者/公司、章节标题、页面结构。
• 图和表格都要加图注："Figure 1: Monthly active users, Jan-Dec 2025"
• 不要使用装饰元素。每个视觉元素都应传达信息或帮助导航。

---

通用平面设计技巧

构图

• 3 秒内建立视觉层级。 眯起眼睛看看你的设计——能看出什么最重要吗？如果不能，就加大主要、次要和第三级元素之间的对比。
• 三分法。 将关键元素放在交点上，而不是正中央（除非有意居中以实现对称）。
• 留白就是结构。 内边距和间距比边框和分隔线更有作用。章节之间使用 gap-8 到 gap-16。
• 锚点元素。 每个构图都需要一个视觉锚点——视线最先落在的元素。让它在尺寸、粗细或色彩上显著突出。

平面设计配色

• 三色规则。 使用一种主色、一种辅助色和一种强调色。超过 3 种颜色，设计就会显得杂乱。
• 60-30-10 比例。 60% 主色（背景），30% 次要色（容器、辅助元素），10% 强调色（CTA、重点内容）。
• 以 50% 缩放比例测试。 如果设计缩小一半后仍清晰易读，说明对比度合适。

平面设计排版

• 字体最多两种。 标题用一种，正文用一种。同一种字体使用不同字重也可以。
• 字号对比很重要。 标题至少应为正文字号的 2 倍。使用 text-6xl 标题搭配 text-2xl 正文，而不是 text-4xl 搭配 text-3xl。
• 全大写文本要调整字间距。 全大写文本始终添加 tracking-wide 或 tracking-widest，否则看起来会很拥挤。

格式速查

资产	尺寸	关键规则
演示文稿	1920x1080	每张幻灯片表达一个观点，最小字号为 text-3xl
融资演示文稿	1920x1080	10 张幻灯片，数字醒目，文字精简
活动海报	1080x1350	内容 + 时间 + 地点 + CTA
邮件页眉	600x200	品牌 + 一行文字，最大宽度 600px
邮件主视觉	600x400	一个 CTA，布局简洁
博客主视觉	1200x675	营造氛围，可选文字
OG 图片	1200x630	标题 + 品牌，在 300px 尺寸下仍清晰
证书	1400x1000	正式、居中、留白充足
名片	336x192 / 672x384	最多 2 种颜色，3 级层次，正反面
简历	816x1056	仅 1 页，6 秒内可浏览完，使用一种强调色
传单	816x1056	标题醒目，内容 + 时间 + 地点 + 方式
菜单	816x1056	分类易于浏览，价格清晰可见，令人有食欲
信息图	1080x3200	一个关键见解，以视觉方式呈现数据，从上到下阅读
邀请函	672x480	先传递情感，形式感要与场合完全匹配
新闻简报	640x1200	单栏，最大宽度 640px，内容区块易于浏览
文档	816x1056	5 级层次，专业而克制