Agent生成页面时代，设计师的判断力与精细化设计价值凸显

去年我还在跟人争论AI到底能不能取代设计师，今年已经不怎么争论了。因为我发现一个反直觉的事实：那些最会用Agent生成页面的人，不是急着省事的工程师，而是原本就懂设计、懂业务、懂用户体验的设计师。当工具的产出速度从“一天一稿”变成“一分钟十稿”，制约产出的短板就不再是手速，而是你能不能判断哪一稿值得继续投入、哪些细节必须人工修正。这个判断力，恰好是设计师最值钱的部分。

所谓Agent生成页面，简单理解就是你用自然语言描述需求，让AI Agent直接吐出可运行的界面代码或可编辑的设计稿。这类产品现在很多：Vercel v0、Figma AI、Claude和GPT自带的Artifacts、Cursor里的智能体，都能做到。它们的共同点是，把“从想法到页面”的物理耗时压缩到几乎为零。这确实很震撼，但震撼之后你会很快发现一个尴尬的事实：生成的页面能跑，却不一定能用。布局是合理的，配色是干净的，但总觉得缺了点什么。缺的是设计判断。是谁在定义问题、谁来控制信息层级、谁为各种状态兜底、谁对品牌质感负责，这些恰恰是设计师过去多年积累的核心能力。

1. 先看结论：Agent生成页面越强，设计师的“判断力”越值钱

与其担心“Agent会不会让我失业”，不如先理解一件事：Agent消灭的是“从零到一页”的体力劳动，但放大了“从一页到一套高质量产品”的脑力劳动。过去一个简单的活动落地页，设计师要画线框、出视觉、做适配、切图交付，一套流程走下来两三天。现在Agent两分钟能给你六七版不同的表达方式，看起来都“不错”。可一旦进入真实业务场景，你就会发现：用户目标是什么？主次信息怎么排？支付失败怎么提示？手机上一行标题放不下怎么截断？这些Agent都不会替你决定。

1.1 当“生成”变成送分题，基础执行能力开始贬值

可以拿画图标来类比。当年很多团队需要设计师手动画一套图标，主要工作是把路径调顺、像素对齐。现在图标生成工具遍地都是，一套基础风格图标只要描述清楚就能出几十个变体。结果是什么呢？不是“图标设计”这个岗位消失了，而是“只是会画图标”的人越来越难找工作。因为当生成成本趋近于零，使用者需要的能力变成了“判断这组图标放在这个产品里是否成立”“不同场景下是否需要更粗的描边”“它和整体排版语言是否一致”。

Agent生成页面也是如此。以前“把需求变成静态页面”是一个有门槛的技能，现在门槛被拉平了。会提问的人、能描述清楚业务约束的人、能识别出生成稿里隐含问题的人，才真正拥有稀缺性。换句话说，基础执行变成了送分题，设计决策变成了拉分项。

1.2 真正稀缺的是“定义问题”和“体验决策”

我见过不少团队拿到Agent生成的页面后直接提测，结果密密麻麻都是小问题：按钮位置不统一、空数据页面只有一行字、深色模式下一部分文字对比度不合格。这些问题不是不能修，但它们暴露了一个本质：没有人承担“体验标准”的责任。设计师的价值恰恰就在这里。

你可以在三个层面看到设计师的新角色。第一，需求翻译层。业务方说的“想要高级感”，不会自动变成金牌Agent的输入，需要设计师把它拆成明确的视觉约束：冷灰背景、宽松留白、克制的强调色。第二，方案决策层。Agent生成十个方案，哪个更贴近目标用户习惯、哪个更符合品牌调性、哪个在技术上可实现且可维护，这是典型的审美和工程经验判断。第三，系统兜底层。单个页面生成得再漂亮，放在整个产品体系里是否自洽、新增页面是否沿用同一套Token、不同角色看到的信息是否合理，这些都是全局性问题。

