absolute-ui

🧢

Absolute UI

一个全面的设计系统知识库，帮助构建精心打磨的 UI，让人感觉出自资深设计师之手， 而非由提示词生成。这项技能编码了具体且有主见的规则——精确的间距值、经过验证的 色彩比例、真实的字体排版比例，以及经受实战检验的组件模式。每条建议都能付诸实践， 并提供具体的 CSS/Tailwind 值，而不是“让它看起来简洁”之类的模糊建议。

AI 垃圾与精致 UI 之间的区别，归根结底在于约束与克制——有意使用更少的颜色，按照 比例尺保持间距一致，通过字体排版建立层次而不喧宾夺主，以及让微交互响应灵敏却不 分散注意力。

---

何时使用这项技能

在用户遇到以下情况时触发这项技能：

• 要求构建或设计 UI 组件（按钮、卡片、表单、表格、导航）
• 需要布局、间距或网格方面的帮助
• 想要实现深色模式或主题切换
• 询问字体排版、字体选择或文本样式
• 需要符合无障碍标准和 WCAG 的设计
• 想要设计着陆页、新手引导或以转化为目标的布局
• 询问动画、过渡效果或微交互
• 需要响应式设计或移动端导航方面的帮助
• 想要设计反馈模式（Toast、工具提示、加载状态）
• 要求让某个东西“看起来更好”或“更专业”

以下情况不要触发这项技能：

• 后端逻辑、API 设计或数据库架构问题
• 品牌标识或 Logo 设计（这是实现，不是品牌塑造）

---

先读取配置

在编写任何标记或 CSS 之前，读取缓存的配置：如果 .absolute.config.json 或 ~/.absolute/config.json 存在（由 /absolute init 创建），解析有效配置 （项目文件 → 全局 projects["<cwd>"] → 全局 defaults），并采用 conventions.ui：

• framework — 根据项目的框架（react/vue/svelte）生成内容，而不是使用默认选项。
• styling — 使用项目的样式系统（tailwind / css-modules / styled-components / vanilla），不要默认使用 Tailwind。
• iconLibrary — 从项目的图标库中获取图标（原则 7 要求使用真实图标）； 不要引入其他图标库。
• componentLib — 如果项目设置了组件库（shadcn/mui/chakra），就在现有组件库基础上构建。
• tokensPath — 从此文件读取现有设计令牌并在其基础上扩展，不要另创一套比例尺。

仅对配置未提供的内容，根据 package.json 依赖进行检测；如果没有配置， 则温和建议运行 init，并即时检测。

---

设计思路

编写 CSS 之前，先确定美学方向。UI 看起来千篇一律，首要原因就是动手写代码时没有明确意图。

1. 从用户意图出发，而不是从结构出发 —— 不要从页眉、页脚或布局框架开始。先问：“用户想要做什么？”如果他们在搜索住宿，搜索栏就是自然的起点。只有当用户意图扩展时，才扩展 UI。对许多页面来说，核心只需要一个标题、一个输入框和一个按钮——这些就够了。
2. 选定一种基调 —— 选择适合场景的风格：粗野主义、编辑风、复古未来主义、有机风、奢华风、俏皮风、工业风、装饰艺术、柔和／粉彩风、极简锐利风。这些只是起点——可以融合，也可以创造自己的风格。参见 references/style-catalog.md，其中有 25 种具体风格。
3. 确定令人难忘的元素 —— 哪一个视觉选择会让人记住？独特的颜色、戏剧性的字体排版、大胆的布局变化，还是富有氛围感的纹理？
4. 创造力在于连接，而非凭空发明 —— 研究你所在领域的顶尖设计。收集 3-5 个灵感来源，记下各自吸引你的地方，再用自己的方式组合这些元素。设计前先暂时离开一会儿——回来时往往会有新想法。
5. 让不同项目各具特色 —— 每个设计都应该给人不同的感觉。如果最近 3 个输出使用了相同的字体、颜色和布局模式，那你做出来的就是垃圾。

---

核心原则

1. 使用间距比例尺，绝不使用任意数值 - 选择一个基本单位（4px 或 8px），并且只使用其倍数：4、8、12、16、24、32、48、64、96。Tailwind 的默认比例尺就是这样做的。像 13px 或 27px 这样的随机内边距，是业余 UI 最明显的标志。

