用AI打造专业年度规划甘特图：一套开箱即用的单文件HTML提示词方案

最近在做年度规划时，我尝试了 boardmix，但效果不太理想。于是，我用 Gemini-2.5-pro 反复调试，最终摸索出一套比较满意的提示词方案。分享出来，希望能抛砖引玉。

提示词如下：

---

目标

生成一个完整的、自包含的单文件 HTML 文档，用于展示年度项目规划。该文档需要实现一个带有层级结构和动态时间轴的甘特图视图。

核心技术规范

1. 技术栈：必须仅使用原生 HTML、CSS 和 JavaScript，严禁使用任何外部图表库或框架（如 Mermaid.js、Chart.js、D3.js、React、Vue 等）。
2. 数据源：整个图表必须是数据驱动的。所有项目信息需定义在一个名为 projectData 的 JavaScript 数组中，作为唯一的数据源（Single Source of Truth）。
3. 核心布局：必须采用单一的 HTML <table> 结构来构建整个视图，以确保左侧项目信息与右侧时间轴的每一行都能完美对齐并同步滚动。

一、HTML 结构与布局

• 整体结构：创建一个包含 <thead> 和 <tbody> 的 <table>。
• 列定义：表格应包含三列，使用 CSS table-layout: fixed 和百分比宽度进行控制：
  1. 规划事项（宽度约 25%）
  2. 负责人（宽度约 10%）
  3. 时间轴（宽度约 65%）
• 行结构（层级关系）：
  • 为每个主项目生成一个”项目标题行”，该行在”规划事项”列中合并单元格（colspan="2"），显示项目名称和负责人。
  • 在每个项目标题行下方，为该项目的每个子任务生成一个独立的”子项目行”。

二、JavaScript 动态渲染与逻辑

1. 数据处理：遍历 projectData 数组，按主项目对任务进行分组，动态生成 <tbody> 的所有 <tr> 元素。
2. 时间轴计算：基于 2024 年的总天数，为每个任务计算其在时间轴上的 left 和 width 百分比：
   • left = (任务开始日 - 年初) / 全年总天数 * 100
   • width = (任务持续天数) / 全年总天数 * 100
3. 文本处理函数：
   • getCleanTaskName(fullTaskName, projectId)：清理左侧表格中显示的子任务名称。通用规则是移除时间前缀（如 Q1:、一月:）、版本号（如 V1.0）、书名号（《》）。条件逻辑方面，如果 projectId 是 'p1'，则保留括号及其内部文本，仅移除编码；对于其他项目，则移除括号及其内容和所有编码。
   • getBarLabel(cleanTaskName)：为右侧进度条生成简短的核心词标签。内部维护一个关键词到缩略词的映射表（如 {'需求调研': '调研', '用户验收测试': 'UAT'}），遍历映射表匹配关键词并返回缩略词，从根本上避免文本溢出显示为省略号。
4. 交互功能：为每个进度条 <div> 绑定 mousemove 和 mouseleave 事件监听器，实现自定义工具提示（Tooltip），悬停时显示任务的完整名称、负责人和起止日期。

三、CSS 样式与视觉呈现

• 整体风格：专业、简洁、信息密度高。
• 紧凑布局：使用较小的基础字号（约 13px），减小 <td> 和 <th> 的垂直内边距以降低行高，使用较窄的进度条高度（约 20px）。
• 时间轴表头：在 <th> 内使用 CSS Grid 或 Flexbox 实现双层表头，上层为季度（Q1-Q4），下层为月份（1-12 月）。
• 时间轴背景：在 timeline-cell 上使用 CSS linear-gradient 创建垂直的月份分隔线。
• 层级与色彩：子项目行在”规划事项”列中需有左侧缩进；为每个主项目定义一种主色，应用于项目标题行的左边框和其所有子任务的进度条背景色；为项目标题行应用淡淡的同色系背景色，以在视觉上区分项目区块。
• 专业细节：使用专业字体组合（如 Inter、Noto Sans SC），为容器和进度条添加细微的 box-shadow。

四、输入数据

请使用以下数据来填充图表：

• 项目 x：xxxx
• 子项目（Deliverables）
  • D4.1: xxxx
  • D4.2: xxx
  • ……
• 时间点（Timeline）
  • Q1
    • D4.1: xxxx

最终产物要求

输出一个可以直接在浏览器中打开并运行的、功能完整的单一 .html 文件。

示例成品图：