1. 产品介绍

用自然语言搭建应用,再在画面上完成小修改

Bolt.new 是浏览器里的 AI 应用构建工具。用户描述需求后得到可运行的项目,还能查看和修改代码、继续提出要求,再发布网站或应用。它适合把一个想法推进到可操作的原型,而不只是生成一张效果图。

初稿出来后,需求常常变得很具体:标题再大一点,按钮换成品牌色,副标题换一句话。每件小事都重新组织一段提示词,会把视觉判断变成语言描述。9 月 3 日推出的 Visual Edits 为这个阶段增加了直接操作入口。

前半段是预览与待保存意图,Save changes 才更新代码并消耗模型用量。结果检查是建议的人工步骤,整批历史恢复不等于单项撤销。可放大查看。

2. 核心使用流程

从初稿中选中具体对象,再调整看得见的属性

以社区修理活动介绍页为教学情境,初稿已能运行,接下来要放大标题、调整按钮颜色并改一句副标题。打开 Visual Edits,用 Select(选择)指向元素,再调整属性。

选择回答“改哪里”,控件设置字号与颜色等确定值;更开放的布局要求仍用提示表达。工具栏不等于自由拖拽所有布局。先知道入口负责哪类修改,可以减少用一句模糊指令反复猜目标。

把局部尝试整理成一次可检查的提交

  1. 先看预览:改标题或按钮后观察视觉层级,此时看到变化不代表代码已经保存。
  2. 加入待保存批次:通过 Add changes(添加修改)收集修改,再继续处理其他对象。官方说明批次按页面组织,并用元素标记与数量提示待提交内容。
  3. 删减不采用的尝试:发布说明指出,再次调整同一元素会更新已有修改,移除一项也会恢复预览。清单应反映最终意图,而不是所有中间试探。
  4. 集中保存:Save changes(保存修改)才让 Bolt 处理整批并更新项目代码。预览调整免费,保存到代码消耗模型 token(用于计费的文本处理量),应在这一刻看清范围。

活动页作者由此可以先把标题、文案和按钮放在一起判断,再提交整组决定。批次的价值是让试验有停留位置,而不只是少点几次发送。

保存之后检查结果,恢复时看清批次范围

保存后查看实际内容与交互,再用响应式预览检查窄屏换行和按钮。模型完成处理,不等于所有页面状态都已验证。

未保存的项目可以单独移出批次;已保存的单项目前不能单独撤回,需要借项目版本历史回退整批。把不相关改动随手混进一个大批次,会扩大恢复时需要考虑的范围。一次提交前整理意图,正是在为后续检查和恢复留下清楚边界。

3. 设计亮点与借鉴

把指代问题交给选择,把数值问题交给控件

“上面那个蓝色按钮”对人很直观,对模型却可能指向多个对象。点击元素先固定了位置,控件再承接字号和颜色这样的确定值,提示框留给更开放的要求。这种分工减少了把一个已知目标重新翻译成文字的负担。

颜色选择也借用了当前页面的上下文:发布说明提到,预设色来自已经渲染的页面,元素名称也更接近日常语言。用户调整活动页时,可以从现有颜色里辨认应该沿用的色彩,而不是从空白色盘重新猜一个值。这个入口提供的是可辨认的起点;哪种颜色适合、对比度是否足够,仍由设计者检查。

它的启发不是让工具栏包办所有设计,而是把不同性质的表达放在合适的入口:选择回答“哪里”,控件回答“具体多少”,文字回答“为什么以及还要什么”。对象与意图越清楚,后续确认越容易围绕同一处变化展开。

待保存批次,让“试一下”和“提交”成为不同动作

在同一按钮上反复改颜色,用户通常是在寻找最后满意的颜色,并不希望模型依次执行所有中间尝试。Bolt 的发布说明描述了这种处理:再次调整同一元素会更新已有修改;移除一项时,预览也恢复。

批次因而不只是把几条请求装进一封信。它把尚未确定的试探,转成可以检查、删减和一次提交的修改清单。活动页作者可以先让标题和按钮一起出现在眼前,判断层级,再决定保存。

这同时要求产品把状态讲清楚。预览里的改变、待保存的清单、模型处理后的代码是三个不同位置;如果画面已经变了,却没有显眼的待保存状态,用户很容易以为离开页面也没关系。官方指南用元素标记与批次数量提示尚未提交的修改,并将批次按页面组织。

可以借鉴的是这条边界:让用户低成本尝试,但在提交前把范围呈现出来。集合越大,越需要能回到具体对象检查;一次提交的便利,不应让某个早已忘记的修改被顺带送出。