Vibecoding工具可以从设计UX中学习并赢得所有人

作者： Arthur Objartel 技术编辑： Travis Turner 发布日期： 2025年11月19日

对于致力于开发vibecoding工具的开发者而言，真正实现盈利的唯一途径，恰恰是抛弃“vibecoding”范式，重新聚焦于开发“终极创作工具”，并在此过程中打开大众消费市场。我们可以从设计领域中寻找五种能够实现这一目标的洞见和解决方案。

还记得用户界面变成“所见即所得”（WYSIWYG）时，文字处理软件是如何改变的吗？在此之前，需要经过令人沮丧的反复试验才能让文档看起来合适。在此之后，任何人都可以直观地创建专业文档。这一突破使得像Word这样的工具能够触及数十亿用户。

同样，目前，vibecoding工具非常适合原型设计，但细节调整却是一种地狱般的体验。用户耗费大量token试图完善细节，或者需要手动编辑代码（而大多数用户不会或无法做到这一点）。

归根结底，设计体验是薄弱环节。幸运的是，多年来，设计工具已经多次为我们提供了所需的答案。让我们来看看我认为最有效的模式。

1. 将设计视为值得拥有独立标签的一等公民

我的一位朋友——一个完全不懂技术的游戏主播——想为他的直播创建一个自定义的宾果游戏。我向他展示了Bolt工具。几个小时内，他就做出了一个可运行的东西。这家伙非常惊讶。

……但接下来是设计部分。

所有他想要的梗图、特定的氛围以及那些能让项目独具个性的微小细节，都让这项工作变成了令人沮丧的苦差事。我不得不介入帮助他让东西看起来顺眼。即便如此，即使有我的帮助，他也告诉我这是一次神奇的体验。

这就是差距所在：代码生成有效，但设计微调不行。这正是为什么我们需要将设计视为一等公民。这意味着在“代码”和“预览”旁边放置一个“设计”标签：

（示意图：代码、预览和设计标签并排显示）

理想情况下，这个标签页将是用户可以切换到“微调”模式的地方，并且可以自由编辑，不受AI聊天界面的干扰。当然，如果出于某种原因需要聊天，只需将鼠标悬停在靠近左侧的位置即可轻松打开。

在设计模式下，只需将鼠标悬停在靠近左侧即可打开聊天界面

这将是一个用户可以按照自己的喜好微调和改进产品的地方，而无需花费大量（甚至无需花费）token。

2. 简单、上下文相关且精简的内联编辑

Vibecode工具不需要成为设计工具，也不需要成为Figma 2.0。复杂性、过多的控件选项和臃肿的侧边面板无助于优雅地扩大用户群；它们更可能把用户吓跑。

相反，vibecode工具有机会实现设计工具梦寐以求但未能做到的事情：变得非常简单和简约！本着这种精神，任何“设计”标签页的核心部分都应该是内联编辑。

内联编辑演示

与其在侧面显示面板，我们可以实现更简单、更强大的功能。只需单击对象，该对象的属性下拉菜单就会在旁边出现。

属性下拉菜单出现在选定的对象附近

这是实现优美、流畅简洁性的机会。例如：

• 如果我们选择的是字体……我们就只显示与之相关的选项。
• 一个div？则显示间距和布局选项。
• 一张图片？显示替换、生成等显示选项。

保持简单和专注！

（示意图：添加了状态和圆角半径控件，由于未选择文本，移除了字体选择器）

我们还可以通过添加一个动作为特定组件打开小型AI聊天界面，从而（几乎）消除切换回完整AI聊天的需要。

展示一个迷你AI聊天界面

一些vibecode工具已经在这一领域引领潮流。例如Bolt和Dazl，这非常棒！

（示意图：Bolt 2.0版本正在朝着正确的方向推进产品） （示意图：Dazl，vibecoding社区中的一匹黑马，拥有非常强大的工具来编辑最终结果）

