SuperAPI AI 工具集

infographic-structure-creator

前端与建站

查看项目

更新于 10-15 23:57

技能介绍

用途:为 infographic 框架生成或更新 Structure 结构组件,产出 src/designs/structures 下的 TypeScript/TSX 代码,适用于需要设计、实现或修改信息图版面结构的场景。

主要能力:按项目组件规则、布局约束与注册要求,生成完整结构组件文件,包括 imports、继承 BaseStructureProps 的 Props 定义、组件实现,以及带 composites 的 registerStructure 调用;处理 Item 与 Items 的选择、基于 getElementBounds 计算布局,并在 ItemsGroup 下规划装饰元素;支持空状态处理,并可按需加入添加/删除按钮。

使用方式:先读取 references/structure-prompt.md 获取完整框架规则、允许使用的组件与输出要求;若缺少信息则澄清结构类别、布局方向、层级深度及是否需要增删按钮;随后按规则编写代码并自检,检查是否使用了未列出的组件、是否出现 SVG 的 cx/cy/r、索引是否正确、空状态是否处理。必要时可先扫描 src/designs/structures 中已有相似结构以匹配本地模式。

限制与注意事项:输出应保持简洁,避免使用 React 专属特性(如 keys、hooks);必须遵守参考文档中的约束,不得使用未列出的组件。资料中暂未提供具体安装命令、收费信息、支持的平台及可量化的效果数据。