メニュー
为 FaMou 进化算法生成可行解的 Python 代码解生成可视化结果页面。当用户提到"FaMou 可视化"、"把这个解可视化"、"可行解结果展示"、"evolution 结果"、"evolve 可视化"，或者提供了 Python 代码形式的问题解（路径规划、排课、背包、TSP、调度、机器学习等）需要直观展示效果时，必须使用此技能。即使用户只说"帮我可视化这个解"、"画出来看看"、"展示一下结果"，只要上下文涉及进化算法、优化问题的解，也应立即触发此技能。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
交互式引导用户完成 FaMou 进化任务的完整流程：先通过结构化澄清循环产出 `problem.md`，再实现并验证 FaMou 实验的三个输入物料（`init.py`、`evaluator.py`、`prompt.md`）。当用户提到以下任意情形时触发：定义/澄清/创建 FaMou 任务、帮我写 problem.md、我想建一个进化任务、帮我准备 FaMou 实验物料、生成 init.py 或 evaluator.py、优化/ML/搜索问题需要进化求解。即使用户只说"帮我做个 FaMou 任务"或提供粗略想法，也应触发此技能并从澄清阶段开始。
数据分析技能，用于理解数据、分析数据、制作数据处理流程、汇总数据分析结果。当用户提到"分析数据"、"数据处理"、"数据探索"、"统计分析"、"数据清洗"、"数据汇总"、"制作数据报告"、"理解这份数据"、"看一下这个CSV/Excel/数据集"时，必须使用此技能。即使用户只说"帮我看看这个数据"、"分析一下"，只要上下文涉及数据文件或数据集，也应立即触发此技能。如果在FaMou问题定义过程中涉及到数据分析，也需要调用此技能。
管理 famou 进化实验任务的工作流技能。当用户提到"提交实验"、"查看实验状态"、"删除实验"、"获取实验结果"、"famou 实验"、"上传实验"、"config.yaml 实验"或需要使用 famou-ctl 管理实验任务时，必须使用此技能。即使用户只说"提交"或"跑实验"，只要上下文涉及 famou 平台，也应触发此技能。
SOC 職業分類に基づく
| name | famou-result-visualization |
| description | 为 FaMou 进化算法生成可行解的 Python 代码解生成可视化结果页面。当用户提到"FaMou 可视化"、"把这个解可视化"、"可行解结果展示"、"evolution 结果"、"evolve 可视化"，或者提供了 Python 代码形式的问题解（路径规划、排课、背包、TSP、调度、机器学习等）需要直观展示效果时，必须使用此技能。即使用户只说"帮我可视化这个解"、"画出来看看"、"展示一下结果"，只要上下文涉及进化算法、优化问题的解，也应立即触发此技能。 |
核心目标：拿到 Python 代码形式的优化问题解，直接理解其语义，生成一个直观展示解的效果的交互式 HTML 页面。
不是展示进化过程，而是展示解本身的结果——路径规划画路径、排课画课表、背包问题画装载情况、图着色画上色的图……
必须有：
可选补充：
若缺少必须项，直接询问用户补充。
直接阅读和理解用户提供的 Python 代码和问题描述，无需调用任何外部 API。
阅读代码，提取：
根据问题类型选择最合适的 viz_type：
| 问题类型 | viz_type | 视觉呈现 |
|---|---|---|
| TSP / VRP / 路径规划 | path_map | SVG 坐标系 + 节点连线路径 |
| 排课 / 时间表 | schedule_grid | 表格热力图，色块填充 |
| 背包 / 装箱 | packing_rect | SVG 矩形堆叠容器 |
| 图着色 / 社区检测 | graph_color | 节点着色图 |
| 作业调度 / 项目排期 | gantt | 横向甘特图 |
| 前后对比 / 多指标 | bar_compare | 对比柱状图 |
| 机器学习 / 神经网络 / 超参优化 | ml_viz | 网络结构图 / 训练曲线 / 超参热力图 |
| 其他 / 复杂策略 | custom | 关键指标仪表盘 + 文字说明 |
从代码中直接读取并整理渲染所需的具体数值，例如：
path_map：节点坐标列表、访问顺序、总距离schedule_grid：资源列表、时间槽、各分配的 (资源, 时间槽, 名称)packing_rect：容器尺寸、各物品的 (x, y, w, h, 标签, 价值)gantt：任务列表，每项含 (名称, 开始, 结束, 资源)直接编写并输出 HTML 文件到 famou_viz_result.html（或用户指定路径）。
┌──────────────────────────────────────────────────────────┐
│ [问题类型标签] 问题摘要 关键指标卡片行 │
├────────────────────────────────────┬─────────────────────┤
│ │ │
│ 主可视化区域（视觉中心，≥50%） │ 解的亮点列表 │
│ 路径图 / 课表 / 装箱图 / 甘特图 │ │
│ │ 评分 / 提升展示 │
├────────────────────────────────────┴─────────────────────┤
│ (可选) 进化前后对比 / 补充说明 │
└──────────────────────────────────────────────────────────┘
#030810，卡片 #080f1e，边框 #112240#00c8ff（蓝）搭配 #00ff88（绿）作为高亮Noto Sans SC，数字/代码 IBM Plex Mono（Google Fonts CDN）fadeUp（animation-delay 递增）<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FaMou 解可视化 — {问题名称}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/* 内联全部样式，不依赖外部 CSS */
/* 包含：CSS 变量、动画 keyframes、card/tag/tooltip/skeleton 等基础类 */
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect, useRef } = React;
// ── 从解中提取的数据（硬编码，来自对代码的分析）──
const SOLUTION_DATA = { /* ... */ };
// ── 可视化组件 ──
// 根据 viz_type 实现对应组件
// ── 页面骨架 ──
function App() { /* 指标卡片 + 主可视化 + 亮点列表 */ }
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
SOLUTION_DATA 常量，不执行 Python 代码，只是读取其中的数据字面量custom 仪表盘展示关键数值