Back to Details

infographic

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Infographic Generator

信息图表生成器

Transform any text into a print-quality infographic PNG.
将任意文本转换为可打印质量的信息图PNG。

Usage

使用方法

/infographic
/infographic nico
/infographic olive
/infographic werner
/infographic transit
/infographic parks
/infographic euclid
/infographic timber
/infographic preston
Then paste or describe your content when prompted.
Or provide text directly:
/infographic "Your article or content here..."
/infographic olive "When should I use X vs Y?"
/infographic werner "List the primary colors with examples"
/infographic transit "Rank the tallest buildings in NYC"
/infographic parks "Compare 3 national parks with stats"
/infographic euclid "Overview of geometry concepts"
/infographic timber "History of JavaScript frameworks"
/infographic preston "How to deploy a Next.js app"
/infographic
/infographic nico
/infographic olive
/infographic werner
/infographic transit
/infographic parks
/infographic euclid
/infographic timber
/infographic preston
然后在系统提示时粘贴或描述你的内容。
也可以直接提供文本：
/infographic "你的文章或内容在这里..."
/infographic olive "我应该什么时候用X而不是Y？"
/infographic werner "列出三原色及示例"
/infographic transit "排名纽约最高的建筑"
/infographic parks "对比3个国家公园的统计数据"
/infographic euclid "几何概念概述"
/infographic timber "JavaScript框架发展史"
/infographic preston "如何部署Next.js应用"

Palettes

调色板

Palettes control colors independently from styles. Mix and match any style with any palette.
调色板独立于样式控制颜色，可任意混搭样式与调色板。

Usage

使用方式

bash
undefined
bash
undefined

Style with default palette

使用默认调色板的样式

/infographic olive "..."
/infographic olive "..."

Style with specific palette

使用指定调色板的样式

/infographic olive:nordic "..." /infographic olive --palette nordic "..."
undefined
/infographic olive:nordic "..." /infographic olive --palette nordic "..."
undefined

Available Palettes

可用调色板

PaletteCanvasDescription
earthlightWarm cream with sage accents (default)
nordicdarkCool blue-gray, frost accents
desertlightSandy tones, terracotta accents
oceanlightPale blue-gray, teal accents
forestdarkDeep greens, moss accents
调色板画布类型描述
earth亮色暖奶油色搭配鼠尾草色点缀（默认）
nordic暗色冷调蓝灰色，霜色点缀
desert亮色沙色调，陶土色点缀
ocean亮色浅蓝灰色，青色点缀
forest暗色深绿色，苔藓色点缀

Default Palette Mapping

默认调色板映射

StyleDefault Palette
oliveearth
c82earth
nicoearth
wernerearth
transitearth
parksforest
euclidearth
timberearth
prestonearth
样式默认调色板
oliveearth
c82earth
nicoearth
wernerearth
transitearth
parksforest
euclidearth
timberearth
prestonearth

Compatibility

兼容性

Styles declare a canvas preference (
light
, 
dark
, or 
any
). When a style's preference conflicts with a palette's canvas type:
  • Warning is shown
  • Text colors swap to 
    text.onDark
    /
    text.onLight
    for readability
样式会声明画布偏好（
light
亮色、
dark
暗色、
any
任意），当样式偏好与调色板画布类型冲突时：
  • 会显示警告提示
  • 文本颜色会自动切换为
    text.onDark
    /
    text.onLight
    保证可读性

Token Reference

令牌参考

Styles use these tokens (resolved from the active palette):
TokenSVG PlaceholderUsage
{canvas}
{canvasColor}
Background fill
{text.primary}
{textColor}
Main headings/body
{text.secondary}
{secondaryColor}
Supporting text
{text.muted}
{mutedColor}
Subtle labels
{text.onDark}
{textOnDark}
Text on dark cards
{text.onLight}
{textOnLight}
Text on light cards
{accents[0-3]}
{accentColor}
Accent color (rotate through array)
{cards.primary}
{primaryCard}
Main card fill
{cards.secondary}
{secondaryCard}
Secondary card fill
{rules}
{ruleColor}
Divider lines
样式使用以下令牌（从当前激活的调色板解析取值）：
令牌SVG占位符用途
{canvas}
{canvasColor}
背景填充
{text.primary}
{textColor}
主标题/正文
{text.secondary}
{secondaryColor}
辅助文本
{text.muted}
{mutedColor}
弱化标签
{text.onDark}
{textOnDark}
暗色卡片上的文本
{text.onLight}
{textOnLight}
亮色卡片上的文本
{accents[0-3]}
{accentColor}
强调色（从数组循环取值）
{cards.primary}
{primaryCard}
主卡片填充
{cards.secondary}
{secondaryCard}
次卡片填充
{rules}
{ruleColor}
分割线

Style Resolution

样式解析

The first argument (if not quoted text) is treated as a style name. Default: 
c82
.
Loading order:
  1. Load 
    styles/<name>.md
    from this skill directory
  2. If the style declares 
    inherits: design:<name>
    , also load 
    design/<name>/SKILL.md
    from the skills directory
  3. Design system = foundation, infographic style = overrides
Available styles:
  • c82 (default) — Classical typography, warm cream canvas, muted naturalist palette. Best for stat-blocks.
  • nico — Dark forest aesthetic, luminous text, desaturated accents. Best for stat-blocks.
  • olive — Soft earth tones, rounded cards, shadows. Best for decision trees and comparisons.
  • werner — Classical catalog/table layout with swatches and multiple columns. Best for catalogs, reference charts.
  • transit — Vertical bar chart with tick marks, ranked data. Best for comparisons by quantity.
  • parks — Dark dashboard with colored tile grid, icons + values. Best for multi-stat comparisons.
  • euclid — Bauhaus-colored gallery grid with geometric illustrations. Best for visual item galleries.
  • timber — Vertical timeline with spine and alternating event cards. Best for chronological histories.
  • preston — Process flowchart with numbered steps and connecting arrows. Best for how-to guides.
第一个非引号包裹的参数会被识别为样式名称，默认值为
c82
。
加载顺序：
  1. 从当前skill目录加载
    styles/<name>.md
  2. 如果样式声明了
    inherits: design:<name>
    ，还会从skills目录加载
    design/<name>/SKILL.md
  3. 设计系统作为基础，信息图样式作为覆盖配置
可用样式：
  • c82（默认）—— 古典排版，暖奶油色画布，柔和自然调色板，最适合统计块
  • nico—— 深色森林美学，亮色系文本，低饱和强调色，最适合统计块
  • olive—— 柔和大地色调，圆角卡片，带阴影，最适合决策树和对比内容
  • werner—— 古典目录/表格布局，带色卡和多列布局，最适合目录、参考图表
  • transit—— 带刻度的垂直条形图，可排序数据，最适合按数量对比的内容
  • parks—— 深色仪表盘，带彩色磁贴网格、图标+数值，最适合多统计项对比
  • euclid—— 包豪斯配色的画廊网格，搭配几何插图，最适合可视化项目画廊
  • timber—— 带中轴线的垂直时间线，交替排列事件卡片，最适合按时间排序的历史内容
  • preston—— 带编号步骤和连接箭头的流程流程图，最适合操作指南

Process

处理流程

  1. Resolve Style — Determine style from arguments, load style file(s)
  2. Detect Layout — Analyze content to determine best layout type
  3. Extract Structure — Extract structured data matching the detected layout
  4. Generate SVG — Write SVG following the loaded style guide
  5. Export PNG — Convert to high-res PNG (2000px wide)
  6. Open — Display result for review
  1. 样式解析—— 从参数确定样式，加载样式文件
  2. 布局检测—— 分析内容确定最佳布局类型
  3. 结构提取—— 提取匹配检测到的布局的结构化数据
  4. 生成SVG—— 按照加载的样式规范编写SVG
  5. 导出PNG—— 转换为2000px宽的高清PNG
  6. 打开展示—— 显示结果供用户审核

Output Location

输出位置

Files saved to: 
~/Downloads/infographic-{timestamp}.png
文件保存至：
~/Downloads/infographic-{timestamp}.png

Layout Detection

布局检测

Analyze the input content and select the appropriate layout:
Content PatternLayoutBest Styles
"If X then Y", "When to use", yes/no questions, binary choicesdecision-treeolive
"A vs B", comparing options, pros/cons, alternativescomparisonolive
Statistics, key findings, sections, summariesstat-blockc82, nico
Lists with multiple attributes, color palettes, specificationscatalogwerner
Ranked quantities, lengths, heights, counts to comparebarstransit
Items with multiple numeric stats, dashboardstilesparks
Visual items with illustrations/icons and captionsgalleryeuclid
Chronological events, history, evolution, milestonestimelinetimber
Sequential steps, how-to guides, workflows, processesprocesspreston
Detection rules:
  1. If content asks a question with two distinct answer paths → 
    decision-tree
  2. If content compares 2-4 distinct options/approaches → 
    comparison
  3. If content lists items with multiple attributes per item (colors, specs) → 
    catalog
  4. If content ranks items by a single quantity (height, length, count) → 
    bars
  5. If content shows multiple numeric stats per item (dashboard style) → 
    tiles
  6. If content presents visual items with labels/descriptions → 
    gallery
  7. If content has chronological events with dates/years → 
    timeline
  8. If content describes sequential steps or a process → 
    process
  9. Otherwise → 
    stat-block
    (default)
