liusai0820 产业链图谱生成技能 (Industry Chain Chart)
核心能力
将一句话输入（如"半导体产业链"、"宁德时代"、"新能源汽车"）转化为专业的产业链全景图谱高清 PNG 图片。
工作流程总览
用户输入 Query
│
▼
[STEP 1] 解析输入，确定产业链名称
│
▼
[STEP 2] 生成产业链 JSON 数据（你自己生成，不调外部 API）
│
▼
[STEP 3] 写入独立 HTML 文件（按 visual-spec 渲染）
│
▼
[STEP 4] Playwright 高清截图（3x 分辨率），输出 PNG
│
▼
返回图片路径给用户
STEP 1: 解析输入
分析用户输入，判断类型：
- 产业链名称（如"半导体产业链"、"新能源汽车"）→ 直接使用
- 公司名称（如"宁德时代"、"NVIDIA"）→ 先用 WebSearch 搜索公司主营业务，再映射到对应产业链名称
- 产品/技术名称（如"问界M9"、"ChatGPT"）→ 转换为标准产业链名称
输出：一个标准的产业链名称，必须以"产业链"三字结尾。
同时生成英文副标题（全大写），例如：
- "人工智能产业链" → "ARTIFICIAL INTELLIGENCE INDUSTRY CHAIN"
- "半导体产业链" → "SEMICONDUCTOR INDUSTRY CHAIN"
STEP 2: 生成产业链 JSON 数据
这是核心步骤。 你需要按照 references/prompt-template.md 中定义的规范，直接生成符合以下 Schema 的 JSON 数据。
JSON Schema（必须严格遵守）
{
"产业链": "string（产业链名称，以'产业链'结尾）",
"环节": [
{
"环节名称": "上游：xxx",
"layer": "upstream",
"环节概述": "string（50-80字）",
"子环节": [
{
"子环节名称": "string",
"环节概述": "string（50-80字）",
"子-子环节": [
{
"子-子环节名称": "string",
"环节概述": "string（50-80字）",
"代表公司": ["公司A", "公司B", "...（10-12家）"]
}
]
}
]
}
]
}
结构要求（硬性指标）
| 层级 | 数量要求 |
|---|---|
| 主要环节 | 3个（上游、中游、下游） |
| 每个主要环节的子环节 | 3-5个 |
| 每个子环节的子-子环节 | 3-8个 |
| 每个子-子环节的代表公司 | 10-12家 |
公司命名规则
详见 references/prompt-template.md 的第六步。核心原则：
- 中国公司用中文：宁德时代、比亚迪
- 有通用中文译名的国际公司用中文：英伟达、三星
- 中文译名不常用的用英文：ASML、Synopsys
- 禁止股票代码、交易所信息
CRITICAL: 生成前请 file_read 加载 references/prompt-template.md 获取完整的分析师角色设定和提示词。
STEP 3: 渲染 HTML
将 JSON 数据渲染为一个完全独立的 HTML 文件（无外部依赖）。
CRITICAL: 生成前请 file_read 加载 references/visual-spec.md 获取完整的 HTML/CSS 规范。
渲染要点
- 写入路径：
~/Desktop/{产业链名称}全景图谱.html - 固定宽度：1400px（为截图优化）
- 三段式结构：上游（靛蓝渐变）、中游（青色渐变）、下游（琥珀渐变）
- 流向指示：环节之间用 ▼ 符号连接
- 公司标签：按环节配色，用 · 分隔
- 标题：
{产业链名称}全景图谱+ 英文副标题（全大写） - 品牌水印：右上角"Created by lius" + 底部
github.com/liusai0820 - 背景色：
#f8f7f4（米白色，高级感）
STEP 4: Playwright 高清截图
使用 Playwright 将 HTML 截图为高清 PNG（3x 分辨率）。
截图命令
# 确保 playwright 已安装
npx playwright install chromium 2>/dev/null
# 使用 Node.js 脚本截图（3x 高清）
node -e "
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage({ deviceScaleFactor: 3 });
await page.setViewportSize({ width: 1500, height: 800 });
await page.goto('file://${HTML_PATH}');
// 等待内容渲染完成
await page.waitForTimeout(1000);
// 获取实际内容高度并截取全页
const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
await page.setViewportSize({ width: 1500, height: bodyHeight + 100 });
await page.waitForTimeout(500);
await page.screenshot({
path: '${PNG_PATH}',
fullPage: true,
type: 'png'
});
await browser.close();
console.log('截图完成: ${PNG_PATH}');
})();
"
路径变量
${HTML_PATH}：替换为 STEP 3 写入的 HTML 文件绝对路径${PNG_PATH}：替换为~/Desktop/{产业链名称}全景图谱.png
关键参数
- deviceScaleFactor: 3 — 3倍分辨率，确保图片清晰（最终 PNG 约 2-3MB）
- fullPage: true — 截取完整页面
截图备选方案
如果 Playwright 不可用，尝试以下顺序：
- puppeteer：
npx puppeteer screenshot file:///xxx.html /xxx.png --full-page - wkhtmltoimage：
wkhtmltoimage --width 1500 /xxx.html /xxx.png - 告知用户：直接提供 HTML 文件路径，让用户在浏览器中打开
输出规范
任务完成后，向用户报告：
- 图片路径：PNG 文件的绝对路径（在 Desktop）
- HTML 路径：HTML 源文件路径（方便二次编辑）
- 简要说明：图谱包含的环节数和公司数
错误处理
| 场景 | 处理方式 |
|---|---|
| 无法识别输入 | 用 AskUserQuestion 询问用户想分析什么产业 |
| 公司名映射失败 | 使用 WebSearch 搜索后重试 |
| Playwright 未安装 | 先运行 npx playwright install chromium |
| 截图失败 | 提供 HTML 文件路径作为 fallback |
使用示例
用户输入：/industry-chain-chart 半导体
执行过程：
- 识别为产业名称 → "半导体产业链"，副标题 → "SEMICONDUCTOR INDUSTRY CHAIN"
- 生成包含上中下游的完整 JSON
- 渲染为 1400px 宽的 HTML（靛蓝/青色/琥珀三段渐变配色）
- Playwright 3x 高清截图
输出：
产业链图谱已生成：
- 图片：~/Desktop/半导体产业链全景图谱.png
- HTML：~/Desktop/半导体产业链全景图谱.html
- 包含 3 个主要环节、12 个子环节、45 个细分领域、约 500 家企业