infographic

生成精美的纯 HTML+CSS 信息图 — 时间线、流程、对比分析、SWOT、金字塔、漏斗、数据卡片、组织架构等。无需外部依赖，在沙箱 iframe 中渲染。适合将结构化信息以海报级视觉效果呈现。

Repository: PM-Shawn/Abu-Cowork
Letzte Quellaktivität: 11. Juli 2026 um 13:15
Erkannte Sprache von SKILL.md: Chinesisch
Sterne: 369
Forks: 85

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.

Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.

npx skills add https://github.com/PM-Shawn/Abu-Cowork --skill infographic

Der Befehl bleibt in einer Zeile. Scrollen Sie horizontal, um ihn vor dem Kopieren vollständig zu prüfen.

Sie bevorzugen eine lokale Kopie? Laden Sie die Dateien herunter, die SkillsMP derzeit vorliegen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md

Quellanweisungen · Schreibgeschützte Vorschau

Zurück zur Suche Zurück zur Installation

变量

值

用途

--abu-primary

#d97757

唯一强调色——用于编号、标签、线条、高亮

--abu-text

#29261b

标题 & 正文

--abu-text-muted

#888579

副标题、描述、脚注

--abu-bg

#ffffff

页面底色

--abu-bg-secondary

#f5f3ee

卡片 / 区块底色

--abu-border

#e5e2db

分割线、边框、轨道

变量

值

用途

--abu-primary

#d97757

唯一强调色——用于编号、标签、线条、高亮

--abu-text

#29261b

标题 & 正文

--abu-text-muted

#888579

副标题、描述、脚注

--abu-bg

#ffffff

页面底色

--abu-bg-secondary

#f5f3ee

卡片 / 区块底色

--abu-border

#e5e2db

分割线、边框、轨道

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

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

角色	字号	字重	颜色
主标题	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`

用途	值
元素内微间距	4px
紧密行间	8px
组内元素	12px
卡片内边距 / 段落间	16px
卡片间距	12-16px
区块间距	32-48px
头部上下 padding	32px

元素	值
小元素（标签、编号）	4-6px
卡片	8-10px
大容器	12px

infographic

Installationsoptionen

Quelldateien prüfen

设计体系

审美原则

配色

设计体系

审美原则

配色

字体

间距（4px 网格）

圆角

装饰手法（仅用这些，不要发明新的）

页面结构

布局类型参考

时间线

流程步骤

卡片网格

KPI 数据

排名列表

对比（双栏）

金字塔 / 漏斗

进度条

注意事项

infographic

Quellinformationen

Installationsoptionen

Quelldateien prüfen

Mehr aus diesem Repository

Mehr aus diesem Repository

设计体系

审美原则

配色

设计体系

审美原则

配色

字体

间距（4px 网格）

圆角

装饰手法（仅用这些，不要发明新的）

页面结构

布局类型参考

时间线

流程步骤

卡片网格

KPI 数据

排名列表

对比（双栏）

金字塔 / 漏斗

进度条

注意事项