前端工程师成长路线图以“独立交付含支付跳转的h5营销页”为终点，按周拆解：第1周修复figma与react映射错位，产出campaign-header-v1.3.2-已通过code review；第2周解决mock字段不一致，产出payment-mock-status-test-20240712.mp4；第3周验证灰度兜底逻辑，产出灰度checklist_v2.1.md第7条本地验证视频。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
你想在Gamma里生成一份前端工程师的成长路线图，但AI总输出“掌握React框架”“熟悉工程化体系”这种虚话，根本没法贴在工位墙上当每日对照清单——真实需求是：新人打开文档第一眼就要知道今天该干啥、下周要交什么、三个月后能不能独立上线一个活动页。
锁定岗位真实交付物锚点
在提示词第一行写死：【你是一名有6年一线带教经验的前端技术主管，正在为刚转正的 junior 前端工程师制定可执行的成长路线，所有阶段必须围绕“能独立交付一个含支付跳转的H5营销页”这一终点展开】。
紧接着插入三个真实文件路径：【/src/pages/campaign/2024-spring-sale/】、【/mock/api/payment/v2.js】、【/docs/灰度发布checklist_v2.1.md】。Gamma识别到具体路径后，会自动关联组件命名规范、Mock联调方式、发布校验动作，不会发散到“学习TypeScript高级类型”这类远期抽象项。
这一步漏掉任何一条路径，AI就会默认从“React基础概念”开始写起，新人拿到后根本不知道从哪下手。
用时间+卡点+验证三要素倒推阶段
方法一：按周拆解，每阶段绑定一个失败案例
第1周→修复Figma设计稿与React组件映射错位问题→产出可运行的Header组件（含console.log('header-rendered')验证）；
第2周→解决接口Mock数据与真实字段不一致导致的支付按钮置灰问题→产出payment/v2.js中status字段的3种状态覆盖测试截图；
第3周→绕过灰度发布流程缺失导致的线上白屏事故→产出灰度checklist_v2.1.md第7条“JS资源加载超时兜底逻辑”的本地验证视频（≤15秒）。
方法二：用卡点反向定义能力门槛
当新人在/src/pages/campaign/2024-spring-sale/目录下修改Button组件后，发现Figma标注的圆角值（8px）未同步到CSS变量，说明尚未建立设计系统与代码变量的映射意识→需补学design-tokens.json读取逻辑。
强制嵌入真实协作痕迹
在提示词末尾加一句：请把前端Tech Lead张磊上周在GitLab MR评论中的原话自然融入第三阶段：“别在button上硬写border-radius，去改tokens，不然下次UI改全局圆角你得改17个文件”。
所有交付物名称必须含版本号或状态标识，例如“campaign-header-v1.3.2-已通过Code Review”“payment-mock-status-test-20240712.mp4”，禁止出现“完成组件开发”“掌握联调流程”等无痕表述。
当前新人卡点明确：无法定位Figma组件ID与React文件路径的对应关系，导致切图后样式错位率超65%——这条必须作为第一阶段起点，不能被AI模糊成“提升UI还原能力”。