2. 将调色板限制为 1 种主色 + 1 种中性色 + 1 种强调色 - 颜色越多，越显杂乱。主色使用 5-7 个色阶（50-900），配一套完整的中性灰色阶，再用一种强调色表示危险/成功状态。单个屏幕上的色相不要超过 3 种。

3. 通过对比而非装饰来建立层级 - 大小、字重、颜色和间距都能建立层级。绝不应该同时需要边框、阴影和颜色差异。每个层级使用一到两种信号。关键在于：要突出某个元素，通常应弱化与之竞争的元素，而不是让目标更醒目。

4. 每个交互元素都需要 4 种状态 - 默认、悬停、激活/按下和禁用。缺少任何一种状态，UI 都会让人感觉有问题。为了保证无障碍访问，焦点状态不可或缺。

5. 留白是一项设计功能，不是浪费空间 - 充足的内边距会让 UI 显得高级。拥挤的 UI 显得廉价。工作流程：先留出过多间距，整体查看设计，再逐步缩减，直到感觉合适。用户会先浏览整个 UI，再关注细节——当你放大查看单个元素时觉得过多的空间，在页面层级上看起来往往恰到好处。

6. 内部保持一致，对外展现个性 - 在一个项目中，所有地方都使用相同的圆角、阴影比例尺和过渡时间。但每个项目都应有独特的个性——使用不同的字体、颜色和空间感。缺少个性的一致性，就是 AI 垃圾内容的来源。

7. 使用真正的图标，绝不使用表情符号 - Unicode 表情符号（例如 ✅、⚡、🔥、📊）在不同操作系统和浏览器中的显示不一致，无法通过 CSS 设置样式（无法控制大小、颜色或描边），会破坏视觉一致性，也会影响无障碍访问。务必使用合适的图标库——Lucide React（推荐）、React Icons、Heroicons、Phosphor 或 Font Awesome。这些库中的图标基于 SVG，可设置样式，显示一致且无障碍友好。

8. 背景需要氛围感 - 纯色背景（#fff、#f9fafb）是所有 AI 生成 UI 的默认选择。使用微妙的渐变网格、噪点/颗粒叠加、几何图案或带色调的表面来营造层次感。纹理应该让人感受到，而不是看出来——如果你能明确注意到它，那就太过了。

---

核心概念

8px 网格 - 所有间距、尺寸和布局决策都以 8px 网格为基准。组件高度：32px（小）、40px（中）、48px（大）。内边距：8px、12px、16px、24px。间隙：8px、16px、24px、32px。这条规则就能解决 80% 的“为什么看起来不对劲”问题。

视觉权重 - 每个元素都有视觉权重，由尺寸、颜色深浅、边框粗细和阴影决定。页面应有一个明确的重点（CTA 或主要内容），其他元素的视觉权重则逐步减弱。眯起眼睛看看页面——如果没有任何元素突出显示，说明层级不够分明。

60-30-10 规则 - 60% 主色（背景／中性色）、30% 次要色（卡片、区块）、10% 强调色（CTA、活动状态）。这一比例适用于任何配色方案，也能避免“所有东西都五颜六色”的问题。

视觉对齐 - 数学上的居中不一定看起来居中。按钮中的文本在视觉上需要在顶部多留 1-2px 内边距。与文本并排的图标也需要进行视觉调整。始终相信自己的眼睛，而不是检查器。

渐进式呈现 - 不要一次展示所有内容。先呈现必要操作，再按需展示复杂内容。这适用于表单（多步骤优于一个长表单）、设置（基本优于高级）和导航（主要优于次要，次要优于第三级）。

格式塔：相似性与接近性 - 大脑先处理整体，再处理局部。使用一致的形状、尺寸和颜色来表示“这些内容属于一组”（相似性）。使用间距将相关元素归为一组，并将无关元素分开（接近性）。如果设计无法在几秒内快速浏览，格式塔就被破坏了。

用层次感塑造个性 - 用阴影替代实线边框，用微妙的渐变替代纯色填充，并用卡片提升平淡元素的层次。元素在感觉上离用户越近（层级越高），越能吸引注意力。一个强调渐变或彩色阴影，就能在不增加复杂度的情况下增添活力。

上下文优先于标签 - 并非所有 H1 都应使用相同字号。在不同上下文中，H3 可能比 H2 更大。HTML 标签定义语义；视觉层级则取决于用户在特定布局中最先需要看到什么。

---

常见任务

设置按钮层级

每个应用都需要 3 个按钮层级：主要按钮（填充）、次要按钮（描边）和幽灵按钮（纯文本）。每个视觉区块中，主要按钮不得超过一个。

