AutoClaw · 完整设计过程

潘新月 · 个人设计项目

AutoClaw · Design Agent · 个人探索

2026.09

autoclaw

一个能为多份生成结果，继续设计的工作区

项目背景

当拿到结果后，设计还可能继续

我以 AutoClaw 的设计生成场景为起点，探索 HTML 产物生成后的工作体验：用户如何查看、预览、继续编辑，并在多个方向与配套页面之间工作。这是我个人提出的工作区改版方案。

对此 ,我的用户体验场景假设：

首次生成提供了一个可体验的设计起点。用户看到结果后，可能希望保留首稿、探索其他方向，也可能沿着确定的方向补齐更多页面。当这些 HTML 需要并存、比较或共同使用时，就产生了多设计产物管理需求

研究范围与约束

01

研究范围：聚焦生成后的工作链路

产品调研

以任务阻碍为依据，对照竞品，优先解决反复定位与重述需求的问题。

产品现状

01

主界面

当前打开的是设计任务，但侧栏同时展示其他智能体的历史、工具入口和积分提示。需要检查的是：用户能否看清正在做什么，以及哪些入口与当前工作有关。

01  当前任务与其他智能体的历史混在一起

当前正在做设计，侧栏却同时列出未参与本次任务的法律助手及咨询记录。虽然当前条目有高亮，但仍不容易分清哪些与正在做的任务有关，哪些只是过去的操作。

02  工具、配置与运营入口主次不清

“智能体、聊天平台、定时”在左上方；新手任务、模型配置、积分活动和技能入口在左下方。它们与任务列表共用侧栏，主次不清。

设计工作区

A、B 两个方向放在同一份 HTML 中。工具栏提供“全局微调”，但当前截图没有展示 A／B 的调整范围；只改其中一案时，仍需确认操作会影响哪里。

01  现状：能一起看，但仍是一份文件

顶部打开一个 HTML 标签，页面内部列出 A、B 两个方向。截图证明它们能同时展示，不能据此认定它们能分别保存和管理。

02  问题：调整范围没有说清

圈选处为“全局微调”入口，当前截图未展开面板，不能确认其作用范围。只想改 A、保留 B 时，需要进一步核对是否支持按方向调整。

竞品调研

生成之后，怎样找到、修改并继续使用结果？

围绕初稿后的比较、修改与补页，分析四款产品如何组织产物、承接修改并保留结果。

产品 / 依据	结果怎样组织	预览与修改怎样衔接	对本方案的启发与边界
Open DesignHTML 文件工作区部分操作核对 · 09.18	项目内用文件卡与独立标签承载产物，Preview / Code 围绕当前文件切换。	已核对两份导入 HTML 的文件卡、标签、预览与代码切换。样例为外部编写，未验证模型生成和局部编辑。	让对话中的产物进入可持续打开的工作区。文件入口清楚，但页面、方案与历史的归属仍需单独表达。
Claude Design设计项目与画布官方指南 · 09.13 留存	聊天与当前设计并置；探索另一方向前，可要求先保存当前设计。	结构调整走聊天；组件反馈用批注；位置、尺寸与对齐可直接操作。官方指南描述，未完成同任务实测。	按修改意图分配入口：确定值直接改，开放要求交给 Agent。保存后探索不等于已具备可视化分支或任意局部回滚。
Stitch多屏画布与原型部分操作核对 · 09.18	多张页面在画布并置，选中页面可带入对话；连接页面后进入原型预览。	已核对画布、选中引用与预览，并从活动页报名按钮跳转到报名页。未验证完整提交、版本恢复或局部编辑可靠性。	总览用于找与比，进入预览后检查真实路径。多个页面和多个候选方向应分层，不能仅靠空间位置区分。
Lovart视觉素材画布官方文档 · 09.13 留存	图片等资产在画布并置，用 Frame 收纳相关对象；AI 编辑可保留原资产并产生新结果。	选中对象后使用上下文工具，基础编辑与 AI 编辑分工；可引用画布对象继续提要求。	借鉴对象引用、结果并置和分组。图像编辑不等于 HTML 元素编辑；网页还需区分“选中修改”和“点击运行”。

