Agent Skills
返回列表
前端设计优化器

前端设计优化器

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_8ec29dbe/frontend-design-optimizer。

技能介绍

解决什么问题

前端页面常有“能跑但粗糙”的问题：标题层级弱、间距用魔法数字、颜色直接写 hex、按钮缺少 hover/focus 反馈、键盘不可用，以及 LCP、CLS 不达标。它适合新页面开发、遗留页面改造、Design Review 和竞品对标，重点是把视觉与交互推到产品级，同时不改动业务逻辑。

如何工作

技能会先收集 URL、截图或代码，再按维度审计：视觉层次、排版系统、色彩系统、响应式布局、交互反馈、无障碍与性能。它会检查 H1/H2/H3 字号比例、WCAG 对比度、line-height、rem、spacing scale、:focus-visible、prefers-reduced-motion 等实现。输出可以是问题清单、完整代码片段、Design Tokens 或分步重构路线，并用 Lighthouse、键盘导航和截图对比验证。

适用边界

它偏前端表现层，不负责后端逻辑、数据模型或复杂业务状态。若缺少代码、截图或技术栈信息，建议先补齐。对“像素级还原”应谨慎，优先关注设计意图、可访问性和跨设备可用性。

使用场景

  • 发版前审查登录页视觉缺陷与键盘可访问性，输出按严重程度排序的问题清单。
  • 接手遗留管理后台，定位魔法间距、颜色硬编码与排版不一致，生成 CSS 变量改造方案。
  • 将 Figma 组件转成代码后，检查 focus、aria、loading 状态和响应式，补齐产品级细节。
  • 优化表单页交互反馈，为按钮、输入框、错误消息补 hover、focus-visible 和 aria 关联。

适合人员

  • 需要在前端 PR 中附带 UI 层面 Code Review 的前端工程师。
  • 负责把旧系统页面改造成符合现代设计系统的产品工程师。
  • 需要在发版前拦截低级视觉和无障碍缺陷的 QA 或设计师。
  • 需要从截图或 Figma 生成可访问组件代码的全栈工程师。