/* Primary - solid fill, high contrast */
.btn-primary {
  background: var(--color-primary-600);
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  transition: background 150ms ease, transform 100ms ease;
}
.btn-primary:hover { background: var(--color-primary-700); }
.btn-primary:active { transform: scale(0.98); }

/* Secondary - outlined */
.btn-secondary {
  background: transparent;
  color: var(--color-primary-600);
  padding: 10px 20px;
  border: 1.5px solid var(--color-primary-200);
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  transition: border-color 150ms ease, background 150ms ease;
}
.btn-secondary:hover {
  border-color: var(--color-primary-400);
  background: var(--color-primary-50);
}

/* Ghost - text only */
.btn-ghost {
  background: transparent;
  color: var(--color-gray-600);
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
}
.btn-ghost:hover { background: var(--color-gray-100); }

按钮高度应为 36px（sm）、40px（md）或 48px（lg）。触控目标不得小于 36px。

设置字号比例

使用比例为 1.25（大三度）的模块化字号比例。基础字号：16px。

:root {
  --text-xs: 0.75rem;    /* 12px - captions, labels */
  --text-sm: 0.875rem;   /* 14px - secondary text, metadata */
  --text-base: 1rem;     /* 16px - body text */
  --text-lg: 1.125rem;   /* 18px - lead paragraphs */
  --text-xl: 1.25rem;    /* 20px - card titles */
  --text-2xl: 1.5rem;    /* 24px - section headings */
  --text-3xl: 1.875rem;  /* 30px - page titles */
  --text-4xl: 2.25rem;   /* 36px - hero subheading */
  --text-5xl: 3rem;      /* 48px - hero heading */

  --leading-tight: 1.25;  /* headings */
  --leading-normal: 1.5;  /* body text */
  --leading-relaxed: 1.75; /* small text, captions */
}

最多使用 2 种字体。将有特色的展示字体与精致的正文字体搭配——避免默认使用 Inter、Roboto 或 Space Grotesk。针对不同美学风格的字体搭配，请参阅 references/typography.md。

使用 CSS Grid 构建响应式布局

/* Content-first responsive grid - no media queries needed */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 24px;
}

/* Holy grail layout */
.page-layout {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(0, 3fr) minmax(200px, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Stack on mobile */
@media (max-width: 768px) {
  .page-layout {
    grid-template-columns: 1fr;
  }
}

内容最大宽度：应用为 1280px，阅读内容为 720px。文本行长度不得超过 75 个字符。

正确实现深色模式

:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --border: #e5e7eb;
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --border: #334155;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

切勿只反转颜色。深色模式的背景应为深蓝灰色（#0f172a、#1e293b），而非纯黑色。将白色文本调整为 #f1f5f9（而非 #ffffff），以减少眼睛疲劳。深色模式下需要提高阴影的不透明度。

添加 Toast 通知系统

.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slide-up 200ms ease-out;
  z-index: 50;
}

.toast-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.toast-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.toast-info { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }

@keyframes slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

成功 Toast 应在 3-5s 后自动消失。错误 Toast 应持续显示，直到用户将其关闭。多个 Toast 之间留出 8px 间隙。最多同时显示 3 个。

创建数据表格

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  border-bottom: 2px solid var(--border);
}

.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.table tr:hover td {
  background: var(--bg-secondary);
}

数字右对齐，文本左对齐。不要同时使用条纹行和悬停效果——二选一。表格高度超过视口时固定表头。在移动设备上添加水平滚动容器，切勿让表格溢出。

---

反模式 / 常见错误

