前端工程师

开篇速查：推荐模型与工具

推荐模型：GPT-5.6 Sol，日常迭代用 GPT-5.6 Terra。
理由：Sol 的官方指引特别强调前端布局、视觉层级和设计判断；截图审查可配 Gemini 3.6 Flash，最终以浏览器多断点截图和可访问性检测为准。
推荐产品：Codex、Claude Code、Cursor（本岗位涉及复杂开发、仓库或运行环境）。 常用工具：Figma、浏览器开发者工具、Playwright、截图对比、Lighthouse 与 axe。 核对日期：2026-08-04；上线前再查厂商官方模型列表并用内部评测集验证。

历史依据：从 8,276 条用户消息中命中 781 条，精确去重后 312 条。以下工作方式优先针对这些历史任务和返工问题。

1. 历史记录暴露的问题

• 明确验收标准：17/312（5%）。
• 明确要求验证：105/312（34%）。
• 提供失败/复现证据：34/312（11%）。
• 出现“功能不可用/报错”类返工：17 条。
• 出现“再检查/再测试”类返工：21 条。
• 出现“继续/不要停”但退出条件不清：13 条。

因此本岗位的模板会把验证、证据和退出条件写进首轮提示，而不是等失败后补充。

2. 什么时候使用

• 实现页面、组件、工作台和数据看板
• 按截图或品牌规范还原视觉
• 修复‘不好看、点不动、状态不完整’
• 做响应式、可访问性和浏览器实测

3. 责任边界

• 负责浏览器中的真实用户体验
• 复用现有设计令牌和组件
• 不在前端伪造服务端权限
• 接口未就绪时明确 Mock 边界，不把 Mock 当真实联调

4. 开始前必须提供

• 用户核心任务和页面入口
• 截图/Figma/品牌规范/参考网站
• 技术栈、路由、状态管理和组件库
• API契约、错误码和示例数据
• 目标浏览器、设备和分辨率

缺少信息时，先从仓库、配置、运行状态和现有资料中查证。只有会改变业务方向、造成生产影响或无法安全推断的内容才询问。

5. 完整可复制提示词

你是前端工程师。请在【仓库】实现/重构【页面或用户流程】。

核心用户任务：【入口→操作→结果】
视觉输入：【截图/Figma/品牌规范】
技术栈：【React/Vue等、组件库、状态、测试】
接口契约：【端点、类型、错误码】
目标设备：【桌面、平板、手机尺寸】

开始前必须：
- 阅读现有全局样式、设计令牌、布局和可复用组件；
- 启动项目并打开当前页面，记录真实问题。

实现：
1. 明确第一、第二、第三视觉焦点和信息密度。
2. 使用语义化结构和清晰组件边界。
3. 补齐 hover/focus/active/disabled/loading/empty/error/success/permission。
4. 保证键盘、焦点、标签、对比度和必要 ARIA。
5. 所有可见按钮、筛选和导航产生真实结果。
6. 桌面、平板、手机均无溢出、遮挡和离屏操作。

验证：运行 lint、typecheck、unit、build；用浏览器完成核心路径；输出桌面和手机截图；与参考对比后继续修正明显差异。

最后报告修改文件、截图、命令结果、接口假设和剩余差异。

6. 推荐执行流程

1. 检查现有页面、组件和样式系统
2. 先建立信息层级和页面骨架
3. 接入真实数据契约
4. 补齐加载、空、错、权限和操作反馈
5. 完成桌面/平板/手机适配
6. 在浏览器真实点击并截图
7. 对照参考修正至少一轮
8. 运行构建、类型检查、测试

每一步都要留下可复核产物：文件、命令、截图、请求、任务ID、数据库记录、指标或决策记录。

7. 标准交付物

• 可运行页面和组件
• 完整交互与状态
• 响应式和无障碍实现
• 浏览器桌面/手机截图
• 构建、类型、单测和E2E结果
• 仍存在的视觉差异和接口假设

8. 历史中常见失败写法

• 只写代码，不打开浏览器看结果
• 说‘高级一点’但没有视觉基准
• 所有内容都做成同权重卡片
• 按钮可见但没有真实动作
• 只适配一张截图尺寸
• 空态、错误态和加载态缺失
• 用渐变、发光、玻璃拟态掩盖层级问题

修正提示词

当前结果未满足验收。不要整体重做，先按证据定位差距。

原目标：【目标】
原验收：【可观察标准】
实际结果：【截图/日志/请求/任务ID/数据库记录】
差距：【逐条列出】
必须保持：【已正确部分和接口不变量】

请先复现并说明根因，再实施最小修正。修正后重复原验证，并给出修改前后证据。未通过的项继续保留为失败，不要用“基本完成”代替。

9. 完成检查清单

• 目标、范围和不做项没有漂移。
• 关键假设已用代码、运行或数据验证。
• 成功、失败、空、重复、超时和权限路径已处理。
• 交付物可由另一人独立打开或运行。
• 验收命令/路径已实际执行并保留证据。
• 未完成项、风险和数据限制被明确列出。
• 下游岗位得到接口、不变量、文件和验证入口。

10. 交接模板

岗位：前端工程师
已完成：【内容】
证据：【文件、命令、截图、日志、任务ID、数据库记录或指标】
接口与不变量：【下游必须遵守】
配置/迁移影响：【内容】
未完成与风险：【内容、严重度、负责人】
下一岗位：【岗位】
下一步输入：【精确文件、环境、账号或任务】
禁止假设：【仍未知内容】

11. 实用组合技巧

• 截图驱动视觉迭代：前端 Agent 实现页面后自动用浏览器截图，视觉审查 Agent 对比参考图，从层级、间距、字体、颜色和素材五类差异循环修正。
• 品牌规范自动变设计令牌：让品牌 Agent 把颜色、字体、圆角和间距输出为结构化 JSON，再由前端 Agent 生成 CSS Variables 或 Tailwind Tokens。
• 设计稿自动拆组件：先让 UI 分析 Agent 从截图/Figma 提取页面区块、重复模式和状态，再由前端 Agent 建立组件而不是直接堆页面代码。
• 多断点批量验收：使用浏览器自动化一次生成桌面、平板、手机截图，并让审查 Agent 自动查找溢出、遮挡、折行和操作离屏。
• 真实数据与状态矩阵：让 Agent 根据接口 Schema 自动生成正常、空、慢、错、无权限和超长文本数据，批量检查组件状态。
• 可访问性自动门禁：在 E2E 中加入键盘路径、焦点、标签和对比度检查，让无障碍问题在每次修改后自动暴露。