mcpField
I
image-analysis

image-analysis

github.com/pascalorg设计与 UI10196 次安装7 周前更新
代码仓库

关于 image-analysis

image-analysis 可从图像文件中提取主要颜色并生成调色板，适合根据截图、Figma 导出图或其他视觉参考实现界面的开发者。结果包含颜色值及其显著程度数据。

主要功能

  1. 01提取主要颜色
  2. 02支持 PNG、JPG、WebP、BMP 和 GIF
  3. 03按显著程度排序颜色
  4. 04返回 hex、RGB 和 HSL 值
  5. 05提供相对面积占比

适用场景

  1. 01让 UI 匹配截图
  2. 02从设计稿生成调色板
  3. 03识别照片中的颜色
  4. 04根据图像创建设计令牌

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/pascalorg/skills --skill image-analysis

安装后在 Claude Code 中输入/image-analysis确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

scripts/
extract-colors.js
extract-colors.sh
package-lock.json
package.json

详细介绍

图像分析 — 颜色提取

从任意图像文件（PNG、JPG、WebP、BMP、GIF）中提取主色，并返回结构化调色板。适用于实现与截图、Figma 导出图或设计稿相匹配的 UI。

适用场景

  • 用户提供截图或设计图，并希望据此实现界面
  • 用户要求提取或识别图像中的颜色
  • 用户希望从照片或设计稿中获取调色板
  • 用户希望让代码中的颜色与参考图相匹配

工作原理

  1. 使用 get-pixels 读取图像文件并获取原始像素数据
  2. 将像素数据传递给 extract-colors，以计算主色
  3. 返回按面积／显著性排序的调色板，包含十六进制、RGB、HSL 值和面积占比

用法

运行提取脚本，并将图像路径作为第一个参数传入：

bash <skill-path>/scripts/extract-colors.sh /path/to/image.png

参数：

  • $1 — 图像文件的路径（必需）。支持 PNG、JPG、WebP、BMP、GIF。

示例：

# Extract colors from a screenshot
bash <skill-path>/scripts/extract-colors.sh ./screenshot.png

# Extract colors from a Figma export
bash <skill-path>/scripts/extract-colors.sh ~/Downloads/figma-design.jpg

输出

脚本会输出按显著性排序的颜色 JSON 数组：

[
  {
    "hex": "#1a1a2e",
    "red": 26,
    "green": 26,
    "blue": 46,
    "hue": 0.6667,
    "saturation": 0.2778,
    "lightness": 0.1412,
    "area": 0.3241
  },
  {
    "hex": "#e94560",
    "red": 233,
    "green": 69,
    "blue": 96,
    "hue": 0.9724,
    "saturation": 0.7928,
    "lightness": 0.5922,
    "area": 0.1856
  }
]
字段类型说明
hexString十六进制颜色字符串（例如 #1a1a2e）
redInteger红色通道（0-255）
greenInteger绿色通道（0-255）
blueInteger蓝色通道（0-255）
hueNumber色相（0-1）
saturationNumber饱和度（0-1）
lightnessNumber亮度（0-1）
areaNumber相对面积／显著性（0-1）

向用户展示结果

提取颜色后，将其整理为结构化调色板：

Color Palette (sorted by prominence):

1. #1a1a2e — 32.4% (dark navy) — Primary background
2. #e94560 — 18.6% (coral red) — Accent color
3. #f5f5f5 — 15.2% (light gray) — Secondary background
...

然后建议如何在用户的代码库中使用这些颜色：

  • CSS 自定义属性／变量
  • Tailwind 配置中的主题颜色
  • 设计令牌定义
  • 直接用于组件样式

故障排除

“Cannot find module”错误

脚本会在首次运行时自动安装依赖项（extract-colors、get-pixels）。如果安装失败，请手动安装：

cd <skill-path>/scripts && npm install
不支持的图像格式

底层的 get-pixels 库支持 PNG、JPG、GIF 和 BMP。对于其他格式，请先转换图像。

大图像处理速度较慢

extract-colors 库默认会自动将图像降采样至 64,000 个像素。对于超大图像，这样已经足够快；如有需要，也可以调整脚本中的 pixels 选项。

评论

支持 Markdown