chore: import zh skill infographic-syntax-creator

README.wehub.md

@@ -0,0 +1,9 @@
+# WeHub 来源说明
+
+- Skill 名称：`infographic-syntax-creator`
+- 中文类目：AntV信息图组件开发
+- 上游仓库：`antvis__infographic`
+- 上游路径：`skills/infographic-syntax-creator/SKILL.md`
+- 上游链接：https://github.com/antvis/infographic/blob/HEAD/skills/infographic-syntax-creator/SKILL.md
+- 本仓库为 WeHub 中文 Skill 汉化包，基于 skill 市场筛选 Top200 清单整理
+- 原作者、版权和许可证信息以上游仓库为准

SKILL.md

@@ -0,0 +1,32 @@
+---
+name: infographic-syntax-creator
+description: 仅生成 AntV Infographic 语法。当用户要求将笔记、大纲、报告或其他用户内容转换为 Infographic DSL，并涉及模板选择、数据结构化和主题提示时使用。不适用于 HTML 渲染或 TS/TSX 组件实现。
+---
+
+# Infographic 语法生成器
+
+## 概述
+
+根据 `references/prompt.md` 中的规则，将用户内容生成 AntV Infographic 语法输出。
+
+## 工作流程
+
+1. 阅读 `references/prompt.md`，了解语法规则、模板和输出约束。
+2. 如果用户明确指定了一个有效的模板或模板系列，则优先使用；否则根据结构（序列/列表/对比/层级/图表）选择最匹配的模板。
+3. 提取用户的关键结构：标题、描述、条目、层级关系、指标；如有缺失则进行推断。
+4. 以 `references/prompt.md` 为格式基准，编写语法。
+5. 在每次输出中遵守以下硬性约束：
+   - 输出为单个围栏代码块，仅包含语法，无额外文本。
+   - 第一行为 `infographic <模板名称>`。
+   - 使用两个空格缩进；键值对格式为 `key value`；数组使用 `-`。
+   - 除非用户明确要求翻译或双语输出，否则所有面向用户的文本保持与用户输入相同的语言。
+   - 默认情况下，尽量为语义数据项生成 `icon`。如果某个列表项、步骤、节点、对比分支或对比子项具有明确的概念，则包含 `icon`，除非用户明确要求纯文本输出或模板为纯图表类型。
+   - 如果所选模板名称或条目风格暗示使用图标，则将 `icon` 视为每个主要数据项上的预期字段而非可选字段。
+   - 当 `icon` 以关键字短语形式书写时，单词之间用空格分隔，而非连字符。确切的图标 ID 可保留其原生标点符号。
+   - `compare-binary-*` / `compare-hierarchy-left-right-*` 必须恰好有两个根节点，实际的比较点属于每个根节点的 `children`。
+   - `compare-swot` / `compare-quadrant-*` 遵循各自的根节点数量规则，不应强制适配二元结构。
+
+## 说明
+
+- 该技能仅返回语法。如果用户需要渲染后的 HTML 文件或完整的交付物，请优先使用 `infographic-creator`。
+- `references/prompt.md` 中的模板列表具有代表性而非穷举性；优先选择结构上正确的已注册模板，而不是强行匹配不合适的模板。

references/prompt.md