01 / 查看与比较

总览找方案，预览看细节

画布承接并置比较与修改，独立预览用于体验网页行为。需要修改时返回画布，并保留当前对象与返回位置。

02 / 继续编辑

先指明对象，再表达改法

在画布点选页面与元素；字体、颜色、间距直接调整，结构改动用语言说明。点选只能减少歧义，不能保证模型绝不误改。

03 / 产物管理

方案分组，页面归组

把候选方向、配套页面、修改历史分开。先用清楚的归属与命名支撑续用，本期不扩展复杂分支树和自动审美评分。

竞品界面与关键操作

Open Design 项目中两份 HTML 文件的卡片与标签 — Open Design：两份导入 HTML 独立呈现

Stitch 多页面画布、选中页面和 Preview 菜单 — Stitch：选中画布页面后进入预览

Lovart 画布中的选中图片与分辨率菜单 — Lovart：选中图片后显示操作菜单

依据：2026.09.13 官方资料留存、09.18 产品内操作记录；未对四款产品完成同任务全链路测试。以上启发属于设计判断，尚未证明效率收益。下一步用“选定方向 → 补一页 → 离开后找回”对照普通文件夹与缩略图，检查是否少找错、少改错。查看来源与判断记录

判断取舍

以任务阻碍为依据，对照竞品，优先解决反复定位与重述需求的问题。

从看结果到继续做，用户不该反复找页面、重讲要求

看结果：来回切换，难以比较

逐份打开网页，再凭记忆对照内容与布局，容易漏掉差异，难以判断沿哪一份继续

提修改：重新定位，重述要求

从预览转到修改时，还要说明是哪一页、哪一处、哪些应保留，增加表达成本与改错风险。

继续做：分不清子页面归属

备选、配套页与修改历史混排时，要自行判断哪些一起用、当前改哪份，补页和重返都容易找错

用户体验痛点剖析

01

设计取舍

10

让多份结果继续被使用，优先解决三件事

本稿聚焦：已有两个首页方向，选定其中一案，继续修改并补齐子页。多方案需求仍是场景假设，以下是当前设计判断。

01

结果组织：画布还是列表

列表便于查找文件，画布便于同时比较。本场景需要对照两个首页方向，并识别各自的配套页，因此选择画布并置、按方案分组。

承担的代价

接受缩放、定位的学习成本；不要求用户手动整理每次生成的结果，补页后自动归组。

若列表＋标签页同样容易完成比较，且更快，则收缩画布的默认使用范围。

02

编辑方式：直接改还是让 AI 改

字号、颜色等目标明确的调整，选中元素后直接改；“让预约入口更突出”等开放要求，交给 Agent。按修改意图分工，减少小改动的描述与等待。

承担的代价

保留属性面板与对话两种入口，增加学习成本；换取确定值调整的即时反馈，也保留开放探索的空间。

若用户分不清该用哪个入口，就优化选中对象后的操作提示；用耗时与误改次数检验分工是否有效。

03

先补齐一案，再扩展探索

本稿深入“选方向后继续做”：继承当前页面补齐详情与预约页，再按组检查。新方向探索保留为入口，不展开另一条完整链路。

承担的代价

暂不展开跨方案合并、批量版本比较与协作；换取补页、归组、预览和重返的连贯性。

若主要任务只是单页修改，就降低方案组的存在感，优先完善单页编辑。

设计方案

视觉系统

蓝色给我理性、沉稳的技术感，更贴近我对智谱的品牌印象。橙色则让我感到温暖、活跃、外放，与这次希望表达的克制气质有距离。因此，本方案选择蓝色作为强调色。

# 2558B1

深蓝 · 按下态

# 337EFF

