數(shù)據(jù)庫客戶端后端前端CLI桌面應用數(shù)據(jù)可視化AI 應用【免費下載鏈接】whodbWhere data access meets operational intelligence項目地址https://gitcode.com/gh_mirrors/wh/whodb點擊查看免費下載colorize是 WhoDB 倉庫內(nèi)置設計技能 Impeccable.agents/skills/impeccable/SKILL.md中用于為過于灰暗、缺乏視覺興趣的界面注入策略性色彩的 Enhance 類命令。本指南以 .agents/skills/impeccable/reference/colorize.md 為骨架結(jié)合倉庫內(nèi)配套源碼品牌種子選色器、反模式檢測器、live 模式參數(shù)契約逐層展開讀完你將掌握動手前如何審計既有品牌色、如何按角色而非色板構(gòu)建色彩策略、如何用 OKLCH 生成可預測的色階、如何用 WCAG AA 數(shù)值而非肉眼驗證對比度以及 live 模式下color-amount參數(shù)的落地寫法。核心前提colorize 是上色不是換膚colorize的定位從命令元數(shù)據(jù)即可確認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平面或灰色色板時路由建議優(yōu)先選擇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 流程。只有當無法從現(xiàn)有代碼、DESIGN.md 與 token 推斷出具有約束力的品牌決策時才需要向用戶提問。按訪問者模式?jīng)Q定色彩劑量參考文檔要求先判定目標界面的訪問者模式visitor mode因為同樣一勺顏色在不同模式里的職責完全不同模式色彩職責Persuade說服 Experience體驗色彩可以承載品牌聲音在所選視覺世界需要時擁有大片區(qū)域Operate操作 Read閱讀色彩主要編碼動作、選中、狀態(tài)、尋路與閱讀層級稀缺性讓點綴色產(chǎn)生力度也就是說營銷落地頁、作品集允許更濃烈的策略而應用 UI、儀表盤、設置面板這類用戶在完成任務的界面色彩必須讓位于可掃描性與狀態(tài)傳達。倉庫中 .agents/skills/impeccable/reference/operate.md 給出了更嚴格的產(chǎn)品端補充Product defaults to Restrained產(chǎn)品端默認克制策略——點綴色只用于主操作、當前選中與狀態(tài)指示絕不用于裝飾同時要求一份狀態(tài)豐富的語義詞匯表hover、focus、active、disabled、selected、loading、error、warning、success、info并統(tǒng)一這些語義色的含義。WhoDB 自身的 DESIGN.md 恰好是這一紀律的實例Signal Blue#2C6BD4淺色 /#5091FD深色只用于按鈕、鏈接、焦點環(huán)、激活態(tài)等交互性用途并明確寫著One-Accent Rule——同一表面同一時刻只出現(xiàn)一個強調(diào)色相。動手前的審計先確認哪些顏色是品牌承諾參考文檔規(guī)定選色之前必須先讀四類輸入DESIGN.md、token、資源assets、當前主題與代表性狀態(tài)。審計要回答六個問題哪些顏色是已確認的品牌承諾brand commitments當前的 surface、text、action、semantic 各角色分別是什么顏色哪些位置因灰度而掩蓋了層級或狀態(tài)是否存在對比度失敗、以及純靠顏色傳達信息color-only communication淺色/深色或數(shù)據(jù)可視化是否有額外要求任務要的是更多色彩還是一個全新的身份——后者必須走 new-work.md。這條審計路徑在倉庫里有直接可運行的對標context.mjs啟動時即加載PRODUCT.md、DESIGN.md與匹配的 surface brief見 .agents/skills/impeccable/scripts/context.mjs并且明確DESIGN.md 不是設計權(quán)威的唯一來源——代碼里真實存在的 token、字體、組件系統(tǒng)同樣算數(shù)。WhoDB 的 DESIGN.md frontmatter 就記錄了完整語義 token 表background-light/dark、primary-light/dark、destructive-light/dark等并備注了關(guān)鍵教訓深色模式的 muted-foreground 是對照--card而非--background實測 WCAG AA 后調(diào)高的這正對應 colorize 文檔必須驗證文字實際所坐表面的對比度的要求。選策略命名情緒溫度與色彩角色而不是收集色板參考文檔要求在寫任何代碼之前先命名預期的情緒溫度emotional temperature、主導關(guān)系dominant relationship、對比范圍與色彩劑量。策略可以克制也可以沉浸但必須服從 brief 與所選視覺世界而不是套用某個固定百分比規(guī)則。關(guān)鍵的一句話是Build roles, not a bag of swatches構(gòu)建角色而不是一袋色板。 即色彩要先分配到穩(wěn)定的系統(tǒng)角色上canvas 與抬升表面elevated surfaces主文本與次文本動作、焦點與選中邊框與分隔線成功、警告、錯誤與信息數(shù)據(jù)分類或數(shù)據(jù)刻度按需。這一角色先行的思想在 WhoDB 的 DESIGN.md 中已經(jīng)是落地狀態(tài)button-primary、button-ghost、card 等組件全部由{colors.*}、{rounded.*}語義引用組裝并明確禁止bg-white、dark:bg-gray-800這類硬編碼顏色值。關(guān)于色彩空間參考文檔給出明確建議對于新的 Web 色板優(yōu)先使用 OKLCH因為其明度lightness與彩度chroma可以可預測地調(diào)整色相應來自產(chǎn)品含義與視覺方向絕不來自默認的類別聯(lián)想。倉庫對 OKLCH 的堅持是全鏈條的品牌種子選色器 .agents/skills/impeccable/scripts/palette.mjs 內(nèi)置 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 區(qū)分、mutedink 向 bg 靠 40%對比度 ≥ 3.5:1檢測器的中性色判定函數(shù) .agents/skills/impeccable/scripts/detector/shared/color.mjs 直接以oklch的 chroma 第二分量判定是否算灰chroma 0.02 判為灰lch閾值 3rgb 通道差 30說明整個流水線都以 OKLCH 的彩度語義為共同語言。策略層還給出了四種命名策略來自 new-work.mdcolorize 的變體規(guī)劃會復用Restrained中性色 單個點綴色Operate/Read 的默認、Committed一個高飽和色承擔 30–60% 表面、Full palette3–4 個命名角色、Drenched表面即顏色。Persuade/Experience 表面有權(quán)采用更激進的后兩種。系統(tǒng)級落地讓最強的顏色擁有地盤參考文檔的Apply at system scale一節(jié)是整份文檔的實操重心共八條規(guī)則讓最強的顏色擁有一個刻意劃分的區(qū)域或角色而不是把細碎的小點綴撒得到處都是——scattering tiny accents是失敗模式主操作必須容易找到不要把它的顏色花在裝飾上只有在品牌色相能真正產(chǎn)生凝聚力時才給中性色染色服務于視覺世界的中性灰是完全合法的在彩色表面上次要文本要從前景色或表面色派生而不是用洗淡的通用灰這與 craft-floor 的檢查 On colored surfaces tint secondary text from that hue or the foreground; never gray 完全一致語義含義保持一致但同時尊重平臺與領(lǐng)域慣例不要預設固定色相例如不要假設紅色錯誤在每個平臺都成立數(shù)據(jù)可視化要同時使用明度、彩度、形狀、標簽或圖案讓顏色不是唯一的編碼通道深色模式要顯式設計表面抬升與對比不能機械地反轉(zhuǎn)淺色主題——WhoDB 的 DESIGN.md 深色側(cè)#0E2240背景、#162B4A卡片、#1D3151彈層就是靠明度步進而非陰影來建立層級的實例項目有 token 系統(tǒng)時先定義原語值primitives與語義 tokensemantic tokens主題切換通常只應重映射語義角色。參考文檔隨后給出一句警告Decoration without a relationship to hierarchy, state, content, or the visual world is not a color strategy與層級、狀態(tài)、內(nèi)容或視覺世界無關(guān)的裝飾不是色彩策略。 這句話在檢測器側(cè)有鏡像反模式注冊表 .agents/skills/impeccable/scripts/detector/registry/antipatterns.mjs 把side-tab 彩色單邊描邊卡列為 AI 生成 UI 最可識別的破綻連同 gradient text、AI 紫/青調(diào)色板、cream/beige 默認表面、零偏移彩色光暈、徑向漸變 halo 一起都是 colorize 在加色同時必須避開的東西其機械判定實現(xiàn)在 .agents/skills/impeccable/scripts/detector/rules/checks.mjs 的checkColors、checkGlow、scanCssTextForPseudoStripe等函數(shù)中。對比度與感知用數(shù)值說話別靠肉眼參考文檔給出必須驗證的 WCAG AA 最低對比度表內(nèi)容WCAG AA 最低對比度正文文本body text4.5:1大號文本large text3:1控件、圖標、焦點指示3:1并強調(diào)四條紀律不能只靠眼睛判斷要檢查交互態(tài)、覆蓋層、圖片上的文字、禁用內(nèi)容以及兩種主題模擬常見視覺缺陷色盲等顏色傳達的信息必須同時有文本、形狀、圖標或位置作為冗余通道。倉庫中這三條正好都有可引用的實現(xiàn)證據(jù)檢測器在 checks.mjs 中按fontSize WCAG_LARGE_TEXT_PX或大號加粗判定閾值3.0 或 4.5并對漸變色底取最差 stop逐一計算對比度中性色/彩度判定在 color.mjs 中實現(xiàn)relativeLuminance、contrastRatio、hasChromagray-on-color灰字落在彩色底上是獨立檢測項Tailwind 場景下直接匹配text-gray-*bg-red-*組合。關(guān)于 OKLCH 色階的推演參考文檔給出兩條具體操作規(guī)則推導色階時變化明度并在接近純白/純黑處降低彩度——不要為了讓數(shù)學公式看起來均勻而在極端明度處保留高彩度優(yōu)先使用顯式顏色而不是一串半透明疊加層——因為 alpha 會讓對比度變成依賴上下文的變量。palette.mjs 的硬規(guī)則清單就是這兩條的量化版ink 對 bg 對比度 ≥ 7、primary 彩度 ≤ 0.23再高則發(fā)光且其上文字不可讀、primary 明度 0.78 時彩度 ≤ 0.18熒光區(qū)、primary 與 accent 對比度 ≥ 1.7。文字在彩色填充上的選色是 palette.mjs 特別強調(diào)的一點對任何明度在 0.42–0.78 之間、彩度 ≥ 0.08 的飽和色填充用白色文字而非深色文字——即使 WCAG 計算上深色技術(shù)性通過——因為 Helmholtz-Kohlrausch 效應會讓飽和色看起來比其亮度更亮深色字會顯得渾濁。慣例是淺填充L 0.85或純中性填充才用深色文字其余一律白字。Verify 清單與交接參考文檔的驗證清單共五條要求依次確認每個顏色都有穩(wěn)定的角色或服務于某個世界特有的氛圍目的注意力落在預期的動作、內(nèi)容或狀態(tài)上色板在安靜、密集、交互、錯誤與空狀態(tài)中都成立淺色與深色主題各自獨立成章而不是機械反轉(zhuǎn)對比度與非顏色線索在所有相關(guān)狀態(tài)下通過。最后一條標準是全局性的The result is recognizably this product, not a generic colorful treatment結(jié)果要讓人一眼認出是這個產(chǎn)品而不是一套通用的彩色化處理。 當色板贏得它的位置后交接給$impeccable polish做最終檢查參考 .agents/skills/impeccable/reference/polish.md——polish 會在 Color/imagery/icons 一節(jié)復核語義 token 的跨主題穩(wěn)定性、每個狀態(tài)下的文字/控件/焦點對比度并執(zhí)行 source diff 清理。注意 polish 自身的紀律同樣適用Polish is refinement, never concealed redesign與 colorize 的不借上色之名換膚互為表里。Live 模式簽名參數(shù)color-amount當colorize從 live 模式.agents/skills/impeccable/reference/live.md被調(diào)用時每個變體都必須聲明一個color-amount參數(shù)讓用戶無需重新生成即可從中性平滑滑向該變體的完整色彩策略。CSS 必須針對var(--p-color-amount, 0.5)編寫這樣默認值兜底到 0.5。參考文檔給出的參數(shù) schema 原樣如下{id:color-amount,kind:range,min:0,max:1,step:0.05,default:0.5,label:Color amount}這與 live.md 的通用參數(shù)契約一致range型參數(shù)驅(qū)動--p-id變量steps型驅(qū)動data-p-id屬性toggle型兩者皆可每個變體除color-amount外最多再加兩個變體專屬參數(shù)如 palette、temperature、tint behavior硬上限是每個變體 4 個且不得有重復旋鈕。live 模式對colorize動作還有一條專項要求每個變體使用不同的色相族并變化彩度與對比度策略——即三個變體必須是三個色彩世界而不是同一顏色的三個深淺。在 live 模式的 HTML/JSX 路徑上參數(shù)的落地形態(tài)是包裹屬性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; }接受變體后瀏覽器會把當前參數(shù)值寫成旁注注釋!-- 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 五步。結(jié)合倉庫自查一次 colorize 的完整工作流把以上內(nèi)容串起來在 WhoDB 倉庫中執(zhí)行一次colorize的完整路徑是加載上下文運行node .agents/skills/impeccable/scripts/context.mjs --target path讀取倉庫根的 DESIGN.md 與當前 tokenWhoDB 的 Paper/Ink 雙主題、Signal Blue 主色、One-Accent Rule 均在此審計確認品牌承諾Signal Blue 唯一產(chǎn)品強調(diào)色、Clidey Orange 僅供品牌時刻、找出被灰度掩蓋的層級與狀態(tài)、核對兩種主題的語義角色選策略先命名情緒溫度與劑量WhoDB 屬 Operate 產(chǎn)品端默認 Restrained 地板單個表面可爭取 Committed按角色而非色板分配顏色系統(tǒng)落地遵守八條規(guī)則并在編輯前加載 .agents/skills/impeccable/reference/craft-floor.md 的質(zhì)量底線正文 ≥ 4.5:1、大號文本 ≥ 3:1、拒絕漸變文字/玻璃/彩色光暈/單邊色條驗證用 checks.mjs 與detect.mjs跑機械檢查再對交互態(tài)、覆蓋層、禁用態(tài)、雙主題與色覺缺陷做人工核對live 變體每個變體聲明color-amount可再配至多兩個專屬參數(shù)三個變體各走不同色相族、變化彩度與對比度策略CSS 全部掛在var(--p-color-amount, 0.5)上交接色板穩(wěn)定后交給$impeccable polish做終檢并在最終 diff 中清理臨時產(chǎn)物。至此colorize的完整方法論閉環(huán)——審計品牌承諾 → 命名策略 → 按角色構(gòu)建 → 系統(tǒng)級落地 → 數(shù)值化對比度驗證 → live 參數(shù)化交付 → polish 終檢——全部落地為可執(zhí)行、可驗證的流程。它的全部規(guī)范文件與配套腳本都存在于本倉庫的 .agents/skills/impeccable/reference/ 與 .agents/skills/impeccable/scripts/ 目錄下可直接對照使用。贊分享數(shù)據(jù)庫客戶端后端前端CLI桌面應用數(shù)據(jù)可視化AI 應用【免費下載鏈接】whodbWhere data access meets operational intelligence項目地址https://gitcode.com/gh_mirrors/wh/whodb點擊查看免費下載相關(guān)推薦Impeccable colorize 實戰(zhàn)指南為單調(diào)界面注入有層次、有意義、有氛圍的戰(zhàn)略色彩Impeccable colorize 實戰(zhàn)指南為單調(diào)界面注入有層次、有意義、有氛圍的戰(zhàn)略色彩 導讀 colorize 是 Impeccable 設計技能套件AI 技能前端CLIdsh-pluginImpeccable Colorize 指南在既有品牌約束內(nèi)為單色 UI 注入有意義的色彩系統(tǒng)Impeccable Colorize 指南在既有品牌約束內(nèi)為單色 UI 注入有意義的色彩系統(tǒng) 導讀 本文是 Impeccable 設計語言體系下 colorAI 技能前端CLIdsh-pluginHermes Desktop 提供者配置完全指南首次設置、密鑰路由與 agent 配置雙向同步Hermes Desktop 提供者配置完全指南首次設置、密鑰路由與 agent 配置雙向同步 本篇技術(shù)指南圍繞 Hermes DesktopHermesAI 應用交互助手桌面應用上一篇ccg-workflow 性能優(yōu)化指南Kimi optimizer 角色提示詞與度量驅(qū)動優(yōu)化工作流深度解析下一篇SuperClaude Framework 需求分析師 Agent 實戰(zhàn)指南從模糊想法到可驗收規(guī)格的系統(tǒng)化需求工程創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考