AntV Infographic
Home
Learn
Reference
Gallery
Icon
Editor
AI
Enterprise

目录

  • Overview
  • 开发提示词
  • 使用方法
  • 方法一:使用 skills(推荐)
  • 方法二:在 AI 对话中手动使用
  • 快速开始
    • 入门指南
    • 信息图语法
  • 核心概念
    • 设计
    • 模版
    • 数据
    • 主题
    • 资源
  • 自定义设计
    • 自定义结构
    • 自定义数据项
    • 自定义模版
    • 自定义主题
    • 自定义色板
    • 自定义字体
    • 自定义资源加载器
    • 自定义图案
  • 信息图理论
    • 信息图分类
    • 核心理论
    • 信息图构成要素
    • 信息图设计
  • 参与贡献
文档
自定义设计

自定义数据项

数据项开发同样有一定复杂度,AntV Infographic 为数据项整理了可直接复用的 skill,基于 any-skills 管理,因此 Claude Code 或 Codex 都能读取并使用这些技能来生成代码。

开发提示词

数据项相关的规则与模板已整理为 skill 的参考文档,位于:

  • .skills/infographic-item-creator/SKILL.md
  • .skills/infographic-item-creator/references/item-prompt.md

其中包含以下内容:

  • 数据项核心概念
  • 设计要求(完整性、自适应、数值处理)
  • 技术规范(类型定义、可用组件、工具函数)
  • 代码模板
  • 主题色彩使用
  • 渐变定义
  • positionH/V 处理
  • 常见问题和最佳实践

使用方法

方法一:使用 skills(推荐)

在 Claude Code 或 Codex 中一次性提出需求即可,例如:

BASH
请使用 skill: infographic-item-creator,帮我开发一个带图标与数值的卡片式数据项。

生成后 AI 会直接创建数据项文件并完成导出,只需在 Dev 环境验证效果即可。

方法二:在 AI 对话中手动使用

如果你更偏好手动复制提示内容,可以直接读取参考文档:

BASH
cat .skills/infographic-item-creator/references/item-prompt.md

将内容粘贴给 AI 后,描述需求并生成代码。

无论采用哪种方式,提交前都请在 Dev 环境验证效果。

Previous自定义结构
Next自定义模版

AntV Infographic
Copyright © Ant Group Co.
Docs
Quick Start
Core Concepts
Custom Design
Infographic Theory
API Reference
JSX
API
Design Assets
More
More Examples
AI Generated Infographics
GitHub
Contribute
Friendly Links
AntV
G2
G6
L7
BASH
请使用 skill: infographic-item-creator,帮我开发一个带图标与数值的卡片式数据项。
BASH
cat .skills/infographic-item-creator/references/item-prompt.md