AI新职业PDE火了：年薪最高22万美元，普通人怎么入行？

Adrian Punk4.9万 曝光 · 135 收藏

最近看 AI 创业公司的招聘页，会反复遇到一个新职位：Product Design Engineer，简称 PDE。有些公司写 Design Engineer，有些写 Product Designer / Design Engineer，还有一些干脆把它放进工程团队。

这个名字第一次听也很绕。Product、Design、Engineer 三个词挤在一起，像是公司想用一份工资招三个人。

先看几组正在发生的变化：

  • Figma 2026 年的 AI 报告覆盖了 8,403 份问卷和 639 次访谈
  • 一年内，参与开发工作的设计师比例翻倍到 41%
  • 开始做设计工作的开发者，从 44% 增长到 60%
  • 90% 的受访者认为，AI 出现以后，设计至少和以前一样重要

招聘要求也在跟着变。Filevine 的 Product Design Engineer 要做用户访谈、画流程、写 React 和 TypeScript，再把功能直接推到上线；Elicit 希望候选人熟悉 Figma，也能开 PR，还要把 Claude Code、Cursor、v0 这类 AI 编程工具放进日常工作流。

AI 把做出第一版的成本打下来了，也把「谁能独立把体验做完整」变成了新的竞争。

这篇文章会讲清楚三件事：

  1. PDE 是什么
  2. 每天具体干什么
  3. 设计师、前端工程师和普通人怎么一步步转过去
https://jobs.ashbyhq.com/crackenagi/debffa51-f2e5-44e8-a101-74fb50307cc1/

1. 先把名字说清楚：这里的 PDE 是什么

PDE 这个缩写有歧义。苹果等硬件公司也会招聘 Product Design Engineer，工作内容包括结构设计、材料、模具、装配和量产——那是一条偏机械与制造的职业路线。

这篇文章讨论的是数字产品和 AI 创业公司里的 Product Design Engineer，很多公司直接叫 Design Engineer。

我更愿意这样解释：

PDE 是能把产品问题想清楚、把交互设计出来，再亲手写成生产代码的人。

传统流程里，产品经理先写需求，设计师出稿，工程师接稿开发。PDE 会跨过中间的交接，从用户问题一路做到可以点击、可以测试、可以上线的产品体验。

整套工作可以压缩成六步：

Vercel 对 Design Engineer 的定义很直接：理解问题，设计方案，构建并独立发布。他们还要求这类人关注交互、组件复用、性能、跨浏览器、输入方式和无障碍——漂亮的像素只占工作的一部分。

所以 PDE 平时一直在三件事之间来回切换：

  • 产品：决定该解决什么问题
  • 设计：把流程和状态理顺
  • 工程：把它送进真实代码库

三件事少一块，体验都会在交接处断掉。

设计稿只是过程，用户手里能跑的体验才算作品。

2. PDE 一天到底在干什么

假设一家 AI 公司准备做「智能会议纪要」。产品经理给出的需求很简单：上传录音，AI 自动生成总结和待办。

设计稿看起来可能只有三个页面。PDE 真开始做，会先追问一串问题：

  • 用户上传的是一小时会议，还是五分钟语音
  • 转写要等多久，等待过程显示什么
  • 一句话对应多个发言人时怎么处理
  • AI 总结错了，用户从哪里修改
  • 待办能不能一键同步到任务工具
  • 上传失败、网络中断、额度不足时怎么办

这些问题决定了产品好不好用。PDE 会先画出完整流程，再用 Figma 或代码做一个可交互原型，让真实用户试几遍，看他们卡在哪里。

方向确认后，他会进入代码库，把界面和交互写出来：

  • 搭建上传、处理、完成和失败状态
  • 写响应式布局和可复用组件
  • 接入转写与总结接口
  • 处理流式输出、延迟和错误提示
  • 加键盘操作、焦点状态和无障碍标签
  • 提交 PR，跟工程师一起过代码
  • 上线后继续看使用数据和用户反馈

