用途
Absolute UI 是一套用于构建 UI 的设计系统知识库，目标是让界面看起来像由资深设计师精心打造，而不是由提示词自动生成。它把设计规则写成具体、有明确主张的条目——精确的间距值、经过验证的色彩比例、真实的字体层级，以及经过实战检验的组件模式。每条建议都配有可执行的 CSS/Tailwind 具体数值，而非“让它干净一点”这类空泛建议。
其核心判断是：AI 生成的粗糙界面与精致界面之间的差别，来自约束与克制——更少但更有意图的颜色、来自统一比例的间距、不喧哗却能建立层级的排版，以及响应及时但不分散注意力的微交互。
主要能力
该技能覆盖以下设计主题：
- 排版：字号比例、字体选择、文本样式
- 颜色：调色板限制、色彩比例
- 布局与间距：网格决策、间距比例
- 暗色模式与主题切换
- 无障碍与 WCAG 合规设计
- 动画、过渡与微交互
- 组件模式：按钮、卡片、表单、表格、导航
- 反馈模式：Toast、工具提示、加载状态
- 响应式设计与移动端导航
- 落地页、引导流程与转化导向布局
使用方式
该技能在用户提出以下需求时触发：构建或美化 UI 组件（按钮、卡片、表单、表格、导航）；需要布局、间距或网格决策帮助；实现暗色模式或主题切换；询问排版、字体选择或文本样式；需要无障碍且符合 WCAG 的设计；需要落地页、引导流程或转化导向布局；询问动画、过渡或微交互；需要响应式设计或移动端导航帮助；需要反馈模式（Toast、工具提示、加载状态）；要求让某物“看起来更好”或“更专业”。
不适用于：后端逻辑、API 设计或数据库模式问题；品牌识别或 Logo 设计（这是实现，不是品牌）。
在编写任何标记或 CSS 之前，先读取缓存配置：如果存在 .absolute.config.json 或 ~/.absolute/config.json（来自 /absolute init），则解析有效配置（项目文件 → 全局 projects["<cwd>"] → 全局默认值），并采用 conventions.ui 中的约定：framework（为项目框架生成，而非默认值）、styling（使用项目自身的系统，而非假定 Tailwind）、iconLibrary（从项目图标库取图标）、componentLib（在已设置时基于现有组件库构建）、tokensPath（读取并扩展现有设计令牌，而非另造一套比例）。仅对配置未提供的部分从 package.json 依赖中检测；无配置时，可软性建议初始化并即时检测。
关键原则
- 使用间距比例，绝不用任意值：选一个基准单位（4px 或 8px），只用其倍数：4、8、12、16、24、32、48、64、96。
- 调色板限制为 1 个主色 + 1 个中性色 + 1 个强调色：主色用 5-7 个色阶（50-900），一套完整的中性灰阶，一个强调色用于危险/成功状态。单屏不超过 3 个色相。
- 通过对比而非装饰建立层级：尺寸、字重、颜色和间距建立层级。不应同时需要边框、阴影和颜色差异。
- 每个交互元素需要 4 种状态：默认、悬停、按下/激活、禁用。焦点状态对无障碍是强制要求。
- 留白是特性，不是浪费：充裕的内边距让 UI 显得高级，拥挤的 UI 显得廉价。
- 内部一致，跨项目有个性：项目内统一圆角、阴影比例和过渡时长；但每个项目应有自己的个性。
- 使用真实图标，绝不用 emoji：Unicode emoji 在不同操作系统和浏览器渲染不一致，无法用 CSS 设置样式，破坏视觉一致性并损害无障碍。应使用 Lucide React（推荐）、React Icons、Heroicons、Phosphor 或 Font Awesome。
- 背景需要氛围：纯色背景是 AI 生成 UI 的默认特征。使用微妙的渐变网格、噪点/颗粒叠加、几何图案或带色调的表面来创造深度。
核心概念
- 8px 网格：所有间距、尺寸和布局决策都对齐 8px 网格。组件高度：32px（小）、40px（中）、48px（大）。内边距：8px、12px、16px、24px。间隙：8px、16px、24px、32px。
- 视觉重量：每个元素都有由尺寸、颜色深浅、边框粗细和阴影决定的视觉重量。页面应有一个明确的重元素（CTA 或主要内容），其余逐渐变轻。
- 60-30-10 规则：60% 主导色（背景/中性色），30% 次要色（卡片、区块），10% 强调色（CTA、激活状态）。
- 视觉对齐：数学居中不一定看起来居中。按钮中的文字视觉上需要顶部多 1-2px 内边距。
- 渐进披露：不要一次展示所有内容。从必要操作开始，按需揭示复杂性。
- 格式塔：相似性与接近性：大脑先处理整体再处理部分。用一致的形状、尺寸和颜色表示“这些属于一组”，用间距分组相关元素、分隔无关元素。
- 深度塑造个性：用阴影替代实心边框，用微妙渐变替代纯色填充，用卡片提升平淡元素。
- 上下文优先于标签：并非所有 H1 都应同样大小。HTML 标签定义语义；视觉层级取决于用户在特定布局中需要先看到什么。
常见任务
该技能提供了以下常见任务的示例代码：
- 按钮层级样式：每个应用需要 3 个按钮级别——主要（填充）、次要（描边）和幽灵（纯文字）。每个视觉区块不超过一个主要按钮。按钮高度应为 36px（小）、40px（中）或 48px（大），触摸目标不小于 36px。
- 建立字号比例：使用比例 1.25（大三度）的模块化比例，基准 16px。最多 2 个字体家族。
- 用 CSS Grid 构建响应式布局：内容优先的响应式网格、圣杯布局、移动端堆叠。应用最大内容宽度 1280px，阅读内容 720px。文本行不超过 75 字符。
- 正确实现暗色模式：不要只是反转颜色。暗色模式背景应为深蓝灰色（#0f172a、#1e293b），而非纯黑。白色文字降为 #f1f5f9。暗色模式阴影需要更高不透明度。
- 添加 Toast 通知系统：成功 Toast 3-5 秒后自动消失，错误 Toast 持续到手动关闭。多个 Toast 以 8px 间隙堆叠，最多同时可见 3 个。
- 创建数据表格：数字右对齐，文字左对齐。不要同时使用斑马纹和悬停——二选一。视口高度以上的表格固定表头。移动端添加横向滚动容器。
反模式与常见错误
该技能列出了大量反模式，包括：纯黑（#000）配纯白（#fff）过于刺眼；每个组件圆角不同破坏一致性；到处加阴影造成视觉噪音；颜色过多无层级；移动端点击目标过小（应至少 44x44px，推荐 48px）；动画一切；全部居中；间距不一致；用 emoji 当图标；通用字体栈（Inter、Roboto、Arial）；白底紫色/靛蓝渐变（最典型的 AI 生成色彩陈词滥调）；处处可预测的对称布局；纯色平面背景；多色相渐变；冗余 UI 元素；AI 重复的 KPI/指标；每个操作都做成可见按钮。
适用场景
适用于前端 UI 实现、组件样式、布局与间距决策、暗色模式、无障碍设计、动画与微交互、响应式设计、落地页与转化布局等场景。
限制
不适用于后端逻辑、API 设计或数据库模式问题；不适用于品牌识别或 Logo 设计。该技能的具体安装方式、收费模式、价格与平台支持信息暂未提供。