Peter 把屏幕分享给他的设计师团队时,底下炸开了锅。
「我们要失业了吗?」有人打出这句话。画面里,六个彩色光标正在同一块画布上飞速移动——Amber 在左上角调整按钮圆角,Phoenix 在中间区域生成旅行城市的配图,Nova 已经开始处理第三个屏幕的布局。整个过程不到三分钟,一个完整的旅行日志 App 界面从空白到成型。
Tom Krcha 看着聊天窗口里的问题,笑了。这正是他想要的反应。
一个 Flash 时代的遗憾
Tom 的办公桌上至今还摆着一本 2003 年的 Flash MX 教程。那是他职业生涯的起点——在 Adobe 工作十年,父母经营设计公司,从小混迹在设计师堆里学 Photoshop。
但有个问题一直困扰着他:Flash 之后,再也没有一款工具能让人「边设计边编码」了。
「你还记得那种感觉吗?」Tom 在镜头前比划着,「2000 年左右,任何人都能在 Flash 里做出很酷的东西。后来呢?前端框架、响应式设计、移动端适配、后端 API……复杂度指数级增长。设计和开发彻底分家了。」
去年初,Tom 开始用 Cursor 和 Claude Code 搭建一个项目。他对着聊天框输入:「做一个圆角按钮,20px padding,主色调用蓝色……」输入到一半,突然停住了。
「为什么我不能直接画出来?」
那个被 100 万人看到的原型
Tom 花了一个周末写出 Pencil 的第一版原型——一个能在 VS Code 里打开的可视化编辑器。你可以直接在画布上拖拽设计,然后让 AI Agent 读取这个设计文件,生成代码。
原型发到 LinkedIn 和 X 上,24 小时内冲到 100 万浏览量。
「我当时就震惊了,」Tom 回忆,「我以为只是自己的痛点。结果发现所有人都在跟 AI 吵架——用自然语言描述 UI 太痛苦了。」
A16Z 的 Speedrun 孵化器很快找到他。八周前正式上线,现在用户数已经到 10 万。但真正的转折点发生在本周二。
光标的魔法
「我们其实很早就做出了并行计算,」Tom 切到 Pencil 的演示界面,「但我自己都搞不清哪个 Agent 在干什么。调试的时候简直要疯。」
所以工程师在每个 Agent 上加了一个光标——Amber 是橙色,Phoenix 是红色,Nova 是蓝色。仅此而已。
然后 Tom 第一次看到六个光标同时在屏幕上移动。
「那一刻我起了鸡皮疙瘩,」他停顿了两秒,「AI 平常感觉很……冷冰冰的,对吧?就是个黑盒子。但这些光标在画布上工作的时候,你会觉得背后真的有人在做这件事。」
「这只是个光标,」他又重复了一遍,语气里带着惊讶,「就这么简单的东西,却让一切都不一样了。」
Peter 盯着屏幕看了十几秒,才说:「老兄,我得承认——如果没有这些光标,如果下面没有实时聊天记录,我不会这么震撼。」
这正是重点。
一个 JSON 文件的野心
演示继续。Tom 打开 Cursor,点击一个 .pen 文件。VS Code 里突然弹出一个完整的可视化编辑器——咖啡店网站的设计界面,带工具栏、组件库、样式面板。
「等等,」Peter 打断他,「这是在 Cursor 里?」
「对,这是我们自己写的编辑器,嵌在所有 VS Code 系的 IDE 里,」Tom 右键打开 .pen 文件的源码,「你看,其实就是 JSON。」
屏幕上是一段标准的 JSON 结构:元素类型、位置坐标、颜色变量、padding 数值。没有任何 HTML 或 CSS。
「我们想做一个平台无关的设计格式,」Tom 解释,「这个 JSON 可以转成 iOS 的 Swift,也可以转成 React Native,或者 Web 的 HTML。关键是——所有 AI Agent 都能直接读写它。」
这意味着什么?
Tom 在 Cursor 里打开 Composer,输入「把这个界面改成浅色模式」,敲回车。两秒钟,整个咖啡店网站从深色翻转到浅色。接着他换成 Claude Opus 4.6,输入「生成 React + Tailwind 代码,跑在 8080 端口」。
终端闪过几行日志,浏览器自动弹出。咖啡店网站已经跑起来了,跟设计稿一模一样。
「所以这个 .pen 文件进了 Git,」Tom 说,「你的同事可以改,AI Agent 可以改,设计师可以改。它是单一事实来源。」
不只是设计师的工具
Peter 问了个所有人都想问的问题:「谁在用这个东西?」
「我一开始也以为是设计师,」Tom 笑了,「结果完全不是。」
上周,Tom 的一个朋友——市场营销总监——给他打电话:「老兄,Pencil 太好用了!」
Tom 愣住了:「你?你不是做市场的吗?」
「对啊,我现在用 Claude Code 桌面版 + Pencil,重做了整个公司网站、广告素材、销售用的 PDF 技术文档……」
Tom 意识到一件事:大家都在变成 Maker。
「设计师在学写代码,工程师想掌控整个项目,PM 觉得自己终于能做点实际的东西,」他掰着手指数,「Marc Andreessen 说的『Mexican Standoff』正在瓦解——产品经理、设计师、工程师之间的边界正在消失。」
还有企业用户把整套设计系统(Design System)转成 .pen 格式,放进 Git。现在他们的 AI Agent 能直接调用公司的品牌规范、组件库、色彩变量,生成的界面自动符合设计标准。
「五个抽屉项目」的故事
Tom 提到另一个反馈让他印象深刻。
很多人告诉他:「我有五个项目一直放在抽屉里,因为不知道从哪开始。现在终于能看看它们长什么样了。」
「其他 Vibe Coding 工具的问题是太线性,」Tom 说,「你做一个东西,然后点下一步,再做一个。但真实的创作不是这样的——你需要同时看 20 个版本,对比、分叉、复制粘贴。设计师的 Figma 文件永远是一团乱,因为那才是探索的样子。」
他停顿了一下:「而且很多工具一旦报错,普通人就放弃了。但在 Pencil 里,你先看到视觉效果。有意义?继续做。没意义?删掉。至少你知道了答案。」
这解释了为什么那个市场总监能用 Claude Code——他根本不需要看代码。
一个光标背后的哲学
演示接近尾声,Tom 打开 Pencil 的「Swarm Mode」。屏幕上同时出现六个 Agent 的光标:Amber、Phoenix、Nova、Sage、Echo、Flux。他们各自领取任务——有人设计首页,有人做详情页,有人处理图标系统——互不干扰,三分钟完成。
「很多 Vibe Coding 平台现在也在做并行,」Tom 说,「但大多是给不同 Agent 分配不同角色——一个写前端,一个写后端。我们做的是:同样的角色,分担同样的工作,互不冲突。」
「比如六个 Claude Opus 同时设计六个屏幕,速度提升三倍。」
Peter 盯着那些飞舞的光标:「如果我用 Claude Code,也可以开三个终端并行跑任务。但我完全看不懂发生了什么,直到它们跑完。」
Tom 点头:「对。这就是差别——视觉化、实时、可介入。」
他又提到一个细节:「你可以在 Agent 工作时直接改设计。」
「什么意思?」
「就是它还在生成,你已经可以去拖按钮、改文字了。不用等它停下来。」Tom 演示了一遍——Sage 的光标还在调整布局,Tom 已经把标题改成了「Welcome Home」。
「大部分 Vibe Coding 工具要等 AI 停下来你才能动。那会打断心流。」
Flash 回来了吗?
聊到最后,Peter 问:「接下来呢?」
Tom 想了想:「那些光标看起来是个小细节,但这是我第一次觉得 AI 被『人性化』了。你会感觉有人在那里。这很疯狂——它只是个光标,但它让你产生这种感觉。」
「这说明精雕细琢仍然重要。」
他继续说:「想象一下,如果 Agent 只是默默写 JSON,然后你要重新打开文件才能看结果——那太糟糕了。但技术上,后台就是这样的。所有这些小细节才是关键。」
「所以我希望更多人开始这样思考 LLM——我们可以给它们一张脸。现在这张脸是个小光标,但我们能做的还有很多。」
Peter 笑了:「比如让它们互相击掌?飞来飞去?」
「对!」Tom 眼睛一亮,「或者让它们说话——接入 ElevenLabs,Agent 之间可以对话。很多人问能不能给 Agent 改名,改成自己朋友的名字。我正在做这个功能。」
他顿了顿,认真地说:「我们要让 AI 透明化——让人看得懂它在做什么,同时给它一些个性。这会带来巨大的差异。」
屏幕上,六个光标还在飞舞。
