SuperAPI AI 工具集

uicolor

通用与其它

查看项目

更新于 10-15 20:34

技能介绍

用途:uicolor 用于审查和校正产品界面的配色,逐屏读取渲染后的真实颜色分布,诊断色彩失衡并用 HSB 色彩理论精确修正,每一步都做视觉验证。

主要能力:检查品牌色覆盖率、色彩层级、色温一致性、饱和度、阴影构造与悬停状态;对照 60-30-10 规则判断主导色、次级色与强调色比例;区分色彩角色(背景、次级面、文字、品牌强调、语义色);识别纯黑阴影、纯灰中性色、悬停态与基础态同色等问题。

使用方式:先准备运行中的开发服务器,定位源码根目录、globals.css 或 variables.css 及 tailwind.config,读取已有 token 作为“待修正值”;如有 DESIGN-BRIEF.md 则以其色彩方向为准。随后编写提取脚本 _uicolor_extract.mjs,用 Playwright 截图并统计页面颜色覆盖百分比,示例调用:node _uicolor_extract.mjs --url http://localhost:3000 --name home;受保护页面通过 --auth 传入登录态。每次运行后都要同时查看截图与 palette JSON。

流程:Phase 0 环境准备;Phase 1 逐屏色彩审查并按问题严重度打分排序;Phase 2 优先修复高影响问题;Phase 3 以最多 3 轮迭代修正,先改 token 再验证组件,比较修复前后 palette 覆盖率;Phase 4 清理临时脚本并输出前后对照报告。

限制与规则:只改颜色值,不改变逻辑、布局或组件结构;中性色应带轻微色相偏移而非纯灰;阴影应带色彩倾向而非纯黑;语义色不可装饰化使用;同一屏幕不混用冷、暖中性色;每屏最多 3 轮迭代,超限则标记并继续。具体平台、收费、价格与效果资料暂未提供。