颜色纹理提取工具

一款从图像中提取有机颜色纹理并提供即用CSS代码的工具,适用于设计师和开发者。

  • by connerkward
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 connerkward/gritt

使用说明

格里特

MCP应用程序,从图像中提取有机色彩纹理。与其选择单一的平面颜色,不如选择一个区域,并使用现成的CSS(渐变、噪波、网格)获得自然变化的颜色调色板。

适用于Claude Desktop和任何支持以下功能的MCP客户端 MCP应用程序.

安装

npm install && npm run build

添加到Claude桌面配置(~/Library/Application Support/Claude/claude_desktop_config.json):

{
  "mcpServers": {
    "gritt": {
      "command": "node",
      "args": ["/path/to/gritt/build/main.js"]
    }
  }
}

运作原理

  1. 向提供base64编码的图像 color_texture_picker 工具
  2. 单击或拖动图像以选择区域
  3. 获取带有纹理预览、CSS渐变、噪波模式和网格混合的提取调色板
  4. 单击任何样例或CSS块进行复制

通过sharp(可选)进行服务器端压缩,无论输入图像大小如何,都能保持UI快速。

堆栈

  • MCP应用程序扩展 用于交互式UI
  • 客户端k-means聚类用于即时颜色分析
  • 基于画布的纹理预览渲染
  • Vite+Vite插件单文件,用于单文件HTML输出