用途
Awwwards UI Skills 是一套面向 AI 智能体的、带有明确约束的 UI 设计系统指南，用于构建 Awwwards 风格的界面。当需要构建浅色模式界面、创建受 Awwwards 启发的设计系统，或实现使用 Inter 字体与 4px 网格的 UI 时，可参考这些规则。
主要能力
颜色
- 主表面应使用浅色背景。
- 页面背景（surface-base）必须使用 #E4E4E4。
- 应精简调色板（资料显示当前检测到 15 种颜色）。
- 文本对比度必须至少保持 4.5:1，以满足可访问性。
语义令牌：
| 令牌 | HEX | RGB | 用途 |
|---|---|---|---|
| surface-base | #E4E4E4 | rgb(228,228,228) | 页面背景 |
| surface-raised | #2F2E30 | rgb(47,46,48) | 卡片、模态框、抬升表面 |
| surface-overlay | #191919 | rgb(25,25,25) | 遮罩、工具提示、下拉菜单 |
| text-primary | #565656 | rgb(86,86,86) | 标题、正文 |
| text-secondary | #939393 | rgb(147,147,147) | 次级、弱化文本 |
| text-tertiary | #B5B5B5 | rgb(181,181,181) | 附加文本 |
| border-default | #3A3A3A | rgb(58,58,58) | 细微边框、分隔线 |
排版
- 主字体族必须使用 Inter。
- 应使用单一字体族以保持一致。
- 主标题必须使用 127px / 700。
- 正文必须使用 16px / 500。
- 应精简字重（资料显示当前检测到 5 种）。
- 标题必须使用 text-balance，正文必须使用 text-pretty。
- 数字数据应使用 tabular-nums。
- 除非明确要求，绝不修改 letter-spacing。
文本样式：
| 样式 | 字体 | 字号 | 字重 | 颜色 | 数量 |
|---|---|---|---|---|---|
| heading-1 | Inter | 127px | 700 | #1C1C1C | 1 |
| text-28px | Inter | 28px | 700 | #ECEEE4 | 1 |
| text-18px | Inter | 18px | 500 | #3C3C3C | 1 |
| text-17px | Inter | 17px | semi_bold | #3D3D3D | 1 |
| body | Inter | 16px | 500 | #B5B5B5 | 1 |
| body-secondary | Inter | 16px | 500 | #B0B3A3 | 1 |
| body-secondary | Inter | 15px | 400 | #4A4A4A | 1 |
| body-secondary | Inter | 15px | 400 | #4D4D4D | 1 |
| body-secondary | Inter | 15px | 400 | #646464 | 1 |
| body-secondary | Inter | 14px | 400 | #5C5C5C | 2 |
排版参考：字体族为 Inter（使用 31 次）；字号包括 7px、8px、9px、10px、11px、12px、14px、15px、16px、17px、18px、28px、127px。
间距
- 间距必须使用 4px 网格。
- 应使用刻度中的间距：1px、2px、3px、4px、5px、6px、8px。
- 元素间默认间距应为 5px。
- 绝不使用任意间距值（应使用设计刻度）。
- 应保持容器内边距一致。
边框
- 圆角必须使用刻度：2px、3px、4px、6px、7px、8px、9px。
- 边框宽度必须统一使用 1px。
- 默认圆角应为 7px。
- 绝不使用任意圆角值（应使用设计刻度）。
- 应使用细微边框（1px）分隔元素。
圆角参考刻度：2px、3px、4px、6px、7px、8px、9px。
布局
- 必须按 1920px 基准视口宽度设计。
- 应使用一致的元素宽度：91px、58px、32px、42px、88px。
- 应保持文本密集型布局与清晰层级。
- 绝不使用 h-screen，全视口高度应使用 h-dvh。
- 固定元素必须尊重 safe-area-inset。
- 方形元素应使用 size-* 而非 w-* + h-*。
检测到的布局模式：主内容 width: 1920px, height: 629px；主内容 width: 1601px, height: 632px。
组件
- 输入框高度必须使用 0px。
按钮：
| 变体 | 背景 | 文本 | 边框 | 高度 | 圆角 |
|---|---|---|---|---|---|
| Ghost | transparent | #565656 | none | - | - |
输入框：高度 0px。
交互状态
焦点：
- 必须使用 2px 轮廓，强调色为 #5E6AD2。
- 必须使用 2px outline-offset。
- 绝不移除焦点指示器。
悬停：
- 按钮（主）：背景提亮 10%。
- 按钮（次）：使用 #2F2E30 背景。
- 列表项：使用 #2F2E30 背景。
禁用：
- 必须使用 opacity: 0.5。
- 必须使用 cursor: not-allowed。
交互
- 破坏性或不可逆操作必须使用 AlertDialog。
- 加载状态应使用结构化骨架屏。
- 错误必须显示在操作发生的位置附近。
- 绝不在 input 或 textarea 元素中阻止粘贴。
- 仅图标按钮必须添加 aria-label。
动画
- 除非明确要求，绝不添加动画。
- 只能对合成器属性（transform、opacity）做动画。
- 绝不对布局属性（width、height、top、left、margin、padding）做动画。
- 入场动画应使用 ease-out。
- 交互反馈绝不超过 200ms。
- 应尊重 prefers-reduced-motion。
性能
- 绝不对大面积 blur() 或 backdrop-filter 表面做动画。
- 绝不在非活动动画之外应用 will-change。
- 绝不对任何可表达为渲染逻辑的内容使用 useEffect。
使用方式
该技能以规则约束的形式提供给 AI 智能体，在构建界面时作为设计参考。资料未提供具体的安装命令、代码示例或调用步骤，暂未提供。
适用场景
- 构建浅色模式界面。
- 创建 Awwwards 风格的设计系统。
- 实现使用 Inter 字体与 4px 网格的 UI。
限制
- 资料未说明收费、价格、平台支持范围或效果保证，暂未提供。
- 规则中的颜色、字号、间距等数值来自资料中检测到的具体数据，使用时应以资料所列值为准。