Wisdom Logo
Wisdom Docs
Wisdom Docs

Design Node Studio

AI Asset Pipeline Engine

  • AI
  • Asset-Pipeline
  • Workflow
  • Browser-based

项目速览

S
// Situation
  • AI Workflow 使用需具备代码基础，非技术人员上手难度大
  • AI Workflow 操作与节点设计与设计思维脱节，理解成本高
  • 文生图 AI Prompt 缺乏治理，流程无法封装为可复用资产模板
  • 文生图 AI 多轮对话上下文漂移，风格一致性丢失，提示词稀释
  • 文生图 AI 跨模型、跨批次生成一致性无法保障，切换成本高
T
// Task
  • 搭建统一可视化 AI 工作流平台，整合多模型能力
  • 支持拖拽式节点设计，降低非技术人员使用门槛
  • 建立流程模板库，实现文生图流程经验沉淀与复用
  • 优化模型调用逻辑，避免上下文漂移及提示词稀释
  • 简化操作链路，让 AI 生成结果具备标准化属性
A
// Action
  • React 18+ReactFlow 构建可视化拖拽编排画布
  • 开发 ModelAdapter 抽象层，统一对接多模型API
  • 实现易用 文生图 AI 与 AI Workflow 深度融合
  • DAG+JSON Schema 实现流程稳定与风格锁定
  • 搭建模板库，支持流程导入导出与版本管理
R
// Result
  • 团队AI应用效率提升75%，操作链路大幅简化
  • 新人上手周期从2-3周缩短至2天
  • 多模型能力互补，提升生成效果
  • 沉淀15+可复用流程模板，经验复用率提升
  • 跨模型生成一致性达95%，风格稳定无漂移

项目背景

2025 年，各类工作流（Workflow）与生成式 AI 工具层出不穷，但在实际设计生产场景中，仍存在显著痛点。 其一，多数 Workflow 工具对代码基础有硬性要求，非技术人员上手门槛高，其操作逻辑与节点设计脱离设计思维，难以贴合设计师的实际工作习惯，更无法形成标准化生产闭环。 其二，生成式 AI 工具的提示词（Prompt）缺乏规范治理，生产流程无法封装为可复用的资产模板，且在多轮对话中易出现上下文漂移、风格一致性丢失、提示词稀释等问题。同时，现有主流生成式 AI 工具（如豆包、Gemini、Midjourney 等）均依托独立软件生态，不仅跨模型、跨批次的生成效果一致性难以保障，工具切换成本也居高不下。 基于上述行业洞察，我们从设计侧主导推进，依托 Google AI Studio 搭建 Web 端可视化 AI 工作流引擎。该引擎深度贴合设计师的视觉工作逻辑，采用「节点 + 管线」的可视化交互形式，让设计师无需钻研底层技术细节，即可搭建可控、可复用、可规模化的 AI 资产生产流程。其核心本质是对现有生产管线进行优化升级，从根源解决技术逻辑与业务场景脱节的核心问题。

Web 端操作界面

项目地址：DesignNodeStudio

存在问题

承接上述行业痛点，从「AI 资产生产系统」视角进一步拆解，AI 应用在设计生产规模化落地中面临四大核心问题：

flowchart TD A["🚧 工业化生产核心痛点"] --> B["语义体系错位<br/>工具以 API/参数 为核心<br/>与设计师视觉思维脱节"] A --> C["Prompt 缺乏治理<br/>字符串拼接，无法封装<br/>为可复用的资产模板"] A --> D["风格一致性缺失<br/>跨模型/跨批次生成<br/>上下文漂移、提示词稀释"] A --> E["无资产生产规范<br/>缺乏命名规则、版本体系<br/>和标准化归档逻辑"]

  1. 语义体系错位：现有 Workflow 工具以「API / 参数 / 模型」为核心操作语义，与设计师关注的角色形态、风格体系、构图结构等视觉维度严重脱节。

  2. Prompt 缺乏治理：Prompt 仅以字符串拼接形式使用，无法封装为可复用的风格模板与资产模块，每轮项目都从零开始，经验无法沉淀。

  3. 风格一致性缺失：跨模型、跨批次生成缺乏风格锁定机制，多轮对话中出现上下文漂移与提示词稀释，设计师需大量手动修正。

  4. 无规范化资产体系：AI 生成结果缺乏统一的命名规则、版本管理与归档逻辑，无法形成可追溯、可复用的标准化设计资产库。