如果用户总在等待页面退出，PDE 会检查反馈够不够清楚；如果大家看完总结仍然回到原始录音，他要重新判断信息结构和编辑方式。颜色、圆角和动画当然重要，但它们必须服务于任务完成。

PDE 交付的是一段完整体验，从用户第一次点击，一直管到事情做完。

https://vercel.com/blog/design-engineering-at-vercel

3. 它和产品设计师、前端工程师有什么区别

这些岗位的边界没有统一答案，小公司和大公司的分工差别很大。想判断一个职位到底在招谁，先看工作做到哪里。

和产品设计师最大的差别，在于生产代码。

你要能进入真实代码库，处理组件、状态、接口、性能、响应式和无障碍，做完以后还要愿意维护。

和前端工程师的差别，主要体现在决策范围。

PDE 不会等一份完整的 Figma 稿再开工。他要自己判断流程、信息层级、交互方式和视觉细节，也要能解释为什么这样设计。

这份工作里同样有一个不能绕开的字母：Engineer。会用 AI 生成页面只是起点，看懂代码、修改代码、测试边界并安全上线，才是公司愿意付钱的能力。

4. PDE 为什么偏偏现在火了

Design Engineer 很早就存在，Vercel 在 2024 年已经公开介绍过这套团队。AI 编程工具普及以后，设计和代码之间那堵墙突然变矮了，这个岗位开始被更多 AI 公司和小团队采用。

设计师第一次可以直接碰生产代码

过去设计师想把一个想法做成真实产品，要先学很久的 JavaScript 和工程工具。现在 Claude Code、Codex、Cursor、v0 和 Figma Make 可以帮忙搭组件、改样式、查错误、写测试，进入代码库的第一步容易了很多。

Figma 在 2026 年甚至开始让用户从画布直接连接本地代码库，进行视觉修改、创建分支、生成提交并发起 PR。设计和代码开始出现在同一条工作流里。

静态设计稿越来越难描述 AI 产品

传统页面的状态相对固定，AI 产品会遇到流式输出、长时间等待、结果不确定、引用来源、人工确认、失败恢复和权限风险。只画一张「成功页面」，工程团队根本不知道其他状态怎么工作。

PDE 可以直接做出会动的原型，用真实数据和真实延迟测试体验。团队不用围着几张静态稿猜半天，用户也能更早摸到产品。

小团队需要更短的交接链

早期公司最怕排队。产品等设计，设计等前端，前端发现做不了，再回头改稿，一轮下来可能就过去两周。

PDE 可以先把范围缩小，几天内做出可用版本，再让用户决定下一步。团队少了一次交接，决策也少了一次信息损耗。

AI 让「能做」变便宜，品味开始变贵

现在让 AI 生成一个后台、落地页或者聊天框并不难。难的是判断该做什么、哪些信息应该先出现、什么反馈能让用户放心，以及边界状态有没有被照顾到。

Figma 2026 年的报告里，近六成受访者认为设计比 AI 之前更重要。代码产量暴涨以后，产品之间的差距会更多出现在判断、细节、可信度和完成度上。

上一阶段比谁能把页面做出来，这一阶段比谁能把体验做完整。

5. 普通人的机会在哪

PDE 看起来像一个「六边形战士」，很容易把人吓退。现实里很少有人第一天就同时精通研究、视觉、交互和工程，大部分人都是从设计或前端的一侧出发，再慢慢补齐另一侧。

产品设计师：路径最直接

你的优势是用户理解、信息结构、交互和视觉判断。接下来要补的是 HTML、CSS、JavaScript、Git，再进入 React 和 TypeScript。

学习时不要满足于让 AI 生成一段代码。你要能看懂组件怎么拆、状态放在哪里、接口为什么报错、修改以后会不会影响其他页面，并且敢把自己的改动提交成 PR。

前端工程师：工程底子最扎实

你已经熟悉代码库、组件、状态和部署，转型重点在设计判断。可以系统补用户流程、排版、颜色、交互反馈、设计系统和可用性测试。

最有效的练法是选一个自己常用的产品，找出一段难用的流程，完成调研、改版、开发和验证。作品集中要解释设计决策，别只展示「还原度 100%」。

