CJ·赫斯（CJ Hess）厌倦了用字符画跟AI描述界面，于是他造了个叫Flowy的工具——让Claude Code直接写JSON，浏览器自动渲染成可拖拽的交互式流程图和iPhone高保真原型。设计改一拖，AI立刻读懂，接着写代码，全程无需离开开发环境。视觉反馈闭环就此形成，UI设计、逻辑梳理、代码实现无缝衔接。
当复杂流程、界面结构、状态机逻辑只能靠文字和ASCII图形表达时，人脑的想象力与机器的理解能力都会进入疲劳状态。Flowy的出现，本质上是一条新的协作通道，把“看得见的结构”直接变成“可读可写的代码资产”，让Claude Code和人类在同一块视觉画板上反复对齐认知，直到达成一致，再进入实现阶段。整个过程形成一个持续运转的视觉反馈闭环，而这正是复杂系统构建中最稀缺、也最昂贵的能力。
为什么ASCII艺术突然不够用了？
曾经，程序员用几个竖线、横线和方框拼出流程图，比如：
┌─────────────┐ ┌─────────────┐ |
这种字符画在简单逻辑里确实能救命，但一旦涉及复杂交互、多屏幕跳转、状态机分支，光靠文字描述就像闭着眼睛搭乐高——不是搭歪了，就是搭错了还得拆掉重来。更头疼的是，AI虽然聪明，但面对“把那个按钮往左挪一点，再加个进度条”这种模糊指令，只能猜、试、改、再猜，来回七八轮，效率低得像用算盘跑大模型。问题根源在于：人类对视觉信息的感知是瞬时的，而语言描述却是线性的、模糊的、充满歧义的。当任务从“写函数”变成“画界面”，纯文本通道就卡脖子了。
文字描述视觉意图的天然摩擦
视觉结构具备同时性特征，多个元素在同一时间被感知，而文字具备线性特征，只能一个接一个读取。当用线性语言表达同时发生的空间关系时，信息会被拆散、重排、延迟理解。
Claude Code在生成ASCII图时遵循语义规则，人类在阅读时遵循空间直觉，两套系统之间存在结构性摩擦。这种摩擦直接导致反复修改、反复确认、反复解释，沟通成本自然堆高。Flowy的设计起点正是把这种摩擦直接抹平。
Flowy的核心机制：JSON作为视觉事实源
Flowy选择JSON作为唯一事实源并非偶然。JSON天然具备结构性、可版本化、可读写、可差异比较等工程属性。当视觉节点、位置、尺寸、样式全部转化为明确字段后，图形世界不再是模糊感受，而是精确数据。
Claude Code擅长读写结构化文本，人类擅长拖拽、调整、直观看布局，这两种能力在JSON这一中间层完成对接，形成真正的双向通道。
Flowy 不是另一个绘图工具，而是一套“AI可写、人可改、机器可读”的视觉表达协议。它规定：所有图表都以 JSON 文件形式存在项目里的 .flowy 目录中。这些 JSON 不是给人看的草稿，而是最终设计的“源代码”。
开发服务器实时监听这些文件，一旦更新，浏览器立刻渲染出交互式图表——节点能拖动、文字能编辑、连接线自动调整。
Flowy的运行方式非常工程化：仓库中存在一个.flowy目录，开发服务器持续监听JSON文件变化，一旦发生修改，浏览器中的可视化界面立刻同步更新。这意味着一次拖拽、一次文本调整，都会实时反映到结构数据中。Claude Code再次读取这些JSON时，看到的是完整、真实、最新的视觉状态，而非描述性转述。这种即时反馈让设计迭代从“对话式猜测”升级为“状态式共识”。
关键突破在于：这个 JSON 格式是 Claude Code 能理解并生成的。这意味着，当人类说“画一个从学习页进入测验的导航流程”，Claude 不再输出 ASCII 字符，而是直接输出结构化的 JSON，浏览器秒变 Figma。
在传统流程中，界面与流程往往边写代码边调整，修改一次逻辑就牵动多个组件。Flowy将“视觉规划”前置，先用图形把导航路径、状态流转、界面布局全部跑通，相当于在真正编码前完成一次完整的认知仿真。等视觉结构稳定后，代码实现只是在执行既定蓝图，复杂度显著下降，返工概率同步降低。
工作流革命：先画图，再编码，中间还能“手滑”修改
整个流程分五步走，每一步都踩在传统开发的痛点上。
第一步，写一份需求文档，明确要做什么，比如“做一个五题的Claude命令知识小测验”。
第二步，让 Claude 用 /flowy-flowchart 和 /flowy-ui-mockup 技能生成三类图：导航路径（用户怎么进、怎么出）、游戏逻辑（答对答错怎么跳）、手机界面（四个屏幕长啥样）。
第三步，打开浏览器，直接拖动节点、改文字、调布局——所有操作实时写回 JSON。
第四步，Claude 读取更新后的 JSON，立刻知道“哦，原来那个‘开始’按钮要放底部居中，不是顶部”。
第五步，照着这份“视觉规格书”写 React 代码，因为每个组件的位置、状态、交互都已可视化锁定，编码几乎变成填空题。
整个工作流从一份计划文档开始，文档中描述需求、功能目标、架构思路。随后Claude Code根据文本计划直接生成Flowy JSON，自动产出流程图与UI草图。这一步相当于把抽象需求压缩成可视化结构，让所有隐含假设直接显形。任何结构性误解都会在这一阶段暴露，而不是在代码阶段爆雷。
导航流程图如何承担认知地图角色
导航流程图描述的是用户如何进入、如何退出、如何反复参与功能模块。学习页入口、测验介绍页、答题页、结果页、重玩路径、数据持久化节点，全都以节点和边的形式明确呈现。这种图形本身就是一张认知地图，让开发过程始终围绕真实用户路径展开。
游戏逻辑流程图作为状态机显性化
答题流程内部包含初始化、循环答题、正确分支、错误分支、分数累计、最高分判断、存储动作等多个状态。通过流程图，每一个状态转移都具备清晰起点与终点，逻辑漏洞很难藏身。Claude Code在读取这种结构时，相当于直接面对一台可视化状态机，代码生成自然顺畅。
UI Mockup从草图升级为结构化资产
Flowy生成的UI Mockup并非简单方块排列，而是具备设备框架、状态栏、安全区域、组件层级的高保真界面。每一个按钮、卡片、进度条都具备明确位置与层级关系。这样的Mockup已经接近实现级别，为组件拆分、样式复用提供直接依据。
测验功能实战：从脑内构想到像素级还原
在 Vibe Code Camp 的演示中，直接拖动节点、修改文本、调整布局，所有变化即时写回JSON。Claude Code再次读取时，能够明确识别变化点，从而更新计划文档或实现逻辑。这种“看得见的修改”避免了语言歧义，让人机协作进入精确模式。
导航流图清晰展示：从“学习”标签页点击卡片，进入测验介绍页，再逐题作答，最后到结果页，过程中数据存入 AsyncStorage，退出路径包括“返回”“完成”“再玩一次”。
游戏逻辑流图则像状态机：初始化 → 显示题目 → 判断对错 → 更新分数 → 检查是否新纪录 → 保存。最惊艳的是 UI Mockup：四张 iPhone 屏幕并排呈现，包含带刘海的状态栏、Home Indicator、iOS 风格的圆角卡片、进度条、选项按钮。答错时选项变红打叉，答对变绿打勾，结果页还有“新纪录！”徽章。
这些都不是截图，而是由 JSON 渲染出的活界面，可交互、可修改。
当视觉与流程完全对齐后，代码实现阶段几乎变成执行任务。组件层级清晰，状态流转明确，界面布局已定。Claude Code在此阶段扮演的是高效执行者，而非反复猜测需求的对话对象。结果是一次性完成度极高的功能交付。
JSON 结构长什么样？Claude 写得比人还规范
Flowy 的 JSON 格式设计得既强大又简洁。
顶层有版本号和名称，nodes 数组定义所有图形元素，edges 数组定义连接关系。
每个节点有唯一 id、类型（rect 矩形、circle 圆形、diamond 菱形）、标签文字、坐标位置、尺寸、样式（填充色、边框色、圆角半径），甚至支持 Lucide 图标库的图标名。
连线支持 arrow（箭头）、dashed（虚线）、orthogonal（直角转折）等多种类型，还能带标签。例如：
{ |
这套 schema 足够描述从简单流程图到复杂 UI 布局的所有要素，而 Claude 经过提示工程训练后，能精准输出符合规范的 JSON，几乎不需要人工修正。
两大技能指令：/flowy-flowchart 和 /flowy-ui-mockup
为了让 Claude 精准发力，Flowy 配套了两个专用技能指令。
/flowy-flowchart 专门用于生成过程流、状态机、架构图、决策树等逻辑结构图，强调节点类型与连接逻辑。
/flowy-ui-mockup 则聚焦移动端界面，自动生成带设备边框（含刘海、状态栏、Home Bar）、安全区域适配、iOS 风格组件（如卡片、按钮、进度条）的高保真原型。
这两个指令相当于给 Claude 装上了“视觉输出插件”，让它知道此刻该用哪种 JSON 模板、哪些样式规则、如何组织层级结构。用户只需描述意图，Claude 自动选择合适技能，输出即用型设计资产。
视觉即代码：设计资产纳入版本控制，AI 成为协作者
因为所有图表都是 JSON 文件，天然支持 Git 版本管理。今天改了按钮颜色，明天调整了流程分支，所有变更都有记录、可回溯、可对比。
更妙的是，Claude 能读取历史版本，理解设计演进脉络。当人类在浏览器里拖动一个节点，JSON 文件自动更新，下一次对话中 Claude 看到的就是最新设计，无需重复解释“我刚才改了哪里”。这种“人改图、AI读图、AI写码”的闭环，让 AI 从被动执行者升级为真正的视觉协作者。
设计不再是文档附件，而是活在代码库里的第一等公民。
新范式诞生：AI 与人类共享同一套视觉语言
Flowy代表的并非一个绘图工具，而是一种新媒介。这种模式在复杂系统、重流程应用、频繁迭代产品中具备极高价值。
Flowy 的本质不是工具，而是一种新媒介。这个媒介让人类的空间直觉与模型的结构理解在同一载体中交汇。视觉结构成为共享语言，代码成为自然延伸。
它解决了人机协作中最棘手的“语义鸿沟”——人类想的是画面，AI 擅长的是文本，而 Flowy 提供了一种双方都能读写的“视觉中间语言”。这种语言既保留了代码的精确性（JSON 可解析、可校验），又具备图形的直观性（浏览器实时渲染）。
从此，复杂工作流不再需要在 Miro、Figma、VS Code 之间反复切换，所有创作、讨论、实现都在统一上下文中完成。这或许预示着下一代开发者工具的方向：不是让人适应机器，而是让机器学会看图说话。
Flowy 即将开放，评论区喊“Flowy”抢先体验
目前 Flowy 仍在打磨中，但核心理念已验证可行。CJ·赫斯邀请感兴趣的人在原帖评论区留言“Flowy”，团队将优先发放试用资格。一旦开放，这套系统有望改变前端开发、产品设计、技术文档撰写等多个领域的协作方式。毕竟，当 AI 能看懂你画的草图，并把它变成真实代码，谁还愿意回去用 ASCII 画按钮呢？