主蓝 · 主要操作

# ADCBFF

浅蓝 · 选区描边

# EDF4FF

淡蓝 · 选区底色

简易示意

01

核心体验链路一览

01

提出任务

查看&预览

继续编辑

补齐成果

整体检查

再次进入

Design Agent 首页设计

Before

After

Design Agent 工作区设计

Before

After

01.

多网页沉浸式预览

查看与预览

当一次生成包含多个页面时，如何并排查看和比较？

01

体验痛点：多页结果无法同时比较

逐个打开页面时，用户要反复切换并重新找到相同位置，结构、内容与视觉差异容易被遗漏。

设计点：

并排预览，保留比较上下文

同组页面在一个视野内并置，并各自保持滚动位置；用户可以直接对照同一区域，不再依赖短时记忆。

操作焦点可见，预览与编辑分工

标签和选中边框标记当前页面。预览区负责点击、滚动和检查路径；需要修改时再进入对应画布，避免操作对象混淆。

02

元素的局部编辑

02

设计灵感参考

体验痛点：小改动也要重写提示词

只改字体、颜色或间距时，用户仍要重新说明对象与目标；Agent 还可能连带改动已经确认的内容。

设计点：

选中元素后直接调整属性，结果即时可见；只有重组内容、探索表达等开放任务才调用 Agent，降低误改范围。

继续编辑

编辑阶段，如何兼顾确定值调整与开放式修改？

01

体验痛点：找参考会中断当前编辑

用户要离开工作区搜索、保存素材，再回来解释参考对应哪个页面和元素，上下文容易丢失。

确定值就地改，开放要求交给 Agent

设计点：

参考与当前页面同屏

在工作区内查找并放置参考，参考对象与当前选中页面一起传给 Agent；用户只需说明要借鉴的特征，不必重新描述上下文。

补齐成果

如设计网页需要补齐多个子页面时

01

03

单页生成一组方案

体验痛点：补页需要重述风格

确定一个方向后，用户仍要重复说明视觉语言、内容结构和页面关系；新结果也容易散落，分不清属于哪套方案。

设计点：

以当前页面为母版，补齐同一组

输入自动带上选中页面缩略图和所属方案，Agent 继承已确认的风格与结构；用户只需说明要新增的页面目标。

流体动画占位，完成后自动归组

现有页面保持可查看，新页面以流体动画呈现生成中的状态，并显示生成进度；完成后替换为页面内容，自动加入当前方案组，保持来源与归属清晰。

点击控制展开 / 收起（上展开，下收起）

方案深化

当探索出多个方向时，如何保持方案与页面的关系？

01

04

多组方案的管理操作

体验痛点：方案一多，页面归属就混乱

方向与页面增多后都铺在画布上，用户难以判断哪些页面属于同一方案；移动、比较或继续编辑时容易选错版本。

设计点：

以方案组为单位管理，页面关系不丢

组框、标题和缩略图明确归属；点击组控件可展开或收起文件组，以弹性动画过渡。展开查看组内页面，收起便于比较多组方案。

总览与单页之间保持空间连续

从方案组进入页面时保留位置与缩放关系，返回后仍能知道它在组中的位置，减少在大画布里重新定位。

04

当前会话的产物管理

明确网页归属和分组

输入框带上首页缩略图，用户可以围绕它表达“沿用什么、补充什么”，减少重新描述已有视觉方向的劳动。

支持编辑修改

输入框带上首页缩略图，用户可以围绕它表达“沿用什么、补充什么”，减少重新描述已有视觉方向的劳动。

过渡

整理与检查

当页面具备跳转关系时，如何检查完整体验路径？

01

04

支持交互原型预览

体验痛点：静态页面看不出真实操作路径

逐张查看只能判断视觉，无法确认入口、跳转、返回和连续操作；多套方案并存时，也容易预览到错误版本。

设计点：

预览入口跟随方案组，限定范围

