雷达图轮播页 Luzai9226/radar-chart-page-skill

radar-chart-page

一个 agent skill：把一份数据、甚至一句话需求，变成一套能双击打开的雷达图轮播展示页——自带可视化编辑器、零依赖本地服务、数据校验脚本。

适用于 DeepSeek Harness（~/.dsh/skills/）和 Claude Code / Claude.ai（~/.claude/skills/）这类按 SKILL.md 加载技能的 agent。

展示页

| 可视化编辑器 | 深色轮播页 |
| 编辑助手 | 雷达图 |

它解决什么

人工做一页「多人多维对比」的雷达图展示页，通常要写 canvas 绘图、做轮播时间轴、再写一个改数据的界面。
这个 skill 把整套东西打包好了，agent 只需要负责最难自动化的一步：把现实世界的对象翻译成维度和分数。

拿到需求后它会自己完成：定维度 → 找资料 → 打分 → 找图/生成图 → 落盘整包 → 校验 → 浏览器截图确认。

产出长什么样

你的项目/ ├── index.html 轮播展示页：空格开始，←/→ 切换，F 全屏，P 粒子，1-6 高亮维度 ├── config.js 数据（纯 JSON 外置，编辑器读写这一份） ├── editor.html 可视化编辑器：增删人物、拖分数、上传照片、实时预览 ├── server.py 本地服务，Python 标准库，零 pip 依赖 ├── start.command 双击启动编辑器（macOS） ├── pic/ 人物照片 + MVP 全屏背景图 └── music.mp3 可选背景音乐

安装

DeepSeek Harness
git clone https://github.com/Luzai9226/radar-chart-page-skill.git ~/.dsh/skills/radar-chart-page

Claude Code
git clone https://github.com/Luzai9226/radar-chart-page-skill.git ~/.claude/skills/radar-chart-page

没有构建步骤，也没有 pip 依赖。目录名建议就叫 radar-chart-page（与 SKILL.md 的 name 一致）。

怎么用

装好之后直接用自然语言提需求，比如：

- 「这份小组评分 CSV 做成能轮播播放的雷达图，顺序按总分排，我还要能自己改分数」
- 「给 Linux 内核、Git、Python、PostgreSQL、Redis、Nginx 做一张雷达图对比页，维度你定」
- 「给 B 站七圣做个战力图」
- 「帮我给这六个 UP 主做六维评分展示页，配图你搞定」

不用指定维度、不用整理数据格式——skill 会引导 agent 定口径、凑内容。反过来，如果你想自己控制，也可以只让它做「落盘 + 校验」那一步。

目录结构

radar-chart-page/
├── SKILL.md 工作流 + 常见坑（agent 读的入口） ├── assets/ 成品引擎模板 │ ├── index.html 轮播展示页（canvas 雷达图 + 粒子 + MVP 背景） │ ├── editor.html 可视化编辑器 │ ├── server.py 本地服务，读写 config.js / pic/ │ ├── start.command 双击启动 │ └── config.example.js 数据格式示例 ├── references/ │ ├── config-schema.md 22 个 CONFIG 字段的语义、默认值、取值范围与硬性不变量 │ └── content-guide.md 维度怎么定、分怎么打、简介怎么写、图怎么找 ├── scripts/ │ ├── scaffold.py 数据 JSON → 整包（补引擎 + 生成 config.js + 图片归位） │ └── validate_config.py 校验长度/区间/色板/重名/图片匹配 └── evals/evals.json 触发与效果评测用例

scaffold.py 可以直接单独用：

python3 scripts/scaffold.py --dest ~/Desktop/我的雷达图 --data radar-data.json --images ~/Downloads/头像
python3 scripts/scaffold.py --dest /tmp/demo --demo # 先看个能跑的示例
python3 scripts/validate_config.py ~/Desktop/我的雷达图 # 交付前校验

数据文件格式见 SKILL.md 或 --help。

依赖

- Python 3（只用标准库）
- 浏览器（播放页和编辑器都是纯前端）
- 可选：本地 Chrome，用于 agent 自动截图验收
- 可选搭配其他 skill：联网取材、AI 生图、图片理解

评测

用两套真实任务做了 with-skill / without-skill 对照（每套各自独立跑）：

| 任务 | With Skill | Without Skill |
| 把 6 个小组的六维 CSV 做成可播放展示页 + 编辑器 | 7/7 断言通过 | 0/7（上下文耗尽，未产出文件） |
| 给 6 个开源项目自定维度做雷达图对比页 | 6/6 断言通过 | 0/6（同上） |

需要说明：基线失败的原因不是"做得差"，而是从零手写一页可轮播雷达图 + 编辑器会直接跑爆上下文、一个文件都没产出。这恰好是这个 skill 存在的理由，但不能当成质量对比看。

引擎来源与许可

assets/ 里的展示引擎（index.html、editor.html、server.py、start.command）衍生自开源项目 Rock-Radar（MIT License, Copyright © 2026 TablemanLiu），在其基础上做了数据外置（config.js）、可视化编辑器与本地服务等改造。

SKILL.md、references/、scripts/、evals/ 及本 README 由 Luzai9226 编写。

本项目整体以 MIT License 发布，见 LICENSE。

已知限制

- 编辑器色板和 index.html 里的 COLOR_PRESETS 是两份手工同步的副本，改色板要同时改。
- 人物名即图片文件名，重名会被 validate_config.py 拦下。
- 图片只认本地 pic/ 目录，不能直接写图片 URL。
- 字体走 CDN，离线时回退系统字体（不影响功能）。