企业官网建设流程全解析

Project AIRI 设计工具链指南：UnoCSS 配色体系、Radix Colors 与背景图案资源

【免费下载链接】airi💖🧸 Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-sama's altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi

本篇指南面向参与 Project AIRI UI/UX 设计贡献的开发者与设计师，完整梳理官方设计规范文档 tools.md 中定义的工具链与配色方法论：包括以 UnoCSS 为核心的样式生成方案、neutral/pink/violet/cyan四套默认主题色、"避免不透明度、优选纯色" 的对比度原则、Radix Colors 交互色板，以及背景与图案生成工具清单。读完本文，你将掌握该项目的取色流程、共享 UnoCSS 配置的源码级实现，以及贡献 UI 时的可用资源。

设计指南在整个项目中的位置

在贡献 Project AIRI 的设计之前，需要先了解其规范组织方式。仓库中的设计文档统一位于 docs/content/zh-Hans/docs/contributing/design-guidelines/ 目录下：

• index.md：设计指南入口页，介绍如何为 Project AIRI 贡献设计（目前标注为施工中状态，请通过左侧子页面获取信息）；
• tools.md：工具，即本文主题，讲解开发过程中用于生成样式与配色的工具；
• resources.md：参考资源，收录 CSS 场景过渡、背景效果、加载动画等灵感来源（如 yui540 的 CSS 动画仓库、Nihe Works、wweb.dev 创意背景资源等）。

由此可见，配色与样式工具是设计贡献链路的第一环，直接决定了后续组件开发的视觉基础。

配色基础：UnoCSS 与 Tailwind 调色板

文档明确约定：在开发过程中，默认使用 [UnoCSS] 生成样式表相关的全部内容。这是一个与 Tailwind 工作原理完全一致（atomic CSS / utility-first）的样式引擎，但以即时 (on-demand) 生成、零构建开销、高度可定制著称。Project AIRI 的所有前端应用（如 apps/stage-web、apps/stage-pocket）与 UI 组件库 packages/stage-ui 均统一采用 UnoCSS 方案。

由于 UnoCSS 与 Tailwind 共享同一套实用类语义，基础调色板直接采用 Tailwind 官方 Colors 文档（Core concepts 章节）中列出的颜色体系。这意味着诸如bg-neutral-500、text-pink-300、border-cyan-200之类的写法都来自同一套已知色阶，降低了设计贡献者的学习成本——如果你熟悉 Tailwind，就可以直接上手本项目。

默认主题色：neutral、pink、violet、cyan

文档进一步规定，项目默认主题由以下四套颜色构成：

这四套色并非随意挑选，而是服务于 Project AIRI 的整体气质——一个可爱、温暖又带科技感的 AI 陪伴应用。实际使用中，你可以在 packages/stage-ui/src/components 的大量组件中看到这些色阶的身影，例如聊天气泡组件 chat-bubble-minimalism.vue 中使用dark:bg-neutral-950/90处理暗色模式的半透明底色。

仓库中的色板落地：presetChromatic 与主色体系

仅靠 Tailwind 基础色板还不够，Project AIRI 通过自定义 UnoCSS 预设presetChromatic建立了以主色为锚点的动态色板体系。在仓库根目录 uno.config.ts 中可以找到它的真实配置：

presetChromatic({ baseHue: 220.44, colors: { primary: 0, complementary: 180, }, }) as Preset,

该配置的含义是：

• baseHue: 220.44：定义一个基准色相（约为蓝色系，220° 附近），作为色板生成的起点；
• colors.primary: 0：主色（primary）相对基准色相的偏移为 0，即主色就是基准蓝色本身；
• colors.complementary: 180：互补色相对基准色相的偏移为 180°，即与主色形成标准互补关系（蓝色 ↔ 橙色系），用于构建对比分明的界面层级。

这意味着项目中bg-primary-500、text-primary这类类名背后是由算法从单个基准色相推导出的完整色阶，而不是手工写死的常量。与之配套，uno.config.ts 还导出了safelistAllPrimaryBackgrounds()函数，把bg-primary到bg-primary-950的全部色阶，以及每个色阶 5%~100% 的不透明度变体（如bg-primary-500/20）加入构建安全列表，确保这些动态生成的类名不会被 UnoCSS 的按需扫描机制遗漏：

