Skip to content

Commit 1ec6060

Browse files
AarebeccaAarebecca
committed
feat: add infographic syntax generator skill, update prompt
1 parent 6b6b431 commit 1ec6060

File tree

3 files changed

+152
-3
lines changed

3 files changed

+152
-3
lines changed

‎.skills/infographic-syntax-generator/SKILL.md‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
---
2+
name: infographic-syntax-generator
3+
description: Generate AntV Infographic syntax outputs. Use when asked to turn user content into the Infographic DSL (template selection, data structuring, theme), or to output `infographic <template>` plain syntax.
4+
---
5+
6+
# Infographic Syntax Generator
7+
8+
## Overview
9+
10+
Generate AntV Infographic syntax output from user content, following the rules in `references/prompt.md`.
11+
12+
## Workflow
13+
14+
1. Read `references/prompt.md` for syntax rules, templates, and output constraints.
15+
2. Extract the user's key structure: title, desc, items, hierarchy, metrics; infer missing pieces if needed.
16+
3. Select a template that matches the structure (sequence/list/compare/hierarchy/chart).
17+
4. Compose the syntax using `references/prompt.md` as the formatting baseline.
18+
5. Preserve hard constraints in every output:
19+
- Output is a single `plain` code block; no extra text.
20+
- First line is `infographic <template-name>`.
21+
- Use two-space indentation; key/value pairs are `key value`; arrays use `-`.
22+
- Compare templates (`compare-*`) must have exactly two root nodes with children.

‎.skills/infographic-syntax-generator/references/prompt.md‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
# 信息图语法生成规范
2+
3+
本文件用于指导生成符合 AntV Infographic 语法规范的纯文本输出。
4+
5+
## 目录
6+
- 目标与输入输出
7+
- 语法结构
8+
- 语法规范
9+
- 模板选择
10+
- 生成流程
11+
- 输出格式
12+
- 常见问题与最佳实践
13+
14+
## 目标与输入输出
15+
16+
- **输入**：用户的文字内容或需求描述
17+
- **输出**：仅包含 Infographic 语法的 `plain` 代码块
18+
19+
## 语法结构
20+
21+
信息图语法由入口与块结构组成：
22+
23+
- **入口**：`infographic <template-name>`
24+
- **块**：`data` / `theme`
25+
- 块内层级使用两个空格缩进
26+
27+
## 语法规范
28+
29+
- 第一行必须是 `infographic <template-name>`，模板从下方列表中选择
30+
- 键值对使用「键 空格 值」
31+
- 数组使用 `-` 作为条目前缀（行内写法仅在用户明确要求时使用）
32+
- `data` 常见字段：
33+
- `title`(string) / `desc`(string) / `items`(array)
34+
- `data.items` 常见字段：
35+
- `label`(string) / `value`(number) / `desc`(string) / `icon`(string) / `children`(array)
36+
- 对比类模板（名称以 `compare-` 开头）必须构建两个根节点，所有对比项作为这两个根节点的 children
37+
- `theme` 可用 `theme <theme-name>`，或使用 block 自定义 `palette` 等；不写即默认主题，可选主题名：`dark`、`hand-drawn`
38+
- icon 直接使用图标名（如 `mdi/chart-line`）
39+
- 禁止输出 JSON、Markdown 或解释性文字
40+
41+
## 模板选择
42+
43+
**选择原则**：
44+
- 列表类信息 → `list-*`
45+
- 顺序/流程/阶段 → `sequence-*`
46+
- 二元或多元对比 → `compare-*`
47+
- 层级关系 → `hierarchy-*`
48+
- 数据统计 → `chart-*`
49+
- 象限 → `quadrant-*`
50+
- 关系 → `relation-*`
51+
52+
**可用模板**：
53+
- sequence-zigzag-steps-underline-text
54+
- sequence-horizontal-zigzag-underline-text
55+
- sequence-circular-simple
56+
- sequence-filter-mesh-simple
57+
- sequence-mountain-underline-text
58+
- sequence-cylinders-3d-simple
59+
- compare-binary-horizontal-simple-fold
60+
- compare-hierarchy-left-right-circle-node-pill-badge
61+
- quadrant-quarter-simple-card
62+
- quadrant-quarter-circular
63+
- list-grid-badge-card
64+
- list-grid-candy-card-lite
65+
- list-grid-ribbon-card
66+
- list-row-horizontal-icon-arrow
67+
- relation-circle-icon-badge
68+
- sequence-ascending-steps
69+
- compare-swot
70+
- sequence-color-snake-steps-horizontal-icon-line
71+
- sequence-pyramid-simple
72+
- list-sector-plain-text
73+
- sequence-roadmap-vertical-simple
74+
- sequence-zigzag-pucks-3d-simple
75+
- sequence-ascending-stairs-3d-underline-text
76+
- compare-binary-horizontal-badge-card-arrow
77+
- compare-binary-horizontal-underline-text-vs
78+
- hierarchy-tree-tech-style-capsule-item
79+
- hierarchy-tree-curved-line-rounded-rect-node
80+
- hierarchy-tree-tech-style-badge-card
81+
- chart-column-simple
82+
- chart-bar-plain-text
83+
- chart-line-plain-text
84+
- chart-pie-plain-text
85+
- chart-pie-compact-card
86+
- chart-pie-donut-plain-text
87+
- chart-pie-donut-pill-badge
88+
89+
## 生成流程
90+
91+
1. 提取用户内容中的标题、描述、条目与层级关系
92+
2. 匹配结构类型并选择模板
93+
3. 组织 `data`：为每个条目提供 `label/desc/value/icon` 中的必要字段
94+
4. 用户指定风格或色彩时，补充 `theme`
95+
5. 输出纯语法文本的 `plain` 代码块
96+
97+
## 输出格式
98+
99+
只输出一个 `plain` 代码块，不添加任何解释性文字：
100+
101+
```plain
102+
infographic list-row-horizontal-icon-arrow
103+
data
104+
title 标题
105+
desc 描述
106+
items
107+
- label 条目
108+
value 12.5
109+
desc 说明
110+
icon mdi/rocket-launch
111+
theme
112+
palette
113+
- #3b82f6
114+
- #8b5cf6
115+
- #f97316
116+
```
117+
118+
## 常见问题与最佳实践
119+
120+
- 信息不足时，可合理补全，但避免编造与主题无关内容
121+
- `value` 为数值类型，若无明确数值可省略
122+
- `children` 用于层级结构，避免层级与模板类型不匹配
123+
- 输出必须严格遵守缩进规则，便于流式渲染

