六个光标在屏幕上飞舞,这才是 AI 该有的样子
AI CodingAI Products

六个光标在屏幕上飞舞,这才是 AI 该有的样子

T
Tom Krcha(Pencil CEO,前 Adobe 员工,Around 创始人) | 主持人: Peter Yang
2026年3月8日YouTube
返回首页

金句精选

那些光标看起来是个小细节,但这是我第一次觉得 AI 被人性化了——你会感觉有人在那里

Flash 之后,再也没有一款工具能让人边设计边编码了

为什么我要用语言描述一个按钮?我直接画出来不就行了

真实的创作不是线性的——你需要同时看 20 个版本,对比、分叉、复制粘贴

我们要让 AI 透明化——让人看得懂它在做什么,同时给它一些个性

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 透明化——让人看得懂它在做什么,同时给它一些个性。这会带来巨大的差异。」

屏幕上,六个光标还在飞舞。