错误	错在哪里	应该怎么做
在白色（#fff）背景上使用纯黑色（#000）	过于刺眼，容易造成眼疲劳，看起来不自然	在 #fff 上使用 #111827，或在 #0f172a 上使用 #f1f5f9
每个组件使用不同的圆角半径	破坏视觉一致性，看起来像自动生成的	选定一个圆角半径（8px），并在所有地方统一使用
所有元素都加阴影	造成视觉杂乱，缺乏层次感，显得厚重	仅为有浮起效果的元素（模态框、下拉菜单、卡片）保留阴影
使用一堆五颜六色的颜色	缺乏层次感，令人眼花缭乱，显得不专业	最多使用 3 种色调：主色、中性色、强调色。遵循 60-30-10 规则
移动端的点击目标过小	不符合 WCAG 标准，让用户感到沮丧，还会增加出错率	触控目标至少为 44x44px（建议 48px）
所有元素都加动画	令人分心，显得花哨，还会影响性能	只为状态发生变化的元素添加动画。过渡效果最长为 150-300ms
所有内容都居中	可读性差，看起来像 PowerPoint 幻灯片	正文左对齐。仅将主视觉标题和 CTA 居中
间距不一致	这是界面不够精致最明显的标志	使用 4/8px 间距比例尺。同一场景下的间距保持一致
使用表情符号作为图标	在不同操作系统和浏览器上显示不一致，无法设置样式，破坏视觉一致性，且无障碍体验较差	使用真正的图标库：Lucide React、React Icons、Heroicons、Phosphor 或 Font Awesome
使用通用字体组合（Inter、Roboto、Arial）	一眼就像“AI 生成的”，毫无个性	选择符合设计风格的字体。参见 references/typography.md
在白色背景上使用紫色 / 靛蓝渐变	最常见的 AI 生成配色陈词滥调	选择符合具体场景的品牌色。金融：海军蓝 + 金色。创意：珊瑚色 + 青绿色
所有地方都使用可预测的对称布局	每个区块都是居中的 3 列网格，看起来像模板	在营销页面中使用不对称布局、元素重叠和打破网格的设计
使用纯色背景	缺少氛围感和层次感，看起来像线框图	添加渐变网格、细微颗粒或几何图案。参见 references/atmosphere-and-texture.md
使用多色渐变（蓝色 + 绿色等）	颜色冲突，显得业余	如果使用渐变，只用同一种色调的深浅变化。或者直接使用纯色
多余的 UI 元素	重复滑动操作的箭头、用于区分度已足够元素的边框	删除所有不能增加功能的元素。每个元素都必须有存在的价值
AI 重复展示 KPI / 指标	同一页面上的相同统计数据重复展示 2-3 次	每项指标只展示一次，放在最相关的位置
将每个操作都做成可见按钮	卡片上有 4 个或更多外露按钮，显得杂乱	将次要操作收进三点上下文菜单
使用带渐变的姓名首字母头像圆圈	一眼就像“AI 占位符”，真实应用中从未见过	使用真实头像上传功能，并将姓名首字母作为后备（纯色背景，不使用渐变）
将简单的创建表单铺满整个页面	AI 会给只有 3 个字段的表单留出整整一页的空间	简单表单使用模态框，默认折叠高级选项
落地页只有文本和图标	没有产品真实存在的视觉证明，看起来像模板	使用真实的产品截图（倾斜并带阴影），而非通用图标

---

常见陷阱

1. 深色模式下的 CSS 自定义属性需要在正确的作用域显式覆盖 - 在 :root 上设置 --bg-primary 可行，但如果组件位于 portal 或 shadow DOM 中，可能无法继承主题变量。请务必在模态框、下拉菜单和第三方组件封装中测试主题切换。

2. Tailwind 的 purge/content 配置遗漏组件路径会导致生产环境 CSS 为空 - 在 monorepo 中，或 UI 组件位于 src/ 目录之外时，Tailwind 会从生产构建产物中移除这些组件的类。所有包含 Tailwind 类的路径都必须列在 tailwind.config.js 的 content 中。

3. 按钮上的 transform: scale() 会裁切焦点环和溢出阴影 - 在 :active 上使用 scale(0.98) 是常见的润色技巧，但如果按钮通过 box-shadow 绘制焦点环，阴影会被父元素的溢出裁切。对于经过变换的元素，请使用 outline-offset 而非 box-shadow 来显示焦点指示器。

4. min-height: 100vh 在移动版 Safari 上会出问题 - 移动浏览器会将浏览器界面计入 100vh，导致折叠线以下的内容被裁切。在移动端的全屏布局中，请使用 min-height: 100dvh（动态视口高度）。为较旧的浏览器添加 100vh 回退值。

5. 稀疏网格中，Grid 的 auto-fill 与 auto-fit 会产生不同的视觉效果 - auto-fill 会创建空列以填满整行；auto-fit 则会折叠空列，让项目拉伸。若希望项目填满宽度，却使用了 auto-fill，网格会在最后一个项目处停止，留下空白。对于应扩展填满空间的响应式网格，请使用 auto-fit。