从方案组直接启动原型，只加载组内页面与连接关系，避免把不同方向或旧版本混入同一次检查。

真实跳转配合缩略图，检查完整路径

页面链接按原型运行，侧边缩略图同步当前位置并支持快速跳转；用户可连续检查主路径、返回路径和缺失页面。

再次进入

当再次进入项目时，如何快速找回并继续上次工作？

01

03

项目产物管理

体验痛点：离开后难找回正确版本

生成结果散在对话和画布里。再次进入时，用户要先回忆项目、方案方向和最后编辑的页面，容易打开错误版本。

设计点：

按项目收拢产物，带上下文继续

首页按项目展示封面、最近更新时间和产物数量。进入项目后恢复上次方案与页面位置，用户可以直接继续，不必从对话记录重新寻找。

验证设计价值

22

看用户能否少找错、少改错

验证计划（待执行）：比较操作效率与误操作，检验工作区是否更易用。

探索性可用性测试：观察操作障碍

首轮计划邀请 5 位有多页设计需求的目标用户，观察比较、修改与找回页面时的障碍；根据问题覆盖情况追加招募并迭代复测。时间与误操作仅作描述性比较。

用户任务

观察什么

问题记录与迭代依据

比较两案，只修改指定首页

是否选错方案或元素；从预览到编辑的切换次数；是否需要重述对象。

记录对象误选与误改；优先解决用户未察觉的误操作。

沿选定方案补两页并检查跳转

能否说清新页面归属；是否混入另一方案；能否走通详情到预约的路径。

记录归属混淆与路径中断，修改后复测。

离开后找回刚才的页面

找回正确方案与页面的时间；误开次数；是否重新搜索对话记录。

观察能否独立找回；描述性比较耗时与误开次数。

AI 工具使用说明

设计方案由我独立完成，AI 辅助查找和整理相关资料。另使用 Codex 将 Figma 设计稿制作成 HTML，辅助完成展示页面的排版与实现。

本项目为个人概念设计，生成效果为方案示意；尚未上线或开展用户测试，预期收益不代表实测结果。

潘新月 · 个人设计项目

电话&微信

13532282504

联系邮箱

[email protected]

2026

autoclaw

产品 / 依据	结果怎样组织	预览与修改怎样衔接	对本方案的启发与边界
Open DesignHTML 文件工作区部分操作核对 · 09.18	项目内用文件卡与独立标签承载产物，Preview / Code 围绕当前文件切换。	已核对两份导入 HTML 的文件卡、标签、预览与代码切换。样例为外部编写，未验证模型生成和局部编辑。	让对话中的产物进入可持续打开的工作区。文件入口清楚，但页面、方案与历史的归属仍需单独表达。
Claude Design设计项目与画布官方指南 · 09.13 留存	聊天与当前设计并置；探索另一方向前，可要求先保存当前设计。	结构调整走聊天；组件反馈用批注；位置、尺寸与对齐可直接操作。官方指南描述，未完成同任务实测。	按修改意图分配入口：确定值直接改，开放要求交给 Agent。保存后探索不等于已具备可视化分支或任意局部回滚。
Stitch多屏画布与原型部分操作核对 · 09.18	多张页面在画布并置，选中页面可带入对话；连接页面后进入原型预览。	已核对画布、选中引用与预览，并从活动页报名按钮跳转到报名页。未验证完整提交、版本恢复或局部编辑可靠性。	总览用于找与比，进入预览后检查真实路径。多个页面和多个候选方向应分层，不能仅靠空间位置区分。
Lovart视觉素材画布官方文档 · 09.13 留存	图片等资产在画布并置，用 Frame 收纳相关对象；AI 编辑可保留原资产并产生新结果。	选中对象后使用上下文工具，基础编辑与 AI 编辑分工；可引用画布对象继续提要求。	借鉴对象引用、结果并置和分组。图像编辑不等于 HTML 元素编辑；网页还需区分“选中修改”和“点击运行”。