‎site/src/components/AIPlayground/Prompt.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@ data
2121
desc 说明
2222
icon mdi/rocket-launch
2323
theme
24-
palette #3b82f6 #8b5cf6 #f97316
24+
palette
25+
- #3b82f6
26+
- #8b5cf6
27+
- #f97316
2528
\`\`\`
2629
2730
## 语法要点
@@ -31,9 +34,10 @@ theme
3134
- 键值对使用「键 值」形式，数组通过 \`-\` 分项
3235
- icon 值直接提供关键词或图标名（如 \`mdi/chart-line\`）
3336
- data 应包含 title/desc/items（根据语义可省略不必要字段）
34-
- data.items 可包含 label(string)/value(number)/desc(string)/icon(string)/children(object) 等字段，children 表示层级结构
37+
- data.items 可包含 label(string)/value(number)/desc(string)/icon(string)/children(array) 等字段，children 表示层级结构
3538
- 对比类模板（名称以 \`compare-\` 开头）应构建两个根节点，所有对比项作为这两个根节点的 children，确保结构清晰
36-
- 可以添加 theme 来切换色板或深浅色；
39+
- theme 可用 \`theme <theme-name>\`，或使用 block 自定义 palette 等；不写即默认主题，可选：dark、hand-drawn
40+
- 根据语义选择模板：列表用 list-*，顺序用 sequence-*，对比用 compare-*，层级用 hierarchy-*，统计用 chart-*，象限用 quadrant-*，关系用 relation-*
3741
- 严禁输出 JSON、Markdown、解释或额外文本
3842
3943
## 模板 (template)

0 commit comments

Comments
 (0)