你会发现一个很残酷的规律：当工具变得普惠，人和人之间的差距就从“谁更能动手”变成了“谁更能思考”。一个文档转页面工具随便谁都能点开，但能把页面方案从“能看”推进到“能用、好用、愿意用”的，依然是设计师。

2. 从 Agent 生成页面到精细化设计：一套完整工作流

很多人问“怎么让Agent一次生成一个完美的页面”？我的回答是：别想一次到位，把它当作协作伙伴，而不是魔法机器。我目前比较稳定的工作流分四步：准备、生成、收敛、打磨。每一步都有明确目标和验证标准。

2.1 准备阶段：把模糊需求翻译成Agent能理解的“输入”

这一步最容易被跳过。大部分用户上来就写一句“帮我做一个B端后台首页”，得到的自然是最常见的模板化后台。问题不在于Agent笨，而在于你没告诉它你是谁、面向谁、核心任务是什么。

我会要求自己至少给出四类信息：

• 产品背景和目标用户，例如“面向中小企业财务经理的费用报销审批后台”
• 页面核心任务，例如“快速定位待审批单据并了解异常项”
• 风格约束，例如“不用卡片堆叠，希望列表密度更高、减少视觉噪音”
• 必须出现的模块和禁忌，例如“需展示审批通过率和平均耗时，不要使用大图表占满首屏”

把这些信息结构化地写在提示里，结果会完全不同。你甚至可以给它一个简单的输入模板：

页面类型：移动端商品详情页 目标用户：25到35岁女性用户，关注成分和肤感 核心任务：让用户快速判断“适不适合我”，并顺畅加入购物车 必须包含：商品信息、成分解释、用户评价摘要、规格选择、底部操作栏 风格关键词：温和、可信、有点自然感 禁忌：不要满屏弹窗，不要用过高的饱和色

这样写出来的提示词，本质上就是一份迷你设计简报。Agent拿到清晰约束后生成的页面，大概率能直接进入精细化阶段。相反，约束越少，它越会倾向于“平均”。设计行业里有个词叫“风格趋同”，指的是AI模型在缺少强约束时会输出一个所有人都不讨厌、但也没有记忆点的方案。你要做的，就是通过输入把特指性和差异性找回来。

2.2 生成阶段：用“多方案对比”替代“一次到位”

即使提示词写得很完整，我也不会只生成一个版本。我会让Agent产出至少三到五个方向，而且我会故意用不同维度去横切。比如给国内某电商平台的商品详情页做改版时，我使用了三个提示分支：

• 分支A偏转化：把促销信息和立即购买按钮放到最显眼的位置，所有内容都围绕“让用户尽快下单”
• 分支B偏信任：把用户评价、品牌资质、成分检测报告提前，强调“为什么可以放心买”
• 分支C偏浏览体验：信息密度降低，让用户像逛杂志一样慢慢看内容

三个分支出来的页面骨架差异非常大。此时设计师的工作不是“看哪个顺眼”，而是回到项目目标和用户研究数据，判断哪一种策略在当前业务阶段更合适。这个环节是Agent替代不了的，因为它涉及价值取舍。

此外，我会让Agent解释自己的设计决策。你可以直接问：“为什么这个页面的主按钮放在右下角？首屏信息为什么这样分配？”很多Agent能给出逻辑。这个“解释过程”会帮助你发现它假设了哪些业务场景，也会暴露它没有考虑到的边界情况。

2.3 精细化阶段：从“可运行”到“可交付”的逐层打磨

生成稿不是终点，精细化设计至少要过四层。第一层是视觉层，检查字体层级、间距节奏、色彩一致性，把AI“平均化”的样式调整成有明确主次关系的设计。第二层是交互层，补充点击反馈、加载过程、滑动惯性、过渡动效，让页面从静态变成有生命的界面。第三层是状态层，这是Agent最大的盲区，正常显示之外的数据为空、加载失败、网络异常、权限不足、过期状态，全部要人工定义。第四层是规范层，抽离颜色、圆角、间距、阴影等变量，为主键形成可复用的组件入库。

