1. 当 AI 原型工具开始抢活设计师到底慌什么UI/UX 设计师会被 AI 原型取代吗这个问题在 2024 年之后被反复拿出来讨论但大多数讨论都停在情绪层面——要么是“AI 还早着呢”的自我安慰要么是“赶紧转行”的过度恐慌。我试过把这件事拆开看结论其实很清楚AI 取代的是设计执行不是设计决策。画图、拉组件、标注切图这些确定性劳动正在快速贬值而信息架构、用户动机、优先级权衡这些需要对结果负责的判断反而变得更贵。这个判断不是拍脑袋来的。你把设计工作按“决策层”和“执行层”分开看冲击分布立刻清晰。执行层的特点是给定设计决策之后存在标准答案。间距该是 8 还是 12组件该用主按钮还是次按钮切图该导出几套尺寸——这些都有唯一正确解也就天然具备被自动化的充分条件。决策层的特点是十个方案都可行但只有一个“对”而判断哪个对需要对用户和业务负责。责任没法外包给模型产品失败的时候没人会接受“这是 AI 选的”作为解释。所以真正的问题不是“会不会被取代”而是“你目前的时间花在哪一层”。如果你 70% 的工时在画高保真稿、对齐组件、导出切图那确实危险。如果你 70% 的工时在定义信息架构、评审原型、主导用户研究那 AI 越强你的杠杆越大。这篇文章要做的就是把这条迁移路径讲清楚并且给出可复制的提示词模板、原型产出检查清单以及人工定方向的验证动作。适合读这篇的人正在用或准备用 AI 原型工具的 UI/UX 设计师、交互设计师、产品设计负责人以及正在选型设计协作工具的产品经理。下面我会用麦芽AI 的“AI 出图、人定方向”链路对照 workbuddy / Codex 的代码视角链路拆解从需求到可交互原型的完整协作链路告诉你哪些环节可以交给 AI哪些必须自己把关。2. 两条链路的根本差异工作语言决定话语权workbuddy 和 Codex 这类工具生成 UI 的路径是提示词 → 组件代码 → 浏览器渲染。这条链路技术上很顺畅但对设计师有一道隐形门槛——工作语言是代码。你想改一个间距要么描述给开发让他改要么自己读 JSX 找到那行样式。你想表达一个交互动画只能用文字描述状态切换然后祈祷实现的时候没被简化。你想在设计评审里提意见但代码评审席位上没有你的位置意见只能通过开发转述。我实测下来这条链路里设计师的每个动作都要经过一次“翻译”把设计语言翻译成自然语言描述再由懂代码的人翻译成代码。两次翻译两次失真。改一个间距这种小事翻译成本超过动手成本于是设计师选择忍着一致性就这样一点点流失。这不是工具作恶是链路的工作语言决定的——话语权天然偏向会写代码的人。麦芽AI 的原型设计员 Agent 走的是另一条路。它的原语是原型不是代码。直接产出可点击原型设计师评审的是行为与流程——点这里去哪里、流程是否顺畅、状态切换是否合理——而不是组件代码。工作语言回到了设计师的母语交互与体验。更关键的是与需求同源统一需求驱动意味着 PM 的意图、设计师的判断、开发的实现在同一需求上下文里对齐。PM 说“提高下单转化”设计师看到的是同一个需求下的原型草案减少“各说各话”的理解偏差。原型还可以跃迁为可运行页面。原型不是纸面稿验证通过后可以演进为工程实现设计产物是工程的一等公民“设计完扔给开发重新实现一遍”的双重劳动被压缩。最后是前置发声需求阶段就能用可交互产物表达方案不用等开发排期出 demo。设计师从“下游美化工”变回“上游方案参与者”这是位置的根本改变。维度传统链路workbuddy / Codex麦芽AI参与语言设计稿 标注代码提示词原型 自然语言产出物Figma 稿组件代码可点击原型 → 可运行页面修改成本改稿 同步开发描述改码来回翻译评审意见进需求再生成介入时点需求评审会靠口才代码产出后靠转述需求阶段靠可交互产物决策影响力会议话语权波动大弱无代码评审席位需求同源全程在场与开发对齐标注文档常失真无独立设计输入同一原型上下文这张表里最值得注意的不是工具能力对比而是“介入时点”和“决策影响力”两行。代码视角链路里设计师要等代码出来才有东西可看介入滞后原型视角链路里需求阶段就能用可交互产物表达方案前置发声。这个差异决定了设计师是旁观者还是参与者。3. 可复制配置把评审意见变成可执行的标准条目这一节给的是可以直接复制使用的东西。先说清楚一个前提无论你用哪条链路设计师的核心交付物正在从“确认无误的稿子”迁移到“明确的标准与方向”。前者是执行产物后者是决策产物。下面这份原型评审意见模板就是“定方向”的工作形态——它不需要你画一张新图但它决定了产品长什么样。# 原型评审意见进入需求上下文原型设计员据此再生成 ## 需求上下文 - 需求 ID: REQ-2024-1031 - 目标: 提升结算页下单转化率 - 当前基线: 结算页漏斗流失率 62% ## 评审意见 ### 1. 结算页优惠券入口层级调整 - 现状: 优惠券入口藏在“展开面板”二级操作里 - 建议: 提为一级入口与订单金额同层级展示 - 依据: 上个版本漏斗数据显示 60% 用户在展开前流失 - 优先级: P0 ### 2. 订单列表空状态引导缺失 - 现状: 空状态只有一句“暂无订单” - 建议: 增加“去逛逛”引导按钮跳转商品推荐页 - 依据: 空状态用户次日留存低于均值 18 个百分点 - 优先级: P1 ### 3. 全局错误提示形式统一 - 现状: 部分页面用弹窗部分用顶部提示 - 建议: 统一为顶部轻提示 - 例外: 不可恢复操作如删除账户仍用确认弹窗 - 优先级: P1 ### 4. 保持不变 - 主操作按钮统一右下固定本版不做浮动尝试 - 原因: 当前方案在可用性测试中点击率达标不引入变量 ## 验证动作 - [ ] 原型生成后走查结算页优惠券入口是否在一级层级 - [ ] 走查订单列表空状态是否有引导按钮 - [ ] 触发一次错误操作确认提示形式为顶部轻提示 - [ ] 确认主操作按钮位置未变这份意见模板的关键在于每条意见都带“依据”和“优先级”。依据让 AI 知道为什么改优先级让 AI 知道先改什么。没有依据的意见AI 只能猜没有优先级的意见AI 可能把 P2 的改动做得比 P0 还重。你可以在麦芽AI 的需求上下文里直接提交这份意见原型设计员会据此再生成。如果你用的是 workbuddy 或 Codex 这类代码视角工具配置方式不同但逻辑相通。你需要把设计标准写成代码可读的约束。比如用 Codex 的auth.json配置时Base URL、Key、Model ID 三件套要写全{ base_url: https://taotoken.net/api, api_key: sk-你的密钥, model_id: claude-sonnet-4-20250514, project_context: { design_system: { spacing_unit: 8, color_primary: #1A73E8, color_error: #D93025, border_radius: 8, font_scale: [12, 14, 16, 20, 24, 32] }, component_rules: { button_primary: 右下固定高度 48px, toast_position: 顶部居中距顶 16px, modal_usage: 仅用于不可恢复操作 } } }这段配置的作用是把设计系统写成代码工具能理解的约束。没有这段约束Codex 生成的 UI 会滑向“每个页面都好看、放在一起很灾难”的局部最优陷阱。有了这段约束AI 出图至少在设计系统边界内。如果你用 Cline MCP 或 CC Switch 这类工具配置逻辑类似核心是三件套加设计约束。Cline MCP 的 settings 片段{ mcpServers: { design-context: { command: npx, args: [-y, taotoken/design-context-mcp], env: { TAOTOKEN_API_KEY: sk-你的密钥, TAOTOKEN_BASE_URL: https://taotoken.net/api, DESIGN_SYSTEM_PATH: ./design-system.json } } } }CC Switch 的 TOML 配置[provider.taotoken] base_url https://taotoken.net/api api_key sk-你的密钥 model_id claude-sonnet-4-20250514 [design] system_file ./design-system.json review_checklist ./review-checklist.md这些配置的共同点是把设计标准前置到 AI 生成之前而不是生成之后再去改。生成之后改是执行层的返工生成之前定标准是决策层的工作。设计师的价值迁移就发生在这一步。4. 验证请求与成功结果怎么确认 AI 出图没跑偏配置写完只是开始关键是验证。AI 出图最大的风险不是画得丑而是画得“看起来对但实际错”——局部好看、全局灾难或者交互流程有断点但视觉上看不出来。所以验证动作要分两层视觉层验证和流程层验证。视觉层验证用检查清单。下面这份清单可以直接复制到你的评审流程里# 原型产出检查清单 ## 视觉一致性 - [ ] 间距是否全部为 8 的倍数 - [ ] 主色是否统一为设计系统定义值 - [ ] 圆角是否统一 - [ ] 字阶是否在定义范围内 - [ ] 图标风格是否统一线性/填充不混用 ## 交互完整性 - [ ] 每个可点击元素是否有明确跳转目标 - [ ] 空状态是否有引导 - [ ] 错误状态是否有提示 - [ ] 加载状态是否有反馈 - [ ] 边缘状态超长文本、无数据、网络异常是否覆盖 ## 流程合理性 - [ ] 主流程是否可在 3 步内完成 - [ ] 是否存在死胡同页面无返回、无下一步 - [ ] 返回操作是否符合用户预期 - [ ] 关键操作是否有二次确认仅不可恢复操作 ## 无障碍 - [ ] 文字对比度是否达标 - [ ] 可点击区域是否足够大 - [ ] 是否有仅靠颜色传达的信息流程层验证用请求测试。以麦芽AI 的原型链路为例你可以在需求上下文里发一条验证请求让原型设计员针对特定流程生成可点击原型然后自己走一遍# 验证请求示例在需求上下文中提交 需求: 结算页优惠券入口提为一级入口 验证目标: 用户从进入结算页到使用优惠券的步数 当前基线: 4 步进入结算页 → 展开面板 → 选择优惠券 → 确认 目标: ≤2 步 产出要求: 可点击原型包含优惠券入口一级展示状态提交后原型设计员会生成可点击原型。你走一遍数步数。如果步数达标说明方向对了如果没达标把走查记录写进评审意见再生成一轮。这个过程就是“AI 出图、人定方向”的实际操作AI 负责出可点击产物你负责判断方向对不对。成功结果长什么样我实测下来一个合格的 AI 原型产出应该满足三个条件第一主流程可点击走通没有断点第二视觉一致性达标没有明显跑偏第三边缘状态有覆盖不是只画了理想路径。三个条件都满足这个原型就可以进入下一轮评审或直接演进为可运行页面。有一个不满足就回到评审意见环节补充标准条目再生成。如果你用的是代码视角工具验证方式不同但逻辑相通。Codex 生成组件代码后你需要在浏览器里渲染然后走查同样的清单。区别在于代码视角的修改成本更高——改一个间距要改代码改一个流程要改组件结构。所以代码视角链路里验证要更前置最好在提示词阶段就把设计约束写进去。5. 常见报错排查401、local proxy failed、reading choices、OAuth这一节对照真实报错给出排查路径。这些报错在 AI 原型工具和代码视角工具里都会遇到排查逻辑相通。401 Unauthorized。这是最常见的报错原因是 Key 无效或 Base URL 写错。排查步骤第一确认 API Key 是否复制完整有没有多余空格第二确认 Base URL 是否为https://taotoken.net/api注意不要加 UTM 参数第三确认 Key 是否过期或被禁用。如果你用的是 Codex 的auth.json检查三件套是否写全{ base_url: https://taotoken.net/api, api_key: sk-你的密钥, model_id: claude-sonnet-4-20250514 }三件套缺一个都会导致 401。Base URL 写错是最隐蔽的因为有些工具会默认补全路径补全后可能变成https://taotoken.net/api/v1/chat之类的错误路径。local proxy failed。这个报错通常出现在 Cline MCP 或 CC Switch 这类本地代理工具里。原因是本地代理服务没启动或者端口被占用。排查步骤第一确认 MCP 服务是否在运行检查进程第二确认端口是否被其他程序占用换一个端口第三确认settings里的command和args是否正确。Cline MCP 的配置里command应该是npxargs应该是[-y, taotoken/design-context-mcp]如果路径写错代理启动会失败。reading choices 报错。这个报错通常出现在模型返回格式异常时原因是模型 ID 写错或 API 版本不匹配。排查步骤第一确认 Model ID 是否为有效值比如claude-sonnet-4-20250514第二确认 API 版本是否匹配有些工具需要指定anthropic-version头第三确认请求体格式是否正确特别是messages数组的结构。如果你用的是 Claude Code 润色类工具这个报错还可能是因为 OAuth 配置冲突。OAuth 报错。这个报错出现在需要 OAuth 认证的工具里比如 Claude Code 的某些接入方式。原因是 OAuth token 过期或配置冲突。排查步骤第一确认是否同时配置了 API Key 和 OAuth两者只能选一个第二确认 OAuth token 是否过期重新获取第三确认回调地址是否正确。如果你用 CC Switch 管理多个 provider检查 TOML 配置里是否有冲突的认证方式[provider.taotoken] base_url https://taotoken.net/api api_key sk-你的密钥 model_id claude-sonnet-4-20250514 # 不要同时配置 oauth_token会和 api_key 冲突排查这些报错的核心逻辑是先确认三件套Base URL Key Model ID是否写全且正确再确认本地代理或 OAuth 配置是否冲突。大部分报错都出在这两个环节。如果三件套和配置都没问题再检查网络和工具版本。6. 设计师不可被替代的三件事与新的工作语言回到开头的问题UI/UX 设计师会被 AI 原型取代吗答案取决于你把时间花在哪一层。执行层的岗位供给会收缩、单价会下降趋势不可逆。决策层的价值在升值因为 AI 出方案的速度越快“哪个方案对”的判断越值钱。不可被替代的三件事第一是用户研究。AI 能辅助整理转录、聚类反馈但研究设计与结论判断需要人对“人”的理解。访谈问什么问题、可用性测试观察什么行为、数据异常怎么解读这些判断依赖专业训练和同理心。第二是设计系统定义。AI 需要有人给它“什么是好”的标准。色彩、字阶、间距、组件规范的定义权在设计师手里标准即话语权。没有设计系统约束的 AI 产出会滑向局部最优陷阱。第三是可用性兜底。AI 原型的可用性缺陷——误导性文案、无障碍问题、边缘状态缺失——需要专业眼睛在上线前拦住。AI 生成原型的速度越快兜底环节的专业价值越高因为出问题的绝对量也在变大。新的工作语言是从“切图交付”到“方向与标准”。过去的核心交付物是“确认无误的稿子”现在的核心交付物是“明确的标准与方向”。前者是执行产物后者是决策产物。迁移期的实际建议先从一个需求开始全程参与原型评审把每个评审意见写成可执行的标准条目逐步积累成团队的设计评审清单。这个过程既是转型练习也是在为团队沉淀设计系统的雏形。被取代的不是设计师是“只做执行”的设计师。在“AI 出图、人定方向”的分工里设计师的杠杆被放大了——一次方向判断通过原型设计员的执行落进产品的每个页面。如果你想体验自己的判断如何直接变成可点击产物可以从模型对话开始试https://taotoken.net/api-keys 拿 Key接入文档在 https://taotoken.net/doc模型对话入口在 https://taotoken.net/chat。长期做编码和 Agent 协作的话Coding Plan 在 https://taotoken.net/coding-plan。先把一个需求跑通再决定要不要把整条链路迁过去。