也就是说，在满足用户需求方面，我们的想象力是无限的。

3. 我们必须超越聊天机制

这是vibe coding世界中一个显而易见的开放性问题。在不与AI聊天交互的情况下，添加新内容的最佳方式是什么？例如，可能是来自组件库的组件？或新图像？或文本？我们可以用工具栏来做这个……但我想提出一个更好的灵感来源。

我们需要更好的“氛围感”（vibes），任何电子游戏成功与否在很大程度上都取决于这个原则。我们难道不能向它们学习以扩大我们的用户群吗？

（示意图：游戏《Dreams》拥有手柄的最佳界面之一，强烈建议了解其工作原理） （示意图：在《塞尔达传说：王国之泪》中，你可以做很多事情，非常多。而轮盘UI帮助轻松应对复杂性）

事实上，游戏充满了绝佳的UX想法，而网络和工具领域却完全忽视了它们，就好像它们永远不适用一样。以游戏《Dreams》为例，它包含了一个非常原生的工具，以至于人们正在用……手柄构建完整的游戏。

确实，游戏开发出的一个伟大的UX模式被网络工具极大地忽视了：控制轮盘。

使用控制轮盘添加文本块

Figma也曾为他们的UI3测试过类似的东西，但决定不推进。也许这是因为这会与既定的UX模式大相径庭。

（示意图：前Figma设计师Ryhan展示了他的控制轮盘演示。） （示意图：Figjam有一个用于图章的轮盘，效果非常好。）

我专门（用vibecoding）构建了一个完整的演示来测试它，让我告诉你——它太棒了。事实上，你可以自己看看。

使用控制轮盘构建一个简单的按钮

4. 为想要微调设计系统及其单个组件的用户提供更好的“氛围感”

设计系统在设计社区中已被深入探讨。与此同时，vibecode工具默认生成通用的设计系统。这里有一个大问题：为什么我们不给用户一种清晰简单的方式来编辑和更改这些组件、设计令牌和颜色？

我们需要一个UI来实现这一点。

组件选择可能是通向设计系统工作流程的第一步

Bolt已经允许用户连接他们自己的设计系统，这再次非常棒！

但是对于那些希望在已有设计系统之上进行构建的用户群体呢？一个有助于实现此目的的功能是能够独立地处理某个组件。

（相关阅读链接：你的项目需要设计系统的5个迹象）

我们可以在Figma、Framer和其他设计工具中看到这个功能，这个功能也将在vibecode工具中受到欢迎。这将为用户节省大量的“沮丧token”，因为我们锁定了一个东西，这意味着AI不会触碰产品的其他部分。

你能想象要求AI更改一个按钮，然后它“好意地”决定重新设计你的整个导航栏吗？你当然能！组件隔离不是“锦上添花”的东西，它可能是让我们所有人免于疯狂的唯一方法。

在隔离模式下编辑组件

5. 赋予用户创建自定义工作区的能力

想象一下，我们正在重复一个涉及反复修改文本的操作。我提到过侧边面板可能会让人不知所措，但实际上有正确的方法可以做到这一点。还记得Photoshop的工作区吗？

一个不可思议的概念：能够根据你的特定工作流程定制工作区。我曾为网页设计、插画和印刷设计设置过不同的工作区。这是已经失传的东西；一种被扼杀的“氛围感”。

但是，我们可以允许用户这样做，因为它可能非常有用。例如，用户可以将那些属性移动到一侧，然后将此配置保存为一个工作区。

需要将数百个元素更改为不同的字体吗？为用户省去一两次点击，就让他们将那个面板固定在右侧吧。

可以保存的排版和颜色工作区

机遇青睐勇者

这是一个神奇的时刻。创建vibecode工具的魅力之一在于它们尚未形成固定的模式。现在正是大胆和创新的时机，正是在这样的重大转变时期，机会之窗才会出现。

也就是说，真正的赢家将是我们的工具所赋能的新一代创作者！