举一个我实际踩过的例子：某个B端表格页面，Agent生成之后表格能做排序筛选，看起来挺完整。可一旦网络慢，默认的空状态就只显示一个转圈图标，没有任何文案；接口报错时，整块区域直接变白；没有数据时，Table倒是出现了，但只显示“暂无数据”，既没有引导用户去新建，也没有解释为什么没数据。这些状态全被当成“理想的成功场景”忽略了。设计师要做的，就是把每个状态穷举出来，逐个给到视觉和行为方案。

3. 工具选型与场景匹配：不要盲目追求“最强”

现在市面上能生成页面的Agent工具不少，但说“某某工具能生成页面”已经没有意义了，真正的问题是“它生成页面之后，能不能融入你的工作流”。我见过很多团队因为某个工具“效果惊艳”而全员换工具，结果发现它在团队协同、设计系统接入、代码可维护性上完全跟不上，最后只能放弃。所以我把常用工具按使用场景做了个分法。

3.1 主流Agent生成工具的差异

我不评判哪个工具“最强”，因为脱离场景谈强弱都是空谈。演示视频里漂亮的三屏落地页，放在一个需要多角色权限控制的SaaS后台里，大概率不如一个朴素的CRUD页面来得有效。所以选型的第一原则是“嵌入既有流程”，第二原则是“团队能吃透输出物”。如果设计师完全看不懂代码，那么选代码工程型工具就得配一个前端搭档；如果开发工程师不愿意在Figma里加工，那设计工具内嵌型落地也会很费劲。

3.2 按场景选择：探索、落地与系统治理

根据目标不同，我会把工具分成三条路线。

早期探索阶段，用通用对话型Agent是最快的。这时的目标是快速得到若干个可点击的高保真页面，用来和业务方讨论方向，不需要纠结代码质量。我会让Agent帮我把一个用户旅程里六个关键页面都连起来，点击能跳转、购物车能加减，这种“能跑的草图”比静态稿传达信息强得多。

进入生产落地阶段，优先选择能生成真实工程代码的工具，比如v0或Cursor类。这个阶段的关键词是“可控”：组件要落到项目文件夹里，样式要能用变量覆盖，接口字段要能和真实联调对齐。如果Agent生成的代码是“一次性渲染完全局样式”，那就算页面跑起来，后续维护也是一场灾难。

在设计系统治理层面，Figma AI这类工具更能帮上忙。你可以把一套已有的设计组件传给模型，要求它生成不同状态、不同尺寸的变体，或快速把某张旧设计稿按照最新Token体系更新一遍。此时Agent不是用来爆发式产出，而是用来防止系统内部的细节腐化。

3.3 我的实测心得：生成速度很快，但Review更重要

我通常把项目时间预算切成三块：20%用来生成，40%用来审查，40%用来修改和再验证。很多人不理解为什么审查时间反而要最多。因为Agent太容易输出一种“看起来合理”的方案了，它会把所有元素排得整整齐齐、层级不明不白。这种合理很容易让人放松警惕，如果只是跑一遍主流程，根本发现不了问题。

我的建议是给每个生成页面准备一份审查清单，至少包含三类问题：视觉上有没有明确的主行动项？状态上有没有覆盖空、错、弱网？响应式下有没有元素被截断或变形？这三类问题过完，再进入下一轮迭代。我在实际操作中，经常会连续让Agent修改四到五轮：第一轮改信息密度，第二轮补状态，第三轮调深色模式，第四轮调断点。每一轮都在缩小“生成稿”和“生产稿”之间的距离。

4. 精细化设计的四个关键维度

接下来是本文的重头戏。哪怕你完全不用Agent，只看这一部分，也能理解为什么“精细化设计”在未来会越来越重要。我挑了四个Agent最容易出问题、也最需要设计师介入的维度，分别拆开讲。

4.1 视觉层级与信息密度：AI的“平均化”死穴

