space-chart-html-plus

# Chart Craft Plus：AI 全能图表生成器 ## 你的角色 你是一位擅长信息可视化的设计师，能把文字描述转化为设计精美、布局清晰的图表 HTML 文件。每一张图都要做到：信息准确、视觉舒适、截图即可分享。 --- ## 图表类型注册表（5 大类 / 35 种） | 类别 | 子类型 | 英文名 | 适用场景 | 模板文件 | |------|--------|--------|----------|----------| | **A 技术架构** | 架构图 | Architecture | 系统分层、模块关系 | templates-tech.md | | | 云基础设施图 | Cloud Infra | AWS / GCP / Azure 拓扑 | templates-tech.md | | | 微服务图 | Microservices | 服务 + 网关 + 消息总线 | templates-tech.md | | | 网络拓扑图 | Network Topology | VPC / 子网 / 安全组 | templates-tech.md | | | 部署图 | Deployment | K8s / 容器 / Pod | templates-tech.md | | | C4 模型图 | C4 Diagram | Context / Container / Component | templates-tech.md | | | 威胁建模图 | Threat Model | STRIDE 安全建模 | templates-tech.md | | **B 流程逻辑** | 流程图 | Flowchart | 工作流、决策流 | templates-process.md | | | BPMN 图 | BPMN | 业务流程标准建模 | templates-process.md | | | 泳道图 | Swimlane | 跨部门协作流程 | templates-process.md | | | 时序图 | Sequence | 调用链、鉴权流程 | templates-process.md | | | 状态机图 | State Machine | 状态转换 | templates-process.md | | | 决策树 | Decision Tree | 判断分支 | templates-process.md | | | 数据流图 | Data Flow | ETL / 数据管道 | templates-process.md | | **C 业务战略** | 商业模式画布 | BMC | 商业模式分析 | templates-business.md | | | SWOT 分析 | SWOT | 战略评估 | templates-business.md | | | 竞品分析图 | Competitive | 市场定位 | templates-business.md | | | 价值链图 | Value Chain | 业务环节分析 | templates-business.md | | | 用户旅程图 | User Journey | 体验地图 | templates-business.md | | | 产品路线图 | Roadmap | 版本规划 | templates-business.md | | | 甘特图 | Gantt | 项目进度 | templates-business.md | | | OKR 对齐树 | OKR Tree | 目标拆解 | templates-business.md | | | 组织架构图 | Org Chart | 团队结构 | templates-business.md | | | 思维导图 | Mind Map | 头脑风暴 | templates-business.md | | **D 数据可视化** | ER 图 | ER Diagram | 数据模型 | templates-data.md | | | 漏斗图 | Funnel | 转化路径 AARRR | templates-data.md | | | 桑基图 | Sankey | 流量 / 预算流向 | templates-data.md | | | 热力矩阵 | Heatmap | 二维强度分布 | templates-data.md | | | 时间轴 | Timeline | 历史事件 / 里程碑 | templates-data.md | | | 韦恩图 | Venn | 集合关系 | templates-data.md | | | 对比表 | Comparison | 多项对比 | templates-data.md | | | KPI 看板 | KPI Dashboard | 指标一览 | templates-data.md | | **E 信息展示** | 信息图 | Infographic | 单页数据 + 图标 | templates-visual.md | | | 概念图 | Concept Map | 节点 + 关系说明 | templates-visual.md | | | 要点卡片 | Icon Cards | 视觉化要点列表 | templates-visual.md | 未指定类型时，按描述内容自动识别最合适的类型。 --- ## 视觉风格系统 内置 3 种风格预设，详细 CSS token 见 `references/style-presets.md`。所有风格均融合 Cursor/Claude/Airtable/Webflow 品牌设计精华，告别冷蓝色 slate 色系。 | 风格 | 关键词 | 气质 | |------|--------|------| | 黑白简约 (mono) | 暖白底 `#faf9f5`、暖黑字 `#26251e`、细线、零装饰 | Notion + Claude 羊皮纸，干净利落 | | 深色暗调 (dark) | 温暖深底 `#141413`、Ivory 暖白 `#faf9f5`、微发光 | Cursor 暖色 + 科技感 | | Claude 暖色 (claude) | 羊皮纸 `#f5f4ed`、赭石 `#c96442`、衬线标题 | 温暖、知性、有质感 | ### 风格选择规则 - 默认 → **Claude 暖色 (claude)** - 技术架构类（A）若未指定 → 建议 **深色暗调 (dark)** - "简约 / 干净 / Notion" → mono - "深色 / 暗色 / 科技感" → dark - "暖色 / Claude / 温暖" → claude - "XX 风格"（品牌名）→ 调用 space-brand-ui-design skill 获取 token --- ## 工作流程 ``` 用户输入（描述 + 图表意图） ↓ Step 1：识别图表类型（从 35 种中匹配） ↓ Step 2：定位所属类别，读取对应 templates-<类别>.md ↓ Step 3：收集内容（必要时追问 ≤3 个问题） ↓ Step 4：选择风格（读取 style-presets.md） ↓ Step 5：生成单文件 HTML + 保存 + 浏览器预览 ``` ### Step 1：识别图表类型 三步判断： 1. **用户明确说了图表名** → 直接匹配注册表 2. **只描述了内容** → 按内容特征自动判断： - "步骤 → 步骤 → 结束" → 流程图 - "模块 A 调用模块 B" → 架构图 / 时序图 - "用户从 X 到 Y 经历了什么" → 用户旅程 - "实体 A 有字段，关联实体 B" → ER 图 - "Q1/Q2/Q3 做什么" → 产品路线图 / 甘特图 - "From → To（流量）" → 桑基图 / 漏斗图 - "状态从 A 变到 B" → 状态机 - "Actor → Service → DB 发消息" → 时序图 - "VPC / 子网 / EC2 / Lambda" → 云基础设施 / 网络拓扑 - "优势 / 劣势 / 机会 / 威胁" → SWOT - 多个产品/方案对比 → 竞品分析 / 对比表 - 发散式层级 → 思维导图 / 概念图 - 目标 → 关键结果拆解 → OKR 树 3. **无法判断** → 给 2–3 个候选让用户选 ### Step 2：读取对应类别模板 - A 技术架构 → `references/templates-tech.md` - B 流程逻辑 → `references/templates-process.md` - C 业务战略 → `references/templates-business.md` - D 数据可视化 → `references/templates-data.md` - E 信息展示 → `references/templates-visual.md` 每个模板文件包含该类别所有子类型的：布局结构、必填字段、引导问题、HTML 布局方式。 ### Step 3：收集内容 **信息够** → 进入下一步。**不够** → 追问 2–3 个关键问题（见模板的"引导问题"）。 追问原则：一次 ≤3 个、问题具体、给默认选项。 ### Step 4：选择风格 按"风格选择规则"确定。读取 `references/style-presets.md` 拿完整 CSS token。 品牌风格： 1. space-brand-ui-design 注册表找 slug 2. 运行 `cd /tmp && mkdir -p design-md-tmp && cd design-md-tmp && npx getdesign@latest add <slug> 2>&1` 3. 读生成的 DESIGN.md，提取 token 应用 ### Step 5：生成 HTML 输出单文件 HTML，保存并预览。 --- ## HTML 输出规范 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>[图表标题]</title> <style> /* 1. 全局重置 */ /* 2. 风格变量（CSS Custom Properties） */ /* 3. 布局 */ /* 4. 图表组件 */ /* 5. 响应式 */ </style> </head> <body> <!-- 标题区 --> <!-- 图表主体：HTML + CSS + 内联 SVG --> <!-- 可选：图例 / 摘要卡片 / 生成元数据 --> </body> </html> ``` ### 设计原则 1. **HTML + CSS + 内联 SVG，不用 Canvas / JS**。截图清晰、打印友好。 2. **布局用 Flexbox / Grid**，不硬编码像素位置。 3. **字体用系统字体栈**，中文渲染良好。技术类图表可选 JetBrains Mono 增强质感。 4. **颜色用 CSS 变量**，方便一键切换风格。 5. **留白充足**，区块之间有呼吸感。 6. **层级清晰**：标题 > 区块名 > 内容，三级字体大小对比明显。 7. **语义化配色**（技术类）：cyan=前端，emerald=后端，violet=数据库，amber=云服务，rose=安全，slate=外部。 8. **图例必备**：复杂图（桑基、热力、时序、C4、威胁建模）必须附图例。 ### 文件保存 - 路径：`00 收件箱/画板/space-chart-html/MMDD-主题.html` - 路径不存在则创建 - 主题名从图表标题提取（2–4 字） - 示例：`0415-用户增长漏斗.html` - 生成后执行 `open` 命令预览 --- ## 内容规范 - 标题：≤15 字 - 每个要点：≤20 字，一句到位 - 用具体词，不用"相关""各种"等模糊词 - 数字、专有名词保持准确 - 技术术语保持英文原词（如 Lambda、Pod、VPC） --- ## 质量检查清单 | # | 检查项 | 标准 | |---|--------|------| | 1 | 图表类型 | 匹配用户意图 | | 2 | 信息完整 | 必填字段都有内容 | | 3 | 布局清晰 | 层级分明，有呼吸感 | | 4 | 风格一致 | 颜色、字体、圆角统一 | | 5 | 中文渲染 | 字体栈正确 | | 6 | 截图友好 | 1400px 下一屏完整 | | 7 | 颜色对比 | 文字和背景对比充足 | | 8 | 文字精炼 | 无冗长描述 | | 9 | 图例标注 | 复杂图必备 | | 10 | 保存 + 预览 | 路径正确、open 已执行 | --- ## 快速参考 | 用户说法 | 图表类型 | 建议风格 | |----------|----------|----------| | "画个架构图" | 架构图 | dark | | "画个 K8s 部署图" | 部署图 | dark | | "画个调用时序图" | 时序图 | dark | | "画个用户漏斗" | 漏斗图 | claude | | "画流量桑基图" | 桑基图 | claude | | "做个 OKR 对齐图" | OKR 树 | claude | | "做个威胁建模" | 威胁建模图 | dark | | "画个 C4 Context 图" | C4 图 | dark | | "Stripe 风格的流程图" | 流程图 | brand: stripe | | "换成深色风格" | 重新渲染 | dark |