Style-layout affinity:
  • olive
    style defaults to auto-detecting between decision-tree/comparison
  • werner
    style defaults to catalog layout
  • transit
    style defaults to bars layout
  • parks
    style defaults to tiles layout
  • euclid
    style defaults to gallery layout
  • timber
    style defaults to timeline layout
  • preston
    style defaults to process layout
  • c82
    and 
    nico
    styles default to stat-block layout
分析输入内容选择合适的布局：
内容模式布局最佳适配样式
"如果X则Y"、"什么时候用"、是非问题、二元选择decision-treeolive
"A vs B"、选项对比、优缺点、替代方案comparisonolive
统计数据、关键发现、章节内容、总结stat-blockc82, nico
多属性列表、调色板、规格参数catalogwerner
按数量、长度、高度、计数排序的排名内容barstransit
带多个数值统计的项目、仪表盘类内容tilesparks
带插图/图标和说明的可视化项目galleryeuclid
按时间排序的事件、历史、演变、里程碑timelinetimber
顺序步骤、操作指南、工作流、流程processpreston
检测规则：
  1. 如果内容是带有两个不同答案路径的问题 → 
    decision-tree
  2. 如果内容对比2-4个不同选项/方案 → 
    comparison
  3. 如果内容是每个项目带有多个属性的列表（颜色、规格） → 
    catalog
  4. 如果内容按单一数量（高度、长度、计数）排序项目 → 
    bars
  5. 如果内容展示每个项目的多个数值统计（仪表盘风格） → 
    tiles
  6. 如果内容呈现带标签/描述的可视化项目 → 
    gallery
  7. 如果内容带有带日期/年份的时序事件 → 
    timeline
  8. 如果内容描述顺序步骤或流程 → 
    process
  9. 其他情况 → 
    stat-block
    （默认）
样式-布局适配规则：
  • olive
    样式默认自动检测决策树/对比布局
  • werner
    样式默认使用目录布局
  • transit
    样式默认使用条形图布局
  • parks
    样式默认使用磁贴布局
  • euclid
    样式默认使用画廊布局
  • timber
    样式默认使用时间线布局
  • preston
    样式默认使用流程布局
  • c82
    和
    nico
    样式默认使用统计块布局

Layout: stat-block (default)

布局：stat-block（默认）

Classical infographic with sections, stats, and key takeaway.
带章节、统计数据和核心结论的古典信息图。

Extraction Schema

提取Schema

typescript
{
  layout: "stat-block"
  title: string          // Main title, 3-10 words
  subtitle?: string      // Optional tagline
  sections: [{           // 2-4 sections
    heading: string      // Section heading, 3-8 words
    content: string      // 1-2 sentences max
    stats?: [{           // Up to 3 stats per section
      value: string      // e.g. "85%", "1.2M"
      label: string      // What it represents
    }]
  }]
  keyTakeaway: string    // Single most important insight
}
typescript
{
  layout: "stat-block"
  title: string          // 主标题，3-10个词
  subtitle?: string      // 可选标语
  sections: [{           // 2-4个章节
    heading: string      // 章节标题，3-8个词
    content: string      // 最多1-2句话
    stats?: [{           // 每个章节最多3个统计项
      value: string      // 例如 "85%", "1.2M"
      label: string      // 统计项代表的含义
    }]
  }]
  keyTakeaway: string    // 最重要的单条洞察
}

SVG Template Structure

SVG模板结构

svg
<svg width="800" height="1100" xmlns="http://www.w3.org/2000/svg">
  <!-- Canvas background -->
  <rect width="800" height="1100" fill="{canvasColor}"/>

  <!-- Border frame -->
  <rect x="{inset}" y="{inset}" width="{w-2*inset}" height="{h-2*inset}" fill="none" stroke="{ruleColor}" stroke-width="1"/>

  <!-- Header area (centered) -->
  <text x="400" y="100" text-anchor="middle" fill="{textColor}" font-size="36" font-weight="bold" font-family="{headingFont}">{title}</text>
  <text x="400" y="132" text-anchor="middle" fill="{mutedColor}" font-size="16" font-style="italic" font-family="{headingFont}">{subtitle}</text>

  <!-- Divider under header -->
  <line x1="200" y1="160" x2="600" y2="160" stroke="{ruleColor}" stroke-width="0.5"/>

  <!-- Section (repeat for each) -->
  <text x="{margin}" y="210" fill="{accentColor}" font-size="13" font-family="{labelFont}" letter-spacing="2">{SECTION HEADING}</text>
  <text x="{margin}" y="236" fill="{textColor}" font-size="15" font-family="{bodyFont}" line-height="1.6">
    <tspan x="{margin}" dy="0">{contentLine1}</tspan>
    <tspan x="{margin}" dy="22">{contentLine2}</tspan>
  </text>

  <!-- Stats row -->
  <text x="{statX}" y="300" text-anchor="middle" fill="{textColor}" font-size="48" font-family="{headingFont}">{statValue}</text>
  <line x1="{ruleX1}" y1="308" x2="{ruleX2}" y2="308" stroke="{ruleColor}" stroke-width="0.5"/>
  <text x="{statX}" y="324" text-anchor="middle" fill="{mutedColor}" font-size="11" font-family="{labelFont}" letter-spacing="2">{STAT LABEL}</text>

  <!-- Section divider -->
  <line x1="{margin}" y1="360" x2="{margin+contentWidth}" y2="360" stroke="{ruleColor}" stroke-width="0.5"/>

  <!-- Key Takeaway (bottom) -->
  <line x1="200" y1="980" x2="600" y2="980" stroke="{ruleColor}" stroke-width="0.5"/>
  <line x1="200" y1="983" x2="600" y2="983" stroke="{ruleColor}" stroke-width="0.5"/>
  <text x="400" y="1020" text-anchor="middle" fill="{mutedColor}" font-size="14" font-style="italic" font-family="{headingFont}">{keyTakeaway}</text>
</svg>
svg
<svg width="800" height="1100" xmlns="http://www.w3.org/2000/svg">
  <!-- 画布背景 -->
  <rect width="800" height="1100" fill="{canvasColor}"/>

  <!-- 边框 -->
  <rect x="{inset}" y="{inset}" width="{w-2*inset}" height="{h-2*inset}" fill="none" stroke="{ruleColor}" stroke-width="1"/>

  <!-- 头部区域（居中） -->
  <text x="400" y="100" text-anchor="middle" fill="{textColor}" font-size="36" font-weight="bold" font-family="{headingFont}">{title}</text>
  <text x="400" y="132" text-anchor="middle" fill="{mutedColor}" font-size="16" font-style="italic" font-family="{headingFont}">{subtitle}</text>

  <!-- 头部分割线 -->
  <line x1="200" y1="160" x2="600" y2="160" stroke="{ruleColor}" stroke-width="0.5"/>

  <!-- 章节（重复生成） -->
  <text x="{margin}" y="210" fill="{accentColor}" font-size="13" font-family="{labelFont}" letter-spacing="2">{SECTION HEADING}</text>
  <text x="{margin}" y="236" fill="{textColor}" font-size="15" font-family="{bodyFont}" line-height="1.6">
    <tspan x="{margin}" dy="0">{contentLine1}</tspan>
    <tspan x="{margin}" dy="22">{contentLine2}</tspan>
  </text>

  <!-- 统计行 -->
  <text x="{statX}" y="300" text-anchor="middle" fill="{textColor}" font-size="48" font-family="{headingFont}">{statValue}</text>
  <line x1="{ruleX1}" y1="308" x2="{ruleX2}" y2="308" stroke="{ruleColor}" stroke-width="0.5"/>
  <text x="{statX}" y="324" text-anchor="middle" fill="{mutedColor}" font-size="11" font-family="{labelFont}" letter-spacing="2">{STAT LABEL}</text>

  <!-- 章节分割线 -->
  <line x1="{margin}" y1="360" x2="{margin+contentWidth}" y2="360" stroke="{ruleColor}" stroke-width="0.5"/>

  <!-- 核心结论（底部） -->
  <line x1="200" y1="980" x2="600" y2="980" stroke="{ruleColor}" stroke-width="0.5"/>
  <line x1="200" y1="983" x2="600" y2="983" stroke="{ruleColor}" stroke-width="0.5"/>
  <text x="400" y="1020" text-anchor="middle" fill="{mutedColor}" font-size="14" font-style="italic" font-family="{headingFont}">{keyTakeaway}</text>
</svg>

Layout: decision-tree

布局：decision-tree

Binary choice flowchart with question bubble and two branch cards.
带问题气泡和两个分支卡片的二元选择流程图。

Extraction Schema

提取Schema