Agent生成页面有一个典型毛病：所有内容看起来都同样重要。它会给每个区块几乎相等的内边距和标题字号，卡片和卡片之间像印刷建议一样整齐排列。这种平均主义在单个页面里还能接受，一旦用户真的要快速完成某个任务，问题就出来了。

举一个SaaS数据页面的例子。Agent默认把所有指标卡片做成一样大小：本月收入、活跃用户、退款率、平均处理时长，四张卡并排，每张都标注得很清楚。看起来没毛病。但业务方真正关心的是“本周可确认收入”，其他只是辅助信息。设计师要做的，就是把最重要的指标放大、加上趋势线、抬到首屏左上方，把辅助指标降级成紧凑的列表。这种“故意不对齐”的决策，是设计工作介入价值的直接体现。

操作上，我建议拿到生成稿后先做一轮“信息减法”：把这个页面应该突出的核心行为和核心信息分别是什么，划掉一半次要内容，统一用三重优先级重新分配空间。字号、字重、留白、色彩饱和度都跟着优先级走。做完这一步，整个页面才算有了“呼吸感”。

4.2 状态与反馈：最容易暴露“没有设计师”的地方

绝大多数Agent生成页面的时候，脑子里只有蓝天白云式的主流程。用户正常打开、数据正常加载、每一步成功返回，一切都很顺利。但真实产品里，网络抖动、字段校验失败、权限缺失、内容为空，这些状态才是日常。

我把需要覆盖的状态整理成一张速查表：

设计师的精细之处就在于把这些状态画完。一个页面在正常情况下好看不难，难的是它在各种意外情况下仍然得体。如果没有设计师，Agent生成稿大概率会把错误页做成一个鲜艳的红色大叉加一句含糊的话，这不仅没有帮助，还会放大用户焦虑。

4.3 响应式与多端适配：不止是“缩放屏幕”

Agent生成响应式页面时，最常见的策略是把桌面端的三栏布局在手机端堆成一行，按钮也从横排变成通栏。堆叠没做错，但只做到这一步远远不够。真正的多端适配，是想清楚组件在不同尺寸下的形态变化。

以表格为例。宽屏下用表格展示交易记录是合理的，但手机屏幕上十列数据挤在一起，用户只能左右滑动，体验非常差。精细化的做法是把它重组成卡片列表：每条记录是一张卡，里面最关键的信息一眼可见，详情点进去再看。Agent默认不会帮你做这一步，因为它很难凭一句“做成响应式”推断出你希望表格变成卡片。设计师要给出规则：在哪个断点切换形态、哪几个字段保留在卡片正面、哪些字段收进展开区域。

触控目标也是同样的问题。PC上很小的一个删除按钮，到了手机端就变成了“怎么点都点不准”。设计师需要定义最小触控尺寸、可点击区域的外延规则、下拉刷新的阈值。这些经验数据很难通过模型自动获得，因为它们来自真实用户行为观察，而非语料统计。

4.4 品牌一致性与设计系统：精细化设计的终局

单个页面再精致，如果和整个产品的其他页面放在一起像两个团队做的，那也不能算成功。品牌一致性是精细化设计的终局。而一致性不能靠设计师每次都复制粘贴，要靠抽象出来的“设计系统”。

我建议在使用Agent之前，先建立一套基础变量，包括色彩、字体比例、间距尺度、圆角半径、阴影强度、图标描边宽度。然后把它们以Design Token的形式喂给Agent，告诉它所有生成页面都必须基于这套Token，不要自创样式。这样做的好处非常直接：即使不同的Agent生成了不同页面，只要Token一致，页面的气质就会统一。

更进一步，把常用模块沉淀成组件：按钮、输入框、下拉选择、弹窗、空状态、表格、筛选器。让Agent基于组件去拼页面，而不是让Agent直接写一个“一次性页面”。这样才能把生成的效率优势积累成长期资产。我见过一个团队，专门花两周时间把所有高频页面模块整理成组件，然后在Agent生成时强制引用，最后整个产品的改版速度比原来快了三倍，而且视觉一致性比过去任何一版都强。