视觉、品牌和动效设计师：优势在完成度

这类人的视觉品味和表现力很强，短板通常在复杂产品流程与工程。可以先从营销站、互动页面、数据展示或 AI 产品的关键体验切入，再逐步补表单、状态管理、接口和组件系统。

Framer、Webflow 和 AI 编程工具可以帮助你起步，但最终作品最好有真实代码、真实数据和真实用户。只有效果图，很难证明你能维护一套产品。

产品经理和独立开发者：适合走 Product Builder 路线

如果你擅长定义问题，也愿意亲手做原型，可以先发展成能独立验证想法的 Product Builder。这个方向和 PDE 有重叠，但要进入正式的 Design Engineer 岗位，仍然需要补视觉、交互与前端工程。

完全零基础：先选一条主轴

设计、产品、代码同时从零学，范围会大到失控。先选产品设计或前端工程作为主轴，做到能独立交付，再补另一侧。

PDE 很少是职业第一站，它更像设计能力和工程能力在某个项目里汇合。

https://www.granola.ai/jobs/design-engineer

6. 给普通人的半年路线

半年能不能直接拿到 PDE Offer，要看你之前的积累。如果你已经做过产品设计或前端开发，半年足够做出一份像样的转型作品集；完全零基础的人，可以把它当成第一阶段。

第 1—2 个月：补另一侧的基础

设计师先补：

  • HTML、CSS 和 JavaScript
  • Git、分支、提交和 PR
  • React 组件、Props 和 State
  • 响应式、浏览器调试和基础部署

前端工程师先补：

  • 用户流程和任务分析
  • 排版、颜色、间距和视觉层级
  • 交互状态与反馈
  • Figma、Auto Layout 和组件系统
  • 基础用户访谈与可用性测试

这一阶段的验收标准很具体：

独立设计并上线一个响应式页面，至少包含表单、加载、成功、失败和空状态。

第 3—4 个月：完整做一项产品功能

不要把作品停在 Landing Page。选一段真实任务，比如 AI 文档整理、费用记录、客户线索管理、会议待办或个人知识库，从问题到上线完整做一遍。

项目至少包含：

  • 用户与使用场景
  • 任务流程和信息结构
  • 低保真与交互原型
  • 设计系统或基础组件
  • React / TypeScript 生产代码
  • 接口、真实数据或合理的模拟数据
  • 响应式、无障碍与错误处理
  • 可访问的线上地址和代码仓库

AI 可以帮你写第一版，但每一个组件和依赖都要能解释。面试官问到为什么这样拆、哪里可能出错、怎样优化性能时，你不能把答案推给模型。

第 5—6 个月：找用户，把细节磨出来

找五个目标用户完成同一项任务，观察他们在哪里犹豫、点错和退出。不要只问「喜不喜欢」，要记录：

  • 任务能不能完成
  • 完成一遍需要多久
  • 哪一步错误最多
  • 哪些文案让人看不懂
  • 手机、键盘和不同屏幕下是否可用
  • 修改后数据有没有改善

最后把作品整理成一个完整案例：问题怎么发现，为什么选这个方案，设计和工程做了哪些取舍，用户测试暴露了什么，你又改了什么。

作品集里至少要同时出现三样东西：

设计过程、线上产品、代码仓库。

https://www.figma.com/blog/the-future-of-design-is-code-and-canvas/ https://jobs.ashbyhq.com/happyrobot.ai/f4029610-fa48-44fd-930d-f6900d3527db

7. 国内外现在到底怎么招

截至 2026 年 8 月，我把招聘网站上还能打开的相关职位翻了一遍。国外已经开始把 Design Engineer 和 Product Design Engineer 当成正式岗位招聘；国内也出现了同样的工作，只是岗位名还比较散。

你如果只在招聘网站搜索「PDE」，排在前面的很可能是硬件、结构、芯片和制造岗位。

国内：工作已经出现，岗位名还没统一

