efecto-graphic-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Efecto — Graphic Design Guide

Efecto — 图形设计指南

Design graphic assets — presentations, pitch decks, event posters, email headers, blog images, OG cards, business cards, resumes, menus, infographics, invitations, newsletters, and documents — using the Efecto design tool.

使用Efecto设计工具创建各类图形资产——包括演示文稿、宣传推介PPT、活动海报、邮件页眉、博客配图、OG卡片、名片、简历、菜单、信息图、邀请函、新闻通讯及各类文档。

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: "Pitch Deck"

Returns

{ sessionId, designUrl }

. Tell the user to open the URL, then poll

session_status

until

browserConnected: true

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

create_session  label: "Pitch Deck"

{ sessionId, designUrl }

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

session_status

直到

browserConnected: true

。

Building Designs

设计构建流程

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

undefined

核心工作流：创建画板 → 用JSX添加区块 → 优化更新。

undefined

1. Create an artboard

1. 创建画板

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)

2. 用JSX添加内容（最高效的构建方式）

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

<h1 className="text-7xl font-extrabold text-white text-center">Your Title Here</h1> <p className="text-2xl text-gray-400">Subtitle text</p> </section>'

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

<h1 className="text-7xl font-extrabold text-white text-center">Your Title Here</h1> <p className="text-2xl text-gray-400">Subtitle text</p> </section>'

3. Read current state to get node IDs

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

get_document

4. Fine-tune with batch updates

4. 通过批量更新微调设计

batch_update updates: [ { nodeId: "abc", className: "text-8xl font-black text-white" }, { nodeId: "def", textContent: "New text" } ]

undefined

batch_update updates: [ { nodeId: "abc", className: "text-8xl font-black text-white" }, { nodeId: "def", textContent: "New text" } ]

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: "#1a1a1a"

, 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

画板
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
——画板的直接子元素都要设置

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: "conference stage audience"
  orientation: "horizontal"
  luminance: "dark"
  limit: 4

Then apply images to your designs:

Image node:

add_node

with

type: "image"

src: "<url>"

alt: "..."

className: "w-full h-[400px] object-cover rounded-2xl"

Background fill:

set_fill

with

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

In JSX:

<img src="<url>" alt="..." className="w-full h-[400px] object-cover rounded-2xl" />

Tips for graphic design: Match

orientation

to your artboard (vertical for posters/stories, horizontal for banners/presentations, square for social cards). Use

luminance: "dark"

for dark-themed designs. Search before designing — build layouts around real images, not empty gray boxes.

使用

search_images

从Lummi查找免费高质量库存照片。无需会话——随时可调用。

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

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

图片节点：

add_node

设置

type: "image"

src: "<url>"

alt: "..."

className: "w-full h-[400px] object-cover rounded-2xl"

背景填充：

set_fill

设置

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

JSX中使用：

<img src="<url>" alt="..." className="w-full h-[400px] object-cover rounded-2xl" />

图形设计技巧：将

orientation

与画板匹配（海报/竖版故事用垂直方向，横幅/演示文稿用水平方向，社交卡片用方形）。深色主题设计使用

luminance: "dark"

。先搜索图片再设计——围绕真实图片构建布局，而非空灰色框。

Shader Nodes & Visual Effects

着色器节点与视觉效果

Add visual effects to graphic designs with shader nodes. Use

add_node

with

type: "shader"

通过着色器节点为图形设计添加视觉效果。使用

add_node

并设置

type: "shader"

。

Generative Backgrounds

生成式背景

Create eye-catching backgrounds without images:

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

Shader types:

meshGradient

(organic blending),

dotGrid

(tech/data),

voronoi

(organic cells),

liquidMetal

(premium),

chrome

(reflective),

pulsar

(energy),

blackHole

(dramatic),

glass

(frosted),

spiral

(playful),

particles

(atmospheric),

fireworks

(celebration).

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

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

（庆典风）。

Apply Effects to Images

为图片添加效果

Process photos with ASCII, dither, halftone, glitch, or art effects:

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"

