[{"data":1,"prerenderedAt":255},["ShallowReactive",2],{"blog-post-/blogs/agent-ui-dont-overcomplicate":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"date":10,"image":11,"alt":12,"ogImage":11,"tags":13,"published":17,"body":18,"_type":248,"_id":249,"_source":250,"_file":251,"_stem":252,"_extension":253,"sitemap":254},"/blogs/agent-ui-dont-overcomplicate","blogs",false,"","Agent 的界面，别搞太复杂","大多数 Agent 产品，界面越简单越好。对话是入口，但别止步于对话。","2026-08-09","/blogs-img/blog.jpg","Agent 界面设计 - 简洁对话式交互",[14,15,16],"AI Agent","产品设计","生成式UI",true,{"type":19,"children":20,"toc":237},"root",[21,29,34,40,45,50,55,61,66,71,76,81,86,91,97,102,107,112,117,122,127,132,137,143,148,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,232],{"type":22,"tag":23,"props":24,"children":25},"element","p",{},[26],{"type":27,"value":28},"text","做 Agent 开发的人很容易陷入一个误区：觉得得给用户做个漂亮的界面。",{"type":22,"tag":23,"props":30,"children":31},{},[32],{"type":27,"value":33},"我的判断恰恰相反——大多数 Agent 产品，界面越简单越好。",{"type":22,"tag":35,"props":36,"children":38},"h2",{"id":37},"对话就是最自然的界面",[39],{"type":27,"value":37},{"type":22,"tag":23,"props":41,"children":42},{},[43],{"type":27,"value":44},"你跟 Agent 说话，它帮你干活。这就够了。",{"type":22,"tag":23,"props":46,"children":47},{},[48],{"type":27,"value":49},"不需要仪表盘，不需要侧边栏，不需要一堆按钮。你说\"帮我分析这个月的销售数据\"，它给你结果就行。",{"type":22,"tag":23,"props":51,"children":52},{},[53],{"type":27,"value":54},"传统软件那套交互逻辑——菜单、表单、导航——在 Agent 时代是多余的。因为你本来就不需要用户去\"操作\"什么，他只需要\"说\"。",{"type":22,"tag":35,"props":56,"children":58},{"id":57},"但简单不等于只有聊天框",[59],{"type":27,"value":60},"但\"简单\"不等于\"只有聊天框\"",{"type":22,"tag":23,"props":62,"children":63},{},[64],{"type":27,"value":65},"这里要澄清一下。",{"type":22,"tag":23,"props":67,"children":68},{},[69],{"type":27,"value":70},"我说界面要简单，不是说所有 Agent 都做成一个聊天窗口就完事了。",{"type":22,"tag":23,"props":72,"children":73},{},[74],{"type":27,"value":75},"而是说，界面应该跟着任务走。",{"type":22,"tag":23,"props":77,"children":78},{},[79],{"type":27,"value":80},"你跟 Agent 聊着聊着，它觉得这时候给你看一张图表比给你一堆文字更清楚，那就弹个图表出来。你说要选一个方案，它就给你几个能点的卡片。",{"type":22,"tag":23,"props":82,"children":83},{},[84],{"type":27,"value":85},"不是提前设计好的，是它自己判断的。",{"type":22,"tag":23,"props":87,"children":88},{},[89],{"type":27,"value":90},"这就是\"生成式 UI\"的意思——界面是 Agent 按需生成的，不是开发者提前画死的。",{"type":22,"tag":35,"props":92,"children":94},{"id":93},"google-去年开源了个-a2ui-协议",[95],{"type":27,"value":96},"Google 去年开源了个 A2UI 协议",{"type":22,"tag":23,"props":98,"children":99},{},[100],{"type":27,"value":101},"这个东西值得关注。",{"type":22,"tag":23,"props":103,"children":104},{},[105],{"type":27,"value":106},"核心思路很简单：Agent 不写前端代码，它只输出一段 JSON，描述\"这里需要一个柱状图\"或者\"这里需要三个选项卡\"。然后前端拿到 JSON，自己渲染。",{"type":22,"tag":23,"props":108,"children":109},{},[110],{"type":27,"value":111},"安全、跨平台、不会搞出安全问题。Google 自己的 Gemini Enterprise 已经在用了。",{"type":22,"tag":23,"props":113,"children":114},{},[115],{"type":27,"value":116},"这个协议的意义在于，它把\"Agent 动态生成界面\"这件事标准化了。以前大家各搞各的，现在有了统一的语言。",{"type":22,"tag":35,"props":118,"children":120},{"id":119},"做得好的产品长什么样",[121],{"type":27,"value":119},{"type":22,"tag":23,"props":123,"children":124},{},[125],{"type":27,"value":126},"Cursor 是个好例子。它没有把 AI 做成一个独立的聊天窗口让你来回切换，而是让对话和编辑器共存。你说需求，它直接在编辑器里改，你实时看到变化。",{"type":22,"tag":23,"props":128,"children":129},{},[130],{"type":27,"value":131},"Claude Artifacts 也是。你跟它聊着，它直接给你生成一个能用的交互式小程序。不用切换，不用配置，就在对话里。",{"type":22,"tag":23,"props":133,"children":134},{},[135],{"type":27,"value":136},"这些产品的共同点：界面是跟着任务\"长\"出来的，不是提前规划好的功能模块。",{"type":22,"tag":35,"props":138,"children":140},{"id":139},"花里胡哨的界面反而限制-agent",[141],{"type":27,"value":142},"花里胡哨的界面反而限制 Agent",{"type":22,"tag":23,"props":144,"children":145},{},[146],{"type":27,"value":147},"这是我最想说的。",{"type":22,"tag":23,"props":149,"children":150},{},[151],{"type":27,"value":152},"很多团队花了大量时间做界面设计——侧边栏、设置面板、工作流编辑器、数据可视化仪表盘。看起来很专业。",{"type":22,"tag":23,"props":154,"children":155},{},[156],{"type":27,"value":157},"但问题是，你每多一个按钮，就多一个\"Agent 必须配合这个按钮\"的约束。",{"type":22,"tag":23,"props":159,"children":160},{},[161],{"type":27,"value":162},"Agent 本来能做 100 件事，但你的界面只暴露了 10 个入口，用户就以为它只能做 10 件事。",{"type":22,"tag":23,"props":164,"children":165},{},[166],{"type":27,"value":167},"界面越复杂，Agent 的能力越被框死。",{"type":22,"tag":35,"props":169,"children":171},{"id":170},"真正该投入的是什么",[172],{"type":27,"value":170},{"type":22,"tag":23,"props":174,"children":175},{},[176],{"type":27,"value":177},"把精力放在 Agent 的能力上，不是界面上。",{"type":22,"tag":23,"props":179,"children":180},{},[181],{"type":27,"value":182},"模型够不够聪明？工具调用够不够准？上下文管理够不够好？这些才是决定体验的核心。",{"type":22,"tag":23,"props":184,"children":185},{},[186],{"type":27,"value":187},"界面？对话为主，需要的时候动态生成组件就够了。",{"type":22,"tag":23,"props":189,"children":190},{},[191],{"type":27,"value":192},"Vercel 的 AI SDK 能做这个事，Google 的 A2UI 也能。技术门槛不高。",{"type":22,"tag":35,"props":194,"children":196},{"id":195},"再往后看一步",[197],{"type":27,"value":195},{"type":22,"tag":23,"props":199,"children":200},{},[201],{"type":27,"value":202},"更远的将来，Agent 可能连对话都不需要了。",{"type":22,"tag":23,"props":204,"children":205},{},[206],{"type":27,"value":207},"它会自己观察你在干什么，理解你的意图，直接帮你做。不用你说，它自己判断。",{"type":22,"tag":23,"props":209,"children":210},{},[211],{"type":27,"value":212},"行业里管这个叫\"意图式计算\"。据说用了这种方式的企业，单个任务处理时间平均缩短 40 分钟。",{"type":22,"tag":23,"props":214,"children":215},{},[216],{"type":27,"value":217},"但这是后面的事。眼下先把对话体验做好就够了。",{"type":22,"tag":35,"props":219,"children":221},{"id":220},"总结一句话",[222],{"type":27,"value":220},{"type":22,"tag":23,"props":224,"children":225},{},[226],{"type":22,"tag":227,"props":228,"children":229},"strong",{},[230],{"type":27,"value":231},"Agent 的核心是能力，不是界面。界面该简单就简单，该出现的时候再出现。",{"type":22,"tag":23,"props":233,"children":234},{},[235],{"type":27,"value":236},"别让用户适应你的产品，让你的产品去适应用户。",{"title":7,"searchDepth":238,"depth":238,"links":239},2,[240,241,242,243,244,245,246,247],{"id":37,"depth":238,"text":37},{"id":57,"depth":238,"text":60},{"id":93,"depth":238,"text":96},{"id":119,"depth":238,"text":119},{"id":139,"depth":238,"text":142},{"id":170,"depth":238,"text":170},{"id":195,"depth":238,"text":195},{"id":220,"depth":238,"text":220},"markdown","content:blogs:agent-ui-dont-overcomplicate.md","content","blogs/agent-ui-dont-overcomplicate.md","blogs/agent-ui-dont-overcomplicate","md",{"loc":4},1786271119335]