我重新在 BOSS 直聘和智联招聘里搜了一遍。直接搜索 PDE，结果依然会掉进机械、芯片和制造岗位；换成「AI 产品设计师」「AI 体验设计师」「UX/UI 设计师（AI/Agent 方向）」以后，才开始看到这篇文章讨论的工作内容。

https://x.com/@AdrianPunk115

BOSS 直聘目前能看到的例子包括：

上海「AI 产品设计师」20–30K， 深圳「UX/UI 设计师（AI/Agent 方向）」9–12K·14 薪， 长沙「UI/UX 设计师（AI 产品）」30–45K·16 薪。

智联招聘的一条北京「AI 产品设计师（交互/视觉方向）」岗位给到 2–3 万/月，要求从 AI 产品概念一路做到交互、视觉、组件规范和设计走查，同时明确写了 Figma 与 Design System。

这些岗位已经要求全流程体验、AI 交互、设计系统和推动落地，但公开 JD 很少把 React、TypeScript、提交 PR 或生产代码写进职责。国内的机会已经出现，目前大多停在 PDE 的设计侧。

所以国内找工作别只搜 PDE。先搜工作内容，再判断你的代码能不能进入正式仓库。

国外：岗位名更清楚，要求也更硬

国外招聘页写得直接很多。职位名、工作地点、代码要求和薪资通常放在页面开头，AI、法律科技、会议工具、网络安全和招聘 SaaS 都在招。Filevine 和 HappyRobot 直接把岗位放在工程与产品的交叉位置，也公开了基础年薪。

https://vercel.com/design/engineer

其他岗位不再逐张放截图：

  • Granola 在伦敦招聘 Design Engineer，要求同时使用 Figma 和代码
  • Cracken 支持欧洲远程，把 React、TypeScript、Claude Code、Codex 和 Cursor 写进要求
  • Ashby 已经建立 Design Engineering 部门，并按 Mid、Senior 等级招聘

完整页面都放在文章结尾，想投递的人可以继续看。

看到 12 万、22 万美元，先别急着换算成人民币。Filevine 要求旧金山现场办公，HappyRobot 是旧金山混合办公，Granola 主要在伦敦办公室；Cracken 和 Ashby 虽然写着远程，地域仍然限定在欧洲或美国。

高薪和当地生活成本、工作许可、语言能力、现场协作绑在一起。

国外岗位的优势是定义清楚、回报透明；代价是门槛更高，而且远程投递不等于可以留在国内工作。

https://jobs.ashbyhq.com/ashby/fd86edd7-3af0-4977-a61a-215212c296fa

8. 找工作时，别只搜 PDE

这个岗位的名字比 FDE 还乱。PDE 在硬件行业有完全不同的含义，所以只搜三个字母，很容易掉进机械设计和制造岗位里。

国内怎么搜

国内招聘网站更适合用「工作内容 + 技能」组合搜索，职位名反而放在后面：

  • AI 产品设计师 / AI 体验设计师
  • UX/UI 设计师 + AI Agent
  • 产品设计师 + React / TypeScript
  • UI/UX + AI 原型 / 前端实现
  • 设计系统 + 前端工程师
  • 产品研发 + 全栈 / 前端 / UI UX

海外怎么搜

海外招聘网站再组合搜索这些名称：

  • Product Design Engineer
  • Design Engineer
  • Product Designer / Design Engineer
  • UX Engineer
  • UI Engineer
  • Design Technologist
  • Prototyping Engineer
  • Frontend Engineer, Design Systems
  • Product Engineer
  • Founding Product Designer，附带 React 或 code

看到职位后，重点看五件事

  1. 是否需要理解用户和产品问题
  2. 是否拥有流程、界面和交互的决策权
  3. 是否需要写 React、TypeScript 等生产代码
  4. 代码会不会进入正式仓库并上线
  5. 上线后是否继续看反馈、数据和迭代

五项覆盖得越完整，工作内容越接近这篇文章讨论的 PDE。

9. 面试和作品集怎么准备

PDE 面试通常会同时看作品和代码。你可能拿到一个模糊任务，例如：

给 AI 客服设计一套人工接管流程，并做出可以运行的版本。