设计目标

核心目标：将 AI 从「单次生成器」升级为「==标准化资产生产系统==」。

这一目标的落地围绕设计师的核心痛点展开：精准捕捉设计师的真实诉求——无需关注 API、参数等技术细节，只需聚焦视觉风格、资产规范等业务层面；通过可视化、低代码的节点设计，屏蔽底层模型的技术复杂度；同时推动 AI 生成结果从单次产出升级为标准化资产，实现流程复用与资产沉淀，这也是从「工具」到「系统」的核心升级逻辑。

mindmap root((Wisdom Node Studio<br/>核心目标)) 生产能力 支持批量生成 流程模板复用 一键导出资产 稳定性 JSON Schema 约束 风格参数锁定 结果一致性保障 可维护性 DAG 管线化设计 节点可视化调试 执行状态追踪 可扩展性 多模型适配 自定义节点 通用 API 接入 可治理性 人工审核关卡 风险分级机制 异常资产隔离

产品方案

围绕设计目标，产品方案从「界面 → 编排 → 约束」三层展开：界面层以 ReactFlow 可视化画布为核心，提供 16 种贴合设计师工作逻辑的节点，支持拖拽式流程编排；编排层通过 DAG 拓扑调度将可视化流程定义转化为可执行的 AI 生产线；约束层以 JSON Schema 校验与风格锁定为手段，确保生成结果的一致性与可控性，最终输出标准化、可复用的设计资产。

技术栈

层级技术说明
框架React 18 + TypeScript主体 UI 框架
构建工具Vite 6极速开发与构建
节点流图ReactFlow 11可视化节点编辑器核心
3D 渲染Three.js + @react-three/fiber相机角度节点 3D 预览
AI - Google@google/genai (Gemini / Veo)图文视频生成
AI - 字节跳动豆包 / Volcengine Ark APISeedream 图像生成
AI - 火山视觉Volcengine CV API图像抠图处理
浏览器 PythonPyodide v0.25.1浏览器端脚本执行
持久化IndexedDB生成历史本地存储

系统架构

系统采用分层 Pipeline 架构，从交互到输出共五层：

flowchart LR subgraph L7["L7 交互层 (UI)"] UI["ReactFlow 画布<br/>可视化节点编排"] end subgraph L5["L5 调度层 (Orchestration)"] DAG["DAG 拓扑调度<br/>executionEngine.ts"] end subgraph L3["L3 生成层 (Capability)"] MA["ModelAdapter<br/>统一模型接口"] GM["Gemini<br/>GoogleAI"] DB["豆包<br/>Volcengine Ark"] VC["火山视觉<br/>CV API"] PY["Pyodide<br/>Python WASM"] end subgraph L1["L1 约束层 (Constraint)"] SC["JSON Schema 校验<br/>风格锁定 / 结果过滤"] end subgraph OUT["资产输出"] AS["标准化资产<br/>命名 / 版本 / 归档"] end UI -->|"JSON Graph"| DAG DAG -->|"节点调度"| MA MA --> GM MA --> DB MA --> VC MA --> PY GM & DB & VC & PY -->|"原始结果"| SC SC -->|"合规资产"| AS
层级核心产品意义
UI 层贴合设计师使用习惯，实现类 Blender 式可视化流程搭建
编排层将可视化流程转化为可调度、可执行的 AI 生产线
能力层对 AI 模型进行抽象封装，使其成为可灵活替换的”零件”
约束层通过规则与校验机制，将 AI 转化为可被管理的标准化系统
执行层落地流程执行，生成符合规范的可用资产

节点体系设计

节点定位为「设计能力单元」，而非「API 调用入口」。系统共设计 16 种节点，分为四大类：