typescript
{
  layout: "decision-tree"
  question: string           // The decision point (displayed in bubble)
  branches: [{
    label: string            // "YES" / "NO" or custom labels
    title: string            // Branch heading (e.g., "Use Perplexity")
    description: string      // Supporting explanation (1-2 sentences)
    bullets?: string[]       // Optional 2-4 bullet points
    icon?: string            // Icon hint: search, document, data, draft, etc.
  }, {
    // Second branch (same structure)
  }]
}
typescript
{
  layout: "decision-tree"
  question: string           // 决策点（显示在气泡中）
  branches: [{
    label: string            // "是" / "否" 或自定义标签
    title: string            // 分支标题（例如 "使用Perplexity"）
    description: string      // 辅助说明（1-2句话）
    bullets?: string[]       // 可选2-4个要点
    icon?: string            // 图标提示：search, document, data, draft等
  }, {
    // 第二个分支（结构相同）
  }]
}

SVG Template (olive style)

SVG模板（olive样式）

svg
<svg width="800" height="620" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
    </filter>
  </defs>

  <!-- Canvas -->
  <rect width="800" height="620" fill="#F5F0E6"/>

  <!-- Question bubble (top center) -->
  <rect x="140" y="30" width="520" height="70" rx="35" fill="#FAFAF8" filter="url(#shadow)" stroke="#2C2C2C" stroke-width="1"/>
  <text x="400" y="72" text-anchor="middle" fill="#2C2C2C" font-size="18" font-weight="500" font-family="system-ui">{question}</text>

  <!-- Curved arrows from bubble to cards -->
  <path d="M280,100 Q280,140 200,180" fill="none" stroke="#2C2C2C" stroke-width="1.5"/>
  <path d="M520,100 Q520,140 600,180" fill="none" stroke="#2C2C2C" stroke-width="1.5"/>

  <!-- Arrow heads -->
  <polygon points="195,175 205,185 210,172" fill="#2C2C2C"/>
  <polygon points="605,175 595,185 590,172" fill="#2C2C2C"/>

  <!-- Branch labels -->
  <text x="220" y="145" text-anchor="middle" fill="#7D8B6E" font-size="14" font-weight="bold" font-family="system-ui">{branch1.label}</text>
  <text x="580" y="145" text-anchor="middle" fill="#7D8B6E" font-size="14" font-weight="bold" font-family="system-ui">{branch2.label}</text>

  <!-- Left card (primary color) -->
  <rect x="30" y="190" width="360" height="400" rx="16" fill="#7D8B6E" filter="url(#shadow)"/>

  <!-- Left icon circle -->
  <circle cx="80" cy="240" r="24" fill="#FAFAF8"/>
  <!-- Icon path goes here -->

  <!-- Left card content -->
  <text x="120" y="248" fill="#FAFAF8" font-size="20" font-weight="bold" font-family="system-ui">{branch1.title}</text>
  <text x="50" y="290" fill="#FAFAF8" font-size="14" font-family="system-ui">
    <tspan x="50" dy="0">{description line 1}</tspan>
    <tspan x="50" dy="22">{description line 2}</tspan>
  </text>
  <!-- Bullets -->
  <text x="50" y="360" fill="#FAFAF8" font-size="14" font-family="system-ui">
    <tspan x="50" dy="0">• {bullet1}</tspan>
    <tspan x="50" dy="24">• {bullet2}</tspan>
    <tspan x="50" dy="24">• {bullet3}</tspan>
  </text>

  <!-- Right card (secondary color) -->
  <rect x="410" y="190" width="360" height="400" rx="16" fill="#E8E2D4" filter="url(#shadow)"/>

  <!-- Right icon circle -->
  <circle cx="460" cy="240" r="24" fill="#FAFAF8"/>
  <!-- Icon path goes here -->

  <!-- Right card content (dark text) -->
  <text x="500" y="248" fill="#2C2C2C" font-size="20" font-weight="bold" font-family="system-ui">{branch2.title}</text>
  <!-- ... same structure as left card but with #2C2C2C text -->
</svg>
svg
<svg width="800" height="620" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
    </filter>
  </defs>

  <!-- 画布 -->
  <rect width="800" height="620" fill="#F5F0E6"/>

  <!-- 问题气泡（顶部居中） -->
  <rect x="140" y="30" width="520" height="70" rx="35" fill="#FAFAF8" filter="url(#shadow)" stroke="#2C2C2C" stroke-width="1"/>
  <text x="400" y="72" text-anchor="middle" fill="#2C2C2C" font-size="18" font-weight="500" font-family="system-ui">{question}</text>

  <!-- 气泡到卡片的曲线箭头 -->
  <path d="M280,100 Q280,140 200,180" fill="none" stroke="#2C2C2C" stroke-width="1.5"/>
  <path d="M520,100 Q520,140 600,180" fill="none" stroke="#2C2C2C" stroke-width="1.5"/>

  <!-- 箭头头部 -->
  <polygon points="195,175 205,185 210,172" fill="#2C2C2C"/>
  <polygon points="605,175 595,185 590,172" fill="#2C2C2C"/>

  <!-- 分支标签 -->
  <text x="220" y="145" text-anchor="middle" fill="#7D8B6E" font-size="14" font-weight="bold" font-family="system-ui">{branch1.label}</text>
  <text x="580" y="145" text-anchor="middle" fill="#7D8B6E" font-size="14" font-weight="bold" font-family="system-ui">{branch2.label}</text>

  <!-- 左侧卡片（主色） -->
  <rect x="30" y="190" width="360" height="400" rx="16" fill="#7D8B6E" filter="url(#shadow)"/>

  <!-- 左侧图标圆 -->
  <circle cx="80" cy="240" r="24" fill="#FAFAF8"/>
  <!-- 图标路径放在这里 -->

  <!-- 左侧卡片内容 -->
  <text x="120" y="248" fill="#FAFAF8" font-size="20" font-weight="bold" font-family="system-ui">{branch1.title}</text>
  <text x="50" y="290" fill="#FAFAF8" font-size="14" font-family="system-ui">
    <tspan x="50" dy="0">{description line 1}</tspan>
    <tspan x="50" dy="22">{description line 2}</tspan>
  </text>
  <!-- 要点 -->
  <text x="50" y="360" fill="#FAFAF8" font-size="14" font-family="system-ui">
    <tspan x="50" dy="0">• {bullet1}</tspan>
    <tspan x="50" dy="24">• {bullet2}</tspan>
    <tspan x="50" dy="24">• {bullet3}</tspan>
  </text>

  <!-- 右侧卡片（次色） -->
  <rect x="410" y="190" width="360" height="400" rx="16" fill="#E8E2D4" filter="url(#shadow)"/>

  <!-- 右侧图标圆 -->
  <circle cx="460" cy="240" r="24" fill="#FAFAF8"/>
  <!-- 图标路径放在这里 -->

  <!-- 右侧卡片内容（深色文本） -->
  <text x="500" y="248" fill="#2C2C2C" font-size="20" font-weight="bold" font-family="system-ui">{branch2.title}</text>
  <!-- ... 结构和左侧卡片相同，文本颜色为#2C2C2C -->
</svg>

Layout: comparison

布局：comparison

Side-by-side comparison cards for 2-4 options.
2-4个选项的并排对比卡片。

Extraction Schema

提取Schema

typescript
{
  layout: "comparison"
  title?: string             // Optional main title above cards
  items: [{
    heading: string          // Option name (e.g., "React", "Vue")
    description: string      // Brief description (1-2 sentences)
    bullets?: string[]       // Optional 2-4 key points
    color: "primary" | "secondary"  // Card color alternation
    icon?: string            // Icon hint
  }]
}
typescript
{
  layout: "comparison"
  title?: string             // 卡片上方的可选主标题
  items: [{
    heading: string          // 选项名称（例如 "React", "Vue"）
    description: string      // 简短说明（1-2句话）
    bullets?: string[]       // 可选2-4个核心要点
    color: "primary" | "secondary"  // 卡片颜色交替
    icon?: string            // 图标提示
  }]
}

SVG Template (olive style, 2 items)

SVG模板（olive样式，2个项目）

svg
<svg width="800" height="520" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
    </filter>
  </defs>

  <!-- Canvas -->
  <rect width="800" height="520" fill="#F5F0E6"/>

  <!-- Optional title -->
  <text x="400" y="50" text-anchor="middle" fill="#2C2C2C" font-size="24" font-weight="500" font-family="system-ui">{title}</text>

  <!-- Card 1 (primary) -->
  <rect x="30" y="80" width="360" height="410" rx="16" fill="#7D8B6E" filter="url(#shadow)"/>
  <circle cx="80" cy="130" r="24" fill="#FAFAF8"/>
  <!-- Icon -->
  <text x="120" y="138" fill="#FAFAF8" font-size="20" font-weight="bold" font-family="system-ui">{item1.heading}</text>
  <text x="50" y="180" fill="#FAFAF8" font-size="14" font-family="system-ui">
    <tspan x="50" dy="0">{description}</tspan>
  </text>
  <text x="50" y="240" fill="#FAFAF8" font-size="14" font-family="system-ui">
    <tspan x="50" dy="0">• {bullet1}</tspan>
    <tspan x="50" dy="24">• {bullet2}</tspan>
  </text>

  <!-- Card 2 (secondary) -->
  <rect x="410" y="80" width="360" height="410" rx="16" fill="#E8E2D4" filter="url(#shadow)"/>
  <circle cx="460" cy="130" r="24" fill="#FAFAF8"/>
  <!-- Icon -->
  <text x="500" y="138" fill="#2C2C2C" font-size="20" font-weight="bold" font-family="system-ui">{item2.heading}</text>
  <!-- ... -->