6. 为真实内容而非完美内容进行设计 - 标题比预期长 3 倍时会怎样？图标位于明亮的图片上时会怎样？用户名有 40 个字符时又会怎样？使用 text-overflow: ellipsis 截断长文本，在图片上的图标背后添加高对比度背景，并使用真实场景数据而非 lorem ipsum 进行测试。边界情况最容易让业余设计的 UI 出问题。

---

参考资料

如需了解特定 UI 主题的详细指南，请阅读 references/ 文件夹中的相关文件：

• references/buttons-and-icons.md - 按钮层级、图标尺寸、图标与文本的搭配、状态
• references/color-and-theming.md - 色彩理论、调色板生成、深色／浅色模式、语义化令牌
• references/visual-hierarchy.md - F/Z 型模式、视觉焦点、强调技巧、留白
• references/grids-spacing-and-layout.md - 网格系统、间距比例、最大宽度、布局模式
• references/onboarding.md - 首次使用体验、渐进式披露、空状态、教程
• references/tables.md - 数据表格、排序、分页、响应式表格、数字格式
• references/typography.md - 字号比例、字体搭配、行高、行宽、垂直节奏
• references/accessibility.md - WCAG 2.2、ARIA 模式、键盘导航、屏幕阅读器、对比度
• references/performance.md - Core Web Vitals、图像优化、字体加载、延迟加载
• references/responsiveness-and-mobile-nav.md - 断点、移动优先、触控目标、导航
• references/landing-pages.md - 主视觉区块、CTA、社交认同、转化模式、首屏
• references/shadows-and-borders.md - 高度层级、边框用法、卡片设计、分隔线
• references/feedback-and-status.md - Toast、工具提示、模态框、加载状态、空状态、错误
• references/micro-animations.md - 动效原则、过渡效果、悬停效果、滚动动画
• references/forms-and-inputs.md - 文本输入框、选择框、复选框、单选按钮、切换开关、文件上传、验证
• references/navigation.md - 侧边栏、标签页、面包屑、命令面板、巨型菜单、分页
• references/dashboards.md - KPI 卡片、图表容器、筛选栏、仪表板网格、实时更新
• references/images-and-media.md - 头像、图库、轮播图、视频、宽高比、占位符
• references/cards-and-lists.md - 卡片变体、列表视图、无限滚动、虚拟化、骨架屏
• references/microcopy-and-ux-writing.md - 按钮标签、错误消息、空状态、确认文案
• references/scroll-patterns.md - 粘性元素、滚动吸附、无限滚动、滚动条样式
• references/design-tokens.md - 令牌命名、CSS 自定义属性、主题架构、多品牌
• references/atmosphere-and-texture.md - 渐变网格、噪点／颗粒、玻璃拟态、几何图案、景深效果
• references/style-catalog.md - 25 种 UI 风格（玻璃拟态、粗野主义、极光等），包含效果、适用场景和快速选择表
• references/product-type-guide.md - 35 种产品类型与风格、颜色、字体和落地页模式的对应关系
• references/palette-recipes.md - 4 套可用于生产环境的 OKLCH 调色板（SaaS、电商、编辑出版、金融科技）、color-mix()、色相参考
• references/animation-libraries.md - Framer Motion、GSAP、弹簧物理效果、缓动库、性能规则

只有在当前任务需要时才加载参考文件——这些文件很长，会占用上下文。

---

交付前检查清单

发布任何 UI 前，请确认：

• 视觉：间距比例一致，统一使用一种边框圆角值，最多 3 种色相，仅使用 4–5 种字号
• 交互：所有交互元素都有悬停／激活／焦点状态，移动端触控目标至少为 44px
• 深色模式：不使用纯黑，确保对比度充足，调整阴影，使图像变暗
• 布局：内容强制限制最大宽度，采用移动优先的响应式布局，移动端设置安全区域内边距
• 无障碍：对比度为 4.5:1，提供焦点可见环，使用语义化 HTML，在需要时使用 ARIA，支持键盘导航
• 个性：字体符合美学方向（而非通用默认字体），颜色契合产品语境
• 状态：每个屏幕都包含空、加载、成功和错误状态，而不只是理想路径
• 流程：每个屏幕都能回答“用户是如何来到这里的？”以及“他们接下来需要做什么？”

---

配套命令

此技能中的其他命令与 ui 搭配使用效果很好：

• /absolute work — 规划并构建此 UI 所属的功能。
• /absolute simplify — 提交前整理组件差异。
• /absolute docs — 编写组件或设计系统的文档。

在适当的时候推荐这些命令；它们始终可用（属于同一技能，无需额外安装）。