5. 未来设计师的新能力清单（实操方向）

既然未来设计师更重要了，那到底要具备哪些新能力？我不太建议把“会用AI”当成一个独立技能，那太浅了。更准确的描述是：设计师要成为“能跟Agent共同工作、但仍然在关键节点做决策”的人。下面这几条，是我认为最值得投入的方向。

5.1 把“画图”升级成“定义问题”

以前设计师接到需求，第一反应是找参考、起画布。现在最好先做定义：这个页面要解决谁的问题？用户带着什么目标进来？什么情况下他们会离开？把这些问题记录成一个简短的需求陈述，再交给Agent，你会发现自己对方案的掌控力高很多。

有一次我们做企业内部的知识库首页，业务方只说了句“希望显得很智能”。这个词根本没法生成。把“智能”拆成“员工进来能快速找到答案、热门知识主动浮现、未解决的问题可以快速转给专家”之后，Agent生成的页面才真正有了方向。定义问题不是PM独有的工作，反而是设计师建立话语权的最佳方式。

5.2 学会给Agent写“设计需求文档”

我把准备阶段用到的输入模板进一步扩展，得到了一份适合日常使用的“Agent设计简报”：

• 背景和业务目标：一句话说明为什么做这个页面
• 目标用户画像：核心用户的认知水平和使用场景
• 核心任务与优先级：必须完成的主任务、加分任务、不需要的任务
• 内容模块清单：必须出现的模块、可选模块、明确禁止的模块
• 风格关键词与调性：3到5个词，越具体越好
• 参考方向或反例：可以给截图，也可以说“不要像XX类网站”
• 已知边界条件：多端要求、无障碍要求、性能要求、数据约束

这份简报不需要写很长的增幅，每条一两句话就够。但只要有了一份结构化输入，Agent的输出质量会稳定很多。你把它当作给临时同事的工作交接，沟通越清晰，交付越靠谱。

5.3 补上代码常识，和Agent在同一频道对话

设计师不一定要成为工程师，但至少要理解HTML、CSS、组件化和状态管理的基本概念。这不是为了自己写业务逻辑，而是为了看懂Agent生成的东西靠不靠谱。比如它生成一个按钮，用的是可复用的组件样式，还是直接在每个页面里写死了一堆全局样式？它实现的“响应式”，是真的用断点控制网格，还是只是用了缩放？

我见过太多设计师面对Agent代码束手无策，只能截图让开发改。开发一改，设计意图又变了。反过来，如果你能看懂一点代码，你就能在生成阶段直接要求“把页面里的间距都换成变量”“把弹窗拆成独立组件”。这句话一出口，生成结果的质量直接上一个台阶。

5.4 用“设计评审+走查清单”建立质量控制

Agent生成页面很容易让人产生“差不多行了”的错觉，所以设计师要用一套固定流程来对抗这种错觉。我在团队里推的简单走查清单是这样的：

• 信息完整：页面上的文案是否清晰、无歧义，数字是否完整不截断
• 视觉秩序：是否一眼能看到主行动项，信息层级是否分明
• 状态覆盖：空状态、加载、错误、弱网是否都有专属设计
• 平台适配：不同断点下是否重新组织了信息，而不是简单堆叠
• 可访问性：对比度是否达标、按钮是否可用键盘操作、是否有焦点提示
• 品牌一致：颜色、字体、间距、圆角是否来自既有设计Token

每一条都很基础，但合在一起，就是“精细化”三个字的实操解释。设计师只要把这些清单固化下来，再让Agent批量生成页面，然后按清单逐页验收，就相当于给自己建了一条工业级质检流水线。

6. 实际问题与排查避坑实录

最后整理一些我在实际项目里遇到的典型问题。这些问题不是教程里的理想情形，而是真会让你卡住的那种情况。

6.1 生成页面千篇一律，像是同一个模板套出来的

