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-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airiAIRI 是一个自托管、you-owned 的 AI 陪伴项目其 UI/UX 设计团队维护了一套完整的设计指南。本文以仓库中 设计指南 · 工具篇 为核心骨架结合仓库内真实的 UnoCSS 配置与组件实现系统讲解 AIRI 的配色工具链UnoCSS、Tailwind 色板、Radix Colors、互补色选择工具与背景纹理资源工具以及这些原则如何落实到代码中。读完本文你将掌握为 AIRI 各端Web / Desktop / 组件库贡献样式代码时的选色规范、透明度使用边界以及背景装饰的可复用方案。一、配色工具链ColorsAIRI 的样式体系以「原子化 CSS 预设色板 色彩理论工具」三层结构展开每一层都有明确的分工。1.1 UnoCSS样式生成的默认引擎开发期间AIRI 使用 UnoCSS 生成全部样式相关代码。文档明确指出这是一个与 Tailwind 工作方式几乎一致的工具因此 Tailwind 的经典工具类心智模型如bg-neutral-500、text-pink-400可以无缝迁移。在仓库根目录的 uno.config.ts 中可以看到 AIRI 实际使用的完整预设组合export function sharedUnoConfig() { return defineConfig({ presets: [ presetWind3(), // Tailwind Wind3 兼容的原子类 presetAttributify(), // 属性化写法如 div bgpink-500 / presetTypography(), // 排版prose 系列 presetIcons({ scale: 1.2 }), // 图标lobe-icons / meteocons 集合 presetScrollbar(), // 滚动条样式 presetChromatic({ // 色相驱动的主题色生成 baseHue: 220.44, colors: { primary: 0, complementary: 180 }, }), ], // ... }) }其中presetChromatic来自仓库内部的proj-airi/unocss-preset-chromatic包见 pnpm-workspace.yaml它把下文要讲的「互补色」理念直接编码进了构建流程。该配置不仅用于根目录也被 apps/component-calling/uno.config.ts 和 docs/uno.config.ts 等子应用复用说明这是一套跨端统一的样式基线。1.2 基础色板沿用 Tailwind 色彩体系由于 UnoCSS 与 Tailwind 高度同构AIRI 的基础色板直接引用 Tailwind CSS 官方 Colors 文档 中的色阶定义。这意味着任何熟悉 Tailwind 色板的开发者都能立即上手无需重新学习一套新的十六进制色值表。AIRI 默认主题约定使用四类色色系用途倾向neutral中性灰阶用于文字、边框、背景分层pink主色调之一用于强调与品牌点缀violet辅助强调色常用于渐变与高亮cyan冷色点缀用于状态与信息提示这四个色系在组件代码中的典型用法例如bg-pink-500/10、text-violet-400、border-neutral-800。为了确保动态生成的primary色系类名不会被 UnoCSS 的按需扫描机制遗漏仓库在 uno.config.ts 提供了safelistAllPrimaryBackgrounds()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() }它预先生成了bg-primary的 50950 全色阶以及 5%100% 共 11 档透明度变体可见主色体系在整个 UI 中被大量动态使用。1.3 调色第一原则改变色度优先选择纯色而非透明度这是 AIRI 设计指南中一条硬性规范引述自 Refactoring UI当我们需要改变颜色的色度chroma时应尽量避免使用透明度opacity而应手工挑选对比度最佳的、不含 alpha 通道的纯色。原因在于opacity会让底色透出导致前景与背景的对比度不可控而手工挑选的纯色可以精确计算对比度保证可读性。文档的结论是除非透明度本身就是排版设计的一部分否则请尽量挑选最好的纯色以获得更好的可读性。这条原则在仓库中有镜像实现presetChromatic以baseHue: 220.44为基准自动推导出完整的primary纯色色阶50950让开发者始终有「一整条纯色梯」可用而不是靠opacity凑色。safelistAllPrimaryBackgrounds()中同时保留了透明度变体正说明透明度仅用于特殊场景如悬浮态遮罩常规正文与组件底色应使用纯色。1.4 Radix Colors交互组件的色彩基石AIRI 文档将 Radix Colors 定位为「交互式 UI 元素的构建块」——它提供了经过色彩理论推敲的完整色板支持从调色板中直接挑选合适颜色。在仓库的实际依赖中这一理念的落地载体是reka-uiRadix UI 的 Vue 移植版packages/stage-ui/package.json 与 packages/ui/package.json 等核心 UI 包均声明了reka-ui依赖。Radix 生态的交互原语对话框、弹层、下拉菜单等自带经过对比度验证的语义配色方案AIRI 将其作为组件库的配色底层与 UnoCSS 的原子类体系互补Radix 管「交互组件的色彩语义」UnoCSS 管「页面布局与主题色」。Radix 风格的动效也在 uno.config.ts 中预置了对应的 keyframes 与缓动函数例如弹层出现的contentShow150mscubic-bezier(0.16, 1, 0.3, 1)缓动 缩放位移、滑入类slideUpAndFade400ms等说明交互组件的入场/离场动画节奏已被统一收口到主题层。1.5 互补色Complementary Color与配色工具互补色对提升对比度非常有效。AIRI 设计指南推荐了三个可交互的互补色选择工具Figma Color Wheel —— 设计工具内的取色轮Canva Colors - Color Wheel —— 在线快速配互补色Paletton —— 支持单色、邻近色、三色、四色等多种配色方案的调色板有趣的是互补色不仅是设计工具中的概念在 AIRI 代码中也被参数化了。uno.config.ts 的presetChromatic配置里presetChromatic({ baseHue: 220.44, colors: { primary: 0, // 主色 基准色相偏移 0° complementary: 180, // 互补色 在色环上偏移 180°即主色的正对角色 }, })complementary: 180正是在色环上取主色的对角色相——与设计指南中利用互补色增强对比的建议完全对应。开发者无需手动计算色相主题系统会自动生成与主色严格互补的complementary色阶。这种「文档给方法论、代码给自动化实现」的组合是 AIRI 设计体系的一大特色。二、背景与纹理Backgrounds Patterns设计指南提供了两个背景资源工具用于为页面、弹层、Hero 区域快速生成视觉装饰2.1 SVG BackgroundsSVG Backgrounds 提供免费可用的 SVG 背景与图案集合适合生成点阵、网格、波形、几何图形等轻量背景可直接内联或作为 CSSbackground-image使用无需引入图片资源。在 AIRI 的 UnoCSS 配置中可以找到与点阵背景对应的自定义规则uno.config.ts[/^bg-dotted-\[(.*)\]$/, ([, color], { theme }) { const parsedColor parseColor(color, theme) return { background-image: radial-gradient(circle at 1px 1px, ${...} 1px, transparent 0), --un-background-opacity: ..., } }],用法示例bg-dotted-[#c084fc]即可生成以指定颜色绘制的径向渐变点阵背景——这正是把「SVG 背景图案」这一资源工具内化成原子类能力的做法让组件开发者可以在模板里一行代码产出装饰性纹理。2.2 Finisher 动画背景头部Finisher 用于为任意网站生成带动画效果的背景头部Animated Background Headers适合 Landing 页、舞台页首屏等需要流动感的场景。它输出一段可嵌入的脚本与样式与前端框架无关接入成本低。2.3 更多背景资源入口设计指南还指向了与 Resources 篇 同源的两类补充资料创意背景聚合站如 wweb.dev 的 Creative Backgrounds 合集与 CSS Loaders 加载动画合集可作为背景与微交互素材的备选池。三、如何在 AIRI 仓库中应用这套规范结合以上工具链在 AIRI 仓库中贡献设计代码时的推荐路径如下起手式在任一子应用如 apps/component-calling/uno.config.ts、packages/stage-ui/uno.config.ts继承sharedUnoConfig()获得统一的presetChromatic主题色、动效 keyframes 与自定义背景规则。选色基础灰阶与强调色从 Tailwind 色板neutral/pink/violet/cyan中选交互组件语义色参考 Radix Colors仓库内由reka-ui承载主题主色直接使用primary-{50..950}纯色阶。调色戒律需要更浅/更深的色度时改选相邻色阶如primary-400→primary-300不要叠加opacity除非是排版层面的刻意设计。互补强调需要与主色对撞的强调元素时使用自动生成的complementary色系避免手工对色相。背景装饰点阵等纹理使用bg-dotted-[颜色]原子类需要更复杂的背景图案时参考 SVG Backgrounds 资源动画背景头部可参考 Finisher。交互动效弹层、浮层类组件的显隐动画使用主题内置的overlayShow/contentShow/slideUpAndFade等 keyframes保证全端节奏一致。四、总结AIRI 的设计工具链呈现出一条清晰的「工具 → 原则 → 代码」闭环UnoCSS 提供与 Tailwind 兼容的原子化基础Tailwind 色板与 Radix Colors 提供经过验证的色阶语义互补色工具与 Refactoring UI 的纯色原则提供选色方法论而presetChromaticbaseHue: 220.44complementary: 180、safelistAllPrimaryBackgrounds()、bg-dotted-[...]与 Radix 风格动效 keyframes 则把这些原则固化为可复用的工程实现。无论你是为 AIRI 的 Web 端、Desktop 端还是 stage-ui 组件库提交样式代码这套规范都能保证产出风格统一、对比度可靠、可直接并入主线的 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-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考