建议按这个顺序走：

  1. 先问用户是谁、什么情况下需要接管、要保留哪些上下文、错误会带来什么后果
  2. 再画流程和关键状态
  3. 做出原型后，用代码实现最关键的一段
  4. 补上加载、失败、空状态、键盘操作和响应式

作品集不要只放精修截图。最好同时提供：

  • 一个能打开的产品
  • 一段三到五分钟的讲解
  • 关键设计决策
  • 真实测试结果
  • 你亲手提交的代码

设计过程 + 线上产品 + 代码仓库，这三样缺一不可。

10. 小心「一个人顶两个人」的廉价岗位

PDE 很容易被公司理解成「设计师加前端」，然后把两份工作塞给一个人。你既要接所有页面，又要维护组件库，还要临时做官网、海报和销售材料，却没有产品决策权，也没有时间做用户研究。

这种岗位能让人迅速忙起来，未必能积累扎实的 Design Engineering 能力。面试时可以直接问：

  1. 这个岗位归设计、产品还是工程团队？
  2. 我写的代码会进入哪个仓库，由谁 Review？
  3. 我可以独立决定哪些产品和交互问题？
  4. 设计与工程时间大概怎么分配？
  5. 团队怎样衡量体验质量和项目成功？
  6. 有没有时间维护设计系统和组件库？
  7. 上线后要不要参加值班和故障处理？
  8. 过去半年，这个岗位实际发布过哪些功能？

判断标准可以压缩成两行：

  • 成熟 PDE：拥有体验决策权，写生产代码，对上线质量负责，持续接触用户反馈
  • 廉价二合一：到处补位，围着临时需求转，责任很多，权限和时间都很少

Filevine 当前的 PDE 招聘把用户访谈、设计、React/TypeScript 和端到端交付写在同一份职责里，同时给出了 12 万到 16 万美元的基础薪资区间。混合岗位本身没有问题，关键看公司是否承认这套能力的价值，并给你相应的空间和回报。

![识别成熟 PDE 和廉价二合一岗位](./images/pde/pde-role-screening.png) — A requested file or directory could not be found at the time an operation was processed.

最后

PDE 的出现，说明 AI 产品团队的分工正在重新组合。设计师开始进入代码库，工程师开始参与设计，能把一段体验从问题做到上线的人，会越来越稀缺。

这份工作也没有想象中那么浪漫。你要有品味，也要处理表单校验、响应式、浏览器 Bug、无障碍、代码 Review 和上线后的各种小问题。

普通人的机会仍然藏在原有能力里：

  • 设计师补工程
  • 前端补产品与设计
  • 视觉和动效设计师从高完成度场景切入
  • 产品经理先练成可以独立验证想法的 Builder

如果你现在只做一件事：

选一段自己每天都在用的产品流程，重新设计，亲手写出来，找五个人完成任务，再根据结果改一轮。

跑完这条，你已经开始拥有 PDE 的工作方式。职位名可以以后再拿。

https://www.figma.com/blog/figma-make-now-on-your-local-code/

资料链接

  • Figma：2026 AI Report
  • Figma：Figma Make, now on your local code
  • Figma：The future of design is code and canvas
  • Vercel：Design Engineering at Vercel
  • Vercel：Design Engineer Principles
  • Filevine：Product Design Engineer
  • HappyRobot：Product Design Engineer
  • Elicit：Product Design Engineer
  • Apple：Product Design Engineer（硬件岗位示例）
  • BOSS 直聘：上海 AI 产品设计岗位
  • BOSS 直聘：AI / Agent UX 岗位
  • BOSS 直聘：AI 产品 UI/UX 岗位
  • 智联招聘：AI 产品设计师（交互/视觉方向）
  • Granola：Design Engineer（伦敦）
  • Cracken：Design Engineer（欧洲远程）
  • Ashby：Design Engineer（美洲）

关于作者

Punk｜中科大管理学硕士｜AI提示词、AI小白教程｜Punk系列Skills作者｜3个月赚了8位数｜Learn in Public｜FDE文章浏览量240w｜@AdrianPunk115