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/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文档进一步规定项目默认主题由以下四套颜色构成颜色定位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.tsmask-[...]用于蒙版裁剪。所有应用如 apps/stage-web/uno.config.ts通过mergeConfigs合并根目录的sharedUnoConfig()获得同一套设计基础设施。不透明度使用的黄金法则优先纯色文档引用自 Refactoring UI 的一条核心设计准则每当我们想要改变颜色的色度时我们应该尽量避免使用不透明度而是手动挑选最佳的纯色、不含 alpha 通道的颜色以获得最佳对比度。这条原则的工程背景在于用opacityalpha 通道调整颜色时颜色会与底层背景发生混合导致色度漂移使文字与背景的对比度不可控。例如在浅色底上把#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正是把互补色作为一等公民纳入色板生成。为了在取色阶段快速交互式地试验互补色文档推荐了以下三款配色工具工具用途Figma Color Wheel与 Figma 工作流无缝衔接适合在原型阶段实时微调色环夹角与明度Canva Colors轻量在线色轮适合快速查看配色方案示例Paletton专业的色环方案生成器支持单色/互补/分裂互补等多种配色模式可实时预览使用建议先用色轮工具确定主色与其互补色的角度关系再回到 UnoCSS 的 Tailwind 色阶或 Radix Colors 中挑选具体的纯色值最后以文档的不透明度原则做一次可读性校验。背景与图案两类生成式资源对于页面背景与装饰图案文档收录了两款生成式工具SVG Backgrounds提供大量免费可用的 SVG 背景与图案素材几何、网格、渐变、有机纹理等输出为纯 SVG体积小、可缩放可直接内联进 UnoCSS 的任意项目中配合根配置中自定义的bg-dotted-[color]点阵规则uno.config.ts可以低成本做出有质感的装饰性背景。FinisherAnimated Background Headers一个动画背景 Header 生成器可为任意网站生成动态背景头部。Project AIRI 的主舞台stage界面大量使用动态背景来营造虚拟生命陪伴的氛围这类生成器适合在快速原型阶段产出候选动效背景再交由动画团队精修。使用这两类资源时仍需遵循前述配色原则图案只作装饰不得干扰前景内容的对比度若背景较花应保证文字区域的纯色遮罩或足够的明度差。小结一套可落地的设计取色工作流综合官方文档与仓库实现Project AIRI 的设计取色工作流可以归纳为四步定调从neutral/pink/violet/cyan四套默认主题色中确定主色与辅助色取色用 Figma Color Wheel、Canva Colors 或 Paletton 交互式试验互补色关系配合根配置中presetChromatic的baseHue/primary/complementary参数理解主色与互补色的偏移规律落色优先从 Tailwind 官方色阶与 Radix Colors 中挑选纯色把交互状态hover/active/disabled映射到相邻色阶而非叠加不透明度校验对最终配色做对比度检查只有在玻璃拟态等明确属于不透明度排版设计的场合才使用 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-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Project AIRI 设计工具链指南：UnoCSS 配色体系、Radix Colors 与背景图案资源
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/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文档进一步规定项目默认主题由以下四套颜色构成颜色定位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.tsmask-[...]用于蒙版裁剪。所有应用如 apps/stage-web/uno.config.ts通过mergeConfigs合并根目录的sharedUnoConfig()获得同一套设计基础设施。不透明度使用的黄金法则优先纯色文档引用自 Refactoring UI 的一条核心设计准则每当我们想要改变颜色的色度时我们应该尽量避免使用不透明度而是手动挑选最佳的纯色、不含 alpha 通道的颜色以获得最佳对比度。这条原则的工程背景在于用opacityalpha 通道调整颜色时颜色会与底层背景发生混合导致色度漂移使文字与背景的对比度不可控。例如在浅色底上把#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正是把互补色作为一等公民纳入色板生成。为了在取色阶段快速交互式地试验互补色文档推荐了以下三款配色工具工具用途Figma Color Wheel与 Figma 工作流无缝衔接适合在原型阶段实时微调色环夹角与明度Canva Colors轻量在线色轮适合快速查看配色方案示例Paletton专业的色环方案生成器支持单色/互补/分裂互补等多种配色模式可实时预览使用建议先用色轮工具确定主色与其互补色的角度关系再回到 UnoCSS 的 Tailwind 色阶或 Radix Colors 中挑选具体的纯色值最后以文档的不透明度原则做一次可读性校验。背景与图案两类生成式资源对于页面背景与装饰图案文档收录了两款生成式工具SVG Backgrounds提供大量免费可用的 SVG 背景与图案素材几何、网格、渐变、有机纹理等输出为纯 SVG体积小、可缩放可直接内联进 UnoCSS 的任意项目中配合根配置中自定义的bg-dotted-[color]点阵规则uno.config.ts可以低成本做出有质感的装饰性背景。FinisherAnimated Background Headers一个动画背景 Header 生成器可为任意网站生成动态背景头部。Project AIRI 的主舞台stage界面大量使用动态背景来营造虚拟生命陪伴的氛围这类生成器适合在快速原型阶段产出候选动效背景再交由动画团队精修。使用这两类资源时仍需遵循前述配色原则图案只作装饰不得干扰前景内容的对比度若背景较花应保证文字区域的纯色遮罩或足够的明度差。小结一套可落地的设计取色工作流综合官方文档与仓库实现Project AIRI 的设计取色工作流可以归纳为四步定调从neutral/pink/violet/cyan四套默认主题色中确定主色与辅助色取色用 Figma Color Wheel、Canva Colors 或 Paletton 交互式试验互补色关系配合根配置中presetChromatic的baseHue/primary/complementary参数理解主色与互补色的偏移规律落色优先从 Tailwind 官方色阶与 Radix Colors 中挑选纯色把交互状态hover/active/disabled映射到相邻色阶而非叠加不透明度校验对最终配色做对比度检查只有在玻璃拟态等明确属于不透明度排版设计的场合才使用 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-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考