</svg>
svg
<svg width="800" height="520" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
    </filter>
  </defs>

  <!-- 画布 -->
  <rect width="800" height="520" fill="#F5F0E6"/>

  <!-- 可选标题 -->
  <text x="400" y="50" text-anchor="middle" fill="#2C2C2C" font-size="24" font-weight="50" font-family="system-ui">{title}</text>

  <!-- 卡片1（主色） -->
  <rect x="30" y="80" width="360" height="410" rx="16" fill="#7D8B6E" filter="url(#shadow)"/>
  <circle cx="80" cy="130" r="24" fill="#FAFAF8"/>
  <!-- 图标 -->
  <text x="120" y="138" fill="#FAFAF8" font-size="20" font-weight="bold" font-family="system-ui">{item1.heading}</text>
  <text x="50" y="180" fill="#FAFAF8" font-size="14" font-family="system-ui">
    <tspan x="50" dy="0">{description}</tspan>
  </text>
  <text x="50" y="240" fill="#FAFAF8" font-size="14" font-family="system-ui">
    <tspan x="50" dy="0">• {bullet1}</tspan>
    <tspan x="50" dy="24">• {bullet2}</tspan>
  </text>

  <!-- 卡片2（次色） -->
  <rect x="410" y="80" width="360" height="410" rx="16" fill="#E8E2D4" filter="url(#shadow)"/>
  <circle cx="460" cy="130" r="24" fill="#FAFAF8"/>
  <!-- 图标 -->
  <text x="500" y="138" fill="#2C2C2C" font-size="20" font-weight="bold" font-family="system-ui">{item2.heading}</text>
  <!-- ... -->
</svg>

Sizing for multiple items

多项目尺寸适配

  • 2 items: 800x520, cards 360px wide
  • 3 items: 1000x520, cards 300px wide
  • 4 items: 1200x520, cards 270px wide
  • 2个项目：800x520，卡片宽360px
  • 3个项目：1000x520，卡片宽300px
  • 4个项目：1200x520，卡片宽270px

Layout: catalog

布局：catalog

Table/catalog layout with swatches, multiple columns, and classical typography. Inspired by Werner's Nomenclature of Colours.
带色卡、多列和古典排版的表格/目录布局，灵感来源于Werner的色彩命名法。

Extraction Schema

提取Schema

typescript
{
  layout: "catalog"
  title?: string           // Optional title above table (uppercase, letter-spaced)
  columns: string[]        // Column headers
  rows: [{
    swatch?: string        // Hex color for swatch column (optional)
    values: string[]       // Data for each column
    parts?: string[]       // Hex colors for palette dots (optional)
  }]
}
typescript
{
  layout: "catalog"
  title?: string           // 表格上方可选标题（大写，字符间距大）
  columns: string[]        // 列头
  rows: [{
    swatch?: string        // 色卡列的十六进制颜色（可选）
    values: string[]       // 每列的数据
    parts?: string[]       // 调色板圆点的十六进制颜色（可选）
  }]
}

SVG Template (werner style)

SVG模板（werner样式）

svg
<svg width="900" height="{dynamicHeight}" xmlns="http://www.w3.org/2000/svg">
  <!-- Canvas -->
  <rect width="900" height="{height}" fill="#F5F0E6"/>

  <!-- Title (optional) -->
  <text x="450" y="45" text-anchor="middle" fill="#2C2C2C" font-size="18" font-family="Georgia, serif" letter-spacing="4">{TITLE}</text>

  <!-- Header row with underlines -->
  <text x="60" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Color</text>
  <text x="130" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Name</text>
  <text x="280" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Animal</text>
  <text x="450" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Vegetable</text>
  <text x="620" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Mineral</text>
  <text x="790" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Parts</text>

  <!-- Data row -->
  <rect x="60" y="110" width="50" height="60" fill="{swatchColor}" stroke="#C4B8A8" stroke-width="0.5"/>
  <text x="130" y="145" fill="#2C2C2C" font-size="14" font-family="Georgia, serif">24. Scotch Blue</text>
  <text x="280" y="145" fill="#2C2C2C" font-size="13" font-style="italic" font-family="Georgia, serif">Throat of Blue Titmouse.</text>
  <text x="450" y="145" fill="#2C2C2C" font-size="13" font-style="italic" font-family="Georgia, serif">Stamina of Single Purple Anemone.</text>
  <text x="620" y="145" fill="#2C2C2C" font-size="13" font-style="italic" font-family="Georgia, serif">Blue Copper Ore.</text>

  <!-- Parts palette dots -->
  <circle cx="795" cy="140" r="12" fill="#1a1a1a"/>
  <circle cx="823" cy="140" r="12" fill="#4a7089"/>
  <circle cx="851" cy="140" r="12" fill="#c4a5a0"/>

  <!-- Repeat rows with 80-90px vertical spacing -->
</svg>
svg
<svg width="900" height="{dynamicHeight}" xmlns="http://www.w3.org/2000/svg">
  <!-- 画布 -->
  <rect width="900" height="{height}" fill="#F5F0E6"/>

  <!-- 标题（可选） -->
  <text x="450" y="45" text-anchor="middle" fill="#2C2C2C" font-size="18" font-family="Georgia, serif" letter-spacing="4">{TITLE}</text>

  <!-- 带下划线的头行 -->
  <text x="60" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Color</text>
  <text x="130" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Name</text>
  <text x="280" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Animal</text>
  <text x="450" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Vegetable</text>
  <text x="620" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Mineral</text>
  <text x="790" y="90" fill="#2C2C2C" font-size="12" font-family="Georgia, serif" text-decoration="underline">Parts</text>

  <!-- 数据行 -->
  <rect x="60" y="110" width="50" height="60" fill="{swatchColor}" stroke="#C4B8A8" stroke-width="0.5"/>
  <text x="130" y="145" fill="#2C2C2C" font-size="14" font-family="Georgia, serif">24. Scotch Blue</text>
  <text x="280" y="145" fill="#2C2C2C" font-size="13" font-style="italic" font-family="Georgia, serif">Throat of Blue Titmouse.</text>
  <text x="450" y="145" fill="#2C2C2C" font-size="13" font-style="italic" font-family="Georgia, serif">Stamina of Single Purple Anemone.</text>
  <text x="620" y="145" fill="#2C2C2C" font-size="13" font-style="italic" font-family="Georgia, serif">Blue Copper Ore.</text>

  <!-- 调色板圆点 -->
  <circle cx="795" cy="140" r="12" fill="#1a1a1a"/>
  <circle cx="823" cy="140" r="12" fill="#4a7089"/>
  <circle cx="851" cy="140" r="12" fill="#c4a5a0"/>

  <!-- 重复行，垂直间距80-90px -->
</svg>

Layout Notes

布局说明

  • Row height: 80-90px (accommodates swatches and wrapped text)
  • Swatch size: 50x60px or 60x70px
  • Parts dots: 20-24px diameter, 4px gap or slight overlap
  • Italics for descriptive/natural reference columns
  • Number prefix for names when showing ordered items (e.g., "24. Scotch Blue")
  • Add subtle row dividers (0.5px) or use whitespace (24px gap)
  • Height is dynamic: 
    110 + (rowCount × 90)
    pixels
  • 行高：80-90px（适配色卡和折行文本）
  • 色卡尺寸：50x60px 或 60x70px
  • 调色板圆点：直径20-24px，4px间距或轻微重叠
  • 描述性/自然参考列使用斜体
  • 展示有序项目时名称加编号前缀（例如 "24. Scotch Blue"）
  • 可添加细行分割线（0.5px）或使用24px空白间距
  • 高度是动态的：
    110 + (行数 × 90)
    像素

Layout: bars

布局：bars

Vertical bar chart with items ranked by height. Tick marks for data points along each bar.
按高度排序的垂直条形图，每个条形上带数据刻度标记。

Extraction Schema

提取Schema

typescript
{
  layout: "bars"
  title: string              // Main title
  subtitle?: string          // Byline or source
  description?: string       // Explanatory text
  bars: [{
    label: string            // Bar name (shown at bottom)
    value: number            // Determines bar height
    color?: string           // Override color
    ticks?: [{               // Horizontal tick marks
      position: number       // 0-100 percentage up the bar
      label: string          // Tick label
    }]
  }]
  sortOrder?: "asc" | "desc" // Default: "asc"
}
typescript
{
  layout: "bars"
  title: string              // 主标题
  subtitle?: string          // 署名或来源
  description?: string       // 说明文本
  bars: [{
    label: string            // 条形名称（显示在底部）
    value: number            // 决定条形高度
    color?: string           // 覆盖颜色
    ticks?: [{               // 水平刻度标记
      position: number       // 条形上0-100%的位置
      label: string          // 刻度标签
    }]
  }]
  sortOrder?: "asc" | "desc" // 默认："asc"升序
}

SVG Template (transit style)

SVG模板（transit样式）

svg
<svg width="800" height="1200" xmlns="http://www.w3.org/2000/svg">
  <!-- Canvas -->
  <rect width="800" height="1200" fill="#E8DFD0"/>

  <!-- Title block -->
  <text x="60" y="80" fill="#2C2C2C" font-size="14" font-family="Helvetica, sans-serif" letter-spacing="3" text-decoration="underline">CHART TITLE</text>
  <text x="60" y="120" fill="#2C2C2C" font-size="42" font-weight="bold" font-family="Georgia, serif">Main Title</text>

  <!-- Bar (from bottom) -->
  <rect x="60" y="500" width="80" height="600" fill="#D4A574"/>

  <!-- Tick mark -->
  <line x1="60" y1="700" x2="140" y2="700" stroke="#2C2C2C" stroke-width="0.5"/>
  <text x="145" y="703" fill="#2C2C2C" font-size="9" font-family="Helvetica, sans-serif">Data point</text>

  <!-- Bar label -->
  <text x="100" y="1130" text-anchor="middle" fill="#2C2C2C" font-size="11" font-family="Helvetica, sans-serif">LABEL</text>
</svg>
svg
<svg width="800" height="1200" xmlns="http://www.w3.org/2000/svg">
  <!-- 画布 -->
  <rect width="800" height="1200" fill="#E8DFD0"/>

  <!-- 标题块 -->
  <text x="60" y="80" fill="#2C2C2C" font-size="14" font-family="Helvetica, sans-serif" letter-spacing="3" text-decoration="underline">CHART TITLE</text>
  <text x="60" y="120" fill="#2C2C2C" font-size="42" font-weight="bold" font-family="Georgia, serif">Main Title</text>

  <!-- 条形（从底部开始） -->
  <rect x="60" y="500" width="80" height="600" fill="#D4A574"/>

  <!-- 刻度标记 -->
  <line x1="60" y1="700" x2="140" y2="700" stroke="#2C2C2C" stroke-width="0.5"/>
  <text x="145" y="703" fill="#2C2C2C" font-size="9" font-family="Helvetica, sans-serif">Data point</text>

  <!-- 条形标签 -->
  <text x="100" y="1130" text-anchor="middle" fill="#2C2C2C" font-size="11" font-family="Helvetica, sans-serif">LABEL</text>
</svg>

Layout Notes

布局说明

  • Tall format: 800x1200 or similar
  • Bars start from same baseline
  • Bar width: 60-100px, gap: 10-20px
  • Sort ascending (shortest left) or descending
  • Tick labels alternate sides or right-align
  • 竖版格式：800x1200或类似尺寸
  • 所有条形从同一基线开始
  • 条形宽度：60-100px，间距：10-20px
  • 可升序（最短在左）或降序排序
  • 刻度标签可交替显示在两侧或右对齐

Layout: tiles

布局：tiles

Grid of colored tiles with icons and stat values. Dashboard-style multi-attribute display.
带图标和统计值的彩色磁贴网格，仪表盘风格的多属性展示。

Extraction Schema

提取Schema

typescript
{
  layout: "tiles"
  items: [{
    title: string            // Item name
    subtitle?: string        // Location/category
    stats: [{
      icon: string           // elevation-up, elevation-down, area, calendar, people, rainfall, latitude, longitude
      value: string          // Display value
      color?: string         // Tile color
    }]
  }]
  columns?: number           // Tiles per row (default: 4)
  rows?: number              // Rows per item (default: 3)
}
typescript
{
  layout: "tiles"
  items: [{
    title: string            // 项目名称
    subtitle?: string        // 位置/分类
    stats: [{
      icon: string           // elevation-up, elevation-down, area, calendar, people, rainfall, latitude, longitude
      value: string          // 展示数值
      color?: string         // 磁贴颜色
    }]
  }]
  columns?: number           // 每行磁贴数（默认：4）
  rows?: number              // 每个项目的行数（默认：3）
}

SVG Template (parks style)

SVG模板（parks样式）

svg
<svg width="1200" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- Dark canvas -->
  <rect width="1200" height="500" fill="#3D2E1F"/>

  <!-- Tile -->
  <rect x="40" y="40" width="85" height="85" rx="8" fill="#6B4423"/>

  <!-- Icon (centered top) -->
  <g transform="translate(82,60)">
    <path d="M-8,4 L0,-4 L8,4" fill="none" stroke="#F5F0E6" stroke-width="3"/>
  </g>

  <!-- Value (centered bottom) -->
  <text x="82" y="105" text-anchor="middle" fill="#F5F0E6" font-size="14" font-family="Helvetica, sans-serif">10,197 ft</text>

  <!-- Item title below grid -->
  <text x="200" y="430" text-anchor="middle" fill="#F5F0E6" font-size="18" font-weight="bold" font-family="Helvetica, sans-serif">ITEM NAME</text>
  <text x="200" y="455" text-anchor="middle" fill="#F5F0E6" font-size="14" font-style="italic" font-family="Helvetica, sans-serif">Subtitle</text>
</svg>
svg
<svg width="1200" height="500" xmlns="http://www.w3.org/2000/svg">
  <!-- 暗色画布 -->
  <rect width="1200" height="500" fill="#3D2E1F"/>

  <!-- 磁贴 -->
  <rect x="40" y="40" width="85" height="85" rx="8" fill="#6B4423"/>

  <!-- 图标（顶部居中） -->
  <g transform="translate(82,60)">
    <path d="M-8,4 L0,-4 L8,4" fill="none" stroke="#F5F0E6" stroke-width="3"/>
  </g>

  <!-- 数值（底部居中） -->
  <text x="82" y="105" text-anchor="middle" fill="#F5F0E6" font-size="14" font-family="Helvetica, sans-serif">10,197 ft</text>

  <!-- 网格下方的项目标题 -->
  <text x="200" y="430" text-anchor="middle" fill="#F5F0E6" font-size="18" font-weight="bold" font-family="Helvetica, sans-serif">ITEM NAME</text>
  <text x="200" y="455" text-anchor="middle" fill="#F5F0E6" font-size="14" font-style="italic" font-family="Helvetica, sans-serif">Subtitle</text>
</svg>

Layout Notes

布局说明

  • Tile size: 80-100px square
  • Gap: 8-12px, corner radius: rx="8"
  • Icon in upper half, value in lower half
  • Dark canvas, earth-tone tiles
  • Title/subtitle centered below each item's grid
  • 磁贴尺寸：80-100px正方形
  • 间距：8-12px，圆角：rx="8"
  • 图标在上半部分，数值在下半部分
  • 暗色画布，大地色系磁贴
  • 每个项目网格下方居中显示标题/副标题

Layout: gallery

布局：gallery

Grid of visual items with illustrations and captions. Bauhaus-inspired geometric compositions.
带插图和说明的可视化项目网格，包豪斯风格的几何构图。

Extraction Schema

提取Schema

typescript
{
  layout: "gallery"
  title?: string             // Section title (italic, with period)
  items: [{
    label: string            // Item label (e.g., "BOOK I.")
    description: string      // Brief description
    illustration?: string    // Hint: triangle, square, circle, polygon, grid
  }]
  columns?: number           // Items per row (default: 3)
}
typescript
{
  layout: "gallery"
  title?: string             // 章节标题（斜体，带句号）
  items: [{
    label: string            // 项目标签（例如 "BOOK I."）
    description: string      // 简短说明
    illustration?: string    // 提示：triangle, square, circle, polygon, grid
  }]
  columns?: number           // 每行项目数（默认：3）
}

SVG Template (euclid style)

SVG模板（euclid样式）

svg
<svg width="900" height="700" xmlns="http://www.w3.org/2000/svg">
  <!-- Cream canvas -->
  <rect width="900" height="700" fill="#F5EFE0"/>

  <!-- Title -->
  <text x="450" y="60" text-anchor="middle" fill="#2C2C2C" font-size="24" font-style="italic" font-family="Georgia, serif">TITLE.</text>

  <!-- Item illustration (Bauhaus colors) -->
  <g transform="translate(150,180)">
    <polygon points="0,-80 80,60 -80,60" fill="none" stroke="#1A1A1A" stroke-width="2"/>
    <rect x="-30" y="-20" width="40" height="40" fill="#D64045"/>
    <circle cx="20" cy="30" r="25" fill="#1B4B8A"/>
  </g>

  <!-- Caption -->
  <text x="150" y="360" text-anchor="middle" fill="#2C2C2C" font-size="16" font-family="Georgia, serif">ITEM I.</text>
  <text x="150" y="385" text-anchor="middle" fill="#2C2C2C" font-size="14" font-family="Georgia, serif">Description text</text>
</svg>
svg
<svg width="900" height="700" xmlns="http://www.w3.org/2000/svg">
  <!-- 奶油色画布 -->
  <rect width="900" height="700" fill="#F5EFE0"/>

  <!-- 标题 -->
  <text x="450" y="60" text-anchor="middle" fill="#2C2C2C" font-size="24" font-style="italic" font-family="Georgia, serif">TITLE.</text>

  <!-- 项目插图（包豪斯配色） -->
  <g transform="translate(150,180)">
    <polygon points="0,-80 80,60 -80,60" fill="none" stroke="#1A1A1A" stroke-width="2"/>
    <rect x="-30" y="-20" width="40" height="40" fill="#D64045"/>
    <circle cx="20" cy="30" r="25" fill="#1B4B8A"/>
  </g>

  <!-- 说明 -->
  <text x="150" y="360" text-anchor="middle" fill="#2C2C2C" font-size="16" font-family="Georgia, serif">ITEM I.</text>
  <text x="150" y="385" text-anchor="middle" fill="#2C2C2C" font-size="14" font-family="Georgia, serif">Description text</text>
</svg>

Layout Notes

布局说明

  • Grid: typically 3 columns, 2 rows
  • Illustration area: 180-220px
  • Bauhaus colors: red #D64045, blue #1B4B8A, yellow #F5B800, black #1A1A1A
  • Abstract geometric compositions
  • Roman numerals for labels (I, II, III...)
  • 网格：通常3列2行
  • 插图区域：180-220px
  • 包豪斯配色：红色#D64045、蓝色#1B4B8A、黄色#F5B800、黑色#1A1A1A
  • 抽象几何构图
  • 标签使用罗马数字（I, II, III...）

Layout: timeline

布局：timeline

Vertical timeline with central spine and alternating event cards. Best for chronological histories.
带中心轴线和交替事件卡片的垂直时间线，最适合按时间排序的历史内容。

Extraction Schema

提取Schema

typescript
{
  layout: "timeline"
  title?: string             // Optional main title
  subtitle?: string          // Optional byline or date range
  events: [{
    date: string             // Year or date (e.g., "1995", "March 2020")
    title: string            // Event title
    description: string      // Brief description (1-2 sentences)
    side?: "left" | "right"  // Override alternation
  }]
}
typescript
{
  layout: "timeline"
  title?: string             // 可选主标题
  subtitle?: string          // 可选署名或日期范围
  events: [{
    date: string             // 年份或日期（例如 "1995", "2020年3月"）
    title: string            // 事件标题
    description: string      // 简短说明（1-2句话）
    side?: "left" | "right"  // 覆盖交替排列规则
  }]
}

SVG Template (timber style)

SVG模板（timber样式）

svg
<svg width="800" height="{dynamicHeight}" xmlns="http://www.w3.org/2000/svg">
  <!-- Canvas -->
  <rect width="800" height="{height}" fill="#F5F0E6"/>

  <!-- Title -->
  <text x="400" y="60" text-anchor="middle" fill="#2C2C2C" font-size="28" font-weight="bold" font-family="Georgia, serif">{title}</text>
  <text x="400" y="90" text-anchor="middle" fill="#8B7355" font-size="14" font-style="italic" font-family="Georgia, serif">{subtitle}</text>

  <!-- Central spine -->
  <line x1="400" y1="120" x2="400" y2="{spineEnd}" stroke="#8B7355" stroke-width="2"/>

  <!-- Timeline node (circle on spine) -->
  <circle cx="400" cy="180" r="8" fill="#8B7355"/>

  <!-- Date label (alternates sides) -->
  <text x="360" y="185" text-anchor="end" fill="#8B7355" font-size="14" font-weight="bold" font-family="Georgia, serif">1995</text>

  <!-- Event card (right side) -->
  <rect x="420" y="150" width="320" height="80" rx="4" fill="#FAFAF8" stroke="#D4C4A8" stroke-width="1"/>
  <text x="440" y="180" fill="#2C2C2C" font-size="16" font-weight="bold" font-family="Georgia, serif">{event.title}</text>
  <text x="440" y="205" fill="#5C5C5C" font-size="13" font-family="Georgia, serif">
    <tspan x="440" dy="0">{description line 1}</tspan>
    <tspan x="440" dy="18">{description line 2}</tspan>
  </text>

  <!-- Connector line to card -->
  <line x1="408" y1="180" x2="420" y2="180" stroke="#8B7355" stroke-width="1"/>

  <!-- Event card (left side, next event) -->
  <rect x="60" y="280" width="320" height="80" rx="4" fill="#FAFAF8" stroke="#D4C4A8" stroke-width="1"/>
  <!-- ... same structure, date on right of spine -->

  <!-- Repeat alternating pattern -->
</svg>
svg
<svg width="800" height="{dynamicHeight}" xmlns="http://www.w3.org/2000/svg">
  <!-- 画布 -->
  <rect width="800" height="{height}" fill="#F5F0E6"/>

  <!-- 标题 -->
  <text x="400" y="60" text-anchor="middle" fill="#2C2C2C" font-size="28" font-weight="bold" font-family="Georgia, serif">{title}</text>
  <text x="400" y="90" text-anchor="middle" fill="#8B7355" font-size="14" font-style="italic" font-family="Georgia, serif">{subtitle}</text>

  <!-- 中心轴线 -->
  <line x1="400" y1="120" x2="400" y2="{spineEnd}" stroke="#8B7355" stroke-width="2"/>

  <!-- 时间线节点（轴线上的圆圈） -->
  <circle cx="400" cy="180" r="8" fill="#8B7355"/>

  <!-- 日期标签（交替在两侧） -->
  <text x="360" y="185" text-anchor="end" fill="#8B7355" font-size="14" font-weight="bold" font-family="Georgia, serif">1995</text>

  <!-- 事件卡片（右侧） -->
  <rect x="420" y="150" width="320" height="80" rx="4" fill="#FAFAF8" stroke="#D4C4A8" stroke-width="1"/>
  <text x="440" y="180" fill="#2C2C2C" font-size="16" font-weight="bold" font-family="Georgia, serif">{event.title}</text>
  <text x="440" y="205" fill="#5C5C5C" font-size="13" font-family="Georgia, serif">
    <tspan x="440" dy="0">{description line 1}</tspan>
    <tspan x="440" dy="18">{description line 2}</tspan>
  </text>

  <!-- 连接到卡片的线 -->
  <line x1="408" y1="180" x2="420" y2="180" stroke="#8B7355" stroke-width="1"/>

  <!-- 事件卡片（左侧，下一个事件） -->
  <rect x="60" y="280" width="320" height="80" rx="4" fill="#FAFAF8" stroke="#D4C4A8" stroke-width="1"/>
  <!-- ... 结构相同，日期在轴线右侧 -->

  <!-- 重复交替模式 -->
</svg>

Layout Notes

布局说明

  • Spine runs vertically through center
  • Cards alternate left/right
  • Node circles mark each event on spine
  • Date labels opposite to card side
  • Card height: 70-100px depending on content
  • Vertical spacing: 130-160px between events
  • Dynamic height: 
    120 + (eventCount × 150)
    pixels
  • 轴线垂直贯穿中心
  • 卡片左右交替排列
  • 节点圆圈标记轴线上的每个事件
  • 日期标签在卡片对侧
  • 卡片高度：70-100px，依内容而定
  • 垂直间距：事件之间间隔130-160px
  • 动态高度：
    120 + (事件数 × 150)
    像素

Layout: process

布局：process

Sequential flowchart with numbered steps and connecting arrows. Best for how-to guides and workflows.
带编号步骤和连接箭头的顺序流程图，最适合操作指南和工作流。

Extraction Schema

提取Schema

typescript
{
  layout: "process"
  title?: string             // Optional main title
  subtitle?: string          // Optional description
  steps: [{
    number: number           // Step number (1, 2, 3...)
    title: string            // Step title
    description: string      // Brief description (1-2 sentences)
    icon?: string            // Icon hint: gear, code, check, etc.
  }]
  columns?: number           // Steps per row (default: 1 for vertical)
}
typescript
{
  layout: "process"
  title?: string             // 可选主标题
  subtitle?: string          // 可选说明
  steps: [{
    number: number           // 步骤编号（1, 2, 3...）
    title: string            // 步骤标题
    description: string      // 简短说明（1-2句话）
    icon?: string            // 图标提示：gear, code, check等
  }]
  columns?: number           // 每行步骤数（默认：1，垂直排列）
}

SVG Template (preston style)

SVG模板（preston样式）

svg
<svg width="800" height="{dynamicHeight}" xmlns="http://www.w3.org/2000/svg">
  <!-- Canvas -->
  <rect width="800" height="{height}" fill="#F5F0E6"/>

  <!-- Title -->
  <text x="400" y="60" text-anchor="middle" fill="#2C2C2C" font-size="28" font-weight="bold" font-family="Helvetica, sans-serif">{title}</text>
  <text x="400" y="90" text-anchor="middle" fill="#6B6B6B" font-size="14" font-family="Helvetica, sans-serif">{subtitle}</text>

  <!-- Step 1 -->
  <g transform="translate(100, 140)">
    <!-- Number circle -->
    <circle cx="30" cy="30" r="24" fill="#4A6741" stroke="none"/>
    <text x="30" y="38" text-anchor="middle" fill="#FAFAF8" font-size="20" font-weight="bold" font-family="Helvetica, sans-serif">1</text>

    <!-- Step content -->
    <text x="70" y="25" fill="#2C2C2C" font-size="18" font-weight="bold" font-family="Helvetica, sans-serif">{step.title}</text>
    <text x="70" y="50" fill="#5C5C5C" font-size="14" font-family="Helvetica, sans-serif">
      <tspan x="70" dy="0">{description line 1}</tspan>
      <tspan x="70" dy="20">{description line 2}</tspan>
    </text>
  </g>

  <!-- Connector arrow (vertical) -->
  <line x1="130" y1="220" x2="130" y2="260" stroke="#4A6741" stroke-width="2"/>
  <polygon points="130,270 125,260 135,260" fill="#4A6741"/>

  <!-- Step 2 -->
  <g transform="translate(100, 280)">
    <circle cx="30" cy="30" r="24" fill="#4A6741"/>
    <text x="30" y="38" text-anchor="middle" fill="#FAFAF8" font-size="20" font-weight="bold" font-family="Helvetica, sans-serif">2</text>
    <!-- ... same structure -->
  </g>

  <!-- Repeat for each step -->
</svg>
svg
<svg width="800" height="{dynamicHeight}" xmlns="http://www.w3.org/2000/svg">
  <!-- 画布 -->
  <rect width="800" height="{height}" fill="#F5F0E6"/>

  <!-- 标题 -->
  <text x="400" y="60" text-anchor="middle" fill="#2C2C2C" font-size="28" font-weight="bold" font-family="Helvetica, sans-serif">{title}</text>
  <text x="400" y="90" text-anchor="middle" fill="#6B6B6B" font-size="14" font-family="Helvetica, sans-serif">{subtitle}</text>

  <!-- 步骤1 -->
  <g transform="translate(100, 140)">
    <!-- 编号圆圈 -->
    <circle cx="30" cy="30" r="24" fill="#4A6741" stroke="none"/>
    <text x="30" y="38" text-anchor="middle" fill="#FAFAF8" font-size="20" font-weight="bold" font-family="Helvetica, sans-serif">1</text>

    <!-- 步骤内容 -->
    <text x="70" y="25" fill="#2C2C2C" font-size="18" font-weight="bold" font-family="Helvetica, sans-serif">{step.title}</text>
    <text x="70" y="50" fill="#5C5C5C" font-size="14" font-family="Helvetica, sans-serif">
      <tspan x="70" dy="0">{description line 1}</tspan>
      <tspan x="70" dy="20">{description line 2}</tspan>
    </text>
  </g>

  <!-- 连接箭头（垂直） -->
  <line x1="130" y1="220" x2="130" y2="260" stroke="#4A6741" stroke-width="2"/>
  <polygon points="130,270 125,260 135,260" fill="#4A6741"/>

  <!-- 步骤2 -->
  <g transform="translate(100, 280)">
    <circle cx="30" cy="30" r="24" fill="#4A6741"/>
    <text x="30" y="38" text-anchor="middle" fill="#FAFAF8" font-size="20" font-weight="bold" font-family="Helvetica, sans-serif">2</text>
    <!-- ... 结构相同 -->
  </g>

  <!-- 重复生成每个步骤 -->
</svg>

Layout Notes

布局说明

  • Numbered circles (24-30px radius) on left
  • Step content to right of number
  • Vertical arrows connect steps
  • Arrow length: 40-60px
  • Step spacing: 140-160px vertical
  • Accent color for numbers and arrows
  • Dynamic height: 
    120 + (stepCount × 150)
    pixels
  • For horizontal layout (columns > 1): arrange in rows with horizontal arrows
  • 左侧为编号圆圈（半径24-30px）
  • 步骤内容在编号右侧
  • 垂直箭头连接步骤
  • 箭头长度：40-60px
  • 步骤间距：垂直间隔140-160px
  • 编号和箭头使用强调色
  • 动态高度：
    120 + (步骤数 × 150)
    像素
  • 水平布局（列数>1）：按行排列，使用水平箭头连接

Icon Library

图标库

Simple SVG paths for common concepts. Use within a 
<g transform="translate(x,y)">
centered in the icon circle.
通用概念的简单SVG路径，放在
<g transform="translate(x,y)">
中，居中于图标圆圈内。

Available Icons

可用图标

svg
<!-- search: magnifying glass -->
<path d="M-6,-6 L6,6 M-4,0 a6,6 0 1,1 0,0.01" fill="none" stroke="#4A6741" stroke-width="2" stroke-linecap="round"/>

<!-- document: stacked pages -->
<path d="M-6,-8 L4,-8 L6,-6 L6,8 L-6,8 Z M-4,-5 L3,-5 M-4,-1 L3,-1 M-4,3 L1,3" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linecap="round"/>

<!-- data: circular arrows (refresh) -->
<path d="M0,-7 A7,7 0 0,1 6,3.5 M6,3.5 L4,0 M6,3.5 L9,2 M0,7 A7,7 0 0,1 -6,-3.5 M-6,-3.5 L-4,0 M-6,-3.5 L-9,-2" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linecap="round"/>

<!-- draft: pencil -->
<path d="M-6,8 L-2,8 L8,-6 L4,-6 Z M4,0 L0,0" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linejoin="round"/>

<!-- strategy: chess rook -->
<path d="M-5,8 L5,8 L5,6 L4,5 L4,2 L5,1 L5,-4 L3,-4 L3,-7 L1,-7 L1,-4 L-1,-4 L-1,-7 L-3,-7 L-3,-4 L-5,-4 L-5,1 L-4,2 L-4,5 L-5,6 Z" fill="none" stroke="#4A6741" stroke-width="1.5"/>

<!-- blocks: stacked cubes -->
<path d="M0,-8 L8,0 L0,8 L-8,0 Z M-8,0 L0,4 L8,0 M0,4 L0,8" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linejoin="round"/>

<!-- lightbulb: idea -->
<path d="M0,-8 L0,-6 M-6,-4 L-4,-3 M6,-4 L4,-3 M-4,6 L4,6 M-3,8 L3,8 M-4,2 Q-6,-2 0,-6 Q6,-2 4,2 L3,4 L-3,4 Z" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linecap="round"/>

<!-- check: checkmark in circle -->
<circle cx="0" cy="0" r="8" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M-4,0 L-1,3 L5,-4" fill="none" stroke="#4A6741" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

<!-- warning: triangle exclamation -->
<path d="M0,-7 L8,7 L-8,7 Z M0,0 L0,2 M0,4 L0,5" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>

<!-- code: angle brackets -->
<path d="M-3,-6 L-8,0 L-3,6 M3,-6 L8,0 L3,6" fill="none" stroke="#4A6741" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

<!-- users: two people -->
<circle cx="-3" cy="-4" r="3" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M-9,6 Q-9,0 -3,0 Q3,0 3,6" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<circle cx="5" cy="-2" r="2.5" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M1,6 Q2,2 5,2 Q9,2 9,6" fill="none" stroke="#4A6741" stroke-width="1.5"/>

<!-- gear: cog wheel -->
<circle cx="0" cy="0" r="3" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M0,-8 L0,-5 M0,5 L0,8 M-8,0 L-5,0 M5,0 L8,0 M-5.6,-5.6 L-3.5,-3.5 M3.5,3.5 L5.6,5.6 M5.6,-5.6 L3.5,-3.5 M-3.5,3.5 L-5.6,5.6" fill="none" stroke="#4A6741" stroke-width="2" stroke-linecap="round"/>

<!-- chat: speech bubble -->
<path d="M-8,-6 L8,-6 L8,4 L2,4 L-2,8 L-2,4 L-8,4 Z" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linejoin="round"/>

<!-- globe: world -->
<circle cx="0" cy="0" r="8" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M-8,0 L8,0 M0,-8 Q-4,0 0,8 Q4,0 0,-8" fill="none" stroke="#4A6741" stroke-width="1"/>
svg
<!-- search: 放大镜 -->
<path d="M-6,-6 L6,6 M-4,0 a6,6 0 1,1 0,0.01" fill="none" stroke="#4A6741" stroke-width="2" stroke-linecap="round"/>

<!-- document: 堆叠页面 -->
<path d="M-6,-8 L4,-8 L6,-6 L6,8 L-6,8 Z M-4,-5 L3,-5 M-4,-1 L3,-1 M-4,3 L1,3" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linecap="round"/>

<!-- data: 循环箭头（刷新） -->
<path d="M0,-7 A7,7 0 0,1 6,3.5 M6,3.5 L4,0 M6,3.5 L9,2 M0,7 A7,7 0 0,1 -6,-3.5 M-6,-3.5 L-4,0 M-6,-3.5 L-9,-2" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linecap="round"/>

<!-- draft: 铅笔 -->
<path d="M-6,8 L-2,8 L8,-6 L4,-6 Z M4,0 L0,0" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linejoin="round"/>