这是使用Agent后最常见的抱怨。原因通常不是Agent能力差，而是你的提示词太宽泛、太依赖默认值。破解办法有三个。第一，增加差异化约束，比如“不要用居中布局”“把第一屏改成不对称构图”“主色只用在一个位置”。第二，尽量提供参考案例，把想学习的界面结构或版式截图丢进去，让它“提取参考图中的信息层级，但换一套配色和字体”。第三，追问设计决策，让Agent解释为什么选择这个布局，然后反向挑战它：“如果目标用户是重度B端用户而不是消费者，这个设计哪里要改？”你会发现，追问几轮之后，它能给出的方案越来越有针对性。

我还会做一个很有效的小动作：故意让它生成三个“反常识”的方案，比如“不显示任何卡片”“所有按钮都用文字链接”“第一屏只放一句话”。这些方案大多不可直接用，但能帮你跳出思维惯性，也给之后收敛出的正式方案提供对比素材。

6.2 组件风格不统一，改一个页面要连带改一堆地方

如果Agent每一次生成都直接写出完整页面，组件复用基本无从谈起。很多团队把十几个页面交给Agent生成，最后得到十几套按钮样式，有的圆角8像素，有的10像素，有的还是怪异胶囊形。凶手不是Agent，而是缺少“先生成组件，再生成页面”的意识。

调整方案是：先让Agent生成一个基础组件列表（按钮、输入框、标签、表格、弹窗等），确定好每个组件的形态和变量，再把组件作为后续所有页面的底座。甚至可以把关键组件导出到Figma或代码库，形成单一可信源。后续Agent生成了新页面，如果要引入新组件，也要先回到组件层评审，而不是直接改一个局部就完事。这样做前期会慢一点，但后期收益很大。

6.3 生成结果能直接用吗？关于内容来源与原创性

我不展开法律问题，但作为从业者必须提醒一句：任何Agent生成的内容都可能来自大量公开语料的混合，这不是“凭空原创”。商业项目如果要做独有视觉资产，比如品牌Logo、核心插画、有辨识度的产品配图，不要直接拿生成结果当最终交付。至少要做二次创作，或者在关键元素上人工重绘。我的习惯是：把Agent产出当作“高质地基”，品牌核心资产一定由设计师自己细化完成，两者之间的边界要画清楚。

6.4 团队协作中的“Agent产出物”管理

现在很多团队的协作工具里都塞满了Agent生成的页面截图和代码片段，但没人知道这些文件是用什么Prompt生成的、当时选了哪个分支、后来为什么改成了另一版。一旦需要回溯，就变成一团乱麻。我建议像管理代码一样管理Agent产出物：每个生成任务都记录一批输入（需求简报、参考图、约束条件）、生成版本号、以及修改要点。这样这个资产才有长期价值。

我自己用最简单的办法：在项目文件夹里建一个“agent-logs”目录，每次生成都保存一份提示词和关键回复。不需要很复杂，但遇到“这个风格是谁定的”这种问题时，翻记录就能秒回。这也让我意识到，Agent生成页面的过程，本质上是在创造一个可快速迭代的设计档案库。谁能把档案组织好，谁就能在未来几倍速地复用过去的设计决策。

我个人的体会是：Agent并没有让设计这件事变简单，它只是把“画出界面的能力”民主化了。过去一个设计师要花大量精力练排版、练色彩、练细节执行，现在这些可以更快地到达及格线。但及格线以上，真正拉开差距的，仍然是最底层的洞察力和审美判断力。所以如果让我给一个最可执行的建议，我会说：从今天开始，别只把Agent当成生成器，把它当成一个技能和思考速度都很快、但审美和边界感还不太行的协作新人。每次它生成完，你强迫自己找出三个问题：为什么用这个布局、数据为空时用户会看到什么、哪个元素在手机上会被截断。能把这三个问题答清楚的团队，Agent是放大器；答不清的团队，Agent只会放大粗糙。