PM-Shawn
PM-Shawn/Abu-Cowork
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/PM-Shawn/Abu-Cowork --skill infographic命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
基于 SOC 职业分类
| 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