前言
你有没有遇到过这种情况：想让 AI 帮你把一堆数据做成漂亮的图表，但它只会在聊天框里输出一段 Markdown 表格？或者你想让它生成一个可以分享的可视化报告，但折腾半天也没搞定？
opbr-skills 就是为了解决这类问题而生的 ------ 一个面向 AI Agent 的技能扩展包，让你的 AI 助手一键解锁新能力。
什么是 AI Agent Skill？
在讲项目之前，我们先聊聊 Skill 这个概念。
目前主流的 AI Agent（如 Cursor、Windsurf、Claude 等）都支持一种机制：通过在项目目录里放置特定的指令文件，来扩展 AI 的行为和能力边界。这些文件就叫做 Skill。
一个 Skill 的本质，是一套结构化的"工作指南"：
perl
skills/
└── my-skill/
├── SKILL.md # 核心：告诉 AI 何时介入、如何工作
└── references/ # 可选：参考资料、模板、代码示例
└── examples.md只需将 Skill 文件夹放入你项目的 .agents/、.agent/、_agents/ 或 _agent/ 目录，AI Agent 就能自动识别并应用这套技能。
核心优势：
- 📦 无需编写代码：纯文本指令驱动，人人可写
- 🔌 即插即用：复制文件夹就能激活
- 🔁 可复用：一次定义，在所有项目中共享
- 🌍 开放共享：社区共建，共同受益
opbr-skills 是什么？
opbr-skills 是一个精心策划的 Skill 合集，目标很简单：让 AI 助手更聪明、更好用。
项目采用 MIT 开源协议，欢迎任何人使用和贡献。
bash
opbr-skills/
├── skills/
│ └── infographic-maker/ # 数据可视化技能
│ ├── SKILL.md
│ └── references/
│ └── chart-examples.md
└── README.md已有技能：infographic-maker 📊
目前项目收录了第一个核心技能 ------ infographic-maker ，它能将原始数据、统计数字、报告文本，自动转化为精美的交互式 HTML 信息图表。
触发场景
你只需用自然语言表达需求，AI 就会自动识别并激活这个技能：
- 📋 粘贴 CSV、表格或带数字的数据
- 💬 说"帮我做个图表"、"数据可视化"、"做成信息图"
- 📄 分享报告后希望生成视觉摘要
- 📊 想用漂亮的方式呈现统计数据
输出效果
生成的是完全自包含的单个 HTML 文件，无任何外部依赖（CDN 资源除外）：
| 特性 | 说明 |
|---|---|
| 图表类型 | 柱状图、折线图、饼图、散点图、面积图等 |
| 交互性 | 悬停提示、加载动画、数字滚动效果 |
| 响应式 | 移动端自适应布局 |
| 配色方案 | 内置专业/活泼/极简/自然四套配色 |
| 输出格式 | 单个 .html 文件，可直接分享 |
智能选图逻辑
技能内置了一套"数据 → 图表类型"的智能映射：
| 数据类型 | 最佳可视化方式 |
|---|---|
| A vs B vs C 比较 | 分组柱状图 |
| 时间序列趋势 | 折线图 / 面积图 |
| 构成占比 | 环形图 |
| 单一核心指标 | 大数字卡片 |
| 多指标概览 | 仪表盘（混合图表） |
| 流程 / 步骤 | 时间轴 |
AI 不会傻乎乎地把所有数据都图表化，而是选取最有说服力的 2-4 个视图，讲好数据故事。
代码示例：Dashboard 布局
技能内置了多套 HTML 模板，以仪表盘布局为例：
html
<!-- KPI 指标卡片 -->
<div class="kpi" style="--color: #4299e1">
<div class="kpi-icon">📈</div>
<div class="kpi-number">$2.4M</div>
<div class="kpi-label">Total Revenue</div>
<div class="kpi-change up">↑ 24% vs last year</div>
</div>配合 Chart.js，动态渲染折线图、环形图、水平柱状图、面积图，整个仪表盘一目了然。
质量保证
每次输出前，技能会做一次完整的质量自检：
- ✅ 所有数据准确表示（不会凭空捏造数字）
- ✅ 图表有清晰的标题和轴标签
- ✅ 颜色对比度达到 WCAG AA 标准
- ✅ 文件完全自包含（无断链）
- ✅ 动画在首次加载时正常运行
- ✅ 移动端宽度下响应正常
- ✅ 包含数据来源归属
快速上手
方式一：手动复制
将需要的 Skill 文件夹复制到项目的 Agent 目录：
markdown
your-project/
└── .agents/
└── skills/
└── infographic-maker/
├── SKILL.md
└── references/
└── chart-examples.md方式二：命令行安装（即将支持）
bash
npx skills add opbr/opbr-skills设计哲学
在设计这个项目时，我们遵循了几个核心原则：
- 零门槛：不需要懂编程，普通用户也能理解每一条指令的含义
- 确定性输出：明确规定输出格式（单文件 HTML），避免模型自由发挥导致结果不可用
- 防错设计：内置常见陷阱警告（如"不要用 3D 图表"、"饼图切片不超过 5 个"），从根源避免低质量输出
- 渐进增强：基础功能开箱即用，进阶技巧（动画计数器、甜甜圈中心文字插件等）作为可选扩展
写在最后
AI Agent 正在从"聊天工具"演变为"工作伙伴"，而 Skill 正是让这种演变真正落地的关键机制。opbr-skills 希望成为这个生态里一个有价值的公共资产------每多一个好的 Skill，就有更多人能从 AI 协作中受益。
如果这个项目对你有帮助，欢迎 ⭐ Star 支持，也欢迎提 Issue 或 PR 共建！
📌 项目地址 ：github.com/opbr/opbr-s...
📄 开源协议：MIT License