学习资源
PDE 学习入口：官方报告（Figma AI 报告）、工具链（Figma/Claude Code/Cursor/v0）、设计系统（Material/Fluent）、学习路径与社区。
PDE 无官方教材——本板块资源为工具链 + 行业报告 + 学习路径整理；AI 赛道更新极快，以工具官方文档当版为准。
官方与行业报告（优先读）
- Figma AI 年度报告（figma.com）：设计师参与度数据（41% 参与开发/60% 开发者做设计）——理解 PDE 为什么火的原始数据；
- Vercel Design Engineer 团队介绍（vercel.com）：岗位定义（“理解问题、设计方案、构建并独立发布”）；
- 招聘 JD 拆解：Filevine/Elicit 等 AI 公司的 PDE 岗位要求（“JD 就是考纲”）。
工具链（“三件套 + AI 编程”）
| 类别 | 工具 | 用途 |
|---|---|---|
| 设计 | Figma（Auto Layout/组件/原型） | 设计稿 + 可交互原型 |
| 设计→代码 | Figma Make / v0 / Claude Code / Cursor | AI 辅助生成第一版（“起点，不是终点”） |
| 前端 | React + TypeScript（Vite/Next.js） | 生产代码 |
| 协作 | GitHub（分支/PR/Code Review） | 工程协作 |
| AI 产品 | 大模型 API（OpenAI/Anthropic/国产模型）+ LangChain/LlamaIndex | Agent/RAG 实操 |
学习路径（“按主轴选”）
| 你的起点 | 先学 | 再补 |
|---|---|---|
| 设计师 | HTML/CSS/JS → Git/PR → React/TS | 用户研究深化 + 性能/无障碍 |
| 前端 | 用户研究/流程/原型 → 设计系统 | 信息架构 + 可用性测试 |
| 产品经理 | 原型（Figma）→ 前端基础 | 视觉/交互 + 代码 |
| 零基础 | 先选主轴（设计 or 前端），6 个月做到能独立交付 | 再补另一侧 |
设计系统（“免费的设计规范教材”）
- Material Design（Google）：组件/状态/无障碍规范（“AI 产品状态设计的参照系”）；
- Fluent UI（Microsoft）：企业级组件系统；
- Ant Design（阿里）：中文场景最全的组件库（“国内 AI 产品主流”）。
使用建议
- “JD 即考纲”：每周拆 3 份 Design Engineer JD，把要求映射到能力项，缺哪补哪；
- AI 生成代码 ≠ 会：每个组件都要能回答"为什么这样拆/哪里可能出错/怎么优化"；
- 作品集 > 课程：“设计过程 + 线上产品 + 代码仓库”三件套齐了，比 10 门课有用；
- 关注更新：AI 赛道每 6 个月迭代一次（工具/模式/评审标准），旧作品集要持续更新。