色彩方案从图片智能提取

要解决的问题

设计师给了一张截图或品牌稿，问一句「这里面的主色是什么」，通常要手动开取色器、一个个记色值。更麻烦的是后续：主色之外的辅助色和强调色怎么定？文字和背景的对比度够不够？WCAG 2.1 过不过？每次换项目，hex 值、Tailwind 配置、iOS/Android 色板都要重新手抄，出错概率高。

这个技能把「提取 → 分析 → 校验 → 导出」整条链路自动化，输入可以是图片文件（PNG、JPG、SVG）、网站 URL、截图、设计稿，甚至一个现成的色值。

核心能力与工作方式

1. 提取与聚类

• 图片：分析像素数据，识别主导色，合并相近色相，按频率排序
• 网站：抓取并解析 CSS，分离出品牌色、强调色、文本色和背景色
• 采用 K-means 聚类，输出 5–10 个主导色；近黑近白自动忽略，除非占比显著

2. 构建主色板

主色板包含：1 个主导色、2–3 个辅助色、1–2 个强调色、1 个背景色、1 个文本色。同时生成扩展色板：tints、shades、tones 以及 50–950 的数值刻度。

3. 色彩和谐分析

自动生成互补色、类似色、三角、分裂互补、四角与单色方案，参考内置色彩理论文档 references/color-theory.md。

4. 无障碍校验

计算每组文本/背景的 WCAG 2.1 对比度，并测试红色盲、绿色盲、蓝色盲模拟。不达标的组合会推荐替代方案。

5. 格式化报告与导出

按 references/output-template.md 结构输出报告，并导出 CSS、Tailwind、SCSS、JSON、iOS、Android 等格式（见 references/export-formats.md）。

适用边界与注意点

• 纯本地分析，不联网安装依赖、不修改系统权限、不创建持久任务
• 命令和代码默认只作参考，只有在你明确要求且目标范围清楚时才会执行
• 网站抓取只读取 CSS，不会写入或修改目标站点
• 不涉及发送、发布、删除、付款、部署等外部写入操作；如涉及会先展示目标与影响并请求你确认
• 凭据只用于你指定的对应官方服务，不回显、不记录、不转发

适合直接接入设计系统，产出的色板带语义命名和对比度结论，不是一堆裸色值。