@@ -0,0 +1,445 @@
+# 信息图语法生成规范
+
+本文件用于指导生成符合 AntV Infographic 语法规范的纯文本输出。
+
+## Critical: Output Language Follows User Input
+
+- 本规范和示例即使主要使用中文书写，也不能据此把英文用户输入翻译成中文。
+- The language used in this prompt or in the examples must never override the user's input language.
+- 对所有面向读者的文案，优先跟随最新用户输入的主要语言，而不是跟随本文件的书写语言。
+- Example: if the user writes in English, output `title` / `desc` / `label` in English too, such as `Product Roadmap`, not `产品路线图`.
+- 示例：如果用户输入是中文，输出中的 `title` / `desc` / `label` 也必须保持中文，例如写 `产品路线图`，不要改成 `Product Roadmap`。
+
+## 目录
+
+- 目标与输入输出
+- 语法结构
+- 语法规范
+- 语法示例
+- 可用模板
+- 模板选择建议
+- 生成流程
+- 输出格式
+- 自检清单
+
+## 目标与输入输出
+
+- **输入**：用户的文字内容或需求描述
+- **输出**：仅包含 Infographic 语法的单个 fenced 代码块
+- **职责边界**：本规范只负责生成语法，不负责生成 HTML 文件、React/TSX 组件或模板源码
+
+## 语法结构
+
+信息图语法由入口与块结构组成：
+
+- **入口**：`infographic <template-name>`
+- **块**：`data` / `theme`
+- **缩进**：块内层级统一使用两个空格
+
+## 语法规范
+
+### AntV Infographic 语法
+
+AntV Infographic 语法是一种基于 YAML 的自定义 DSL，用于描述信息图渲染配置。它使用缩进表达结构，适合 AI 直接生成并流式输出。核心信息包括：
+
+1. template：用模板表达信息结构。
+2. data：信息图数据，包含 `title`、`desc` 和主数据字段。
+3. theme：主题配置，包含 `palette`、字体、风格化等。
+
+例如：
+
+```infographic
+infographic list-row-horizontal-icon-arrow
+data
+  title Title
+  desc Description
+  lists
+    - label Label
+      value 12.5
+      desc Explanation
+      icon document text
+theme
+  palette #3b82f6 #8b5cf6 #f97316
+```
+
+### 语法规则
+
+- 第一行必须是 `infographic <template-name>`。
+- 使用 `data` / `theme` 块。
+- 键值对写法是 `键 空格 值`；对象数组使用 `-` 作为条目前缀并进行换行。
+- `title`、`desc`、`label` 以及其他面向读者的文案，默认保持与用户输入语言一致；除非用户明确要求，否则不要擅自翻译成另一种语言。
+- 如果用户输入混合多种语言，优先保持原始专有名词、产品名和缩写不变，并让补全文案跟随主要输入语言。
+- `icon` 可以使用精确图标 ID，例如 `mingcute/server-line`，也可以使用语义关键词短语，例如 `star fill`。
+- 如果使用语义关键词短语，多个关键词之间使用空格分隔，不要使用短横线；例如写 `rocket launch`，不要写 `rocket-launch`。
+- 对 `lists`、`sequences`、`nodes`、`items` 以及 `compares`/`children` 下的语义型数据项，默认应补充 `icon`；不要因为字段是可选就省略。
+- 如果模板名或视觉样式明显依赖图标（例如名称里包含 `icon`，或该模板本身就是图标型卡片/节点），则每个主要数据项都应包含 `icon`。
+- 如果不确定精确图标 ID，也要优先写一个简洁的语义关键词，例如 `rocket`、`shield`、`database`、`users`、`chart line`，而不是省略 `icon` 字段。
+- 仅在纯图表类数据点、纯数值序列，或用户明确要求极简文本版时，才可以省略 `icon`。
+- `value` 尽量使用纯数值；数值单位优先放在 `label` 或 `desc` 中表达。
+- `palette` 推荐使用行内简单数组写法，例如 `palette #4f46e5 #06b6d4 #10b981`。
+- `palette` 中的颜色值是裸值，不加引号，不加逗号。
+- `data` 只放一个与模板匹配的主数据字段，避免同时混用 `lists`、`sequences`、`compares`、`values`、`root`、`nodes`。
+
+主数据字段选择规则：
+
+- `list-*` → `lists`
+- `sequence-*` → `sequences`，可选 `order asc|desc`
+- `sequence-interaction-*` → `sequences` + `relations`
+  - `sequences` 表示泳道列表
+  - 每个泳道必须包含 `label`
+  - 每个泳道的 `children` 表示节点列表
+  - `children` 下的每一项都必须写成对象条目，并包含 `label`
+  - 节点可选 `id`、`icon`、`step`、`desc`、`value`
+  - `step` 用于表示时间层级；相同 `step` 处于同一高度
+- `compare-*` → `compares`
+  - `compare-binary-*` / `compare-hierarchy-left-right-*`
+    - `compares` 第一层必须且只能有两个根节点，分别表示对比双方
+    - 两个根节点都应包含 `children`
+    - 真正的对比项写在各自的 `children` 下
+    - `children` 下的每一项都必须写成对象条目，并包含 `label`
+    - 即使每一侧只有 1 个指标，也要写成 `children` 内含 1 个对象条目
+  - `compare-swot`
+    - `compares` 可直接放多个根节点
+    - 每个根节点下可选 `children`
+  - `compare-quadrant-*`
+    - `compares` 直接放 4 个象限根节点
+- `hierarchy-structure` → `items`
+- `hierarchy-*` → 单一 `root`，通过 `children` 递归嵌套
+- `relation-*` → `nodes` + `relations`
+  - 简单关系也可直接用箭头语法表达关系
+- `chart-*` → `values`
+  - `chart-line-plain-text` / `chart-bar-plain-text` / `chart-column-simple` 都使用单条有序 `values`
+  - 每个数据点使用 `label` 表示类目，使用 `value` 表示数值
+  - 折线图的顺序由 `values` 中条目的排列顺序表达
+- 结构无法明确判断时，再用 `items` 兜底
+
+主题规则：
+
+- `theme` 用于自定义主题，例如 `palette`、`base`、`stylize`
+- 使用 `theme.base.text.font-family` 指定全局字体，如 `851tegakizatsu`、`AliPuHuiTi`
+- 使用 `theme.stylize` 选择内置风格并传参
+  - `rough`：手绘效果
+  - `pattern`：图案填充
+  - `linear-gradient` / `radial-gradient`：渐变风格
+- 仅输出 Infographic 语法本身，不输出 JSON、解释性文字或额外 Markdown 段落
+
+## 数据语法示例
+
+- `list-*` 模板
+
+```infographic
+infographic list-grid-badge-card
+data
+  title Feature List
+  lists
+    - label Fast
+      icon flash fast
+    - label Secure
+      icon shield check
+```
+
+- `sequence-*` 模板
+
+```infographic
+infographic sequence-ascending-steps
+data
+  title 发布流程
+  sequences
+    - label 需求确认
+      icon clipboard check
+    - label 开发实现
+      icon code
+    - label 发布上线
+      icon rocket
+  order asc
+```
+
+- `sequence-interaction-*` 模板
+
+```infographic
+infographic sequence-interaction-compact-animated-badge-card
+data
+  title 登录校验流程
+  sequences
+    - label 用户
+      icon user
+      children
+        - label 发起登录
+          id user-login
+          step 0
+          icon login
+        - label 收到结果
+          id user-result
+          step 2
+          icon inbox check
+    - label 服务端
+      icon server
+      children
+        - label 校验凭证
+          id server-verify
+          step 1
+          icon shield check
+        - label 返回结果
+          id server-return
+          step 2
+          icon send
+  relations
+    user-login - 提交账号密码 -> server-verify
+    server-verify - 生成结果 -> server-return
+    server-return - 返回结果 -> user-result
+```
+
+- `hierarchy-*` 模板
+
+```infographic
+infographic hierarchy-tree-curved-line-rounded-rect-node
+data
+  title 组织结构
+  root
+    label 公司
+    children
+      - label 产品部
+      - label 技术部
+```
+
+- `compare-swot` 模板
+
+```infographic
+infographic compare-swot
+data
+  title 产品 SWOT
+  compares
+    - label Strengths
+      icon trophy
+      children
+        - label 品牌认知高
+          icon star
+    - label Weaknesses
+      icon alert circle
+      children
+        - label 成本压力大
+          icon wallet
+```
+
+- `compare-quadrant-*` 模板
+
+```infographic
+infographic compare-quadrant-quarter-simple-card
+data
+  title 任务优先级
+  compares
+    - label 高价值低成本
+    - label 高价值高成本
+    - label 低价值低成本
+    - label 低价值高成本
+```
+
+- `compare-*` 模板
+
+使用 `children` 形成对比层级，其中每个根节点表示一个对比对象，子节点表示该对象的具体指标，例如：
+
+```infographic
+infographic compare-binary-horizontal-simple-fold
+data
+  title 年度大促优惠
+  compares
+    - label 平日
+      icon calendar
+      children
+        - label 原价 500
+          icon tag
+        - label 最高 9 折
+          icon percent
+    - label 大促
+      icon megaphone
+      children
+        - label 实际支付 450
+          icon wallet
+        - label 最高 8 折
+          icon badge percent
+```
+
+- `chart-*` 模板
+
+values 下平铺每个数据项，例如：
+
+```infographic
+infographic chart-line-plain-text
+data
+  title 模型 A 准确率变化
+  desc 第 4 周提升最明显
+  values
+    - label Week1
+      value 86.5
+    - label Week2
+      value 87.3
+    - label Week3
+      value 89.1
+    - label Week4
+      value 91.2
+theme
+  palette #4f46e5 #db2777 #14b8a6
+```
+
+- `relation-*` 模板
+
+```infographic
+infographic relation-dagre-flow-tb-simple-circle-node
+data
+  title 系统关系
+  nodes
+    - label API
+      icon api
+    - id db
+      label DB
+      icon database
+  relations
+    API - 读写 -> db
+```
+
+- 兜底 `items` 示例
+
+如果不明确使用哪个数据字段，或者信息结构比较简单，可以直接用 `items` 列表表达，例如：
+
+```infographic
+infographic list-row-horizontal-icon-arrow
+data
+  title 要点总结
+  items
+    - label 效率优先
+      desc 聚焦关键动作
+    - label 结果导向
+      desc 输出可执行结论
+```
+
+### 可用模板
+
+以下列出常用模板名，而不是完整模板全集；实际输出时首行必须写 `infographic <template-name>`：
+
+- chart-bar-plain-text
+- chart-column-simple
+- chart-line-plain-text
+- chart-pie-compact-card
+- chart-pie-donut-pill-badge
+- chart-pie-donut-plain-text
+- chart-pie-plain-text
+- chart-wordcloud
+- compare-binary-horizontal-badge-card-arrow
+- compare-binary-horizontal-simple-fold
+- compare-binary-horizontal-underline-text-vs
+- compare-hierarchy-left-right-circle-node-pill-badge
+- compare-quadrant-quarter-circular
+- compare-quadrant-quarter-simple-card
+- compare-swot
+- hierarchy-mindmap-branch-gradient-capsule-item
+- hierarchy-mindmap-level-gradient-compact-card
+- hierarchy-structure
+- hierarchy-tree-curved-line-rounded-rect-node
+- hierarchy-tree-tech-style-badge-card
+- hierarchy-tree-tech-style-capsule-item
+- list-column-done-list
+- list-column-simple-vertical-arrow
+- list-column-vertical-icon-arrow
+- list-grid-badge-card
+- list-grid-candy-card-lite
+- list-grid-ribbon-card
+- list-row-horizontal-icon-arrow
+- list-sector-plain-text
+- list-waterfall-badge-card
+- list-waterfall-compact-card
+- list-zigzag-down-compact-card
+- list-zigzag-down-simple
+- list-zigzag-up-compact-card
+- list-zigzag-up-simple
+- relation-dagre-flow-tb-animated-badge-card
+- relation-dagre-flow-tb-animated-simple-circle-node
+- relation-dagre-flow-tb-badge-card
+- relation-dagre-flow-tb-simple-circle-node
+- sequence-ascending-stairs-3d-underline-text
+- sequence-ascending-steps
+- sequence-circular-simple
+- sequence-color-snake-steps-horizontal-icon-line
+- sequence-cylinders-3d-simple
+- sequence-filter-mesh-simple
+- sequence-funnel-simple
+- sequence-horizontal-zigzag-underline-text
+- sequence-mountain-underline-text
+- sequence-pyramid-simple
+- sequence-roadmap-vertical-plain-text
+- sequence-roadmap-vertical-simple
+- sequence-snake-steps-compact-card
+- sequence-snake-steps-simple
+- sequence-snake-steps-underline-text
+- sequence-stairs-front-compact-card
+- sequence-stairs-front-pill-badge
+- sequence-timeline-rounded-rect-node
+- sequence-timeline-simple
+- sequence-zigzag-pucks-3d-simple
+- sequence-zigzag-steps-underline-text
+- sequence-interaction-default-badge-card
+- sequence-interaction-default-animated-badge-card
+- sequence-interaction-default-compact-card
+- sequence-interaction-default-capsule-item
+- sequence-interaction-default-rounded-rect-node
+
+## 模板选择建议
+
+- 严格顺序、步骤推进、阶段演进 → `sequence-*`
+- 多角色或多系统交互 → `sequence-interaction-*`
+- 并列要点列举 → `list-row-*` / `list-column-*` / `list-grid-*`
+- 双方对比、方案对比、前后对比 → `compare-*`
+  - 先确定双方是谁
+  - 再为双方分别展开 `children`
+- SWOT 分析 → `compare-swot`
+- 象限分析 → `compare-quadrant-*`
+- 层级树结构 → `hierarchy-tree-*`
+- 统计趋势、单条序列变化 → `chart-line-plain-text`
+- 统计对比、单组数值比较 → `chart-bar-plain-text` / `chart-column-simple`
+- 节点关系、流程依赖 → `relation-*`
+- 词频主题展示 → `chart-wordcloud`
+- 思维导图 → `hierarchy-mindmap-*`
+
+## 生成流程
+
+1. 提取用户内容中的标题、描述、条目、顺序和层级关系。
+2. 如果用户明确指定了模板名，且该模板与内容结构兼容，则优先使用该模板。
+3. 如果用户只指定了模板系列，则在该系列内选择最匹配的模板。
+4. 否则判断信息结构，选择匹配的模板系列。
+5. 组织 `data`，只保留与模板对应的主数据字段。
+6. 为语义明确的主要数据项补充 `icon`；如果模板本身偏图标化，默认不要省略。
+7. 保持 `title`、`desc`、`label` 等文案与用户输入语言一致；仅在用户明确要求时做翻译或双语化。
+8. 用户指定风格、配色、字体时，再补充 `theme`。
+9. 输出单个代码块，内容只包含 Infographic 语法。
+
+## 输出格式
+
+只输出一个代码块，不添加任何解释性文字：
+
+```infographic
+infographic list-row-horizontal-icon-arrow
+data
+  title 标题
+  desc 描述
+  lists
+    - label 条目
+      value 12.5
+      desc 说明
+      icon document text
+theme
+  palette #3b82f6 #8b5cf6 #f97316
+```
+
+## 自检清单
+
+输出前检查以下事项：
+
+- 首行是否为 `infographic <template-name>`
+- 是否只使用了一个与模板匹配的主数据字段
+- 主要数据项是否都带有合理的 `icon`，尤其是列表、步骤、节点、对比项与名称中含 `icon` 的模板
+- 文案语言是否与用户输入语言一致，且没有无故翻译
+- `palette` 是否为裸颜色值，且没有引号和逗号
+- `sequence-interaction-*` 的泳道节点是否都写成 `children -> - label ...`
+- `compare-binary-*` / `compare-hierarchy-left-right-*` 是否只有两个根节点，且两侧内容都放在各自的 `children` 下
+- `children` 下的每一项是否都显式包含 `label`
+- `chart-line-plain-text` 是否使用单条有序 `values`
+- 输出中是否没有 JSON、解释文字或多余代码块