AI Agent 建站产品设计升级

ProductWegic

Role产品设计师

Year2025

✦

Wegic 2.0 上线后的订阅转化率较 1.0 提升 1 倍，我主导了 Agent 建站体验的整体重设计。

背景

Wegic 是一款面向纯小白的 AI 建站产品。

产品因为技术架构过时，导致需求推进缓慢、退款率居高不下、业务发展受阻。在 2025 年 9 月，业务进行了组织结构调整，重做产品，推出 wegic 2.0。

本项目是架构更新后，对 1.0 从功能范围到交互 UI 的重设计。

wegic.ai

打开站点

滚动至此加载网页预览…

旧技术架构的弊端

1.0 基于 workflow 架构。用户 query 输入后先用 AI 判断任务类型。再根据结果，特例处理。带来最直观的影响：

退款率高

AI 没有上下文。用户在修改网页时，直观感受就是 AI “不听话”、“改不成东西”。这是导致退款率居高不下的核心问题

产品日益复杂，逐渐脱离定位

由于旧架构扩展性差，对话建站产品内的诸多需求被迫采取降级方案，用 GUI 的方式实现。这类 case 的堆积导致产品越来越复杂、难用。逐渐脱离定位。

新技术架构带来的变化

2.0 采取的是 Agent 架构。简单来讲，让 AI 变得更聪明，用户的指令能够准确执行。原先诸多用 GUI 使用的交互逻辑，大部分均可用对话交互体系来实现。产品交互方式一致，用户更容易用起来。

Wegic 2.0 MVP 范围与边界

Wegic 2.0 满足的核心价值以「用户在产品内完成建站为目标」，我们定义了 mvp 的范围与边界。核心做了一件事情，就是砍功能。

用统一的对话交互逻辑平替所有 GUI 特例功能
撇去旧架构下无法移植/不必要的功能

分类	具体项	处理方式
可 AI 替代的 GUI 操作	模块上移 / 下移新增模块删除模块复制模块字体修改全站颜色修改页面切换选择器当前位置索引批量上传图片上传参考图上传手绘上传附件 / 内嵌 weights 选中对象弹出相关功能指令面板	1. 移除；2. 通过增强用户多模态输入来解决
新架构下无法迁移功能	留咨表单支付功能	在新架构下重做产品设计方案，因体量大不在 MVP 做
新架构下不需要功能	绿色定位器	直接移除
早期不完善且上线后长期未迭代	圈绘（且有多处存在）信息同步 AI 客服智能建议（是写死的建议）	记录到需求池内，上线后按优先级判断是否重做方案
必要性不足在一级页面的信息 / UI 入口	积分剩余域名网站状态网站设置	若信息在其他地方可见则移除；独立 UI 入口收纳到二级页面
界面简化后不必要的引导	界面教程的引导商业化增长为目标的 onboarding 流程、付费弹窗	移除

界面与交互框架设计

界面简化与结构调整

根据范围层梳理结果，移除掉大量 GUI
剩余功能/信息按重要性、频率将核心功能外露至一级界面；次要功能进行收纳二级/概念合并
对话面板调至左侧，加强以「对话为主」印象。并为后续扩展留出空间。

改版后优势：

用户任务更清晰，使用更聚焦。从 1.0 录屏观测，用户进入产品后会在各个按钮中来回犹豫、点击探索，整个过程持续 8–15s 左右。
改版后从定性 30 条用户操作录屏来看，用户进入编辑页后平均 5s 内进入对话编辑。

交互模式改变

1.0 是默认进入编辑模式，点击网页内的元素出现【对象-功能】面板。这种交互模式带来的弊端是：

突然出现的 GUI 面板增加学习成本
用户容易一开始就陷入细节编辑，但这不是修改网站的最佳路径
用户修改后，如果要预览网页的效果。需要点击进入 Preview 后才可以查看。使用连续性存在问题。
该信息在多个页面/区块内都存在，这种单点修改不如系统性修改

2.0 将 “选中元素” 作为模式，用户在需要时主动开启。默认情况下，就和在浏览器中访问网站的体验是一样的。

对话中的 Agent 运行与任务呈现设计

理解 Agent Loop

与传统软件不同，Agent 产品不是建立在固定流程上的，因此很多传统的软件设计方法在这里会失效。

