很多人好奇，那种用字符拼出来的“文字版”流程图是怎么做的。用ASCII制表符画出的图表，过去大多是用Monodraw制作的。Monodraw是收费软件，而且只能在Mac上运行。开发平台切换到Windows加Linux虚拟机后，再用Monodraw就很麻烦，于是干脆借助当下热门的AI Coding，做一个Web版工具，让浏览器里就能画图，Windows、Mac、Linux都能用，名字叫ASCII Draw。

现在关于AI Coding的评分、体验和焦虑式讨论很多，但真正用AI从零到一写出完整软件的例子并不多。这次开发一共用了5天，并不是每天干满8小时，估计总共十来个小时。同样的工作量如果手写，保守估计要3个月，主要时间会花在查文档和反复调试上。最终成品可以访问：https://asciidraw.puppylab.org。

开发环境还是VS Code，AI选择Google Gemini。这次采用一种很朴素的方式：让AI在浏览器里写代码，再粘贴到VS Code。Gemini上下文很大，所以所有代码都在单个会话中完成，最终花费为0美元。

用AI编程时，先要给AI总体规划和开发原则。ASCII Draw的核心功能参考Monodraw，要求生成HTML页面。布局要求是：使用Flex布局，宽高均为100%，覆盖浏览器窗口，不出现滚动条；第一行是工具栏，高度由按钮决定，宽度100%，超出部分直接截断；第二行是编辑区，宽度100%，高度自适应；第三行是底部状态栏，高度由一行不换行文本决定，宽度100%，超出部分截断。同时引入Tailwind CSS，直接使用CDN，不用任何预编译工具。

前端开发如今常常堆满复杂构建工具，还没写一行代码，硬盘上就下载了几百兆npm包。ASCII Draw走的是另一条路：100%纯静态页面，完全使用JavaScript，没有任何预编译工具，只用script src引入静态文件。这样开发很简单：改代码、保存、刷新浏览器。

AI编程要小步改进，每跑通一个小功能就提交到Git；如果AI写得有问题，就在这个版本基础上反复让它改，直到通过。因此先让AI生成页面框架，看效果和布局是否符合要求，再让它写PowerShell脚本，实现一键启动本地服务器并自动打开浏览器预览。

HTML结构完成后，开始实现渲染。准备用Vue 3的MVVM模式更新一个200×200的字符数组。AI给出的方案不建议用Vue的v-for循环渲染4万个单元格，因为会造成严重性能瓶颈。更好的做法是渲染出一个大字符串，直接更新单个pre标签。

继续让AI写一个能渲染的Demo，这一步引入Vue 3，搭好JavaScript核心代码框架，再设计可扩展的Model结构：以Shape为基类，实现Rect和Line两个子类型；每个类型实现自己的渲染逻辑；多个类型实例依次渲染，组合成最终的ASCII字符。第三步比较复杂，AI准确理解了层叠需求：画横线时，如果底部恰好有竖线，就要变成┼，实现交叉效果。这实际上是ASCII绘图引擎中的上下文感知渲染。

接下来让AI实现多种线条类型：单线──、粗线━━、双线══。在底部有粗线的情况下，画单线时要渲染出粗细混合的效果╂，AI给出的方案是权重查找表，简洁高效。之后加上添加文本、调整大小、自动吸附等功能，再让AI写最硬核的部分：绘制连接两个Rect的Line，也就是自动寻径。它采用曼哈顿几何的分段逻辑，生成两段到五段的折线。这是最难实现的逻辑，AI写了很多次都有问题。后来发现一个高效迭代方法：把日志加上，打印计算路径的输入和输出，AI就能立刻明白自己哪里算得不对。

最后补上页面文件保存等相关功能，一个较完善的网页版ASCII Draw就完成了。粗略估计，大约95%的代码由AI编写。

常见问题一：为什么没有用命令行实现AI Coding？因为付费API还没搞好，等搞好后下一次会直接用Open Code写。

常见问题二：AI Coding的效率优势在哪里？可以把错误直接扔给AI。例如出现Uncaught TypeError: Receiver must be an instance of class Line，它立刻说明这是Vue响应式系统与JavaScript类私有属性或方法#之间的冲突。AI阅读过大量文档和开发人员反馈，因此能很快定位错误原因。虽然对Vue 3不熟，但整个开发过程中没有去Vue官网查文档。这也是Tailwind作者说AI编程导致Tailwind网站流量大降、收入大降的原因之一。

常见问题三：AI Coding的代码正确性如何？对于流程类代码，基本粘贴就能用；越通用的功能越准确，这与训练素材数量正相关。小众功能需要反复重写，而每次截图很不方便，所以日志非常重要。把出错相关日志给AI看，它能自我反思，下次正确率会高一些。

常见问题四：完全不懂编程能使用AI Coding吗？以后不好说，现阶段还是先洗洗睡吧。

完整开发会话可参考：https://gemini.google.com/share/cbc2af3e7fc3。如果想继续改进ASCII Draw，可以从GitHub克隆代码，然后在这个会话基础上继续让Gemini改代码。参考源码：https://github.com/michaelliao/asciidraw.puppylab.org。