SuperAPI AI 工具集

infographic-structure-creator

设计与创作

查看项目

更新于 10-16 05:34

技能介绍

用途:为信息图框架生成或更新 Structure 组件,输出对象是 TypeScript/TSX 代码,目标位置为该仓库的 src/designs/structures 目录。适用于需要设计、实现或修改信息图结构组件的场景。

主要能力:生成完整的 Structure 组件代码,遵循项目的组件规则、布局约束与注册要求。输出为完整的 TypeScript 文件,包括 imports、继承 BaseStructureProps 的 Props、组件实现,以及带准确 composites 的 registerStructure。

使用方式:首先阅读 references/structure-prompt.md,了解框架的完整规则、允许使用的组件与输出要求。若信息不足,需确认最小需求:结构类别、布局方向、层级深度,以及是否需要添加/删除按钮。随后在 Item 与 Items 之间做出选择,通过 getElementBounds 计算布局,并在 ItemsGroup 下规划装饰元素。生成后按参考中的约束进行自检:不得使用未列出的组件,不得使用 SVG 的 cx/cy/r,确保索引正确并处理空状态。在合适的情况下,建议先扫描 src/designs/structures 中已有的相似结构,以匹配本地模式。

限制与注意:输出应保持简洁,避免使用仅限 React 的特性(如 keys、hooks)。