export function safelistAllPrimaryBackgrounds(): string[] { return [undefined, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].map((shade) => { const prefix = shade ? `bg-primary-${shade}` : `bg-primary` return [ prefix, ...[5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map(opacity => `${prefix}/${opacity}`), ] }).flat() }

此外，根配置还注册了presetWind3、presetAttributify、presetTypography、presetIcons、presetScrollbar等预设，并定义了若干自定义规则，例如bg-dotted-[color]使用 CSSradial-gradient生成点阵背景（见 uno.config.ts），mask-[...]用于蒙版裁剪。所有应用（如 apps/stage-web/uno.config.ts）通过mergeConfigs合并根目录的sharedUnoConfig()获得同一套设计基础设施。

不透明度使用的黄金法则：优先纯色

文档引用自 Refactoring UI 的一条核心设计准则：

每当我们想要改变颜色的色度时，我们应该尽量避免使用不透明度，而是手动挑选最佳的纯色、不含 alpha 通道的颜色，以获得最佳对比度。

这条原则的工程背景在于：用opacity（alpha 通道）调整颜色时，颜色会与底层背景发生混合，导致色度漂移，使文字与背景的对比度不可控。例如在浅色底上把#000降到 50% 不透明度，得到的其实是灰色——但它的"灰"取决于下面垫着什么颜色，换到深色底上就完全不一样了。

因此文档给出的实践指引是：除非不透明度本身是排版设计的一部分，否则应手动挑选最佳的纯色，以获得更好的可读性。在设计 Project AIRI 界面时，需要调整颜色明暗，优先在同一色阶内切换（neutral-400→neutral-600），而不是叠一层半透明黑色。

值得注意的是，代码库中并不禁止一切不透明度用法。例如 chat-bubble-minimalism.vue 中：

'bg-white/90 backdrop-blur-md dark:bg-neutral-950/90'

这里bg-white/90配合backdrop-blur-md实现的是**玻璃拟态（glassmorphism）**效果——半透明本身就是该排版设计的组成部分，属于文档所认可的例外情形。判断标准很简单：如果去掉 alpha 后视觉上"换了个颜色"，说明你在错误地用它调色；如果去掉 alpha 后效果消失（如毛玻璃、叠加透出背景），才是合理的用法。

Radix Colors：交互式 UI 元素的构建块

除了 Tailwind 调色板，文档还引入了另一个重要工具——Radix Colors。它的定位是"交互式 UI 元素的构建块"：Radix 团队基于扎实的色彩理论构建了多套经过对比度验证的调色板（涵盖灰色系及各种彩色系），每个色阶都针对深色/浅色背景分别提供，且保证相邻色阶间有足够的分辨率。

在 Project AIRI 中，Radix Colors 的典型应用场景包括：

• 表单与控件：按钮的 hover / active / disabled 状态需要三个明度接近但可分辨的色阶，Radix 的 step 式色阶（如step 3~step 8）天然适合；
• 弹层与浮层：dialog、popover、tooltip 等需要与页面背景形成微妙差异的浅色/深色表面色；
• 状态语义色：success / warning / danger 等反馈色。

结合presetChromatic生成的主色阶与互补色阶，设计者可以在"算法色板"与"人工校准色板"之间自由切换：结构性的层级用neutral，强调性的交互用 Radix 校验过的语义色，品牌性的情感表达用pink/violet/cyan。

互补色：快速选择对比配色的工具

理解互补色（complementary colors）对颜色对比至关重要——色环上呈 180° 对立的两种颜色天然具有最强的对比度，适合用来构建主次分明、可读性高的界面。这在 Project AIRI 的presetChromatic配置中也有直接体现：complementary: 180正是把互补色作为一等公民纳入色板生成。

为了在取色阶段快速交互式地试验互补色，文档推荐了以下三款配色工具：

使用建议：先用色轮工具确定主色与其互补色的角度关系，再回到 UnoCSS 的 Tailwind 色阶或 Radix Colors 中挑选具体的纯色值，最后以文档的不透明度原则做一次可读性校验。

背景与图案：两类生成式资源

对于页面背景与装饰图案，文档收录了两款生成式工具：

1. SVG Backgrounds：提供大量免费可用的 SVG 背景与图案素材（几何、网格、渐变、有机纹理等），输出为纯 SVG，体积小、可缩放，可直接内联进 UnoCSS 的任意项目中；配合根配置中自定义的bg-dotted-[color]点阵规则（uno.config.ts），可以低成本做出有质感的装饰性背景。
2. Finisher（Animated Background Headers）：一个动画背景 Header 生成器，可为任意网站生成动态背景头部。Project AIRI 的主舞台（stage）界面大量使用动态背景来营造"虚拟生命陪伴"的氛围，这类生成器适合在快速原型阶段产出候选动效背景，再交由动画团队精修。

使用这两类资源时，仍需遵循前述配色原则：图案只作装饰，不得干扰前景内容的对比度；若背景较花，应保证文字区域的纯色遮罩或足够的明度差。

小结：一套可落地的设计取色工作流

综合官方文档与仓库实现，Project AIRI 的设计取色工作流可以归纳为四步：

1. 定调：从neutral/pink/violet/cyan四套默认主题色中确定主色与辅助色；
2. 取色：用 Figma Color Wheel、Canva Colors 或 Paletton 交互式试验互补色关系，配合根配置中presetChromatic的baseHue/primary/complementary参数理解主色与互补色的偏移规律；
3. 落色：优先从 Tailwind 官方色阶与 Radix Colors 中挑选纯色，把交互状态（hover/active/disabled）映射到相邻色阶，而非叠加不透明度；
4. 校验：对最终配色做对比度检查，只有在玻璃拟态等明确属于"不透明度排版设计"的场合才使用 alpha 通道。

依据这一流程，再结合 uno.config.ts 中共享的预设、安全列表与自定义规则，任何贡献者都能产出与 Project AIRI 现有 UI 体系一致、可读性达标的设计成果。

【免费下载链接】airi💖🧸 Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-sama's altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi