Menu
生成精美的纯 HTML+CSS 信息图 — 时间线、流程、对比分析、SWOT、金字塔、漏斗、数据卡片、组织架构等。无需外部依赖，在沙箱 iframe 中渲染。适合将结构化信息以海报级视觉效果呈现。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
生成可交互的 HTML 可视化组件 — 算法动画、数据图表、概念演示、交互式教程等。当用户需要交互式演示、动画解释、数据探索、UI 原型等场景时触发，直接输出 html 代码块，前端会在安全沙箱中渲染为可交互组件。
用 Mermaid 语法生成可视化图表 — 流程图、架构图、序列图、ER 图、甘特图、状态图、思维导图、饼图等结构化图表。当用户要求画图/画架构图/画流程图等结构化可视化需求时触发，直接输出 mermaid 代码块，前端会自动转换为 HTML 并在沙箱 iframe 中渲染。
用 SVG 生成精美的架构图、流程图、时序图、层级图、对比图等结构化图表。直接输出 ```html 代码块（内含 SVG），前端在沙箱 iframe 中渲染。效果比 Mermaid 更美观、布局更灵活。
复盘当前对话——回顾任务过程、总结经验教训、主动沉淀可复用的 skill。当用户要求"复盘"、"反思"、"总结一下刚才"、"有什么值得记住的"时使用。
Use this skill whenever the user wants to create, read, edit, or manipulate Word documents (.docx files). Triggers include: any mention of 'Word doc', 'word document', '.docx', or requests to produce professional documents with formatting like tables of contents, headings, page numbers, or letterheads. Also use when extracting or reorganizing content from .docx files, inserting or replacing images in documents, performing find-and-replace in Word files, working with tracked changes or comments, or converting content into a polished Word document. If the user asks for a 'report', 'memo', 'letter', 'template', or similar deliverable as a Word or .docx file, use this skill. Do NOT use for PDFs, spreadsheets, Google Docs, or general coding tasks unrelated to document generation.
Use this skill whenever the user wants to do anything with PDF files. This includes reading or extracting text/tables from PDFs, combining or merging multiple PDFs into one, splitting PDFs apart, rotating pages, adding watermarks, creating new PDFs, filling PDF forms, encrypting/decrypting PDFs, extracting images, and OCR on scanned PDFs to make them searchable. If the user mentions a .pdf file or asks to produce one, use this skill.
| name | infographic |
| description | 生成精美的纯 HTML+CSS 信息图 — 时间线、流程、对比分析、SWOT、金字塔、漏斗、数据卡片、组织架构等。无需外部依赖，在沙箱 iframe 中渲染。适合将结构化信息以海报级视觉效果呈现。 |
| trigger | 用户要求生成信息图、数据海报、数据可视化展示、流程展示、对比分析图、组织架构图、漏斗图、雷达图、词云、路线图(roadmap)、SWOT 分析、四象限图、金字塔图、瀑布图、饼图统计海报，或任何需要精美排版的结构化信息展示 |
| do-not-trigger | 用户要求画流程图/架构图/ER图/序列图等技术图表（用 mermaid-diagram）；用户要求生成照片/插画/艺术画（用 generate_image）；用户要求做数据分析或写代码；需要交互/动画/按钮操作的组件（用 html-widget） |
| user-invocable | true |
| disable-auto-invoke | true |
| argument-hint | <信息图描述> |
| tags | ["信息图","infographic","数据可视化","海报","visualization","poster"] |
你现在帮用户生成 精美的 HTML+CSS 信息图。直接在回复中输出 ```html 代码块，前端会在安全沙箱 iframe 中自动渲染。
重要规则：
```html 代码块——一张完整的信息图，不要拆成多个<script>、不要引入外部 CDN、不要用 <canvas><!DOCTYPE>、<html>、<head>、<body>），顺序：<style> → HTML 内容核心美学：克制、留白、呼吸感。 信息图是一张海报，不是一个网页。每个元素都要有存在的理由，宁少勿多。
CSS 变量（已预注入 iframe）：
| 变量 | 值 | 用途 |
|---|---|---|
--abu-primary | #d97757 | 唯一强调色——用于编号、标签、线条、高亮 |
--abu-text | #29261b | 标题 & 正文 |
--abu-text-muted | #888579 | 副标题、描述、脚注 |
--abu-bg | #ffffff | 页面底色 |
--abu-bg-secondary | #f5f3ee | 卡片 / 区块底色 |
--abu-border | #e5e2db | 分割线、边框、轨道 |
数据色板（仅在多数据系列对比时使用）：
#4F46E5 · #0891B2 · #10B981 · #F59E0B · #EF4444 · #7C3AED
语义色（仅在明确表达趋势/状态时使用）：
#059669 文字 + #ecfdf5 底#DC2626 文字 + #fef2f2 底禁止：
#f8f6f3 → #fff）font-family: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
只用两种字重：400（正文）和 600（标题/数字）。禁用 300/500/700/800。
| 角色 | 字号 | 字重 | 颜色 |
|---|---|---|---|
| 主标题 | 24px | 600 | --abu-text |
| 副标题 | 14px | 400 | --abu-text-muted |
| 区块标题 | 16-18px | 600 | --abu-text |
| 正文 | 13-14px | 400 | --abu-text |
| 标签/脚注 | 11-12px | 400/600 | --abu-text-muted |
| 大数字（KPI） | 28-36px | 600 | --abu-text |
| 步骤编号 | 11px | 600 | --abu-primary |
排版规则：
GDP 总量 101.4 万亿font-variant-numeric: tabular-nums所有间距必须是 4 的倍数。禁止 5px、7px、15px 等非标值。
| 用途 | 值 |
|---|---|
| 元素内微间距 | 4px |
| 紧密行间 | 8px |
| 组内元素 | 12px |
| 卡片内边距 / 段落间 | 16px |
| 卡片间距 | 12-16px |
| 区块间距 | 32-48px |
| 头部上下 padding | 32px |
| 元素 | 值 |
|---|---|
| 小元素（标签、编号） | 4-6px |
| 卡片 | 8-10px |
| 大容器 | 12px |
一张信息图内最多 2 种圆角值。
1px solid var(--abu-border)，用于步骤之间、头部与正文之间width: 28px; height: 28px; border-radius: 50%; background: var(--abu-primary); color: #fff; font-size: 13px;border: 2px solid var(--abu-primary); background: #fff;（时间线节点）width: 5px; height: 5px; border-radius: 50%;（列表标记）width: 1.5px; background: var(--abu-border);（时间线轴）border-left: 3px solid var(--abu-primary); padding-left: 12px;（引用 / 重点段落）padding: 2px 8px; border-radius: 4px; font-size: 11px; background: #f0f0ff; color: #4338CA;height: 6px; border-radius: 3px; background: var(--abu-border); + 内填充禁止：
每张信息图遵循固定骨架：
<style>
.ig { max-width: 600px; margin: 0 auto; }
.hd { padding: 32px 0 24px; text-align: center; }
.hd h1 { font-size: 24px; font-weight: 600; color: var(--abu-text); margin: 0 0 6px; }
.hd p { font-size: 14px; color: var(--abu-text-muted); margin: 0; }
/* 正文区块样式 */
.ft { padding: 20px 0 4px; text-align: center; font-size: 11px; color: var(--abu-text-muted); border-top: 1px solid var(--abu-border); margin-top: 32px; }
</style>
<div class="ig">
<div class="hd">
<h1>标题</h1>
<p>副标题 / 说明</p>
</div>
<!-- 正文内容 -->
<div class="ft">Abu Infographic</div>
</div>
.ig 容器：max-width: 600px; margin: 0 auto; — 控制最大宽度，居中.hd 头部：居中标题 + 副标题，简洁干净，不要加背景色或装饰.ft 页脚：固定文案 Abu Infographic，细字灰色，上方一条分割线根据内容结构选择最合适的布局。可以在一张信息图中组合多种布局（如头部 KPI 卡片 + 中部时间线）。
左侧竖线 + 圆点 + 右侧内容。适合：发展历程、版本演进、里程碑。
::before 伪元素，1.5px 宽，var(--abu-border) 色--abu-primary）+ 标题 + 描述纵向列表，编号圆 + 标题 + 描述，步骤间用分割线分隔。适合：操作流程、开发流程。
--abu-primary 底白字border-bottom: 1px solid var(--abu-border) 分隔2-3 列网格，每格一张浅底卡片。适合：SWOT、特性对比、分类展示。
#f0f0ff、#edfcf4、#fffceb、#fef5f5）大数字 + 标签 + 趋势。适合：经营数据、统计概览。
var(--abu-bg-secondary) 底tabular-nums↑/↓ + 语义色标签横向行卡片，左侧序号 + 中间内容 + 右侧数值。适合：Top N、榜单。
var(--abu-border)左右两列，各有色彩标题头 + 内容列表。适合：方案对比、Before/After。
自上而下宽度递增（或递减），每层一个色条。适合：层级模型、转化漏斗。
横向进度条 + 标签 + 百分比。适合：完成度、占比分布。
var(--abu-border) 底，填充用 --abu-primaryhtml 代码块，所有内容合在一张信息图中.ig .hd .ft .st），不要用 .infographic-header-title-wrapper