过去，通常可以先把用户路径、页面状态和功能节点定义清楚，再围绕这些确定性的流程去组织界面和交互；但 Agent 的底层执行机制是 Agent Loop，它会根据当前任务进展自主判断、循环调用工具，并在过程中不断调整下一步动作，直到任务完成。

对 AI 行为分类

行为1：【消息回复】 LLM 无须调用工具，文本回复

行为2：【Agent Loop】 LLM 循环调用 Tools 完成任务并回复用户

disney.wegic.app

Free plan

这个网站怎么用？

第一类

disney.wegic.app

Free plan

帮我生成一个官网。

Waiting to start...

第二类

Agent Loop 设计挑战

我们需要把 Agent Loop 的运行逻辑转换为小白用户可理解、可预期的简单体验
在此基础上，我们还希望延续 1.0 的 3 个 IP 形象。我们希望用户建立“有一堆小精灵正在帮我干活的感觉”，而不是一个 AI 工具正在运行的感觉

设计思考

从小白用户出发，比起把真实的系统运行过程呈现出来。一个熟悉、可直观理解、可预期的体验更为重要。

把系统运行的过程如实呈现对用户而言没有价值。用户无法在去评估过程是否正确，用户只会关注结果是否是他们想要的。信息曝出来只会让产品变得复杂

基于这个判断，Agent Loop 卡片内所有元素共同服务的目标是 「在感性上塑造 AI 正在干活」的直观感受。而不需要从具体行为去理解

Agent Looping 具体设计方案

Waiting to start...

Wegic Studio

Say what everyone is up to.

用进度概念取代系统逻辑

用 “进度条” 来替代实际 Agent Loop 过程。进度条是最直观、最简单的预期管理工具。用户可以直观理解：AI 正在运行、现在进行到多久、还剩多少。虽然 Agent Loop 本身并不存在天然的进度概念，但从认知负担、等待时安慰剂效应来讲，利大于弊

用 IP 动画解释 Tools 调用

不直接展示复杂的工具调用细节，而是让 3 个 IP 以“分工协作”的动画状态出现，比如思考、查找、搬运、整理、交付。用户不需要理解背后具体调用了什么工具，只需要直观感受到：有一群小精灵正在替我处理事情，而且每一步都在向结果推进。这样既能弱化系统技术感，降低理解门槛。

信息分层

在卡片的末尾，系统运行会被包装为白话的概念，直观地告诉用户 AI 正在做什么，并且实时更新。这样是为了增强“真实正在干活”的感觉。如果用户想深入了解，点击这个信息就可以查看全量的 Agent Loop 运行过程。

Agent Looping 设计落地细节

识别系统能力

先梳理清楚系统里有哪些 Tools 和 Skills：

类型	名称
Tool	assignTaskTool、listDirectoryTool、readFileTool、writeFileTool、searchReplaceTool、genImageTool、editImageTool、genVideoTool、webSearchTool、deepResearchTool、managePlanTool、readLogTool、globTool、grepTool、execCommandTool、skill-enhance、firecrawl
Skill	design（website、effect）、visual（hero_video、launch_video、gen_logo）

概念包装

将 Tools 和 Skills 按任务概念归类；每次调用工具时，卡片上出现使用用户能理解的白话告知用户 AI 正在做什么。

任务类型	对应工具	面向用户的内容	负责 IP
找文件	readFileTool、grepTool、listDirectoryTool、globTool	正在在项目里搜索与「配送范围」相关的页面文件。 / 正在打开 `faq.html` 核对退换货说明段落。	Timmy、Turi
做计划 / 更新计划	managePlanTool	正在把你的「春季上新」拆成拍摄、修图、上架、质检四步清单。 / 正在根据刚提到的预算，更新当前任务优先级。	Kimmy
素材制作	genImageTool、editImageTool、genVideoTool	正在按你的要求生成或编辑图片与视频素材（如门店主视觉、裁切调色、产品宣传视频等）。	Kimmy
做设计	searchReplaceTool、execCommandTool、writeFileTool	正在把「关于我们」文案写进页面并统一字号与行距。 / 正在把主题色与按钮圆角写进站点样式文件。	Kimmy
调研	firecrawl、deepResearchTool	正在检索同城烘焙店的套餐定价与活动页结构。 / 正在针对「低糖礼盒」做更深一轮的资料检索与要点摘要。	Kimmy、Turi
测试	readLogTool	正在读取最新部署日志，确认表单提交接口是否报错。	Timmy