野渡
搜索 K

主题

关系图谱

frontend-ui-engineering（Addy）

319 字 1 分钟

属性 8
repo
addyosmani_agent-skills
skill
frontend-ui-engineering
source
addyosmani_agent-skills/skills/frontend-ui-engineering/SKILL.md
invoke
model
phase
build
cost
low
status
stable
local
outdated
一句话

写生产级 UI：组件结构、状态归属、设计系统对齐、躲开「一眼 AI」的观感，无障碍做到 WCAG 2.1 AA。

何时用 ​

  • 适合：写或改页面、组件、布局；要过 WCAG；输出要看起来像人做的而不是 AI 生成的。
  • 不适合：无 UI 的后端逻辑；纯样式微调。

怎么用 ​

text
给设置页写一个新面板组件，要过无障碍，风格贴合现有设计系统
  1. 按组件架构约定组织文件，选合适的组件模式。
  2. 状态先定归属：本地、共享、服务端各归各位。
  3. 对齐设计系统：先看参考实现，间距、字体、颜色守体系，避开 AI aesthetic。
  4. 无障碍按 WCAG 2.1 AA：键盘可达、ARIA、焦点管理不能丢。
  5. 补有意义的空态和错误态，做响应式和加载、过渡。

产出 ​

  • 生产级组件代码，含无障碍、响应式、空态与错误态处理。

要点与坑 ​

  • Avoid the AI Aesthetic 是硬要求：先找参考再写，不凭空发挥风格。
  • 空态、错误态、加载态是 UI 的一部分，不是锦上添花。
  • 验收配合 addy-browser-testing-with-devtools 在真实浏览器里看。

关联 ​