Chrome系列10-VibeCoding集成FlowGram

背景

期望在Script上通过提示词快速集成工作流能力，或者沉淀其他项目集成工作能力，进而沉淀成Skill。

技术问题

ai开发react前端开发中，如何对代码进行自测或者排查，防止出现编译不报错，但是启动后前端白屏的问题，这块如何让ai可以自动化的处理呢

方案路径

目标：
期望对当前项目的自动化脚本编排，将其入参和返回值进行串联，形成一个工作流，使得整个链路更好的工作，在这个过程需要使用到前端工作流编排，我期望在后台管理页面新增一个page：工作流编排，他可以进行测试和节点添加。
## 技术栈选型
FlowGram.AI官网：https://flowgram.ai/en
### 要求
1. 你应该参考https://flowgram.ai/en/examples/free-layout/free-feature-overview.html中的free-layout示例代码，其地址是：https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout 完成项目构建集成
2. 你需要添加自动化脚本节点，打通工作流与现有项目
3. 你需要完成客户端工作流执行逻辑，参考：https://flowgram.ai/en/guide/runtime/introduction.html

GLM5:

目标：实现当前项目的自动化脚本编排功能，通过串联各脚本的输入参数与返回值构建完整工作流，提升链路运行效率与可维护性。

## 功能需求

1. 在后台管理系统中新增"工作流编排"页面，该页面需具备以下核心功能：

- 工作流节点可视化添加、配置与管理

- 工作流测试执行功能，支持实时查看执行状态与结果

- 工作流保存、加载与版本管理

## 技术栈与集成要求

1. 基于FlowGram.AI实现前端工作流编排功能，技术文档参考： https://flowgram.ai/en

2. 项目构建与集成需严格参考 https://flowgram.ai/en/examples/free-layout/free-feature-overview.html 中的free-layout示例代码，其地址是：https://github.com/bytedance/flowgram.ai/tree/main/apps/demo-free-layout 中的free-layout示例代码实现,注意一定集成的是best practice版本

3. 客户端工作流执行逻辑开发需遵循 https://flowgram.ai/en/guide/runtime/introduction.html 中的运行时指南

## 具体开发任务

1. 页面开发：

- 设计并实现符合系统UI规范的工作流编排页面

- 集成FlowGram.AI可视化编辑器组件

- 实现节点属性配置面板与工作流画布交互

2. 功能开发：

- 添加自动化脚本节点类型，支持配置脚本入参、执行条件与输出映射

- 实现工作流节点间数据流转机制，确保参数正确传递

- 开发工作流测试执行引擎，支持单步执行与全流程运行

- 实现工作流执行状态实时展示与错误反馈机制

3. 系统集成：

- 打通工作流系统与现有项目的自动化脚本模块

- 设计并实现工作流数据持久化方案

- 确保工作流执行结果与现有系统数据正确同步

## 质量要求

- 界面响应流畅，节点拖拽、连接操作无明显延迟

- 工作流执行逻辑准确可靠，参数传递无误

- 支持至少10个节点的复杂工作流编排与执行

- 提供完善的错误提示与异常处理机制

- 代码需遵循项目编码规范，关键功能需编写单元测试

## 交付物

- 工作流编排页面完整代码实现

- 相关API接口文档与使用说明

- 功能测试报告与兼容性测试记录