flowchart TD ROOT["🧩 节点体系 Node System"] --> IN & GEN & PROC & OUT subgraph IN["📥 输入节点 Input Nodes"] TI["TextInput<br/>文本语义输入"] II["ImageInput<br/>参考图上传"] CC["CameraControl<br/>拍摄角度 3D"] IP["IPCharacter<br/>IP 形象管理"] end subgraph GEN["✨ 生成节点 Generative Nodes"] GG["GeminiGenerator<br/>Gemini 图像生成"] GT["GeminiText<br/>Gemini 文本生成"] GV["GeminiVideo<br/>Veo 视频生成"] DG["DoubaoGenerator<br/>豆包/Seedream 生成"] end subgraph PROC["⚙️ 处理节点 Processing Nodes"] VS["VolcSegmentation<br/>火山抠图"] IT["ImageTool<br/>图片格式转换"] PS["PythonScript<br/>Python 脚本处理"] GA["GenericApi<br/>通用 API 接入"] SP["StructuredProcess<br/>结构化数据处理"] end subgraph OUT["📤 输出节点 Output Nodes"] RD["ResultDisplay<br/>结果预览查看"] TD["TextDisplay<br/>文本组合输出"] BG["BundleGroup<br/>节点分组打包"] end
节点类型核心设计含义
Input Nodes（输入节点）承载设计素材导入与核心语义输入（如风格、需求描述）
Generative Nodes（生成节点）负责角色、风格、构图等核心设计元素的生成
Processing Nodes（处理节点）提供数据处理、图像分割等中间环节优化能力
Output Nodes（输出节点）实现资产规范化导出、归档，对接资产库体系

端口类型系统（IOType）支持 TEXT / IMAGE / VIDEO / START_IMAGE / END_IMAGE / ANY 六种类型，连线时进行兼容性校验，杜绝非法连接。

Schema（架构）：是对数据结构、信息格式、交互规则的标准化、结构化描述与约束，简单来说就是「定义事物”长什么样、该怎么用”的规范」，此处指通过结构化定义实现风格参数锁定与结果过滤。

工作流引擎

工作流引擎解决两个核心问题：「流程怎么跑」与「模型怎么接」。

执行机制

系统接收画布上的 JSON Graph 后，先进行 DAG 合法性校验（检测环路与孤立节点），再通过拓扑排序确定执行顺序：入度为 0 的节点并行启动，上游结果自动传递至下游节点，最终结果经 JSON Schema 校验——合规资产输出，异常资产隔离。

flowchart LR A(["🖥️ UI 可视化搭建"]) --> B["生成 JSON Graph<br/>序列化流程定义"] B --> C{{"DAG 合法性校验<br/>检测环路 / 孤立节点"}} C -->|"校验通过"| D["拓扑排序<br/>确定执行顺序"] C -->|"存在错误"| ERR(["❌ 返回错误提示"]) D --> E["入度为 0 的节点<br/>并行优先执行"] E --> F["节点逐级执行<br/>上游结果传递下游"] F --> G{{"JSON Schema<br/>结果校验"}} G -->|"合规"| H(["✅ 标准化资产输出"]) G -->|"不合规"| ISO(["🔒 异常资产隔离"])

执行引擎核心特性：

  • 并行调度：同层（入度相同）节点可并发执行，最大化利用计算资源

  • 状态批量更新：通过 scheduleNodePatch + requestAnimationFrame 批量刷新节点状态，避免频繁 re-render

  • 撤销/重做：基于快照栈实现，最多保存 50 步操作历史

  • 自动布局：分组感知的 DAG 分层布局，Bundle 子节点保持相对偏移

多模型抽象

通过 ModelAdapter 接口统一不同 AI 模型的调用方式——各服务实现统一的 run 方法，屏蔽底层 API 参数与格式差异，同时将风格锁定的 Schema 规则转换为各模型的特定参数，确保跨模型风格一致性。新增模型仅需实现接口，无需修改上层逻辑。

