原创 ElliotBai 2024-11-27 08:51 上海
马上拥有自己的 v0，原型界面都不在话下...
有句话讲，“文不如表，表不如图”
图&表所呈现的信息丰富度和效率是远远高于文字的。
所以同样是代码生成和执行，Claude Artifacts 所带来的想象空间和持续热度，远超过去年的 OpenAI Code-Interpreter。
作为一个研究了 Artifacts 将近一年，并持续输出多个相关产品的人，我将在这篇文章中细细梳理 Artifacts 相关的内容，并做一个总结分享，同时把自己之前做的 demo 开源给大家，方便交流学习。
注：全文共 6700 字 29 图，预计 10 分钟读完。
01 - 背景：大模型的新交互
传统 AI 输出的局限性
迄今为止，大模型应用的交互方式主要还是以文本和代码为主（虽然 Markdown 也能带来一些微弱的样式）。
无论是 ChatGPT 这样的对话模型应用，还是 GitHub Copilot 这样的代码助手，他们的输出都局限在“写”这个层面。
这种单一的输出方式带来了几个明显的局限：
交互效率低下
用户需要通过大量的文字来表达需求，AI 也需要冗长的文字来解释结果。
这种“盲人摸象”式的交互方式，往往需要多轮反复才能达成共识。
表达能力受限
在设计方案、数据可视化、行为交互等场景中，一个简单的图形或者图表往往胜过千言万语。
正如我们常说的“talk is cheap， show me the picture”。
认知负担的问题
作为视觉动物，人类处理图形信息的效率远远高于文本信息。
一份图文并茂的 PPT，显然比一份纯文字报告更容易理解和记忆。
应用场景的局限
大语言模型的能力迭代到今天，其实能做的事情已经远超普通人的想象，但是为什麽 Killer App 迟迟未现？
因为在原型设计、生活娱乐、数据分析等等领域，纯本文输出根本无法满足实际需求。
这也是为什麽这些领域的工具往往都是高度可视化的。
这些局限性也是推动 AI 交互方式革新的动力。
下面让我们来看看可视化交互能带来哪些优势。
可视化交互的优势
相比传统的文本交互，可视化交互带来了显著的优势。
信息密度
一张精心设计的图表可以瞬间传递大量信息。
著名的统计学案例 Anscombe's quartet 就很好地说明了这一点
这种"一图胜千言"的效果，正是可视化交互的第一个重要优势。
直观性
人类天生具备强大的视觉模式识别能力。
在数据分析中，趋势、异常值、相关性等特征通过可视化立即就能被发现。
这种直观性不仅提高了理解效率，还能帮助发现纯数字分析可能忽略的模式。
交互体验的提升
可视化界面支持直接操作和实时反馈，极大地提升了交互效率。
就像在设计工具中，直接拖拽调整元素比手动输入参数要高效得多。
这种即时性的反馈让人机交互变得更加自然和流畅。
认知效率
可视化的并行处理特性让用户能快速获取信息全貌。
就像看地铁线路图时，我们能立即理解整个网络的结构和换乘关系，这用文字描述则需要大量篇幅。
强大的多维度表达能力
通过位置、大小、颜色、形状等视觉通道的组合，可以同时展现多个维度的信息。
这种多维度的表达在复杂数据分析和决策支持中尤为重要。
视觉信息更容易形成长期记忆
这也是为什么在演示和教学中，图文并茂的方式总是比纯文本更有效果。
这种记忆优势在学习和决策过程中具有重要价值。
这些优势共同构成了推动 AI 交互革新的动力，而 Artifacts 正是在这样的背景下应运而生。
时代背景与机遇
Artifacts 的出现并非偶然，而是在多重因素共同作用下的必然产物。
从技术基础来看，大模型能力的跃进是最重要的推动力。
Claude 3.5 等等模型的稳定代码输出能力以及多模态理解能力为可视化交互提供了坚实基础。
正如计算机从文本时代进入图形界面时代，AI 交互也正在经历从纯文本向可视化的重要转变。
产品形态的演进也预示着这一趋势。
从 ChatGPT 的文本对话，到 Code Interpreter 的代码执行，再到 Claude Artifacts 的可视化交互，每一步都在拓展 AI 的表达边界。
这种演进路径与图形界面取代命令行的历史进程惊人地相似。
另外，随着 AI 应用从通用对话向专业领域扩展，可视化输出已经成为许多场景的刚需。
设计师需要即时的视觉反馈，数据分析师需要直观的图表展示，用户也需要更丰富的交互形式...
技术生态的成熟则为这一变革提供了基础设施。丰富的可视化库、强大的图形引擎，以及完善的开发工具，共同构建起支撑 Artifacts 的技术底座。
这种生态的完备性让 AI 生成可视化内容变得可行。
用户认知的演进也创造了绝佳的时机。经过 ChatGPT 的普及，用户已经熟悉了与 AI 对话的基本范式。
现在正是将这种交互提升到新高度的最佳时机，就像 iPhone 用触屏革新手机交互一样。
在商业层面，可视化交互也代表着重要的机遇。
各大科技公司都在寻找 AI 应用的差异化突破口，而 Artifacts 这种创新的交互方式无疑代表着一个充满潜力的方向。
这些因素共同构成了 Artifacts 诞生的时代土壤，也预示着它可能带来的重大变革。
02 - 原理：揭开 Artifacts 的神秘面纱
传统应用交互的原理
先来说说传统应用的交互界面是如何诞生的？让我们通过一个简单的例子来说明。
想象你要开一家咖啡店。
从最初的想法到最终开业，你需要经历：规划店面布局、设计装修风格、施工装修、配套水电、采购设备等一系列步骤。应用界面的诞生也是类似的过程。
Step 1：产品需求设计。
这就像是咖啡店的整体规划：店面要多大？需要哪些区域？客人的动线是什么样的？产品经理会详细规划界面的功能、布局和交互逻辑，制作产品原型图，就像建筑师画设计图纸一样。
Step 2：视觉 UI 设计。
这相当于咖啡店的装修设计：墙面用什么颜色？桌椅选什么风格？灯光怎么布置？设计师会细化界面的视觉表现，包括配色、字体、图标等细节，确保界面美观好用。
Step 3：前端代码开发。
这就像是实地装修施工：按照设计图纸和装修方案，把一块空白区域变成可用的店面。前端工程师要把设计图变成实际可运行的界面，处理各种交互细节。
Step 4：前后端联调和上线。
这相当于配套水电、采购设备并实际开业。前端界面需要和后端服务对接，确保数据正确流转，最后部署上线供用户使用。
在这个过程中，各个环节往往需要多次沟通和修改。
就像装修时经常会根据实际情况调整方案一样，界面从需求到上线，通常要经过多轮反复才能达到理想效果。
这个流程看似合理，但也带来了一些问题：
周期较长，从需求到上线往往需要数周甚至数月
各环节相互依赖，前一步没完成，后面就难以推进
沟通成本高，需求、设计、开发之间容易产生理解偏差
修改成本大，后期的改动可能需要重复多个环节
正是这些痛点，让我们开始思考：有没有更高效的方式来实现界面交互？
这就引出了我们今天要讨论的主角：Claude Artifacts。
Artifacts 的工作流程剖析
那么，Artifacts 是如何工作的呢？再让我们通过一个简单的例子来理解这个神奇的过程。
想象你告诉 Claude："我需要一个简单的计算器界面"。
在传统方式下，这需要产品经理写需求、设计师出视觉、工程师写代码等多个环节。但在 Artifacts 中，整个过程是这样的：
理解需求：Claude 会理解你的需求，自动考虑界面布局、交互逻辑等细节。就像一个经验丰富的设计师，它知道计算器需要数字按键、运算符号、显示屏等基本元素。
生成代码：基于对需求的理解，Claude 直接生成完整的界面代码。这些代码包含了界面布局（HTML）、视觉样式（CSS）和交互逻辑（JavaScript）。就像 3D 打印机可以直接把设计图转化为实物一样。
浏览器渲染：生成的代码会立即在你的浏览器中运行和渲染，呈现出一个可以实际使用的计算器界面。不是简单的图片或者动画，而是一个真实可交互的界面。
实时交互：如果你觉得界面需要调整，比如"按钮太小了"或"颜色不够醒目"，只要直接告诉 Claude，它就会立即生成新的代码，界面随之更新。这种即时反馈让调整过程变得极其流畅。
整个过程就像是有一个全能的助手，既懂产品设计，又精通编程开发，可以直接把你的想法变成现实。而且这个助手工作极快，不用等待，随时可以根据你的需求进行调整。
这种工作方式带来了几个重要优势：
速度快：从想法到可用界面只需要几秒钟，不再需要漫长的开发周期。
成本低：不需要产品、设计、开发等多个角色的参与，大大降低了人力成本。
迭代便捷：需要修改时直接告诉 Claude 就可以，不用经过繁琐的流程。
体验好：生成的是真实可交互的界面，不是简单的图片或原型图。
这就是为什么 Artifacts 被认为是一个革命性的功能 - 它让界面开发变得像日常对话一样简单自然。接下来，让我们详细看看支撑这个神奇过程的核心技术。
核心技术详解
理解了 Artifacts 的工作流程，你可能会好奇：它是如何能这么快速地构建出各种界面的？
这就要说到它背后的核心技术了。
想象你在玩乐高。你不需要从头制作每个零件，而是用现成的积木块来搭建。Artifacts 也是类似的原理，它使用了大量现成的"界面积木块"，这些"积木块"在技术上称为组件（Components）。
以 React 组件为例。React 是目前最流行的界面开发框架，它有着无比丰富的组件生态：
想要一个按钮？有现成的 Button 组件
需要一个下拉菜单？有现成的 Select 组件
要展示数据图表？有现成的 Chart 组件
需要拖拽功能？有现成的 DnD 组件 ...等等
这就像乐高有各种不同功能的积木块，Artifacts 只需要选择合适的组件进行组合，就能快速构建出功能完整的界面。
另一个关键技术是 Tailwind CSS。这是一个现代的样式解决方案，你可以把它理解为"界面装饰的标准调色板"：
想要蓝色？用blue-500
要居中对齐？用text-center
需要圆角？用rounded-lg
要添加阴影？用shadow-md
这种标准化的设计语言让 Artifacts 能够精确地控制界面的每个视觉细节，就像画家使用调好的颜料，不需要从头调色。
更厉害的是，这些技术都来自活跃的开源社区。全世界的开发者不断创造和优化这些"积木块"，让它们越来越强大和易用。Artifacts 站在这些巨人的肩膀上，能够事半功倍地创造出各种界面。
举个例子：如果你要做一个数据分析界面，Artifacts 可以直接用现成的组件实现。
所有这些都不需要从零开始，而是复用和组合现有的成熟方案。这就是为什么 Artifacts 能在短短几秒钟内生成功能完整的界面。
理解了这些核心技术，我们就不难明白为什么 Artifacts 能够如此高效地工作了。它就像一个既懂艺术又精通工程的建筑师，熟练运用各种预制构件，快速搭建出美观实用的"界面建筑"。
与传统方式的对比
让我们通过一个清晰的对比表格来看看传统开发方式和 Artifacts 各自的特点：
使用建议：
⭐ 原型验证：优先选择 Artifacts
⭐ 内部工具：优先选择 Artifacts
⭐ 商业产品：传统开发更合适
⭐ 混合使用：Artifacts 做原型，传统方式做最终产品
从长远来看，Artifacts 不是要完全替代传统开发，而是提供了一个新的选择。它极大地降低了应用开发的门槛，让更多人能够参与到产品创造中来。这就像自动驾驶不是要取代人工驾驶，而是在特定场景下提供更便捷的选择。
未来，随着 AI 技术的进步，Artifacts 的能力还会继续提升，但传统开发的细节把控和专业度仍然有其不可替代的价值。
理想的状态是：将 Artifacts 和传统开发结合起来，扬长避短，在不同场景下选择最合适的方案。
03 - 应用：Artifacts 远不止词生卡片
虽然 Artifacts 是 Claude 推出的，但是现在基本被用来泛指生成代码并直接渲染的这类功能。
其实这类应用蛮多的，功能一点都不难，单生成代码并渲染的话，这个事情没有太大难度。
但是真正落到产品上的就比较少，不过也有很多大佬做了一些非常有意思的探索，包括我自己也简单做了一些 demo。
下面就抛砖引玉给大家分享分享。
探索一：词生卡片
暂且把卡片类的应用都定义为词生卡片了。
最出名的应该就是李继刚的《汉语新解》
然后各路大神相继出手，比如一泽的《名片设计》
云中江树的《AI 简历》
等等等等...
这些都是通过给大模型一个优化过的Prompt，让大模型遵循我们的设计思路来直接生成HTML代码或者SVG代码，再通过浏览器直接渲染效果。
探索二：简画（Jianhua.Art）
这是我前几周做的一个小 Demo，一个简单的浏览器插件。
能够快速地通过自然语言来设计 SVG，从而实现图文自由：长文转图文，插图设计，logo 设计，海报设计等等...
目前 POC 版本已经在谷歌浏览器商店上架了，搜索“Jianhua.Art”安装就能体验
比如自带的《网页总结》，你可以打开任意网页，点击生成，就会把网页总结成类似下面的图片
再比如《公众号头图设计》，比如我这篇文章，直接生成N多样式，选一个满意的直接用
再比如《配图设计》，这篇文章中大多数图片，都是简画根据我的文章直接设计出来的
探索三：AI 原型图设计
做过 B 端产品的，其实对蚂蚁的 Ant Design 应该都不陌生。以前画原型的时候，基本也是基于那套 UI 框架去快速拉拉就出来了。
结合上面提到的，UI 框架本身就是各种现成的组件。
那画原型可以手拖，也可以直接代码拖，这件事情让大模型来，也就简单了。
所以前段时间我就直接做了个 Demo ，可以直接通过自然语言的方式来画原型了。
做了十年产品，我都没有想过有一天我可以用嘴画原型。当然，也可以直接截图，So Easy。
探索四：TV-Agent
后来又有了个新的想法，如果把生成界面跟 Agent 直接结合起来，那效果是不是很棒？
然后我改吧改吧，加了一个语音输入识别模块，跑到了我家里的电视上。
每天起床的时候，Agent 可以自己帮我查天气，然后在电视上帮我画一个界面，告诉我今天的天气和穿衣指南。
我要出门遛狗的时候，可以帮我提前找公园，列出各个公园的信息，列在我的电视上。
我要出差/旅行，直接帮我做好行程规划，展示在我的电视上。
我做饭需要看菜谱，直接列好详细的菜谱，列在我的电视上。
反正平时，我也不会一天到晚看电视。再闲着的时候，随机给我换几个壁纸，还能变成大号的数码相册，硬件钱又省了。
04 - 实践：动手搓一个自己的 V0
项目概述
地址：https://github.com/bkidy/MagoUI
因为只是个 Demo，所以能跑通就行。
后端用的是 Python + FastAPI，主要就是请求大模型来生成代码，然后塞到一个 TSX 文件里。
前端用的 Vite + React，把上面生成的 TSX 文件渲染出来。
不过这个方式只适合本地跑跑，生产环境是不能这麼搞的。
环境准备
就是需要 Python 和 NodeJS 的环境，其它的都写了，照着做就可以。
跑起来之后，你就拥有一个上面文章提到的属于自己的V0了。
核心代码实现
没有什麼核心的代码实现，最核心其实是 Claude 的能力
以及一段教 Claude 如何写前端代码的 Prompt。
这段代码参考了当时一个哥们逆向 V0 的，因为写的比较详细，就直接拿来用了。
05 - 总结：
正如文章开头所说，"文不如表，表不如图"。
AI 交互方式从传统文本到可视化的演进，不仅提升了效率，更开启了新的可能性。不过想要将 Artifacts 成功落到一个产品上，光靠一个大模型也是不行的，还需要对开源社区、前端框架、标准化设计系统等技术有一定积累和沉淀，最后再是通过大模型的帮助来产出更高质量的界面&应用。
在产品原型验证、内部工具开发等场景中，其实 Artifacts 已展现出了明显优势，尤其为小团队降低了开发门槛。但在大型商业项目中，传统开发方式仍具不可替代性。
对于开发者，建议明确应用场景、善用现有生态、保持学习心态。随着AI技术进步，我们可能看到更智能的组件识别、更自然的交互方式、更强大的定制能力。在追求创新的同时，也要关注实用性。
图：Jianhua.Art
排版：带带弟弟公众号编辑器
参考文献：
《逆向V0 Prompt》
https://github.com/Yuyz0112/dewhale
《大神们的文章》
https://mp.weixin.qq.com/s/7CYRPFQxi37ONTlX0hfzRQ
https://mp.weixin.qq.com/s/LPyDe4qFk1BLat7LhP75OA
https://mp.weixin.qq.com/s/IdMpz2DIWM1g1b3CJxgISA
