高级前端工程师
将以下提示词粘贴到你的 AI 对话框中：
请根据 https://skillhub.cn/install/skillhub.md，安装 @user_1fa06258/frontend-senior-engineer。
技能介绍
要解决什么问题
设计稿、截图或 Figma / 蓝湖标注到手后，常见结果是「功能有了但不像设计」：间距随意、字号偏大、卡片撑满屏、移动端横向溢出，改一页又牵动全局样式。本技能把 Agent 约束成高级前端工程师角色：优先还原布局与视觉 token，再写交互，并在已有项目里最小 diff 落地。
技能如何工作
设计图还原优先：实现前先拆解页面布局、信息层级、卡片结构，以及间距、字号、颜色、圆角、阴影、导航与列表/空/加载/错误状态；不堆设计里没有的装饰。
工程化默认：审美偏简洁现代；尺寸遵循 4px / 8px 间距体系；复杂页拆成 StatsCard、EmptyState 等清晰组件，不过度拆分。
推荐流程（详见 resources/design-to-code-workflow.md）：识别技术栈与项目规范 → 分析设计结构 → 提取 token → 拆区域/组件 → 静态 UI → 状态与交互 → 补全三态 → 响应式适配 → 按 ui-quality-checklist.md 自检。
配套资源包括 design-tokens.md、layout-responsive-rules.md、miniapp-taro-rules.md、code-standards.md；需要交给 Codex 时可套用 templates/codex-implement-from-design.md 等模板。完成后输出实现说明、修改文件、还原要点与自检结果。
适用边界
适合 React、Vue、Taro、Next.js、小程序、Tailwind、SCSS 等按设计实现或改页的任务；不负责替你做产品决策。未确认的设计细节、接口字段应明确标注，需你补充后再定稿。
使用场景
- 收到 Figma 或蓝湖标注的首页/仪表盘，需要在现有 Next.js 或 Vue 项目里按间距与字号还原静态页
- 产品发来截图说「和线上不一致」，要在不改动路由和接口的前提下改单页布局与组件样式
- 小程序或 Taro 活动页需对照 MasterGo 稿实现卡片列表、空态与底部导航
- 新 SaaS 官网区块要拆成可维护组件，并补齐 loading、error 与移动端适配
适合人员
- 负责 B 端后台与数据看板的前端，常被要求「像素级」对齐设计稿且不能动全局主题
- 接外包或内部迭代的 React/Vue 工程师，要在老项目里只改指定页面并复用现有组件库
- 小程序/Taro 开发者，需要按标注实现 H5 与微信端页面并遵守项目内 CSS 规范
- 带 Codex 或 Agent 做 UI 的技术负责人，希望输出带自检清单与修改文件列表的可执行结果
相关技能
为工程师提供 Java Spring Boot 后端开发指导，覆盖 REST API、数据库、安全、微服务、测试、部署与常见排障。
为 Agent 提供纯 Python 截图工具，支持全屏、窗口、滚动截图，并能进行标注、马赛克模糊和屏幕取色。
基于 Chrome CDP 执行云表 Web 登录，要求外部传入 baseUrl、username、password，并验证进入已登录首页。
输入主题后自动创作内容，按设计系统生成闪卡、学习、测试、索引与进度页面，并输出可部署的知识学习网站。