Agent skill · software engineering · aiskillstore
create-node
用于在 FlowGram demo-free-layout 中创建新的自定义节点，支持简单节点（自动表单）和复杂节点（自定义 UI）
Why this skill is useful
Provides specific patterns and templates for creating custom nodes in FlowGram that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
FlowGram Custom Node Development 概述 本 SKILL 用于指导在 FlowGram 项目的 apps/demo-free-layout/src/nodes 目录下创建新的自定义工作流节点。 核心概念 节点数据结构 节点数据在保存时会存储到后端，基本结构如下： 三个核心字段 1. data.inputsValues - 节点表单字段的初始值 存储表单中各个字段的实际值，每个字段值包含 type 和 content 两个属性： type 的可选值： 'constant'：常量值，不支持变量引用 'template'：模板值，支持 {variableName} 语法引用变量 'variable'：变量引用 2. data.inputs - 节点表单的 JSON Schema 使用 JSON Schema 定义表单的结构，系统会根据这个 Schema 自动生成表单界面： 3. data.outputs - 节点输出的 JSON Schema 定义节点在工作流执行时的输出数据结构，供下游节点使用： 三者的关系 字段类型与自动组件映射 在简单节点中，字段类型会自动匹配对应的表单组件： 字段类型 extra.formComponent 默认组件 --------- --------------------- --------- string - Input string 'prompt-editor' PromptEditorWithVariables number - InputNumber boolean - Switch object - JsonCodeEditor array - JsonCodeEditor 节点开发模式 1. 简单节点（自动表单模式） 适用场景：节点配置较为简单，不需要复杂的自定义 UI 特点：根据 inputs Schema 自动生成表单 示例：LLM 节点 文件结构：只需要 index.ts 文件 模板位置：./templates/simple-node/index.ts 2. 复杂节点（自定义 UI 模式） 适用场景：需要自定义表单布局、特殊交互或复杂的 UI 组件 特点：完全控制表单渲染和交互逻辑 示例：HTTP 节点 文件结构： 模板位置：./templates/complex-node/ 开发流程 Step 1: 规划节点 确定节点的核心信息： 节点类型 ID：唯一标识，如 database、webhook 节点功能：明确节点要做什么 输入参数：节点需要哪些配置项 输出数据：节点执行后返回什么数据 UI 复杂度：是否需要自定义 UI Step 2: 选择开发模式 Step 3: 复制模板并修改 简单节点 复杂节点 Step 4: 添加节点类型常量 编辑 apps/demo-free-layout/src/nodes/constants.ts： Step 5: 注册节点 编辑 apps/demo-free-layout/src/nodes/index.ts： Step 6: 准备节点图标 在 apps/demo-free-layout/src/assets/ 目录下添加节点图标（SVG 或 JPG 格式）： Step 7: 测试验证 常用组件和工具 FlowGram 组件 从 @flowgram.ai/form-materials 导入： Semi UI 组件 从 @douyinfe/semi-ui 导入： 表单工具 最佳实践 1. 节点设计 单一职责：一个节点只做一件事 清晰的 Schema：明确定义 inputs 和 outputs 合理的默认值：提供有意义的初始配置 友好的描述：为节点和字段提供清晰的描述 2. Schema 设计 3. 表单组件使用 4. 只读状态处理 常见问题 Q1: 如何选择简单节点还是复杂节点？ 判断标准： 字段简单 + 默认布局满足需求 → 简单节点 需要自定义布局/特殊交互 → 复杂节点 Q2: 如何使用变量功能？ 在 inputs Schema 中使用 formComponent: 'prompt-editor'，并在 inputsValues 中使用 type: 'template'。 Q3: 如何定义必填字段？ 在 inputs Schema 的 required 数组中列出必填字段名。 Q4: inputsValues 和 inputs 必须一致吗？ 是的。inputsValues 中的字段必须在 inputs.properties 中有对应的定义。 Q5: 节点图标支持什么格式？ 支持 SVG、JPG、PNG 格式，推荐使用 SVG。 Q6: 如何调试节点？ 1. 使用浏览器开发者工具查看 console.log 2. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/create-node