资讯动态

CC Workflow Studio 的 AI 辅助工作流精炼:从「AI 生成」到「对话式迭代改进」的完整实现指南

发布时间:2026/10/13 2:22:17 来源:尧图企业网站定制
AI 应用Agent 工作流开发工具MCP 服务【免费下载链接】cc-wf-studioCC Workflow Studio项目地址https://gitcode.com/gh_mirrors/cc/cc-wf-studio点击查看免费下载AI 辅助工作流精炼AI-Assisted Workflow Refinement是 CC Workflow StudioClaude Code Workflow StudioVSCode 扩展在「AI 生成」按钮基础上推出的迭代改进能力用户无需手动编辑节点或推倒重来而是通过一个聊天面板以「添加更多错误处理」「让这段提示词更清晰」这类自然语言请求让 AI 在当前画布工作流之上持续叠加修改并将结果自动回写画布。读完本文你将掌握该功能的完整设计骨架——从聊天 UI、数据模型、Webview↔Extension Host 消息契约到 Prompt 构造、校验与持久化的源码级实现细节可直接对照本仓库代码复现或二次开发。一、功能背景为什么需要「对话式精炼」1.1 痛点与解决思路根据该特性的功能规格 spec.md此前扩展已经提供了「AI で生成」AI 生成按钮可以一次性从自然语言生成工作流但存在明显断层生成后无法追加改进请求用户对生成结果不满意时只能手动编辑节点或清空重来缺乏迭代上下文无法让 AI 记住上一次修改在已有改动之上继续叠加需求过程不可回溯没有会话记录改了什么、为什么改无从查证。该特性正是为填补这一断层而设计在工具栏新增「AI で修正」入口点击后打开聊天面板用户可反复提交改进请求每次改进都会基于当前工作流状态与历史会话上下文执行结果自动同步到画布会话历史持久化保存下次打开同一工作流时仍可继续。1.2 特性范围速览能力说明入口工具栏「AI 编辑」按钮工作流存在时可见交互聊天式面板上为会话历史下为多行输入框 发送按钮快捷键Ctrl/CmdEnter 发送Esc 关闭面板迭代上限20 次达到后显示警告横幅仍允许继续发送结果应用精炼成功后自动更新画布工作流持久化会话历史随工作流文件保存跨会话恢复会话管理支持一键清除对话历史带确认弹窗注规格中的日文文案「AI で修正」在仓库中已本地化为中文「使用AI编辑」见 zh-CN.ts。二、核心功能需求FR与验收要点规格文档 spec.md 以 20 条 Functional Requirements 约束该功能可按职责归纳如下2.1 聊天 UI 与交互FR-001 ~ FR-007FR-001工作流存在时系统必须提供「AI 编辑」工具栏按钮FR-002点击按钮必须打开聊天面板FR-003面板分上下两个区域——上为会话历史下为消息输入FR-004User 与 AI 消息必须有清晰的视觉区分气泡式展示FR-005输入区接受文本形式的精炼请求FR-006支持「发送按钮」与 Ctrl/CmdEnter 两种发送方式FR-007请求处理期间必须显示进度指示器进度条。2.2 状态与画布联动FR-008 ~ FR-015FR-008精炼成功时自动更新画布工作流FR-009每个工作流的会话历史必须保留面板重开时恢复FR-010跟踪并显示当前精炼迭代次数FR-011迭代次数 ≥ 20 时显示警告横幅建议清除历史以规避文件膨胀与性能问题FR-012/013/014提供带确认的清除按钮清除后迭代计数归零画布工作流状态保持不变FR-015精炼请求必须基于当前工作流状态与历史会话上下文处理。2.3 健壮性与体验FR-016 ~ FR-020FR-016AI 生成的精炼结果必须通过工作流 Schema 校验后才可应用FR-017失败网络错误、超时、结果非法等时必须展示错误消息FR-018输入区支持多行文本FR-019新增消息时会话历史自动滚动到最新一条FR-020会话历史持久化到存储扩展重载/重启后恢复。三、数据模型把会话历史嵌入工作流文件3.1 实体与字段定义数据模型文档>{ id: workflow-123, name: my-workflow, description: Sample workflow, version: 1.0.0, nodes: [], connections: [], createdAt: 2025-11-12T10:00:00.000Z, updatedAt: 2025-11-12T10:30:25.000Z, conversationHistory: { schemaVersion: 1.0.0, messages: [ { id: msg-001, sender: user, content: エラーハンドリングを追加, timestamp: 2025-11-12T10:30:00.000Z }, { id: msg-002, sender: ai, content: IfElseノードを2つ追加しました, timestamp: 2025-11-12T10:30:20.000Z } ], currentIteration: 1, maxIterations: 20, createdAt: 2025-11-12T10:30:00.000Z, updatedAt: 2025-11-12T10:30:20.000Z } }3.3 存储与容量考量存储位置会话历史嵌入工作流 JSON 文件.vscode/workflows/目录一个工作流 一个文件导出/导入时历史一并携带规格 plan.md 明确拒绝了「历史单独成文件」「存入 IndexedDB」两个备选方案容量估算data-model.md以平均 500 字符用户消息 200 字符 AI 消息、20 轮迭代计JSON 序列化后约 21KB最坏情况用户消息全部顶格 5000 字符约 135KB仍在可接受范围内超过 20 轮后文件继续膨胀因此用警告横幅引导清除迁移策略通过schemaVersion字段做版本管理读取时对旧版本执行migrateConversationHistory()迁移保证向后兼容。3.4 状态流转[conversationHistory null] ↓ 用户点击「AI 编辑」 [初始化: currentIteration 0, messages []] ↓ 用户发送消息 [追加 User 消息, currentIteration] ↓ Extension Host 执行 AI CLI [接收 AI 响应] ↓ [追加 AI 消息, 更新 updatedAt] ↓ [自动更新工作流并同步画布] ↓ 循环currentIteration maxIterations [结束条件: currentIteration 20 → 警告横幅]四、消息协议Webview 与 Extension Host 的契约规格的契约文件 refinement-messages.json 定义了四组双向消息与源码 messages.ts 中的类型一一对应方向消息载荷要点Webview → HostREFINE_WORKFLOWworkflowId、userMessage1-5000 字符、currentWorkflow、conversationHistory、可选timeoutMs/model/provider/allowedTools/targetTypeHost → WebviewREFINEMENT_SUCCESSrefinedWorkflow、aiMessage、updatedConversationHistory、executionTimeMsHost → WebviewREFINEMENT_FAILEDerror.codeerror.message 可选details、executionTimeMsWebview → HostCLEAR_CONVERSATIONworkflowIdHost → WebviewCONVERSATION_CLEAREDworkflowId此外实际实现还增加了三个运行时消息REFINEMENT_PROGRESS流式进度、REFINEMENT_CLARIFICATIONAI 反问澄清、REFINEMENT_CANCELLED用户取消。4.1 错误码与恢复建议i18n 查找键错误码含义恢复建议COMMAND_NOT_FOUNDClaude Code CLI 不在 PATH安装 CLI 或检查 PATH 环境变量TIMEOUT精炼请求超时简化请求重试或增大超时时间PARSE_ERRORAI 输出无法解析为合法 JSON反馈问题——AI 返回了非法格式VALIDATION_ERROR精炼结果未通过 Schema 校验换一种措辞重新提交请求ITERATION_LIMIT_REACHED达到 20 次上限清除会话历史重新开始或手动编辑UNKNOWN_ERROR未知异常查看 Extension Host 日志PROHIBITED_NODE_TYPE子代理流中出现禁用节点类型重新描述需求避免嵌套/提问类节点4.2 REFINE_WORKFLOW 请求示例{ type: REFINE_WORKFLOW, requestId: 550e8400-e29b-41d4-a716-446655440000, payload: { workflowId: workflow-123, userMessage: もっとエラーハンドリングを追加してください, currentWorkflow: { id: workflow-123, name: my-workflow, nodes: [], connections: [] }, conversationHistory: { schemaVersion: 1.0.0, messages: [], currentIteration: 0, maxIterations: 20, createdAt: 2025-11-12T10:00:00.000Z, updatedAt: 2025-11-12T10:00:00.000Z }, timeoutMs: 60000 } }4.3 REFINEMENT_SUCCESS 响应示例{ type: REFINEMENT_SUCCESS, requestId: 550e8400-e29b-41d4-a716-446655440000, payload: { refinedWorkflow: { id: workflow-123, name: my-workflow, nodes: [], connections: [] }, aiMessage: { id: msg-456, sender: ai, content: エラーハンドリング用のIfElseノードを2つ追加しました。, timestamp: 2025-11-12T10:30:25.000Z }, updatedConversationHistory: { schemaVersion: 1.0.0, messages: [ { id: msg-123, sender: user, content: もっとエラーハンドリングを追加してください, timestamp: 2025-11-12T10:30:00.000Z }, { id: msg-456, sender: ai, content: エラーハンドリング用のIfElseノードを2つ追加しました。, timestamp: 2025-11-12T10:30:25.000Z } ], currentIteration: 1, maxIterations: 20, createdAt: 2025-11-12T10:00:00.000Z, updatedAt: 2025-11-12T10:30:25.000Z }, changesSummary: Added 2 IfElse nodes for error handling, executionTimeMs: 25340, timestamp: 2025-11-12T10:30:25.123Z } }五、Extension Host 实现从请求到画布更新的完整链路5.1 命令处理器入口REFINE_WORKFLOW消息在 open-editor.ts 的消息分发中路由到 workflow-refinement.ts处理流程为迭代上限检查currentIteration maxIterations时直接返回REFINEMENT_FAILEDITERATION_LIMIT_REACHED路由targetType subAgentFlow时转入子代理流精炼构造流式进度回调onProgress将 CLI 的tool_use/text分块转发为REFINEMENT_PROGRESS调用refineWorkflow()成功后回传REFINEMENT_SUCCESS失败回传REFINEMENT_FAILED。5.2 精炼服务核心流程核心实现在 refinement-service.ts为八步流水线加载 SchemaJSON/TOON→ 扫描并筛选相关 Skill → 构造精炼 Prompt → 执行 AI CLI流式/非流式→ 解析结构化响应 → 解析/回填工作流元数据 → 解析 Skill 路径与 SubAgentFlow 引用 → Schema 校验 → 返回结果关键细节默认超时DEFAULT_REFINEMENT_TIMEOUT_MS 9000090 秒可在面板设置中覆盖多 Provider 支持provider可选claude-code/copilot/codex分别对应不同模型参数sonnet/haiku/opus、gpt-4o、gpt-5.1-codex-mini与low/medium/highreasoning effort会话延续conversationHistory.sessionId传入 CLI 实现上下文延续会话失效时自动降级重试不带 sessionId并标记sessionReconnectedtrue前端据此弹出「会话已重新连接」提示对应 zh-CN.tsSkill 相关性筛选通过filterSkillsByRelevance()按用户消息筛选可用 Skill只把相关 Skill 注入 PromptresolveSkillPaths()按名称先精确后宽松把 AI 生成的 Skill 节点回填真实skillPathSubAgentFlow 兜底resolveSubAgentFlows()为缺失定义的子代理流自动创建 Start→End 最小结构保证工作流可执行。5.3 结构化响应与澄清回退AI 响应被强制为结构化 JSONstatus: success | error | clarificationsuccessvalues.workflow内嵌完整工作流clarificationAI 反问澄清前端把消息直接展示给用户不修改画布非 JSON 文本回退当 AI 输出纯文本常见于模糊的首条消息或非英语 localeparseRefinementResponse()将其视为澄清消息而非解析失败见 refinement-service.ts显著提升首次交互体验。5.4 失败重试携带校验错误上下文当精炼结果校验失败时REFINEMENT_FAILED携带validationErrors前端将其按消息 ID 暂存用户点击「重试」时随下一次REFINE_WORKFLOW的previousValidationErrors一并回传AI 在 Prompt 中获得上次失败原因并针对性修复见 refinement-prompt-builder.ts 的errorRecoveryInstructions。六、Prompt 构造TOON 格式与编辑规则约束规格 research.md 提出的「上下文累积型 Prompt」仅携带最近 3-5 轮消息控制 token 成本已在 refinement-prompt-builder.ts 中落地为RefinementPromptBuilder并做了三点工程化升级TOON 编码Prompt 结构体经toon-format/toon的encode()序列化相比自由文本节省约 7% token编辑流程强制约束注入EDITING_PROCESS_MERMAID_DIAGRAM、EDITING_PROCESS_STEPS、REQUEST_TYPE_GUIDELINES、CLARIFICATION_TRIGGERS由generate-editing-flow.ts脚本生成要求 AI 严格按步骤执行编辑规则白皮书保留原则未要求改动的节点必须原样复制含完整data不得重新生成节点 ID 不得变动命名约束节点名必须匹配/^[a-zA-Z0-9_-]$/纯 ASCII 字母数字、连字符、下划线定位约束水平间距 300px、Start 后 250px、End 前 350px、垂直间距 150px、分支节点垂直偏移 150pxSkill 节点恰好 1 个输出端口新 Skill 只能从availableSkills列表取名分支选型2 路用 ifElse3 路以上用 switchCodex 节点启用时约束 model / reasoningEffort / promptMode / sandbox / skipGitRepoCheck 字段。6.1 最小 Prompt 骨架规格版function constructRefinementPrompt( currentWorkflow: Workflow, conversationHistory: ConversationHistory, userRequest: string ): string { const previousMessages conversationHistory.messages.slice(-6); // 最近3轮 return You are an expert workflow designer for CC Workflow Studio. **Task**: Refine the existing workflow based on users feedback. **Current Workflow**: ${JSON.stringify(currentWorkflow, null, 2)} **Conversation History** (last ${previousMessages.length} messages): ${previousMessages.map(msg [${msg.sender.toUpperCase()}]: ${msg.content} ).join(\n)} **Users Refinement Request**: ${userRequest} **Refinement Guidelines**: 1. Preserve existing nodes unless explicitly requested to remove 2. Add new nodes ONLY if user asks for new functionality 3. Modify node properties (prompt, conditions, etc.) based on feedback 4. Maintain workflow connectivity and validity 5. Provide a brief summary of changes **Output Requirements**: - Output ONLY valid JSON matching the Workflow interface - Include all required fields (id, name, version, nodes, connections, etc.) - All validation rules must be satisfied Output the refined workflow as JSON.; }实际仓库版本在此基础上叠加 TOON 编码、编辑流程约束、Skill/Codex 上下文与校验错误回填结构见 refinement-prompt-builder.ts。七、Webview 前端实现Zustand 状态与聊天组件7.1 精炼聊天面板侧边栏形态规格中的「模态对话框」方案在实现中演进为可拖拽宽度的侧边栏宽度 280-600px默认 320px持久化到 localStorage见 RefinementChatPanel.tsx。该面板同时服务主工作流与SubAgentFlow两种模式modeprop 区分主工作流模式面板内含「AI Edit: Native with MCP Server」与「AI Edit: Built-in (Legacy)」两个手风琴区段当前活动区段记忆在 localStorage发送流程handleSend()先立即追加用户消息与「加载中的 AI 气泡」isLoading再发起请求流式进度分块实时更新气泡内容工具执行期间由ToolExecutionIndicator展示「Bash: npm run build」这类工具信息取消与错误WorkflowRefinementError携带错误码CANCELLED直接移除气泡其余错误在气泡上标红并支持「重试」会话重建提示检测到sessionReconnected时弹出AlertDialog告知用户 AI 会话已重新连接、此前额外上下文可能丢失。7.2 聊天组件族组件职责MessageList.tsx会话历史渲染rolelogaria-livepolite新消息自动滚底失败消息提供重试MessageBubble.tsx单条消息气泡区分 User/AI支持加载、错误、工具信息态MessageInput.tsx多行 textareamaxLength 5000、剩余字符计数、发送按钮、Ctrl/CmdEnter 快捷键ProgressBar.tsx请求处理中的进度指示含 elapsed/max 秒数WarningBanner.tsx迭代 ≥ 20 时的警告横幅SettingsDropdown.tsx模型/Provider/超时/允许工具/清除历史等设置McpServerSection.tsxMCP 服务器与会话信息区7.3 Zustand 精炼 Storerefinement-store.ts 统一管理聊天状态isOpen、conversationHistory、isProcessing、currentInput、currentRequestId及全部设置项并做了持久化localStorage 键cc-wf-studio.refinement.selectedModel、.selectedCopilotModel、.selectedCodexModel、.selectedCodexReasoningEffort、.allowedTools、.selectedProvider等默认值模型haiku、Providerclaude-code、超时 0无限制由系统兜底 10 分钟、允许工具[Read, Grep, Glob, WebSearch, WebFetch, TodoWrite]只读优先的安全默认会话状态机sessionStatus: none | connected | reconnected随sessionId的写入/清除同步迁移消息操作addLoadingAiMessage/updateMessageContent/updateMessageLoadingState/updateMessageErrorState/updateMessageToolInfo/removeMessage支撑「即时反馈 流式更新 错误重试」computedcanSend()未在处理、输入非空、未达上限才可发送、shouldShowWarning()currentIteration 20。7.4 Webview 侧服务与超时兜底refinement-service.ts 封装对 Extension Host 的消息调用以requestId关联 Promise监听message事件后 resolve/rejectREFINEMENT_PROGRESS不卸载监听器持续转发流式分块客户端超时兜底calculateClientTimeout()将服务端超时 5 秒后与 10 分钟上限取小值防止「无限制」选项导致请求永久挂起clearConversation()以 5 秒为超时CANCEL_REFINEMENT支持中途取消。八、用户故事驱动的验收场景规格以 4 个 User StoryP1-P3与一组 Edge Cases 约束验收可直接作为手工与自动化测试用例US-1P1首次精炼请求画布已有工作流 → 点击「AI 编辑」→ 面板打开且历史为空输入请求并发送或 Ctrl/CmdEnter→ 消息以「User」标识出现同时显示进度指示AI 完成 → 「AI」消息出现画布工作流自动更新画布变更与请求语义一致。US-2P2多轮迭代已有会话 → 再次发送请求 → AI 基于前文上下文在既有修改之上继续叠加历史按时间顺序完整展示面板显示当前迭代计数如「迭代 15 / 20」达到 20 次 → 显示警告横幅但仍允许继续发送。US-3P2会话持久化关闭并重开面板 → 历史恢复保存并重开工作流 → 点「AI 编辑」→ 历史加载展示从未精炼过的工作流 → 打开时历史为空。US-4P3会话管理点击「清除对话」→ 弹出确认对话框确认 → 历史清空、计数归零、面板回到空状态清除后新请求视为全新会话取消 → 历史保持不变。Edge Cases规格列出的边界问题均已在实现中覆盖边界场景实现机制AI 结果非法断连节点、违反 SchemavalidateAIGeneratedWorkflow()校验 携带validationErrors的重试机制网络失败 / 超时TIMEOUT等错误码 客户端 10 分钟兜底 错误气泡重试处理中关闭面板isProcessing期间禁用关闭按钮取消走CANCEL_REFINEMENT超长会话50 轮警告横幅引导清除消息列表按需滚动未保存的工作流被精炼请求携带完整currentWorkflow快照不依赖落盘状态精炼期间手动编辑画布结果以REFINEMENT_SUCCESS的refinedWorkflow为准整体覆盖处理中切换工作流请求以workflowId关联目标工作流响应按requestId路由九、成功标准与性能目标规格定义了可量化验收指标以当前仓库实现为前提具体达成度需按测试环境实测SC-00190% 的测试用例中用户可无差错完成 ≥3 次连续迭代SC-002正常网络下95% 的精炼请求在 30 秒内完成并更新画布仓库默认超时 90 秒见 refinement-service.tsSC-003会话历史跨扩展重载持久化/恢复100%SC-0045 用户无文档即可操作聊天界面可用性测试SC-005迭代计数器准确反映请求次数20 次时警告横幅 100% 出现。工程侧指标来自 plan.md聊天 UI 交互响应 100ms、面板打开 200ms懒加载、长会话消息虚拟化、新代码测试覆盖率 ≥ 80%历史持久化与警告横幅关键路径 100%、支持 5 种语言en / ja / ko / zh-CN / zh-TW。十、国际化的错误提示与文案zh-CN 翻译资源zh-CN.ts展示了完整的用户可见文案例如按钮使用AI编辑tooltip与AI聊天以编辑此工作流计数编辑次数: {current}次警告对话历史记录变大,可能会增加文件大小并影响性能。建议清除对话历史记录。;迭代限制已达到最大迭代限制 ({max})。请清除对话以继续。;错误未找到Claude Code CLI。请安装Claude Code以使用AI优化功能。COMMAND_NOT_FOUND会话重建由于切换AI提供商、加载他人共享的工作流或会话过期等原因无法继续AI对话会话已开始新的对话会话。…;错误码正是前述消息协议中的枚举值前端按码查 i18n保证 5 种语言下的可理解性。十一、验证与测试策略规格配套的测试策略quickstart.md建议单元测试会话历史持久化逻辑、迭代计数器与警告横幅逻辑、Zustand Store初始化、达上限禁止发送等契约测试按refinement-messages.json校验消息载荷集成测试端到端流程「聊天 → CLI → 画布更新」手工 E2E打开面板 → 发送请求 → 验证 AI 响应 → 验证画布更新 → 验证历史持久化。关键实现文件索引规格spec.md、data-model.md、quickstart.md、research.md、plan.md契约refinement-messages.json类型workflow-definition.ts、messages.ts后端refinement-service.ts、refinement-prompt-builder.ts、workflow-refinement.ts前端RefinementChatPanel.tsx、refinement-store.ts、refinement-service.ts、zh-CN.ts结语从一份以「対話的にワークフローを改善できるチャット機能」为输入的 Feature Specification 出发CC Workflow Studio 的 AI 辅助工作流精炼能力已经走通了「聊天 UI → 消息契约 → Prompt 构造 → CLI 执行 → Schema 校验 → 画布回写 → 持久化恢复」的完整闭环并演进出了澄清回退、失败重试、会话延续、流式进度、Skill 相关性注入等生产级细节。对照本仓库的规格文档与源码实现你可以清晰还原每一个设计决策的动机与落地方式并以此为基础继续扩展例如调整迭代阈值、接入更多 AI Provider 或引入工作流差分预览。赞分享AI 应用Agent 工作流开发工具MCP 服务【免费下载链接】cc-wf-studioCC Workflow Studio项目地址https://gitcode.com/gh_mirrors/cc/cc-wf-studio点击查看免费下载相关推荐CC Workflow Studio AI 辅助工作流精炼AI-Assisted Workflow Refinement功能实现指南CC Workflow Studio AI 辅助工作流精炼AI Assisted Workflow Refinement功能实现指南 本指南以 CC WorAI 应用Agent 工作流开发工具MCP 服务CC Workflow Studio AI 辅助工作流修正功能解析基于对话式聊天界面的迭代式「AI 修正」实现方案CC Workflow Studio AI 辅助工作流修正功能解析基于对话式聊天界面的迭代式「AI 修正」实现方案 本文围绕 CC Workflow StudAI 应用Agent 工作流开发工具MCP 服务CC Workflow Studio 的 AI 辅助工作流生成AI-Assisted Workflow Generation任务全解从规格到实现的六阶段落地指南CC Workflow Studio 的 AI 辅助工作流生成AI Assisted Workflow Generation任务全解从规格到实现的六阶段落AI 应用Agent 工作流开发工具MCP 服务上一篇ERNIE 4.5-21B210亿参数文本大模型快速上手攻略下一篇Zulip 开源项目 Roadmap 路线图解析从社区优先级机制到发布计划的全景指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价 →
↑