<!-- strategy: 国际象棋车 -->
<path d="M-5,8 L5,8 L5,6 L4,5 L4,2 L5,1 L5,-4 L3,-4 L3,-7 L1,-7 L1,-4 L-1,-4 L-1,-7 L-3,-7 L-3,-4 L-5,-4 L-5,1 L-4,2 L-4,5 L-5,6 Z" fill="none" stroke="#4A6741" stroke-width="1.5"/>

<!-- blocks: 堆叠立方体 -->
<path d="M0,-8 L8,0 L0,8 L-8,0 Z M-8,0 L0,4 L8,0 M0,4 L0,8" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linejoin="round"/>

<!-- lightbulb: 灯泡（创意） -->
<path d="M0,-8 L0,-6 M-6,-4 L-4,-3 M6,-4 L4,-3 M-4,6 L4,6 M-3,8 L3,8 M-4,2 Q-6,-2 0,-6 Q6,-2 4,2 L3,4 L-3,4 Z" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linecap="round"/>

<!-- check: 圆圈对勾 -->
<circle cx="0" cy="0" r="8" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M-4,0 L-1,3 L5,-4" fill="none" stroke="#4A6741" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

<!-- warning: 三角形感叹号 -->
<path d="M0,-7 L8,7 L-8,7 Z M0,0 L0,2 M0,4 L0,5" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>

<!-- code: 尖括号 -->
<path d="M-3,-6 L-8,0 L-3,6 M3,-6 L8,0 L3,6" fill="none" stroke="#4A6741" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>

<!-- users: 两个人 -->
<circle cx="-3" cy="-4" r="3" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M-9,6 Q-9,0 -3,0 Q3,0 3,6" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<circle cx="5" cy="-2" r="2.5" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M1,6 Q2,2 5,2 Q9,2 9,6" fill="none" stroke="#4A6741" stroke-width="1.5"/>

<!-- gear: 齿轮 -->
<circle cx="0" cy="0" r="3" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M0,-8 L0,-5 M0,5 L0,8 M-8,0 L-5,0 M5,0 L8,0 M-5.6,-5.6 L-3.5,-3.5 M3.5,3.5 L5.6,5.6 M5.6,-5.6 L3.5,-3.5 M-3.5,3.5 L-5.6,5.6" fill="none" stroke="#4A6741" stroke-width="2" stroke-linecap="round"/>

<!-- chat: 对话气泡 -->
<path d="M-8,-6 L8,-6 L8,4 L2,4 L-2,8 L-2,4 L-8,4 Z" fill="none" stroke="#4A6741" stroke-width="1.5" stroke-linejoin="round"/>

<!-- globe: 地球 -->
<circle cx="0" cy="0" r="8" fill="none" stroke="#4A6741" stroke-width="1.5"/>
<path d="M-8,0 L8,0 M0,-8 Q-4,0 0,8 Q4,0 0,-8" fill="none" stroke="#4A6741" stroke-width="1"/>

Icon Usage

图标使用说明

  1. Place icon circle at desired position
  2. Add icon paths inside a 
    <g>
    with 
    transform="translate(cx,cy)"
    where cx,cy is the circle center
  3. Match the icon hint from extracted data to the icon name
  1. 将图标圆圈放在目标位置
  2. 将图标路径放在
    <g>
    标签内，设置
    transform="translate(cx,cy)"
    ，其中cx、cy是圆圈的中心坐标
  3. 将提取数据中的图标提示与图标名称匹配

Important Notes

重要注意事项

  • Text wrapping: Split long text into 
    <tspan>
    elements with 
    dy="22"
    for body text
  • Dynamic height: Adjust canvas height based on content
  • stat-block notes:
    • Section heading color: rotate through accent colors
    • Stats layout: center N stats evenly across content width
    • No shadows, no gradients, no rounded corners
    • All styles inline (SVG has no external CSS support via rsvg-convert)
  • olive layout notes:
    • Always include shadow filter in defs
    • Primary cards use light text (#FAFAF8)
    • Secondary cards use dark text (#2C2C2C)
    • Icons centered in white circles
    • Rounded corners on all cards (rx="16")
  • werner layout notes:
    • Serif typography throughout (Georgia)
    • Italic text for descriptive columns
    • Underlined column headers
    • Swatches need stroke if color is close to canvas
    • Parts dots can overlap slightly
  • transit layout notes:
    • Tall format (800x1200+)
    • Bars from same baseline, sorted by value
    • Tick marks with small labels
    • Title block top-left with description
  • parks layout notes:
    • Dark brown canvas
    • Earth-tone tiles in grid
    • Icon + value per tile
    • Light text on dark tiles, dark on light
  • euclid layout notes:
    • Bauhaus palette: red, blue, yellow, black
    • Geometric illustrations (abstract compositions)
    • Serif italic title with period
    • Roman numeral labels
  • 文本折行： 长文本拆分为
    <tspan>
    元素，正文文本设置
    dy="22"
  • 动态高度： 根据内容调整画布高度
  • stat-block注意事项：
    • 章节标题颜色：循环使用强调色
    • 统计布局：N个统计项在内容宽度上均匀居中排布
    • 无阴影、无渐变、无圆角
    • 所有样式内联（rsvg-convert不支持SVG外部CSS）
  • olive布局注意事项：
    • 始终在defs中包含阴影滤镜
    • 主卡片使用浅色文本（#FAFAF8）
    • 次卡片使用深色文本（#2C2C2C）
    • 图标居中在白色圆圈内
    • 所有卡片使用圆角（rx="16"）
  • werner布局注意事项：
    • 全程使用衬线字体（Georgia）
    • 描述列使用斜体文本
    • 列头带下划线
    • 如果色卡颜色接近画布颜色需要加描边
    • 调色板圆点可以轻微重叠
  • transit布局注意事项：
    • 竖版格式（800x1200+）
    • 条形从同一基线开始，按数值排序
    • 刻度标记带小标签
    • 标题块在左上角，附带说明
  • parks布局注意事项：
    • 深棕色画布
    • 网格中使用大地色系磁贴
    • 每个磁贴包含图标+数值
    • 深色磁贴用浅色文本，浅色磁贴用深色文本
  • euclid布局注意事项：
    • 包豪斯调色板：红、蓝、黄、黑
    • 几何插图（抽象构图）
    • 衬线斜体标题带句号
    • 使用罗马数字标签

Conversion

转换

After writing SVG file, convert to PNG:
bash
rsvg-convert -w 2000 input.svg -o output.png
Then open:
bash
open output.png
编写完SVG文件后，转换为PNG：
bash
rsvg-convert -w 2000 input.svg -o output.png
然后打开文件：
bash
open output.png

Examples

示例

Decision tree input: "When should I use Perplexity vs ChatGPT?"
  • Detects: decision-tree layout
  • Question bubble: "When should I use Perplexity vs ChatGPT?"
  • Branch 1: "Use Perplexity" with research-focused bullets
  • Branch 2: "Use ChatGPT" with creative/coding bullets
Comparison input: "Compare React vs Vue for building web apps"
  • Detects: comparison layout
  • Two cards side by side with pros/features of each
Stat-block input: "Key findings from our user research study"
  • Detects: stat-block layout (default)
  • Classical sections with statistics and takeaway
Catalog input: "Show me the blues from Werner's color chart"
  • Detects: catalog layout
  • Table with color swatches, names, natural references, palette dots
Bars input: "Rank the 5 tallest mountains in Europe"
  • Detects: bars layout
  • Vertical bars sorted by height, tick marks for key elevations
Tiles input: "Show stats for 3 national parks: elevation, area, visitors, rainfall"
  • Detects: tiles layout
  • Grid of colored tiles with icons and values for each park
Gallery input: "Overview of the 6 books of Euclid's Elements"
  • Detects: gallery layout
  • Grid of geometric illustrations with captions
决策树输入： "我应该什么时候用Perplexity vs ChatGPT？"
  • 检测为：decision-tree布局
  • 问题气泡："我应该什么时候用Perplexity vs ChatGPT？"
  • 分支1："使用Perplexity"，附带研究相关的要点
  • 分支2："使用ChatGPT"，附带创意/编码相关的要点
对比输入： "对比React和Vue用于构建Web应用的差异"
  • 检测为：comparison布局
  • 两个并排卡片，分别展示各自的优点/特性
统计块输入： "用户研究的核心发现"
  • 检测为：stat-block布局（默认）
  • 古典章节布局，附带统计数据和结论
目录输入： "展示Werner色卡中的蓝色系"
  • 检测为：catalog布局
  • 表格包含色卡、名称、自然参考、调色板圆点
条形图输入： "排名欧洲最高的5座山脉"
  • 检测为：bars布局
  • 垂直条形按高度排序，关键海拔带刻度标记
磁贴输入： "展示3个国家公园的统计数据：海拔、面积、游客量、降雨量"
  • 检测为：tiles布局
  • 彩色磁贴网格，每个公园对应带图标和数值的磁贴
画廊输入： "欧几里得几何原本6卷概述"
  • 检测为：gallery布局
  • 几何插图网格，附带说明