
数据库客户端后端前端CLI桌面应用数据可视化AI 应用【免费下载链接】whodbWhere data access meets operational intelligence项目地址https://gitcode.com/gh_mirrors/wh/whodb点击查看免费下载colorize是 WhoDB 仓库内置设计技能 Impeccable.agents/skills/impeccable/SKILL.md中用于为过于灰暗、缺乏视觉兴趣的界面注入策略性色彩的 Enhance 类命令。本指南以 .agents/skills/impeccable/reference/colorize.md 为骨架结合仓库内配套源码品牌种子选色器、反模式检测器、live 模式参数契约逐层展开读完你将掌握动手前如何审计既有品牌色、如何按角色而非色板构建色彩策略、如何用 OKLCH 生成可预测的色阶、如何用 WCAG AA 数值而非肉眼验证对比度以及 live 模式下color-amount参数的落地写法。核心前提colorize 是上色不是换肤colorize的定位从命令元数据即可确认Add strategic color to features that are too monochromatic or lack visual interest见 .agents/skills/impeccable/scripts/command-metadata.json并在路由逻辑中与quieter、typeset等并列当检测器命中flat or gray palette平面或灰色色板时路由建议优先选择colorize见 .agents/skills/impeccable/reference/routing.md。但参考文档开门见山划定了纪律引入色彩是把它当作层级hierarchy、含义meaning与氛围atmosphere的载体必须保留已确认的品牌色与语义约定绝不能打着上色的旗号替换掉一整个视觉世界。这对应了 SKILL.md 的顶层原则Refinement preserves; redesign replaces——colorize属于 Refinement精修只有明确的新视觉世界需求才走 .agents/skills/impeccable/reference/new-work.md 的 Redesign 流程。只有当无法从现有代码、DESIGN.md 与 token 推断出具有约束力的品牌决策时才需要向用户提问。按访问者模式决定色彩剂量参考文档要求先判定目标界面的访问者模式visitor mode因为同样一勺颜色在不同模式里的职责完全不同模式色彩职责Persuade说服 Experience体验色彩可以承载品牌声音在所选视觉世界需要时拥有大片区域Operate操作 Read阅读色彩主要编码动作、选中、状态、寻路与阅读层级稀缺性让点缀色产生力度也就是说营销落地页、作品集允许更浓烈的策略而应用 UI、仪表盘、设置面板这类用户在完成任务的界面色彩必须让位于可扫描性与状态传达。仓库中 .agents/skills/impeccable/reference/operate.md 给出了更严格的产品端补充Product defaults to Restrained产品端默认克制策略——点缀色只用于主操作、当前选中与状态指示绝不用于装饰同时要求一份状态丰富的语义词汇表hover、focus、active、disabled、selected、loading、error、warning、success、info并统一这些语义色的含义。WhoDB 自身的 DESIGN.md 恰好是这一纪律的实例Signal Blue#2C6BD4浅色 /#5091FD深色只用于按钮、链接、焦点环、激活态等交互性用途并明确写着One-Accent Rule——同一表面同一时刻只出现一个强调色相。动手前的审计先确认哪些颜色是品牌承诺参考文档规定选色之前必须先读四类输入DESIGN.md、token、资源assets、当前主题与代表性状态。审计要回答六个问题哪些颜色是已确认的品牌承诺brand commitments当前的 surface、text、action、semantic 各角色分别是什么颜色哪些位置因灰度而掩盖了层级或状态是否存在对比度失败、以及纯靠颜色传达信息color-only communication浅色/深色或数据可视化是否有额外要求任务要的是更多色彩还是一个全新的身份——后者必须走 new-work.md。这条审计路径在仓库里有直接可运行的对标context.mjs启动时即加载PRODUCT.md、DESIGN.md与匹配的 surface brief见 .agents/skills/impeccable/scripts/context.mjs并且明确DESIGN.md 不是设计权威的唯一来源——代码里真实存在的 token、字体、组件系统同样算数。WhoDB 的 DESIGN.md frontmatter 就记录了完整语义 token 表background-light/dark、primary-light/dark、destructive-light/dark等并备注了关键教训深色模式的 muted-foreground 是对照--card而非--background实测 WCAG AA 后调高的这正对应 colorize 文档必须验证文字实际所坐表面的对比度的要求。选策略命名情绪温度与色彩角色而不是收集色板参考文档要求在写任何代码之前先命名预期的情绪温度emotional temperature、主导关系dominant relationship、对比范围与色彩剂量。策略可以克制也可以沉浸但必须服从 brief 与所选视觉世界而不是套用某个固定百分比规则。关键的一句话是Build roles, not a bag of swatches构建角色而不是一袋色板。 即色彩要先分配到稳定的系统角色上canvas 与抬升表面elevated surfaces主文本与次文本动作、焦点与选中边框与分隔线成功、警告、错误与信息数据分类或数据刻度按需。这一角色先行的思想在 WhoDB 的 DESIGN.md 中已经是落地状态button-primary、button-ghost、card 等组件全部由{colors.*}、{rounded.*}语义引用组装并明确禁止bg-white、dark:bg-gray-800这类硬编码颜色值。关于色彩空间参考文档给出明确建议对于新的 Web 色板优先使用 OKLCH因为其明度lightness与彩度chroma可以可预测地调整色相应来自产品含义与视觉方向绝不来自默认的类别联想。仓库对 OKLCH 的坚持是全链条的品牌种子选色器 .agents/skills/impeccable/scripts/palette.mjs 内置 129 个手写 OKLCH 种子如oklch(0.546 0.204 3.4)midnight boudoir输出时明确要求OKLCH only — never hex并给出五角色组成的框架bg纯白oklch(1.000 0.000 0)或纯黑 L 0.04–0.12、C 严格为 0、surfacebg 向 ink 混合 10–15%、ink对 bg 对比度 ≥ 7:1、accent在色相与明度两个维度上都与 primary 区分、mutedink 向 bg 靠 40%对比度 ≥ 3.5:1检测器的中性色判定函数 .agents/skills/impeccable/scripts/detector/shared/color.mjs 直接以oklch的 chroma 第二分量判定是否算灰chroma 0.02 判为灰lch阈值 3rgb 通道差 30说明整个流水线都以 OKLCH 的彩度语义为共同语言。策略层还给出了四种命名策略来自 new-work.mdcolorize 的变体规划会复用Restrained中性色 单个点缀色Operate/Read 的默认、Committed一个高饱和色承担 30–60% 表面、Full palette3–4 个命名角色、Drenched表面即颜色。Persuade/Experience 表面有权采用更激进的后两种。系统级落地让最强的颜色拥有地盘参考文档的Apply at system scale一节是整份文档的实操重心共八条规则让最强的颜色拥有一个刻意划分的区域或角色而不是把细碎的小点缀撒得到处都是——scattering tiny accents是失败模式主操作必须容易找到不要把它的颜色花在装饰上只有在品牌色相能真正产生凝聚力时才给中性色染色服务于视觉世界的中性灰是完全合法的在彩色表面上次要文本要从前景色或表面色派生而不是用洗淡的通用灰这与 craft-floor 的检查 On colored surfaces tint secondary text from that hue or the foreground; never gray 完全一致语义含义保持一致但同时尊重平台与领域惯例不要预设固定色相例如不要假设红色错误在每个平台都成立数据可视化要同时使用明度、彩度、形状、标签或图案让颜色不是唯一的编码通道深色模式要显式设计表面抬升与对比不能机械地反转浅色主题——WhoDB 的 DESIGN.md 深色侧#0E2240背景、#162B4A卡片、#1D3151弹层就是靠明度步进而非阴影来建立层级的实例项目有 token 系统时先定义原语值primitives与语义 tokensemantic tokens主题切换通常只应重映射语义角色。参考文档随后给出一句警告Decoration without a relationship to hierarchy, state, content, or the visual world is not a color strategy与层级、状态、内容或视觉世界无关的装饰不是色彩策略。 这句话在检测器侧有镜像反模式注册表 .agents/skills/impeccable/scripts/detector/registry/antipatterns.mjs 把side-tab 彩色单边描边卡列为 AI 生成 UI 最可识别的破绽连同 gradient text、AI 紫/青调色板、cream/beige 默认表面、零偏移彩色光晕、径向渐变 halo 一起都是 colorize 在加色同时必须避开的东西其机械判定实现在 .agents/skills/impeccable/scripts/detector/rules/checks.mjs 的checkColors、checkGlow、scanCssTextForPseudoStripe等函数中。对比度与感知用数值说话别靠肉眼参考文档给出必须验证的 WCAG AA 最低对比度表内容WCAG AA 最低对比度正文文本body text4.5:1大号文本large text3:1控件、图标、焦点指示3:1并强调四条纪律不能只靠眼睛判断要检查交互态、覆盖层、图片上的文字、禁用内容以及两种主题模拟常见视觉缺陷色盲等颜色传达的信息必须同时有文本、形状、图标或位置作为冗余通道。仓库中这三条正好都有可引用的实现证据检测器在 checks.mjs 中按fontSize WCAG_LARGE_TEXT_PX或大号加粗判定阈值3.0 或 4.5并对渐变色底取最差 stop逐一计算对比度中性色/彩度判定在 color.mjs 中实现relativeLuminance、contrastRatio、hasChromagray-on-color灰字落在彩色底上是独立检测项Tailwind 场景下直接匹配text-gray-*bg-red-*组合。关于 OKLCH 色阶的推演参考文档给出两条具体操作规则推导色阶时变化明度并在接近纯白/纯黑处降低彩度——不要为了让数学公式看起来均匀而在极端明度处保留高彩度优先使用显式颜色而不是一串半透明叠加层——因为 alpha 会让对比度变成依赖上下文的变量。palette.mjs 的硬规则清单就是这两条的量化版ink 对 bg 对比度 ≥ 7、primary 彩度 ≤ 0.23再高则发光且其上文字不可读、primary 明度 0.78 时彩度 ≤ 0.18荧光区、primary 与 accent 对比度 ≥ 1.7。文字在彩色填充上的选色是 palette.mjs 特别强调的一点对任何明度在 0.42–0.78 之间、彩度 ≥ 0.08 的饱和色填充用白色文字而非深色文字——即使 WCAG 计算上深色技术性通过——因为 Helmholtz-Kohlrausch 效应会让饱和色看起来比其亮度更亮深色字会显得浑浊。惯例是浅填充L 0.85或纯中性填充才用深色文字其余一律白字。Verify 清单与交接参考文档的验证清单共五条要求依次确认每个颜色都有稳定的角色或服务于某个世界特有的氛围目的注意力落在预期的动作、内容或状态上色板在安静、密集、交互、错误与空状态中都成立浅色与深色主题各自独立成章而不是机械反转对比度与非颜色线索在所有相关状态下通过。最后一条标准是全局性的The result is recognizably this product, not a generic colorful treatment结果要让人一眼认出是这个产品而不是一套通用的彩色化处理。 当色板赢得它的位置后交接给$impeccable polish做最终检查参考 .agents/skills/impeccable/reference/polish.md——polish 会在 Color/imagery/icons 一节复核语义 token 的跨主题稳定性、每个状态下的文字/控件/焦点对比度并执行 source diff 清理。注意 polish 自身的纪律同样适用Polish is refinement, never concealed redesign与 colorize 的不借上色之名换肤互为表里。Live 模式签名参数color-amount当colorize从 live 模式.agents/skills/impeccable/reference/live.md被调用时每个变体都必须声明一个color-amount参数让用户无需重新生成即可从中性平滑滑向该变体的完整色彩策略。CSS 必须针对var(--p-color-amount, 0.5)编写这样默认值兜底到 0.5。参考文档给出的参数 schema 原样如下{id:color-amount,kind:range,min:0,max:1,step:0.05,default:0.5,label:Color amount}这与 live.md 的通用参数契约一致range型参数驱动--p-id变量steps型驱动data-p-id属性toggle型两者皆可每个变体除color-amount外最多再加两个变体专属参数如 palette、temperature、tint behavior硬上限是每个变体 4 个且不得有重复旋钮。live 模式对colorize动作还有一条专项要求每个变体使用不同的色相族并变化彩度与对比度策略——即三个变体必须是三个色彩世界而不是同一颜色的三个深浅。在 live 模式的 HTML/JSX 路径上参数的落地形态是包裹属性wrapper attributediv>:scope [data-impeccable-variant1] { /* 中性 0 与完整策略 1 之间由滑块线性过渡 */ --surface-tint: oklch(1 0 0); --accent-strength: 0.5; color: var(--p-color-amount, 0.5) 0.5 ? /* 依实际工具链换算 */ : initial; }接受变体后浏览器会把当前参数值写成旁注注释!-- impeccable-param-values SESSION_ID: {color-amount:0.7} --live-accept.mjs的碳化carbonize清理会保留匹配的steps/toggle分支、把range字面量替换进var(--p-id)的默认值并把scope ([data-impeccable-variantN])重定向为真实的语义类见 live.md 的 Carbonize 五步。结合仓库自查一次 colorize 的完整工作流把以上内容串起来在 WhoDB 仓库中执行一次colorize的完整路径是加载上下文运行node .agents/skills/impeccable/scripts/context.mjs --target path读取仓库根的 DESIGN.md 与当前 tokenWhoDB 的 Paper/Ink 双主题、Signal Blue 主色、One-Accent Rule 均在此审计确认品牌承诺Signal Blue 唯一产品强调色、Clidey Orange 仅供品牌时刻、找出被灰度掩盖的层级与状态、核对两种主题的语义角色选策略先命名情绪温度与剂量WhoDB 属 Operate 产品端默认 Restrained 地板单个表面可争取 Committed按角色而非色板分配颜色系统落地遵守八条规则并在编辑前加载 .agents/skills/impeccable/reference/craft-floor.md 的质量底线正文 ≥ 4.5:1、大号文本 ≥ 3:1、拒绝渐变文字/玻璃/彩色光晕/单边色条验证用 checks.mjs 与detect.mjs跑机械检查再对交互态、覆盖层、禁用态、双主题与色觉缺陷做人工核对live 变体每个变体声明color-amount可再配至多两个专属参数三个变体各走不同色相族、变化彩度与对比度策略CSS 全部挂在var(--p-color-amount, 0.5)上交接色板稳定后交给$impeccable polish做终检并在最终 diff 中清理临时产物。至此colorize的完整方法论闭环——审计品牌承诺 → 命名策略 → 按角色构建 → 系统级落地 → 数值化对比度验证 → live 参数化交付 → polish 终检——全部落地为可执行、可验证的流程。它的全部规范文件与配套脚本都存在于本仓库的 .agents/skills/impeccable/reference/ 与 .agents/skills/impeccable/scripts/ 目录下可直接对照使用。赞分享数据库客户端后端前端CLI桌面应用数据可视化AI 应用【免费下载链接】whodbWhere data access meets operational intelligence项目地址https://gitcode.com/gh_mirrors/wh/whodb点击查看免费下载相关推荐Impeccable colorize 实战指南为单调界面注入有层次、有意义、有氛围的战略色彩Impeccable colorize 实战指南为单调界面注入有层次、有意义、有氛围的战略色彩 导读 colorize 是 Impeccable 设计技能套件AI 技能前端CLIdsh-pluginImpeccable Colorize 指南在既有品牌约束内为单色 UI 注入有意义的色彩系统Impeccable Colorize 指南在既有品牌约束内为单色 UI 注入有意义的色彩系统 导读 本文是 Impeccable 设计语言体系下 colorAI 技能前端CLIdsh-pluginHermes Desktop 提供者配置完全指南首次设置、密钥路由与 agent 配置双向同步Hermes Desktop 提供者配置完全指南首次设置、密钥路由与 agent 配置双向同步 本篇技术指南围绕 Hermes DesktopHermesAI 应用交互助手桌面应用上一篇ccg-workflow 性能优化指南Kimi optimizer 角色提示词与度量驱动优化工作流深度解析下一篇SuperClaude Framework 需求分析师 Agent 实战指南从模糊想法到可验收规格的系统化需求工程创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考