用途：该技能名为 Better Web Interface，目标是改善 Web 界面的设计与一致性，把产品当作一套设计系统而非孤立页面，在桌面与移动 Web 上保持相同的层级、节奏与视觉含义。资料还说明它与 design-system、react-component-engineering、storybook-docs 互补，并提及 frontend-design、better-headers、better-forms、better-mobile-interface 等相关技能。
主要能力与规则：使用语义化 token，不在页面散落十六进制颜色，角色包括 --bg、--surface、--surface-elevated、--text、--text-muted、--border、--accent、--on-accent、--success/--warning/--danger、--focus-ring 等；一个强调色，中性色承载界面，对比度达 AA（正文 4.5:1，大字/图标 3:1）。排版使用有限命名层级（display、title、body、label、caption），最多两套字族，层级靠字号与字重。间距基于 4 或 8px 刻度（4、8、12、16、24、32、40、48、64…），内容宽度与间距按断点一致。圆角命名（sm/md/lg/full），仅在表达层叠时使用阴影。交互状态覆盖 default、hover、focus-visible、active、disabled；表单、空态、骨架、错误、通知均用语义 token 表达。过渡 150–300ms，并尊重 prefers-reduced-motion。响应式使用项目断点，触控目标 ≥44px，避免另造一套移动端视觉。
使用方式：先了解产品与用户、视觉签名、基调、现有设计系统/CSS 变量/组件清单；若已有设计系统或品牌规范，以其为准，只补齐缺失部分。实现流程为：复用现有 token 与组件、只应用语义角色、与相邻页面统一 CTA/表单/间距、检查断点与 light/dark、将可复用变体记录到 Storybook。
适用场景：需要统一多个路由或页面的界面风格、改善层级与间距、补齐交互状态、保证响应式与明暗主题一致性的 Web 前端工作。
限制：资料为葡萄牙语，未说明具体平台、安装方式、代码调用命令、收费与价格信息；这些事实暂未提供。文中还列举了应避免的“AI 通用感”反模式，如到处使用紫/靛渐变与玻璃拟态、无简报默认奶油色+衬线+陶土色、过多胶囊与嵌套卡片等。