AI 文章摘要
上周跟朋友聊到一个想法：做一个 Chrome 插件，让用户在扣子（Coze）里用自然语言描述需求，插件自动拖拽节点、连线、填参数，把工作流建好。
这东西技术上完全可行，而且市面上还没有同类产品。今天把这个思路拆解一下。
为什么需要这个东西？
扣子的工作流功能很强，但建工作流的过程很繁琐：拖节点、连线、点开配置面板填 prompt、选模型、设参数——一个简单的工作流起码要点十几下。
更关键的是，很多人不知道怎么设计工作流。他们知道自己想要什么效果（比如”根据关键词自动生成小红书笔记”），但不知道该用哪些节点、怎么连线、prompt 怎么写。
如果有個插件，你只需要说一句”帮我做一个小红书爆款笔记生成器”，它自动帮你把工作流搭好——这体验就从”手动挡”变成了”自动挡”。
技术路线
1. Chrome Extension + Content Script
插件注入到扣子页面，获取页面 DOM 控制权。核心是 Content Script——它能在扣子的网页环境里执行 JS 代码。
2. 拖拽模拟
扣子的节点面板是一个可拖拽列表，画布是一个支持 Drop 的区域。模拟拖拽的步骤：
- 找到左侧节点面板中对应节点类型的 DOM 元素
- 模拟 mousedown 事件（在节点上按下鼠标）
- 模拟 mousemove 事件（拖到画布目标位置）
- 模拟 mouseup 事件（松手放下）
关键是确定每个节点在面板中的选择器——扣子用的是 React，DOM 结构可能会变，需要做兼容。
3. 连线模拟
节点之间连线的交互是：从节点 A 的输出口拖到节点 B 的输入口。实现方式类似拖拽，但起止点是画布上的 SVG 圆点。
需要找到每个节点的输出端口和输入端口的 DOM 坐标，然后模拟拖拽。
4. 配置填充
节点拖到画布后，需要点击节点打开右侧配置面板，然后填充内容（prompt、模型选择等）。这步最容易出问题——配置面板的 DOM 结构随节点类型不同而不同。
5. LLM 翻译层
用户输入自然语言（如”做一个小红书笔记生成器”），需要一个 LLM 来翻译成结构化的节点配置：
{ "nodes": [ {"type": "start", "outputs": ["keyword"]}, {"type": "llm", "prompt": "根据关键词生成5个小红书爆款标题..."}, {"type": "code", "code": "随机选一个标题"}, {"type": "llm", "prompt": "根据标题生成800-1200字正文..."}, {"type": "condition", "condition": "正文长度 >= 800"}, {"type": "end", "outputs": ["title", "content"]} ], "edges": [ {"from": 0, "to": 1}, {"from": 1, "to": 2}, {"from": 2, "to": 3}, {"from": 3, "to": 4, "label": "yes"}, {"from": 4, "to": 3, "label": "no"}, {"from": 4, "to": 5, "label": "yes"} ]}这个翻译用 GPT-4o 或 Claude 都能搞定，关键是 Prompt 要写好——需要告诉 LLM 扣子支持哪些节点类型、每种节点的配置格式。
最大的挑战：扣子的 DOM 会变
扣子是字节跳动的产品，前端迭代很快。今天能用的选择器，下个月可能就改了。
应对方案：
- 不要硬编码选择器：用语义化的方式找元素（比如按文本内容找”开始节点”）
- 做兜底检测：每次操作前先验证目标元素是否存在
- 关注版本更新：扣子更新后及时适配
商业模式
这东西的变现思路很清晰：
免费版：每天 3 次自动创建工作流，够个人用户用了
付费版：9.9 元/月，不限次数，支持自定义节点模板
目标用户很明确：不会写代码但需要搭工作流的人——运营、产品、小红书博主。这批人对 9.9 元的接受度很高。
风险
最大的风险不是技术，而是扣子自己做。字节的产品经理不傻，这种需求他们肯定看到了。如果扣子官方出了”AI 一键创建工作流”的功能，插件就没有存在的必要了。
但窗口期至少有几个月。在这之前，先把产品做出来、积累用户，才是正事。
有兴趣一起搞的可以评论区聊，这个项目一个人做太慢了。
