【简介】
项目管理中甘特图是最常用的可视化工具之一，但 Excel 画甘特图费时费力、MS Project 学习成本太高。很多时候只需要一个轻量、可分享、无需安装的项目进度图，能看任务依赖、识别关键路径、追踪进度就够了。
本 Skill 将任务列表（名称、起止时间、负责人、依赖关系）转化为可交互的甘特图 HTML。提供 7 种视图模式——标准甘特图、里程碑导向、资源分配、依赖关系、周视图、季度概览、敏捷冲刺看板。支持时间轴缩放、进度更新、关键路径高亮等交互。
Gantt Craft — 甘特图生成 Skill
将项目任务列表转化为可交互的甘特图 HTML，支持进度追踪和依赖关系展示。
作者：wuwenbin-beijing-st
使用说明
运行此 Skill 后，按以下步骤操作：
- 输入任务数据：粘贴任务列表（名称、起止时间、负责人、进度、依赖关系）
- 选择甘特图类型：从映射表中选择最适合的视图
- 选择配色方案：选择进度状态配色主题
- 生成甘特图：输出交互式单文件 HTML
任务数据输入格式
任务名称,开始日期,结束日期,负责人,进度,依赖
需求分析,2024-01-01,2024-01-15,张三,100%,
UI设计,2024-01-10,2024-01-25,李四,80%,需求分析
前端开发,2024-01-20,2024-02-15,王五,60%,UI设计
后端开发,2024-01-20,2024-02-10,赵六,70%,需求分析
测试,2024-02-10,2024-02-25,张三,20%,前端开发,后端开发
或使用 JSON 格式：
[
{"id":"T1","name":"需求分析","start":"2024-01-01","end":"2024-01-15","owner":"张三","progress":1,"deps":[]},
{"id":"T2","name":"UI设计","start":"2024-01-10","end":"2024-01-25","owner":"李四","progress":0.8,"deps":["T1"]}
]
场景-模式映射表
| 项目场景 | 推荐模式 | 特点 |
|---|---|---|
| 通用项目计划 | standard（标准） | 周/月时间轴，全部任务展示 |
| 关键节点跟踪 | milestone（里程碑） | 突出里程碑节点，弱化日常任务 |
| 人力调配 | resource（资源分配） | 按负责人着色，查看各人工作量 |
| 复杂项目 | dependency（依赖关系） | 用箭头展示任务前后依赖及关键路径 |
| 短期冲刺 | compact（周视图） | 单周/双周紧凑视图 |
| 年度规划 | quarterly（季度概览） | 季度为单位，适合高层汇报 |
| 敏捷开发 | agile-sprint（敏捷冲刺） | 类看板 + 时间轴混合 |
配色方案库
进度状态色
- 未开始：
#9ca3af灰色 - 进行中：
#3b82f6蓝色 - 已完成：
#22c55e绿色 - 延期/风险：
#ef4444红色 - 里程碑：
#f59e0b金色菱形
负责人配色（自动分配）
#3b82f6 #ef4444 #22c55e #f59e0b #8b5cf6 #ec4899 #14b8a6 #f97316
4 套主题配色
1. 项目蓝
--bg: #ffffff
--text: #1f2937
--grid: #f1f5f9
--grid-line: #e2e8f0
--weekend: #f8fafc
--today: #fef3c7
--task-border: #e2e8f0
2. 暗色仪表盘
--bg: #0f172a
--text: #e2e8f0
--grid: #1e293b
--grid-line: #334155
--weekend: #1e293b
--today: #422006
--task-border: #475569
3. 纸质计划书
--bg: #fefcf6
--text: #3a3a3a
--grid: #fafaf9
--grid-line: #e5e5e5
--weekend: #fefcf6
--today: #fef3c7
--task-border: #d4d4d4
4. 极简灰白
--bg: #f8f9fa
--text: #212529
--grid: #ffffff
--grid-line: #dee2e6
--weekend: #f8f9fa
--today: #fff3cd
--task-border: #ced4da
交互增强包列表
基础交互
- 时间轴缩放（日/周/月切换）
- 任务条悬停详情
- 水平滚动查看全时间轴
- 里程碑标记
高级交互
- 按负责人/状态筛选任务
- 进度滑块（在线调整进度百分比）
- 关键路径高亮（最长路径任务标红边框）
- 任务依赖箭头显示/隐藏
- 导出为 PNG 图片
限制说明
- 单文件 HTML：所有输出均为单一 HTML 文件，CSS 和 JS 全部内联
- 零外部依赖：不加载任何 CDN 资源、字体、图标库
- 绘制方式：时间轴和任务条使用纯 CSS/SVG 绘制
- 系统字体栈：font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", sans-serif
- 浏览器兼容：Chrome/Firefox/Safari/Edge 最新两版
- 响应式布局：支持横向滚动，移动端可左右拖动查看
命令定义
/gantt-craft
主入口命令。输入任务数据，选择甘特图类型后生成交互式甘特图 HTML。
/gantt-template
生成空白甘特图模板供规划使用。包含填表示例和空行，用户可在线修改任务数据后生成。
文件结构
skills/gantt-craft/
├── SKILL.md
├── patterns/
│ ├── standard.json # 标准甘特图
│ ├── milestone.json # 里程碑导向
│ ├── resource.json # 资源分配视图
│ ├── dependency.json # 依赖关系图
│ ├── compact.json # 紧凑周视图
│ ├── quarterly.json # 季度概览
│ └── agile-sprint.json # 敏捷冲刺看板
└── templates/
├── base.html
├── standard.html
├── milestone.html
├── resource.html
├── dependency.html
├── compact.html
├── quarterly.html
└── agile-sprint.html