氛围编程工具如何从设计UX中汲取灵感并赢得用户

本文探讨了氛围编程工具如何借鉴设计工具的用户体验理念,提出了五个关键改进方向,包括将设计作为一等公民、简化内联编辑、超越聊天机制、优化设计系统编辑以及支持自定义工作区,旨在帮助开发者工具突破当前局限。

氛围编程工具可以从设计UX中学习并赢得所有人

2025年11月19日

主题:设计、开发者体验、AI、开发工具设计 作者:Arthur Objartel,产品设计师 技术编辑:Travis Turner

对于开发氛围编程工具的开发者来说,实现盈利的唯一途径是真正抛弃“氛围编程”范式,重新聚焦于开发“终极创作工具”,在这个过程中打开大众消费市场。我们可以从设计领域寻找5个能够实现这一目标的见解和解决方案。

1. 将设计视为值得标签化的一等公民

我的一个朋友——一个完全不懂技术的流媒体主播——想为他的直播创建一个自定义的宾果游戏。我向他展示了Bolt。几小时内,他就做出了可用的东西。这家伙很惊讶。

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

所有的表情包、他想要的特定氛围以及那些能让项目具有个人特色的小细节,都让这项工作变成了令人沮丧的苦差事。我不得不介入帮助他让东西看起来合适。尽管如此,即使有我的帮助,他告诉我这仍然是一次神奇的体验。

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

理想情况下,这个标签应该是用户可以切换到“微调”模式的地方,并且可以自由编辑而不受AI聊天的干扰。不过,如果由于某种原因需要聊天,只需将鼠标悬停在左侧附近就可以轻松打开。

在设计模式下,只需将鼠标悬停在左侧附近即可打开聊天

这将是一个用户可以根据自己的喜好微调和改进产品而无需花费太多(如果有的话)令牌的地方。

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

氛围代码工具不需要成为设计工具,也不需要成为Figma 2.0。复杂性、太多需要控制的东西以及臃肿的侧边面板不会优雅地扩大受众群体;它们更可能吓跑用户。

相反,氛围代码工具有机会做到设计工具一直梦想但无法做到的事情:非常简单和极简!本着这种精神,任何“设计”标签的核心部分都应该是内联编辑。

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

这是实现美观、流线型简洁性的机会。例如:

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

保持简单和专注!

我们还可以通过添加一个操作为特定组件打开小型AI聊天来(几乎)消除切换回完整AI聊天的需要。

一些氛围代码工具已经在这个领域领先。例子包括Bolt和Dazl,这很棒!

也就是说,在满足用户需求方面,我们的想象力是这里的极限。

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

这是氛围编程世界中一个明显的开放性问题。在不与AI聊天互动的情况下添加新内容的最佳方式是什么?比如组件库中的组件?或者新图片?或者文本?我们可以用工具栏做到这一点……但我想提出一个更好的灵感来源。

我们需要更好的氛围,任何视频游戏的成功很大程度上都基于这个原则。我们难道不能向它们学习来扩大我们的受众吗?

事实上,游戏充满了伟大的UX想法,而网络和工具却完全忽视了这些想法,好像它们永远无法应用在这里。以Dreams为例,这是一款具有如此原生工具的游戏,人们正在构建完整的游戏……使用控制器。

确实,游戏开发的一个伟大UX模式被网络工具大大忽视了:控制轮。

Figma也为他们的UI3测试了类似的东西,但决定不继续推进。也许这是因为这将与已建立的UX模式有很大不同。

我构建(氛围编码)了一个完整的演示只是为了测试它,让我告诉你——它太棒了。实际上,你自己看看吧。

4. 我们需要为想要微调设计系统及其单独组件的用户提供更好的氛围

设计社区已经深入探索了设计系统。与此同时,氛围代码工具默认生成通用的设计系统。这里有一个大问题:为什么我们不给用户提供清晰简单的方式来编辑和更改这些组件、令牌和颜色?

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

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

但是对于那些想要在预先存在的设计系统基础上构建的用户群体呢?一个有帮助的功能是能够单独处理一个组件。

我们可以在Figma、Framer和其他设计工具中看到这个功能,这个功能在氛围代码工具中也会受到欢迎。这将为用户节省大量的“挫败感令牌”,因为我们锁定了一件事,这意味着AI不会触碰产品的其他部分。

你能想象要求AI更改一个按钮,然后它“有帮助地”决定重新设计你的整个导航吗?当然你能!组件隔离不是“锦上添花”的东西,它可能是让我们所有人不发疯的唯一方法。

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

想象一下,我们正在重复一个涉及反复触摸文本的文本。我提到过侧边面板可能会让人不知所措,但实际上有一种正确的方法可以做到这一点。你能回忆起Photoshop的工作区吗?

一个不可思议的概念:能够为你的特定工作流程定制工作区。我有用于网页设计、插图和印刷设计的工作区。这是已经丢失的东西;一种被扼杀的氛围。

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

需要将数百个元素更改为不同的字体?为自己节省一两次点击,只需让用户将那个面板固定在右侧。

命运眷顾勇敢者

这是一个神奇的时刻。创建氛围代码工具的部分魅力在于它们还没有建立固定的模式。现在是大胆和创造的时候了,正是在这样的大转变期间,机会之窗出现了。

也就是说,真正的赢家将是我们的工具赋予力量的下一代创意人!

Irina Nazarova,Evil Martians CEO

在Evil Martians,我们了解如何利用AI来增强开发者工具。雇佣我们来提升你的开发工具水平!

comments powered by Disqus
使用 Hugo 构建
主题 StackJimmy 设计