classDiagram class ModelAdapter { <<interface>> +run(prompt, schema) result } class GeminiService { +generateImage(prompt, schema) +generateText(prompt, schema) +generateVideo(prompt) 支持 Gemini 2.5 Flash / 3 Pro / Imagen / Veo 3.1 } class DoubaoService { +generateImage(prompt, schema) 支持 Seedream 4.5 序列化生成 支持多分辨率输出 } class VolcCvService { +segmentImage(image) 浏览器端 HMAC-SHA256 签名 Web Crypto API 实现 } class PythonService { +runScript(code, inputs) Pyodide v0.25.1 CDN 动态加载 无需后端部署 } ModelAdapter <|.. GeminiService ModelAdapter <|.. DoubaoService ModelAdapter <|.. VolcCvService ModelAdapter <|.. PythonService

风险治理

AI 生成流程面临风格漂移、结果崩坏、资产污染与合规风险四类主要问题，需要建立针对性的治理机制：

flowchart TD RISK["⚠️ 风险类型"] --> A & B & C & D A["风格漂移<br/>跨批次风格不一致"] -->|治理手段| A1["Style Lock Node<br/>强制统一风格参数<br/>绑定 Schema 约束"] B["结果崩坏<br/>生成内容不符合预期"] -->|治理手段| B1["JSON Schema 校验<br/>过滤不合格生成结果<br/>异常自动拦截"] C["资产污染<br/>异常资产混入正式库"] -->|治理手段| C1["输出隔离机制<br/>异常资产单独存放<br/>不混入正式资产库"] D["合规风险<br/>高风险内容输出"] -->|治理手段| D1["人工审核关卡<br/>高风险节点强制<br/>人工确认后方可继续"]
风险类型治理机制
风格漂移内置 Style Lock Node，强制统一风格参数，绑定 Schema 约束
结果崩坏JSON Schema 校验自动过滤不合格结果，异常拦截
资产污染输出隔离机制，异常资产单独存放，不混入正式库
合规风险人工审核关卡（Gate），高风险节点强制人工确认后方可继续

总结

Wisdom Node Studio 通过「可视化编排 + Prompt 治理 + 风格锁定 + 多模型抽象」四位一体的设计，将 AI 从「单次生成工具」升级为「标准化资产生产系统」，解决设计师在 AI 应用中的语义错位、风格不一、资产难沉淀三大核心痛点。架构层面，分层 Pipeline 设计与 DAG 拓扑调度保障了流程的稳定执行与灵活扩展；风险治理体系覆盖从生成到输出的全流程，确保 AI 生产过程可控。最终实现团队 AI 应用效率提升 75%、新人上手周期从 2-3 周缩短至 2 天、沉淀 15+ 可复用流程模板、跨模型生成一致性达 95% 的核心成果。

Q&A

Q1 你在项目中负责什么？

产品设计、架构设计、前端实现全部由我主导推进。从需求洞察到节点体系设计、从 DAG 调度引擎开发到多模型抽象适配，覆盖了从 0 到 1 的完整链路。

Q2 为什么不用现成工具（n8n / ComfyUI / Midjourney）？

n8n 和 ComfyUI 对代码基础有硬性要求，操作逻辑与设计师的视觉思维脱节，上手门槛高；Midjourney 等工具功能单一，仅支持文生图，无法完成流程编排与资产沉淀。市场上没有一个工具能同时解决「可视化编排 + 多模型统一 + 风格锁定」这三个问题，所以我们选择自建。

Q3 最大的技术挑战是什么？

多模型抽象适配。各家 AI 模型的 API 参数、请求格式、返回结构差异巨大，需要设计统一的 ModelAdapter 接口，在屏蔽底层差异的同时，将风格锁定的 Schema 规则精准转换为各模型的特定参数，确保跨模型生成效果的一致性。

Q4 项目最大的收获？

技术能力要转化为产品功能，不能直接堆技术，而是要先深度理解用户的真实诉求，再将模糊需求拆解为可落地的产品功能。这个项目让我真正做到了从「用户视角」而非「工程师视角」去思考产品，这也是从工具到系统升级的核心逻辑。