Effect categories: ASCII (

ascii-standard

ascii-dense

ascii-minimal

ascii-blocks

), Dither (

dither-floyd-steinberg

dither-atkinson

), Halftone (

halftone-mono

halftone-cmyk

), Glitch (

glitch-vhs

glitch-digital

), Art (

art-kuwahara

art-crosshatch

art-lineart

art-engraving

art-stipple

用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

）。

Post-Processes

后期处理

Stack additional effects:

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"

Best for: Presentation backgrounds, poster visuals, event graphics, blog hero images, OG cards with distinctive visual treatments.

叠加额外效果：

grain

（颗粒感）、

vignette

（暗角）、

bloom

（ bloom光效）、

scanlines

（扫描线）、

noise

（噪点）、

pixelate

（像素化）、

sepia

（复古棕）、

color-tint

（色彩 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卡片。

Mindset: Design for the Context

设计思维：贴合场景设计

Every graphic has a context that dictates the rules:

Presentation slides are projected or screen-shared — big text, simple layouts, one idea per slide
Event posters are scanned quickly — bold headline, essential details (date, place, CTA), strong visual identity
Email headers are 600px wide and compete with dozens of other emails — punchy, branded, action-oriented
Blog hero images set the tone for an article — atmospheric, typographic, or illustrative
OG/share cards are the first impression of a link — they need to work at thumbnail size AND full size

The common thread: less is more. Every element must earn its place.

每个图形都有其应用场景，场景决定设计规则：

演示文稿幻灯片：用于投影或屏幕共享——文字要大、布局简洁、每页一个核心观点
活动海报：快速被扫视——标题醒目、包含关键信息（日期、地点、行动号召）、视觉辨识度强
邮件页眉：宽度600px，需在众多邮件中脱颖而出——简洁有力、贴合品牌、行动导向
博客首图：奠定文章基调——氛围感强、可采用排版或插画风格
OG/分享卡片：是链接的第一印象——需同时适配缩略图尺寸和完整尺寸

共同原则：少即是多。每个元素都要有存在的价值。

Presentations & Pitch Decks

演示文稿与宣传推介PPT

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Standard (16:9)	1920	1080	Presentations, screen share
Widescreen (16:10)	1920	1200	Mac-native presentations
Classic (4:3)	1440	1080	Traditional slides, projectors

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

Slide Design Rules

幻灯片设计规则

One idea per slide. If you need bullet points, each bullet should be its own slide.
30pt rule. At 1920px width, nothing smaller than
```
text-3xl
```
(
```
30px
```
). If projected, even
```
text-4xl
```
is the minimum.
6 words per line, 6 lines max. Less is better. If you have a paragraph, you have a document, not a slide.
Full-bleed visuals. When using an image, let it fill the entire slide. Overlay text on a solid dark block (not a gradient — use solid colors).
Consistent grid. Pick a layout system and stick with it across all slides. Title always in the same position.
Slide numbers. Subtle but present — helps navigation during Q&A.

每页一个核心观点。若需使用项目符号，每个要点单独占一页。
30pt规则。1920px宽度下，文字不小于
```
text-3xl
```
（30px）。若用于投影，
```
text-4xl
```
是最小要求。
每行6字，最多6行。越少越好。如果需要段落文字，那应该是文档而非幻灯片。
全屏视觉元素。使用图片时，让图片铺满整个幻灯片。在纯色深色块上叠加文字（不要用渐变——用纯色）。
一致的网格系统。选择一种布局系统并在所有幻灯片中保持一致。标题始终在同一位置。
幻灯片编号。低调但要存在——问答环节有助于导航。

Slide Types

幻灯片类型

Title Slide

标题页

jsx

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

jsx

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

章节分隔页

jsx

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

jsx

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

Content Slide (Text + Visual)

内容页（文字+视觉）

jsx

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

jsx

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

Big Number / Stat Slide

大数字/数据页

jsx

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

jsx

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

Quote Slide

引用页

jsx

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

jsx

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

Closing / CTA Slide

结尾/行动号召页

jsx

<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">hello@acme.com</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>

jsx

<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">hello@acme.com</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>

Pitch Deck Flow (10 slides)

宣传推介PPT流程（10页）

Title — Company name, tagline, date
Problem — What pain exists (one stat or quote)
Solution — What you do (one sentence + visual)
Demo / Product — Screenshot or mockup (full-bleed)
Market — TAM/SAM/SOM or market size stat
Traction — Key metrics (big numbers)
Business Model — How you make money (simple diagram)
Team — Founders + key hires (photos + one-line bios)
Ask — What you need (funding amount, partnerships)
Closing — Contact info, thank you

标题页——公司名称、标语、日期
问题页——存在的痛点（一个数据或引用）
解决方案页——你的业务（一句话+视觉）
演示/产品页——截图或模型（全屏）
市场页——TAM/SAM/SOM或市场规模数据
** traction页**——关键指标（大数字）
商业模式页——盈利方式（简单图表）
团队页——创始人+核心成员（照片+一行简介）
需求页——你需要什么（融资额、合作）
结尾页——联系方式、致谢

Event Posters & Flyers

活动海报与传单

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Digital Poster	1080	1350	Online events, sharing
A4 Portrait	794	1123	Print posters (210x297mm at 96dpi)
Letter Portrait	816	1056	US letter print (8.5x11in at 96dpi)
Wide Banner	1920	600	Website event banners
Square	1080	1080	Multi-purpose, adaptable

格式	宽度	高度	适用场景
数字海报	1080	1350	线上活动、分享
A4竖版	794	1123	印刷海报（210x297mm，96dpi）
Letter竖版	816	1056	美国信纸印刷（8.5x11英寸，96dpi）
宽横幅	1920	600	网站活动横幅
方形	1080	1080	多用途、适应性强

Event Poster Hierarchy

活动海报层级

Every event poster needs these 4 elements in this priority order:

What — The event name (largest text, the visual anchor)
When — Date and time (second-largest, must be instantly readable)
Where — Location or "Online" (clear and prominent)
CTA — "Register now" / "Get tickets" / "RSVP" (button or highlighted text)

Everything else (speakers, sponsors, descriptions) is secondary.

每个活动海报都需要以下4个元素，优先级如下：

活动内容——活动名称（最大字号，视觉核心）
时间——日期和时间（第二大字号，必须一眼可见）
地点——地点或“线上”（清晰突出）
行动号召——“立即注册”“购票”“RSVP”（按钮或高亮文字）

其他所有内容（演讲者、赞助商、描述）都是次要的。

Event Poster Template

活动海报模板

jsx

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

jsx

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

Conference Talk Slide

会议演讲页

jsx

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

jsx

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

Email Headers & Newsletter Graphics

邮件页眉与新闻通讯图形

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Email Header	600	200	Top-of-email banner (max-width 600px)
Email Hero	600	400	Hero image in newsletter
Wide Email Hero	1200	400	Retina email hero (scales to 600px)

格式	宽度	高度	适用场景
邮件页眉	600	200	邮件顶部横幅（最大宽度600px）
邮件首图	600	400	新闻通讯首图
宽版邮件首图	1200	400	Retina邮件首图（缩放至600px）

Email Design Rules

邮件设计规则

600px max width is the universal email constraint. Design at 600px or 1200px (retina 2x).
Simple layouts only. Email rendering engines are stuck in 2005. Stick to single-column or two-column max.
Big, obvious CTA. One primary action per email. Make the button impossible to miss.
Minimal text. The email body handles the message — the graphic is just the visual hook.
Brand-heavy. Logo, brand colors, consistent header across all emails. Recognition matters in an inbox.

最大宽度600px是通用邮件限制。设计尺寸为600px或1200px（2x Retina）。
仅使用简单布局。邮件渲染引擎停留在2005年水平。最多使用两栏布局，优先单栏。
醒目的行动号召。每封邮件一个主要行动。按钮要醒目到无法忽略。
最少文字。邮件正文负责传递信息——图形只是视觉钩子。
强品牌感。Logo、品牌色、所有邮件一致的页眉。收件箱中辨识度至关重要。

Email Header Template

邮件页眉模板

jsx

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

jsx

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

Newsletter Hero Template

新闻通讯首图模板

jsx

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

jsx

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

Blog & Article Hero Images

博客与文章首图

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Blog Hero (16:9)	1200	675	Standard blog header
Blog Hero (2:1)	1200	600	Wide blog header
Medium Article	1400	788	Medium.com header
Substack	1456	816	Substack header image

格式	宽度	高度	适用场景
博客首图（16:9）	1200	675	标准博客页眉
博客首图（2:1）	1200	600	宽版博客页眉
Medium文章首图	1400	788	Medium.com页眉图片
Substack首图	1456	816	Substack页眉图片

Blog Hero Tips

博客首图技巧

Blog heroes set the mood, not deliver information. They can be more abstract and atmospheric.
Title text on the hero is optional — many blogs render the title in HTML below the image.
If including text:
```
text-5xl
```
to
```
text-6xl
```
, centered, with plenty of breathing room.
Solid color backgrounds with minimal text work well for a clean, modern look.
Use image fills (
```
set_fill
```
with type "image") for photographic heroes.

博客首图奠定基调，而非传递信息。可以更抽象、更有氛围感。
首图上的标题文字是可选的——很多博客会在图片下方用HTML渲染标题。
如果包含文字：
```
text-5xl
```
到
```
text-6xl
```
，居中，留足呼吸空间。
纯色背景加少量文字适合干净现代的风格。
使用图片填充（
```
set_fill
```
设置type为"image"）制作摄影风格首图。

Blog Hero Template

博客首图模板

jsx

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

jsx

<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 Images & Share Cards

OG图片与分享卡片

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Open Graph	1200	630	og:image for link previews (Facebook, Discord, Slack, iMessage)
Twitter Card	1200	628	twitter:image for tweet link previews
WhatsApp Preview	1200	630	Link preview in chats

格式	宽度	高度	适用场景
Open Graph	1200	630	链接预览图（Facebook、Discord、Slack、iMessage）
Twitter卡片	1200	628	推文链接预览图
WhatsApp预览图	1200	630	聊天中的链接预览

OG Image Best Practices

OG图片最佳实践

OG images appear when someone shares a URL. They render at different sizes depending on the platform (300px on Slack, 500px on Facebook, 120px in some chat apps).

Title is king. The page title or article headline should dominate the image.
```
text-5xl
```
to
```
text-6xl
```
.
Brand anchor. Logo or brand name in a corner — consistent across all OG images.
No fine details. Renders tiny on many platforms. Simple layout, high contrast, big text.
Left-aligned text works well — many platforms crop the right edge on mobile.

OG图片在分享URL时显示。不同平台渲染尺寸不同（Slack上300px，Facebook上500px，部分聊天应用中120px）。

标题为王。页面标题或文章标题应占据图片主导地位。
```
text-5xl
```
到
```
text-6xl
```
。
品牌锚点。角落放置Logo或品牌名——所有OG图片保持一致。
无精细细节。很多平台渲染尺寸很小。布局简单、高对比度、大文字。
左对齐文字效果好——很多平台在移动端会裁剪右侧边缘。

OG Image Template

OG图片模板

jsx

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

jsx

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

Certificates & Awards

证书与奖状

Artboard Sizes

画板尺寸

Format	Width	Height	Use Case
Landscape Certificate	1400	1000	Course completion, awards
A4 Landscape	1123	794	Printable certificate

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

Certificate Template

证书模板

jsx

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

jsx

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

Business Cards

名片

The most constrained and craft-dependent format in graphic design. Every pixel matters.

图形设计中最受限制且最考验工艺的格式。每一个像素都至关重要。

Core Principles

核心原则

Restraint is everything. A business card has ~30 cm² to work with. Every element must earn its place.
Hierarchy through scale contrast. Name LARGE, title medium, contact details small. Three levels, max.
Whitespace is luxury. The most memorable cards are the ones with the most breathing room. Resist filling space.
One signature element. A bold color block, an oversized initial, a geometric accent — pick ONE.

克制是一切。名片只有约30平方厘米的空间。每个元素都要有存在的价值。
通过尺寸对比建立层级。名字超大，职位中等，联系方式小。最多三个层级。
留白是奢侈。最令人难忘的名片是留白最多的名片。不要填满空间。
一个标志性元素。一个大胆的色块、超大首字母、几何装饰——选一个。

Artboard Setup

画板设置

Standard: 336x192 (3.5" x 2" at 96 DPI) or 672x384 for higher fidelity
Two artboards for front/back: "Front" and "Back"
Front: name + title + brand. Back: contact details + address.
Position side-by-side: x=0 for front, x=width+60 for back

标准尺寸：336x192（3.5英寸x2英寸，96 DPI）或672x384（更高保真）
正反面两个画板：“正面”和“反面”
正面：名字+职位+品牌。反面：联系方式+地址。
并排摆放：正面x=0，反面x=宽度+60

Front Layout Patterns

正面布局模式

Classic: Logo top-left, name center or left-aligned, title below name. Clean, professional.
Bold: Name in text-3xl or text-4xl spanning most of the card. Title in text-xs uppercase tracking-widest.
Minimal: Just the name, centered, with generous margins. Nothing else on front.
Asymmetric: Name left-aligned, large color block or accent shape on right third.
Branded: Full-bleed brand color with reversed (white) text.

经典：Logo左上，名字居中或左对齐，职位在名字下方。干净、专业。
大胆：名字用text-3xl或text-4xl，占据名片大部分宽度。职位用text-xs uppercase tracking-widest。
极简：只有名字，居中，留足边距。正面无其他元素。
不对称：名字左对齐，右侧三分之一是大色块或装饰形状。
品牌化：全 bleed品牌色，搭配反色（白色）文字。

Back Layout Patterns

反面布局模式

Info stack: Left-aligned column: phone, email, website, address. Small icons optional.
Two-column: Contact left, address right.
Centered: All info centered, separated by subtle dividers or spacing.

信息堆叠：左对齐列：电话、邮箱、网站、地址。可加小图标。
两栏：联系方式左，地址右。
居中：所有信息居中，用细微分隔线或间距分开。

Typography

排版

Name: text-xl to text-3xl, font-bold or font-extrabold. This is the HERO of the card.
Title/role: text-xs to text-sm, font-medium, text-muted-foreground. Quiet, subordinate.
Contact: text-xs, font-normal. Legible but small. Use tracking-wide for all-caps labels.
NEVER use more than 2 font weights on a business card. Bold + normal. That's it.

名字：text-xl到text-3xl，font-bold或font-extrabold。这是名片的核心。
职位/角色：text-xs到text-sm，font-medium，text-muted-foreground。低调、从属。
联系方式：text-xs，font-normal。清晰但小。全大写标签用tracking-wide。
名片上永远不要使用超过2种字体粗细。粗体+常规体。仅此而已。

Color Rules

颜色规则

TWO colors max (plus black/white). Brand color + neutral.
Full-bleed color backgrounds make cards stand out physically.
Dark cards (bg-zinc-950, bg-slate-900) feel premium.

最多两种颜色（加黑白）。品牌色+中性色。
全 bleed颜色背景让名片在物理上更突出。
深色名片（bg-zinc-950, bg-slate-900）感觉高端。

Rules

规则

NO paragraphs. No sentences. Just name, title, contact data.
NO decorative borders around the entire card — they feel dated.
ALWAYS include: name, title/role, at least email and phone.
Horizontal orientation is standard. Vertical is bold and distinctive — suggest it for creative professionals.

无段落。无句子。只有名字、职位、联系数据。
无整个名片的装饰边框——显得过时。
必须包含：名字、职位/角色、至少邮箱和电话。
横版是标准。竖版大胆独特——推荐给创意专业人士。

Resumes / CVs

简历/CV

A single-page professional document that must be scannable in 6 seconds.

单页专业文档，必须能在6秒内被扫描完毕。

Core Principles

核心原则

Scannable in seconds. Recruiters spend 6-10 seconds per resume. Visual hierarchy is critical.
Information-dense but organized. Resumes pack a lot of content. The design's job is to make density feel clear, not cluttered.
Conservative elegance. Bold design choices should be subtle — a strong color accent, a distinctive layout — not experimental.
Content is king. The text matters more than the styling. Never sacrifice information space for visual decoration.

6秒内可扫描。招聘人员每份简历只花6-10秒。视觉层级至关重要。
信息密集但有条理。简历包含大量内容。设计的作用是让密集的信息看起来清晰，而非杂乱。
保守优雅。大胆的设计选择应该是微妙的——一个强烈的颜色强调、独特的布局——而非实验性的。
内容为王。文字比样式更重要。永远不要为了视觉装饰牺牲信息空间。

Artboard Setup

画板设置

US Letter: 816x1056 (8.5" x 11" at 96 DPI)
A4: 794x1123 (210mm x 297mm at 96 DPI)
Single artboard — resumes should be ONE page.

US Letter：816x1056（8.5英寸x11英寸，96 DPI）
A4：794x1123（210mmx297mm，96 DPI）
单个画板——简历应该是一页。

Layout Patterns

布局模式

Two-column (most popular): Narrow sidebar (w-1/3) for contact, skills, education + wide main column (w-2/3) for experience, projects.
Single-column: Full-width, traditional. Header -> Summary -> Experience -> Education -> Skills. Classic and ATS-friendly.
Top header + single column: Bold header band with name + contact, then single-column content below.
Asymmetric: Sidebar with accent color background for visual distinction.

两栏（最受欢迎）：窄侧边栏（w-1/3）放联系方式、技能、教育经历 + 宽主栏（w-2/3）放工作经历、项目。
单栏：全宽、传统。页眉 -> 摘要 -> 工作经历 -> 教育经历 -> 技能。经典且ATS友好。
顶部页眉+单栏：大胆的页眉区域包含名字+联系方式，下方是单栏内容。
不对称：侧边栏用强调色背景以区分视觉。

Section Hierarchy

章节层级

Name + contact — text-2xl to text-3xl font-bold, followed by email, phone, location, LinkedIn in text-xs
Experience — company + role + dates, with 2-3 bullet achievements each
Education — degree, school, year
Skills — grouped by category (Languages, Frameworks, Tools)
Optional: Summary (2 lines max), Projects, Certifications

名字+联系方式——text-2xl到text-3xl font-bold，后面是邮箱、电话、地点、LinkedIn，用text-xs
工作经历——公司+职位+日期，每个条目2-3个成就要点
教育经历——学位、学校、年份
技能——按类别分组（语言、框架、工具）
可选：摘要（最多2行）、项目、证书

Typography

排版

Name: text-2xl to text-3xl, font-bold. The only large text on the page.
Section headers: text-sm uppercase tracking-widest font-bold — acts as visual anchors
Company/role: text-sm font-semibold for company, font-medium for role
Body/bullets: text-xs to text-sm, font-normal. Compact but readable.
Dates: text-xs, text-muted-foreground, right-aligned or inline

名字：text-2xl到text-3xl，font-bold。是页面上唯一的大文字。
章节标题：text-sm uppercase tracking-widest font-bold——作为视觉锚点
公司/职位：text-sm font-semibold（公司），font-medium（职位）
正文/要点：text-xs到text-sm，font-normal。紧凑但可读。
日期：text-xs，text-muted-foreground，右对齐或内联

Color Strategy

颜色策略

ONE accent color for section headers, sidebar, or name. Subtle — not a rainbow.
Dark: slate-900 or zinc-900 for body text. Never pure black.
Accent choices: blue-700 (professional), emerald-700 (creative), slate-700 (conservative), amber-700 (warm)
Sidebar background: muted accent like slate-50, blue-50, or a subtle tint

一个强调色用于章节标题、侧边栏或名字。微妙——不是彩虹色。
深色：slate-900或zinc-900用于正文。永远不要纯黑。
强调色选择：blue-700（专业）、emerald-700（创意）、slate-700（保守）、amber-700（温暖）
侧边栏背景：柔和的强调色，如slate-50、blue-50或微妙色调

Rules

规则

ONE page. No exceptions unless explicitly asked for multi-page CV.
NO photos unless explicitly asked (photos on resumes are culturally variable).
NO icons for contact info — they waste space. Just text.
NO decorative elements. Every pixel should convey information.
USE consistent date formatting: "Jan 2023 - Present" or "2023 - Present"
USE real-sounding content, not "Lorem ipsum." Realistic job titles, companies, and bullet points.

一页。除非明确要求多页CV，否则无例外。
无照片——除非明确要求（简历上的照片文化差异大）。
联系方式无图标——浪费空间。只用文字。
无装饰元素。每个像素都应传递信息。
使用一致的日期格式："Jan 2023 - Present"或"2023 - Present"
使用真实内容，不是"Lorem ipsum"。真实的职位、公司和要点。

Flyers (Detailed Design Guide)

传单（详细设计指南）

Extends the "Event Posters & Flyers" section above with deeper layout patterns, color psychology, and typographic rules for standalone promotional flyers.

扩展上述“活动海报与传单”章节，深入介绍独立宣传传单的布局模式、色彩心理学和排版规则。

Core Principles

核心原则

Impact from 3 feet away. Flyers compete for attention on bulletin boards, in stacks, on screens. The headline must PUNCH.
Essential info only. WHAT + WHEN + WHERE + HOW (to attend/buy/register). Everything else is noise.
Bold visual hierarchy. Three tiers: (1) Headline/event name — massive, (2) Key details — medium, (3) Fine print — small.
Energetic composition. Flyers should feel dynamic — angled text, color blocks, overlapping elements, strong contrast.

3英尺外可见冲击力。传单在公告栏、堆叠、屏幕上竞争注意力。标题必须醒目。
仅保留必要信息。内容+时间+地点+参与方式。其他都是噪音。
大胆的视觉层级。三个层级：(1) 标题/活动名称——超大，(2) 关键细节——中等，(3) 小字——小。
充满活力的构图。传单应该感觉有活力——倾斜的文字、色块、重叠元素、强烈对比。

Artboard Setup

画板设置

Standard flyer: 816x1056 (US Letter) or 794x1123 (A4)
Half-page: 816x528 or compact 540x720
Social/digital flyer: 1080x1080 (square) or 1080x1350 (4:5)

标准传单：816x1056（US Letter）或794x1123（A4）
半页：816x528或紧凑型540x720
社交/数字传单：1080x1080（方形）或1080x1350（4:5）

Layout Patterns

布局模式

Stacked bold: Giant headline top, image/graphic middle, details bottom. Reads top-to-bottom.
Full-bleed image + overlay: Photo fills the card, semi-transparent overlay for text readability. Dramatic.
Split composition: Color block top (headline) + white/dark bottom (details). Clean separation.
Diagonal energy: Angled divider between image and text zones. Feels active and dynamic.
Centered stack: Everything centered, stacked vertically. Works for elegant/minimal events.
Typographic: No image — pure type. Giant headline, details in contrasting weight/size. Bold and editorial.

堆叠大胆：顶部超大标题，中间图片/图形，底部细节。从上到下阅读。
全 bleed图片+叠加层：照片填满卡片，半透明叠加层提高文字可读性。戏剧性。
分割构图：顶部色块（标题）+ 底部白色/深色（细节）。清晰分隔。
对角线活力：图片和文字区域之间用倾斜分隔线。感觉活跃有动感。
居中堆叠：所有内容居中，垂直堆叠。适合优雅/极简活动。
排版式：无图片——纯文字。超大标题，细节用对比粗细/大小。大胆且有编辑感。

Typography

排版

Headline: text-5xl to text-9xl, font-extrabold or font-black, tracking-tight. ALL CAPS is encouraged.
Date: text-xl to text-2xl, font-bold. Consider uppercase tracking-widest for emphasis.
Details: text-sm to text-base, font-normal. Quiet but readable.
MAX 2 text sizes for details (date + location should be similar). Headline is the outlier.

标题：text-5xl到text-9xl，font-extrabold或font-black，tracking-tight。鼓励全大写。
日期：text-xl到text-2xl，font-bold。考虑用uppercase tracking-widest强调。
细节：text-sm到text-base，font-normal。低调但可读。
细节文字最多2种字号（日期+地点大小相近）。标题是例外。

Color Psychology for Events

活动色彩心理学

Concert/party: Neon on black (emerald-400, fuchsia-500, cyan-400 on zinc-950). High energy.
Conference/professional: Dark blue or slate on white. Clean authority.
Community/cultural: Warm tones (amber, orange, rose) on cream or dark backgrounds.
Sale/promotion: Red + yellow/white. Urgency colors. bg-red-600 text-white.
Art/gallery: Monochromatic or black + one accent. Minimalist sophistication.

音乐会/派对：黑色背景配霓虹色（emerald-400、fuchsia-500、cyan-400在zinc-950上）。高能量。
会议/专业活动：白色背景配深蓝色或石板色。干净权威。
社区/文化活动：暖色调（琥珀、橙色、玫瑰）在米色或深色背景上。
促销/特卖：红+黄/白。紧迫感颜色。bg-red-600 text-white。
艺术/画廊：单色或黑色+一个强调色。极简精致。

Rules

规则

NO tiny text. If the date isn't readable at arm's length, it's too small.
NO walls of text. A flyer is NOT a brochure. Max 3-4 short text blocks.
ALWAYS include date, time, location, and how to attend. Missing info = useless flyer.
CONTRAST is mandatory. Text must be instantly readable over any background.

无小字。如果手臂长度外看不清日期，就太小了。
无文字墙。传单不是小册子。最多3-4个短文本块。
必须包含日期、时间、地点和参与方式。信息缺失=无用传单。
必须有对比。任何背景上的文字都必须一眼可读。

Restaurant / Cafe Menus

餐厅/咖啡馆菜单

A functional document that must be beautiful, scannable, and make food sound irresistible.

功能性文档，必须美观、易扫描，让食物听起来令人垂涎。

Core Principles

核心原则

Scannability first. Customers scan menus in an F-pattern or Z-pattern. Category headers must be instantly visible.
Make food the hero. The item names and descriptions should dominate — not the decoration.
Price alignment. Prices must be easy to find but not dominant. Right-aligned, consistent formatting.
Atmosphere through design. The menu IS the restaurant's brand. Its style should match the dining experience.

扫描优先。顾客以F型或Z型模式扫描菜单。类别标题必须一眼可见。
让食物成为核心。菜品名称和描述应该主导——不是装饰。
价格对齐。价格必须容易找到但不占主导。右对齐，格式一致。
通过设计传递氛围。菜单就是餐厅的品牌。风格应匹配用餐体验。

Artboard Setup

画板设置

Single page menu: 816x1056 (letter) or 794x1123 (A4)
Folded menu (each panel): 408x528 or similar half-page
Compact/table tent: 540x720 or 480x640
For multi-page: create multiple artboards side-by-side

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

Layout Patterns

布局模式

Single column: Category by category, top to bottom. Best for short menus (< 20 items).
Two column: Left column + right column. Maximizes items per page. Use for larger menus.
Centered elegant: Everything centered, generous spacing. Perfect for fine dining with fewer items.
Grid cards: Items in card-style blocks with image placeholders. Modern, casual restaurants.
Asymmetric: One wide feature column + one narrow specials/drinks column.

单栏：按类别从上到下。适合短菜单（<20项）。
两栏：左栏+右栏。最大化每页菜品数量。用于大菜单。
居中优雅：所有内容居中，留足间距。适合菜品少的高级餐厅。
网格卡片：菜品在带图片占位符的卡片式块中。现代、休闲餐厅。
不对称：一个宽特色栏+一个窄特色菜/饮品栏。

Section Structure

章节结构

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

STARTERS          <- 类别标题：text-lg到text-xl，font-bold，uppercase tracking-widest

Bruschetta ............... $12    <- 菜品名称：text-sm font-semibold，价格右对齐
  Tomato, basil, balsamic         <- 描述：text-xs text-muted-foreground

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

Typography

排版

Restaurant name: text-3xl to text-5xl, distinctive. This sets the tone.
Category headers: text-lg to text-xl, font-bold, uppercase, tracking-wide. Clear dividers.
Item names: text-sm to text-base, font-semibold. The star of each line.
Descriptions: text-xs to text-sm, font-normal, text-muted-foreground. Appetizing but compact.
Prices: text-sm, font-medium, right-aligned or after dot leaders.

餐厅名称：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，右对齐或在点线后。

Style by Restaurant Type

按餐厅类型风格化

Fine dining: Minimal, serif-feeling (use font-light + tracking-wide). Lots of whitespace. Dark bg or ivory.
Casual/bistro: Warm tones, slightly playful. Rounded corners on sections. bg-amber-50 or bg-stone-50.
Modern/trendy: Clean sans-serif, dark theme (bg-zinc-950), accent color for specials. Minimal ornament.
Cafe: Light, airy. bg-white or bg-stone-50. Small illustrations encouraged.
Bar/cocktail: Dark and moody. bg-zinc-950 or bg-slate-900. Gold or amber accents. Atmospheric.

高级餐厅：极简、类似衬线字体（用font-light + tracking-wide）。大量留白。深色背景或象牙色。
休闲/小酒馆：暖色调，略带趣味。章节圆角。bg-amber-50或bg-stone-50。
现代/潮流餐厅：干净无衬线字体，深色主题（bg-zinc-950），特色菜用强调色。极少装饰。
咖啡馆：明亮、 airy。bg-white或bg-stone-50。鼓励小插图。
酒吧/鸡尾酒：深色 Moody。bg-zinc-950或bg-slate-900。金色或琥珀色强调。氛围感。

Rules

规则

NO prices hidden or hard to find. Price transparency builds trust.
NO more than 7-9 items per category. Too many choices paralyze diners.
ALWAYS include: restaurant name, categories, item names, descriptions, prices.
USE appetizing language: "house-made", "slow-roasted", "seasonal", "fresh" — not "good" or "tasty."
Dietary markers (V, VG, GF) should be subtle: text-xs, after the item name, muted color.

价格不隐藏或难找。价格透明建立信任。
每个类别最多7-9项。选择太多会让顾客不知所措。
必须包含：餐厅名称、类别、菜品名称、描述、价格。
用诱人的语言：“自制”“慢烤”“当季”“新鲜”——不是“好”或“美味”。
饮食标记（V, VG, GF）要微妙：text-xs，在菜品名称后，柔和颜色。

Infographics / Data Visualization

信息图/数据可视化

A visual narrative that makes data compelling, memorable, and shareable.

视觉叙事，让数据引人注目、难忘、可分享。

Core Principles

核心原则

Story first, data second. An infographic tells a story. The data supports it. Lead with the narrative arc, not the raw numbers.
One key insight. Every infographic should have ONE takeaway the viewer remembers. Everything else supports that insight.
Visual encoding. Numbers become shapes, sizes, colors, positions. Never just text + numbers — translate data into visual patterns.
Top-to-bottom flow. Infographics read like a scroll. Clear sections with clear transitions.

故事优先，数据其次。信息图讲述故事。数据支持故事。以叙事弧开头，而非原始数字。
一个核心洞察。每个信息图应该有一个让观众记住的核心结论。其他所有内容都支持这个洞察。
视觉编码。数字变成形状、大小、颜色、位置。永远不要只是文字+数字——把数据转换成视觉模式。
从上到下流动。信息图像滚动一样阅读。清晰的章节和过渡。

Artboard Setup

画板设置

Standard: 800x2400 to 1080x3200 (tall, scrollable)
Social-friendly: 1080x1920 (9:16) or 1080x1350 (4:5)
Presentation: 1920x1080 (landscape, one key chart)
Use one tall artboard, NOT multiple. Infographics are single continuous pieces.

标准：800x2400到1080x3200（竖长、可滚动）
社交友好：1080x1920（9:16）或1080x1350（4:5）
演示：1920x1080（横版，一个关键图表）
用一个竖长画板，不要多个。信息图是单个连续作品。

Section Flow

章节流程

Title banner — Bold headline that frames the story. "The State of...", "How X Changed Y", "By the Numbers: Z"
Key stat — One massive number (text-7xl to text-9xl) that hooks attention. "73% of..." or "$4.2 Trillion"
Context section — 2-3 sentences explaining why this matters. text-base, max-w-xl.
Data sections (2-4) — Each visualizing one aspect of the data. Different visual encoding per section.
Comparison — Side-by-side or before/after. Shows contrast clearly.
Conclusion/CTA — Key takeaway restated, source credits.

标题横幅——大胆的标题框定故事。“...的现状”“X如何改变Y”“数字看Z”
核心数据——一个超大数字（text-7xl到text-9xl）吸引注意力。“73%的...”或“4.2万亿美元”
背景章节——2-3句话解释为什么重要。text-base，max-w-xl。
数据章节（2-4个）——每个可视化数据的一个方面。每个章节用不同的视觉编码。
比较——并排或前后对比。清晰显示差异。
结论/行动号召——重述核心结论，来源 credits。

Data Visualization Patterns (Using Efecto Nodes)

数据可视化模式（用Efecto节点）

Since Efecto doesn't have native chart components, represent data visually with layout:

Bar chart: Horizontal frames with width proportional to value. Label left, bar right.
Stat cards: Large number (text-6xl font-bold) + label (text-xs uppercase). Grid of 3-4.
Comparison columns: Two columns side-by-side, each with stacked items. Color-coded.
Timeline: Vertical line (w-0.5 bg-border) with alternating left/right content nodes.
Icon array: Grid of small icons (w-4 h-4) where colored vs muted represent proportions.
Ranked list: Numbered items with bars showing magnitude. 1-5 items.

由于Efecto没有原生图表组件，用布局视觉化数据：

条形图：水平框架，宽度与值成正比。标签左，条形右。
数据卡片：大数字（text-6xl font-bold）+ 标签（text-xs uppercase）。3-4个网格。
对比列：两列并排，每列堆叠项目。颜色编码。
时间线：垂直线（w-0.5 bg-border），左右交替内容节点。
图标阵列：小图标网格（w-4 h-4），彩色 vs muted代表比例。
排名列表：编号项目，条形显示量级。1-5项。

Typography

排版

Title: text-3xl to text-5xl, font-extrabold, tracking-tight. Sets the topic.
Key stat: text-7xl to text-9xl, font-black. The eye-catcher.
Section headers: text-xl font-bold. Separates data sections.
Labels: text-xs uppercase tracking-widest font-medium. Data annotations.
Body text: text-sm, max 2-3 lines per section. Support, not bulk.
Source: text-xs text-muted-foreground, bottom of infographic.

标题：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，信息图底部。

Color Strategy

颜色策略

One primary data color + neutral: blue-600 bars on white, emerald-500 bars on slate-50.
Sequential: Light to dark shades of one color for ranked data (blue-200 → blue-800).
Diverging: Two colors for comparison (emerald-500 vs rose-500, "good" vs "bad").
Categorical: 3-4 distinct colors for different categories (blue, amber, emerald, rose).
Background: Very subtle tint (slate-50, stone-50, zinc-50) or white. Never dark for full infographic.

一个主数据色 + 中性色：白色背景上的blue-600条形，slate-50上的emerald-500条形。
连续色：一种颜色从浅到深用于排名数据（blue-200 → blue-800）。
对比色：两种颜色用于比较（emerald-500 vs rose-500，“好” vs “坏”）。
分类色：3-4种不同颜色用于不同类别（蓝色、琥珀、翡翠、玫瑰）。
背景：非常浅的色调（slate-50、stone-50、zinc-50）或白色。整个信息图永远不要深色。

Rules

规则

NO more than 4 data sections. After 4, attention drops sharply.
NO raw data tables. Translate EVERY number into a visual element.
ALWAYS cite sources (text-xs at bottom). Even "Source: Company Annual Report 2025" adds credibility.
USE real-sounding data. "73% of remote workers prefer async communication" — not "X% of people do Y."
NEVER crowd sections. Gap-8 to gap-12 between data blocks. Let each section breathe.

最多4个数据章节。超过4个，注意力急剧下降。
无原始数据表。把每个数字转换成视觉元素。
必须引用来源（底部text-xs）。即使“来源：公司2025年报”也增加可信度。
用真实数据。“73%远程工作者偏好异步沟通”——不是“X%的人做Y”。
章节不要拥挤。数据块之间gap-8到gap-12。让每个章节呼吸。

Invitations / Announcement Cards

邀请函/公告卡片

A personal, often emotional piece that sets the tone for an event.

个人化、常带情感的作品，奠定活动基调。

Core Principles

核心原则

Emotion first. Invitations carry feeling — celebration, elegance, excitement, warmth. The design must evoke the event's spirit.
Essential details, beautifully arranged. WHO is hosting, WHAT the event is, WHEN, WHERE, and HOW to respond. Presented with grace.
Memorability. One unexpected element — an oversized letter, a striking color, an elegant border — makes it stick.
Consistency with the event. A black-tie gala invitation looks nothing like a kid's birthday party invite. Match the formality level exactly.

情感优先。邀请函承载情感——庆祝、优雅、兴奋、温暖。设计必须唤起活动氛围。
必要信息，优美排列。谁主办、活动内容、时间、地点、如何回复。优雅呈现。
难忘性。一个意想不到的元素——超大字母、醒目的颜色、优雅的边框——让它被记住。
与活动一致。黑领带 gala邀请函和儿童生日派对邀请函完全不同。完全匹配正式程度。

Artboard Setup

画板设置

Standard card: 672x480 (7" x 5") or 480x672 (5" x 7" portrait)
Square: 540x540 or 648x648
A5 landscape: 794x559
Create TWO artboards: "Front" and "Back" (or "Details") for complete invitations

标准卡片：672x480（7英寸x5英寸）或480x672（5英寸x7英寸竖版）
方形：540x540或648x648
A5横版：794x559
创建两个画板：“正面”和“反面”（或“详情页”）用于完整邀请函

Layout Patterns

布局模式

Centered classic: Everything centered, generous margins. Name/event large, details smaller below. Timeless.
Frame/border: Thin decorative border (border-2 rounded-xl with p-8 to p-12 inner padding). Content centered within.
Split: Left half is a color block or image, right half is text. Modern and structured.
Top-heavy: Large decorative header (color block, pattern, or image) with details in lower third.
Minimal: Just text on a rich background color. Extreme restraint. Works for formal events.

居中经典：所有内容居中，留足边距。名字/活动大，下方细节小。永恒。
框架/边框：细装饰边框（border-2 rounded-xl，内边距p-8到p-12）。内容居中在边框内。
分割：左半是色块或图片，右半是文字。现代结构化。
上重下轻：大装饰页眉（色块、图案或图片），细节在下部三分之一。
极简：纯色背景上只有文字。极度克制。适合正式活动。

Content Hierarchy

内容层级

Host line (optional) — "Together with their families" or "You're invited to" — text-xs to text-sm, font-light
Event/name — THE centerpiece. "Sarah & James", "Annual Gala", "You're Turning 5!" — text-3xl to text-5xl
Event type — "Wedding Celebration", "Birthday Party", "Grand Opening" — text-sm to text-base
Date + time — Prominent. text-lg font-semibold. Consider ornamental formatting.
Venue — Name + address. text-sm to text-base.
RSVP — How to respond. text-xs to text-sm. "RSVP by March 15 to sarah@email.com"
Additional info — Dress code, parking, dietary notes. text-xs text-muted-foreground.

主办行（可选）——“与家人一起”或“诚邀您参加”——text-xs到text-sm，font-light
活动/名字——核心。“Sarah & James”“年度 Gala”“你5岁了！”——text-3xl到text-5xl
活动类型——“婚礼庆典”“生日派对”“盛大开业”——text-sm到text-base
日期+时间——突出。text-lg font-semibold。考虑装饰性格式。
场地——名称+地址。text-sm到text-base。
RSVP——回复方式。text-xs到text-sm。“请于3月15日前回复至sarah@email.com”
附加信息——着装要求、停车、饮食注意事项。text-xs text-muted-foreground。

Style by Event Type

按活动类型风格化

Wedding: Elegant, serif-feeling. Soft colors (rose-50, stone-50, amber-50). Tracking-wide for names. Minimal ornament.
Birthday (adult): Can be bold or elegant. Dark backgrounds (zinc-900 + gold accent) or bright (fuchsia, amber).
Birthday (kids): Bright, playful. Bold colors (yellow-400, sky-400, rose-400). Large, fun text. Rounded everything.
Corporate: Clean, professional. Brand colors + white. Clear hierarchy. No playfulness.
Holiday: Themed colors (red+green for Christmas, orange+black for Halloween). Warm and festive.
Baby shower: Soft pastels (sky-100, rose-100, mint). Gentle, delicate. Lots of whitespace.

婚礼：优雅、类似衬线字体。柔和颜色（rose-50、stone-50、amber-50）。名字用tracking-wide。极少装饰。
成人生日：可大胆或优雅。深色背景（zinc-900 + 金色强调）或明亮（fuchsia、amber）。
儿童生日：明亮、有趣。大胆颜色（yellow-400、sky-400、rose-400）。大而有趣的文字。所有圆角。
企业活动：干净、专业。品牌色+白色。清晰层级。无趣味元素。
节日：主题颜色（圣诞红+绿，万圣节橙+黑）。温暖喜庆。
婴儿洗礼：柔和 pastel（sky-100、rose-100、薄荷）。温柔、 delicate。大量留白。

Rules

规则

NO clutter. An invitation should feel spacious and intentional. When in doubt, remove elements.
NO lorem ipsum. Use realistic names ("Emma & Lucas"), real dates, real venues.
ALWAYS include: event name, date, time, location, RSVP method.
For weddings: names of the couple are THE design, not a detail. Make them magnificent.

无杂乱。邀请函应该感觉宽敞有意。不确定时，删除元素。
无Lorem ipsum。用真实名字（“Emma & Lucas”）、真实日期、真实场地。
必须包含：活动名称、日期、时间、地点、RSVP方式。
婚礼：新人名字是设计核心，不是细节。要突出。

Email Newsletters (Full Layout Guide)

邮件新闻通讯（完整布局指南）

Extends the "Email Headers & Newsletter Graphics" section above — this covers full newsletter layout design, not just header/hero graphics.

扩展上述“邮件页眉与新闻通讯图形”章节——涵盖完整新闻通讯布局设计，不只是页眉/首图。

Core Principles

核心原则

Single column is king. Email clients are unpredictable. Single column (max-w-xl to max-w-2xl) works everywhere.
Scannable blocks. Readers skim newsletters. Each content block should be self-contained: image/headline/excerpt/link.
Clear visual rhythm. Consistent spacing between sections. Repeating patterns readers can predict.
One CTA per section. Each content block should have exactly one action — "Read more", "Watch", "Register."

单栏为王。邮件客户端不可预测。单栏（max-w-xl到max-w-2xl）在所有地方都适用。
可扫描块。读者浏览新闻通讯。每个内容块应自包含：图片/标题/摘要/链接。
清晰的视觉节奏。章节间一致间距。读者可预测的重复模式。
每个章节一个行动号召。每个内容块应该有一个明确行动——“阅读更多”“观看”“注册”。

Artboard Setup

画板设置

Standard: 600x900 to 640x1200 (email width is typically 600px)
Use 640 width as max — email clients clip wider layouts
Single artboard, tall. Newsletter scrolls vertically.

标准：600x900到640x1200（邮件宽度通常600px）
最大宽度640px——邮件客户端会裁剪更宽的布局
单个竖长画板。新闻通讯垂直滚动。

Layout Patterns

布局模式

Header → Hero → Cards → CTA → Footer: Most common newsletter structure.
Blog digest: Repeating cards (image left, text right, or stacked) for 3-5 articles.
Single story: One large featured article with supporting images and pull quotes.
Curated links: Numbered list of links with brief descriptions. Minimal imagery.
Mixed: Feature story + quick links + event promo + footer.

页眉 →首图 →卡片 →行动号召 →页脚：最常见的新闻通讯结构。
博客摘要：重复卡片（左图右文，或堆叠）用于3-5篇文章。
单个故事：一个大专题文章配支持图片和引语。
精选链接：带简短描述的编号链接列表。极少图片。
混合：专题故事+快速链接+活动推广+页脚。

Section Structure

章节结构

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.

HEADER — Logo左，日期/期数右。bg-background，py-4 px-6。细下边框。

HERO — 专题故事。大图片（rounded-xl），下方标题（text-xl font-bold），
  2行摘要，“阅读更多”链接。

CONTENT CARDS (x3-5) — 重复模式：
  图片缩略图（w-24 h-24 rounded-lg）左 + 标题（text-base font-semibold）
  + 摘要（text-sm） + 链接

DIVIDER — 简单水平线（h-px bg-border）分隔章节。

CTA SECTION — “订阅”“分享”或活动推广。bg-muted rounded-xl p-6，居中。

FOOTER — 退订链接、公司地址、社交图标。text-xs text-muted-foreground。

Typography

排版

Header: Logo text or image. text-lg font-bold.
Headlines: text-lg to text-xl, font-bold. Clickable-feeling.
Body/excerpts: text-sm, font-normal. 2-3 lines max per card.
Links: text-sm font-medium text-primary. Underlined or obvious color change.
Section labels: text-xs uppercase tracking-widest font-semibold text-muted-foreground.
Footer: 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。

Rules

规则

MAX width 640px. Never wider.
NO complex layouts. Two columns MAX, and prefer single column.
ALWAYS include: header with branding, content sections, unsubscribe link, footer.
EVERY content card needs a clear action link. Don't make readers guess where to click.

最大宽度640px。永远不要更宽。
无复杂布局。最多两栏，优先单栏。
必须包含：带品牌的页眉、内容章节、退订链接、页脚。
每个内容卡片需要明确的行动链接。不要让读者猜点击哪里。

Business Documents / Reports

商业文档/报告

Professional business documents — structured, authoritative, and information-rich.

专业商业文档——结构化、权威、信息丰富。

Core Principles

核心原则

Credibility through structure. A well-organized document builds trust before the reader processes content.
Dense but navigable. Business documents carry substantial text. The design's job is wayfinding.
Professional restraint. No flashy design. Clean typography, consistent spacing, subtle accents.
Hierarchy is everything. Title → Section → Subsection → Body → Caption. Five distinct visual levels.

通过结构建立可信度。组织良好的文档在读者处理内容前就建立信任。
密集但可导航。商业文档包含大量文字。设计的作用是导航。
专业克制。无花哨设计。干净排版、一致间距、微妙强调。
层级是一切。标题 → 章节 → 子章节 → 正文 → 说明。五个不同视觉层级。

Artboard Setup

画板设置

US Letter: 816x1056
A4: 794x1123
For multi-page documents: multiple artboards, same dimensions, positioned vertically
Name pages: "01 — Cover", "02 — Executive Summary", "03 — Analysis"

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

Document Types

文档类型

Report / White Paper:

Cover page: Title (text-4xl font-bold), subtitle, author, date, company logo
TOC (optional): Section numbers + titles + page refs
Sections: Large headers (text-2xl font-bold) + body text (text-sm) + call-out boxes

Proposal:

Cover: Project name + client name + date. Professional and tailored.
Problem → Solution → Approach → Timeline → Pricing → Terms

Brochure:

Two or three column layout
Feature boxes: bg-muted rounded-xl p-6 with icon + heading + description
Back page: contact info, location, website

One-pager / Fact Sheet:

Everything on ONE page. Maximum information density.
Header band with title + logo, 2-3 column body with stat boxes

报告/白皮书：

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

提案：

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

宣传册：

两或三栏布局
特色框：bg-muted rounded-xl p-6，带图标+标题+描述
封底：联系方式、地点、网站

单页/情况说明书：

所有内容在一页。最大信息密度。
页眉带标题+Logo，2-3栏正文带数据框

Typography

排版

Document title: text-3xl to text-4xl, font-bold. Cover page hero.
Section headers: text-xl to text-2xl, font-bold. Clear section breaks.
Subsection headers: text-base to text-lg, font-semibold.
Body text: text-sm, font-normal, leading-relaxed. Readable paragraphs.
Captions: text-xs, text-muted-foreground, italic. Under figures/tables.

文档标题：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。图片/表格下方。

Structure Elements

结构元素

Pull quote: bg-muted p-6 rounded-xl, text-lg font-medium, border-l-4 border-primary
Stat box: bg-primary text-primary-foreground p-4 rounded-xl, large number + label
Table: Full-width, header row bg-muted, alternating row stripes, text-xs to text-sm
Dividers: h-px bg-border between major sections

引用框：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分隔主要章节

Rules

规则

BODY TEXT must be text-sm with leading-relaxed. Tight leading is exhausting.
MAX 2 columns for body text. Single column is safest for long-form reading.
ALWAYS include: title, date, author/company, section headers, page structure.
FIGURES and TABLES get captions: "Figure 1: Monthly active users, Jan-Dec 2025"
NO decorative elements. Every visual element should convey information or improve navigation.

正文必须text-sm leading-relaxed。紧凑行高让人疲惫。
正文最多2栏。单栏最适合长篇阅读。
必须包含：标题、日期、作者/公司、章节标题、页面结构。
图片和表格要有说明：“图1：2025年1-12月月活跃用户”
无装饰元素。每个视觉元素都应传递信息或改善导航。

General Graphic Design Tips

通用图形设计技巧

Composition

构图

Visual hierarchy in 3 seconds. Squint at your design — can you tell what's most important? If not, increase the contrast between primary, secondary, and tertiary elements.
Rule of thirds. Place key elements on intersection points, not dead center (unless centering is intentional for symmetry).
Whitespace is structure. Padding and gaps do more work than borders and dividers.
```
gap-8
```
to
```
gap-16
```
between sections.
Anchor elements. Every composition needs a visual anchor — the element your eye goes to first. Make it dramatically larger, bolder, or more colorful than everything else.

3秒内视觉层级。眯眼看设计——能分辨出最重要的元素吗？不能的话，增加主要、次要、 tertiary元素之间的对比。
三分法。把关键元素放在交叉点，不是正中心（除非故意对称）。
留白是结构。内边距和间距比边框和分隔符更有用。章节间gap-8到gap-16。
锚点元素。每个构图需要一个视觉锚点——眼睛首先看到的元素。让它比其他所有元素都大得多、粗得多或颜色更鲜艳。

Color for Graphics

图形颜色

3-color rule. One dominant, one supporting, one accent. More than 3 and the design feels busy.
60-30-10 split. 60% dominant (background), 30% secondary (containers, supporting elements), 10% accent (CTAs, highlights).
Test at 50% zoom. If the design still reads clearly at half size, the contrast is working.

3色规则。一个主色，一个辅助色，一个强调色。超过3种颜色设计会显得杂乱。
60-30-10比例。60%主色（背景），30%辅助色（容器、辅助元素），10%强调色（行动号召、高亮）。
50%缩放测试。如果一半大小下设计仍清晰可读，对比就有效。

Typography for Graphics

图形排版

Two fonts max. One for headlines, one for body. Same font in different weights also works.
Size contrast matters. Headlines should be at least 2x the size of body text.
```
text-6xl
```
headline with
```
text-2xl
```
body, not
```
text-4xl
```
with
```
text-3xl
```
.
Tracking for uppercase. Always add
```
tracking-wide
```
or
```
tracking-widest
```
to uppercase text — it looks cramped otherwise.

最多2种字体。一种标题，一种正文。同字体不同粗细也可以。
尺寸对比重要。标题至少是正文的2倍大。
```
text-6xl
```
标题配
```
text-2xl
```
正文，不是
```
text-4xl
```
配
```
text-3xl
```
。
大写字母的字距。全大写文字总是要加
```
tracking-wide
```
或
```
tracking-widest
```
——否则看起来拥挤。

Format Quick Reference

格式快速参考

Asset	Size	Key Rule
Presentation	1920x1080	One idea per slide, min `text-3xl`
Pitch Deck	1920x1080	10 slides, big numbers, minimal text
Event Poster	1080x1350	What + When + Where + CTA
Email Header	600x200	Brand + one line, 600px max
Email Hero	600x400	One CTA, simple layout
Blog Hero	1200x675	Atmospheric, optional text
OG Image	1200x630	Title + brand, works at 300px
Certificate	1400x1000	Formal, centered, generous whitespace
Business Card	336x192 / 672x384	2 colors max, 3-level hierarchy, front+back
Resume	816x1056	ONE page, scannable in 6 seconds, one accent
Flyer	816x1056	Headline PUNCHES, WHAT+WHEN+WHERE+HOW
Menu	816x1056	Scannable categories, prices visible, appetizing
Infographic	1080x3200	One key insight, visual data encoding, top-to-bottom
Invitation	672x480	Emotion first, match formality level exactly
Newsletter	640x1200	Single column, max 640px, scannable blocks
Document	816x1056	5-level hierarchy, professional restraint

资产	尺寸	核心规则
演示文稿	1920x1080	每页一个观点，最小 `text-3xl`
宣传推介PPT	1920x1080	10页，大数字，最少文字
活动海报	1080x1350	内容+时间+地点+行动号召
邮件页眉	600x200	品牌+一行文字，最大600px
邮件首图	600x400	一个行动号召，简单布局
博客首图	1200x675	氛围感，可选文字
OG图片	1200x630	标题+品牌，300px下仍清晰
证书	1400x1000	正式，居中，大量留白
名片	336x192 / 672x384	最多2色，3层级，正反面
简历	816x1056	一页，6秒可扫描，一个强调色
传单	816x1056	标题醒目，内容+时间+地点+参与方式
菜单	816x1056	可扫描类别，价格可见，诱人描述
信息图	1080x3200	一个核心洞察，数据视觉编码，从上到下
邀请函	672x480	情感优先，完全匹配正式程度
新闻通讯	640x1200	单栏，最大640px，可扫描块
文档	816x1056	5层级，专业克制

efecto-graphic-design

Original

Translation

Efecto — Graphic 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 Designs

设计构建流程

1. Create an artboard

1. 创建画板

2. Add content with JSX (most efficient way to build)

2. 用JSX添加内容（最高效的构建方式）

3. Read current state to get node IDs

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

4. Fine-tune with batch updates

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 Images

为图片添加效果

Post-Processes

后期处理

Mindset: Design for the Context

设计思维：贴合场景设计

Presentations & Pitch Decks

演示文稿与宣传推介PPT

Artboard Sizes

画板尺寸

Slide Design Rules

幻灯片设计规则

Slide Types

幻灯片类型

Title Slide

标题页

Section Divider

章节分隔页

Content Slide (Text + Visual)

内容页（文字+视觉）

Big Number / Stat Slide

大数字/数据页

Quote Slide

引用页

Closing / CTA Slide

结尾/行动号召页

Pitch Deck Flow (10 slides)

宣传推介PPT流程（10页）

Event Posters & Flyers

活动海报与传单

Artboard Sizes

画板尺寸

Event Poster Hierarchy

活动海报层级

Event Poster Template

活动海报模板

Conference Talk Slide

会议演讲页

Email Headers & Newsletter Graphics

JSX Format for
`add_section`

`add_section`
的JSX格式