color-toolkit-turn:在 Agent 里做颜色编码、对比度与配色

前言

做 UI 或前端时,颜色往往要在 HEX、RGB、HSL 之间来回换算;做无障碍时还要查 WCAG 对比度是否达标;定主题色之后,还要试几组搭配并快速预览。这些步骤分散在在线工具、设计软件和手写脚本里,和编码上下文脱节。

下面介绍 SkillHub 上的 color-toolkit-turn(坐标 @user_800d68d6/color-toolkit-turn,当前版本 3.4.0)。它把颜色编码转换、对比度计算、智能颜色推荐和 HTML 预览生成收进一套 Agent Skill,在对话里完成上述工作。标签标明 requires_api_key=false,安装后无需额外 API Key。

这是什么

color-toolkit-turn 是社区来源(community)的 design-media 类 Skill,由发布者 user_800d68d6 维护。官方简介将其定位为专业颜色工具集,面向 UI 设计、无障碍开发与配色方案生成等场景。

与「自己搜换算公式 + 打开对比度计算器」相比,Skill 的价值在于:能力写在 SKILL.md 规范里,由 Cursor、Claude Code、Codex 等支持 Skills 的客户端加载后,Agent 按同一套说明执行颜色相关任务。

核心功能

以下能力均来自 SkillHub 页面与抓取元数据,未单独展开实现细节:

  1. 颜色编码转换:在不同颜色表示形式之间转换(具体支持格式以 Skill 内说明为准)。
  2. 对比度计算:用于无障碍与可读性检查场景。
  3. 智能颜色推荐:在配色、主题延展时给出颜色建议。
  4. HTML 预览生成:把配色或样式以 HTML 形式输出,便于快速查看效果。

安装与启用

SkillHub 建议通过其安装文档完成 CLI 与技能安装;页面给出的安装提示如下。

1、安装 SkillHub CLI(若尚未安装)

先检查是否已有 skillhub:

command -v skillhub && skillhub --version

未安装时,可按官方文档执行完整安装(CLI + 默认 Skill):

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash

仅需要 CLI 时:

curl -fsSL https://skillhub-1388575217.cos.ap-guangzhou.myqcloud.com/install/install.sh | bash -s -- --cli-only

说明与权限、沙箱联网等注意点见 SkillHub 安装与优先源配置。

2、安装 color-toolkit-turn

安装技能时必须用 --dir 指向当前 Agent 的 skills 目录,否则默认装到 ./skills/ 可能不会被客户端识别。

skillhub install @user_800d68d6/color-toolkit-turn --dir <skills 目录>

常用客户端的 skills 目录(摘自官方安装文档):

  • Cursor:~/.cursor/skills/
  • Claude Code:~/.claude/skills/
  • Codex:~/.codex/skills/ 或项目下的 .agents/skills/

也可将下面提示发给 AI,让其按安装文档代为安装:

请根据 https://skillhub.cn/install/skillhub.md,安装 `@user_800d68d6/color-toolkit-turn`。

安装完成后,按所用客户端要求刷新或重启,使 Skill 被加载。

典型用法

公开页面未附带逐条 CLI 示例子命令;可复现的入口是:先完成安装,再在对话中说明需求,让 Agent 调用已加载的 color-toolkit-turn。需求类型与官方能力对应即可,例如:

  1. 给出一种颜色编码,要求转换为其他编码格式。
  2. 指定前景色与背景色,要求计算对比度并说明是否满足无障碍检查需要。
  3. 基于主色或风格描述,要求推荐一组协调色。
  4. 要求生成带指定配色的 HTML 预览片段。

具体参数格式、输出结构以安装包内 SKILL.md 为准;本文未抓取到该文件全文,不展开未核实的调用细节。

适用场景与注意

适合谁

  • 前端与 UI 开发:在写样式、主题变量时减少上下文切换。
  • 无障碍相关开发:需要对比度结论时直接在 Agent 侧完成。
  • 需要快速配色预览、又不想反复粘贴到外部工具的设计协作场景。

注意

  • 版本以 SkillHub 为准(当前 3.4.0);升级可用 skillhub 按文档更新到对应目录。
  • 无需 API Key,但仍依赖本地 Agent 是否正确加载 skills 目录。
  • 智能推荐与 HTML 预览的质量取决于模型与 Skill 内规则,复杂品牌色规范仍需人工复核。

SkillHub 统计(抓取时):评分 100000,下载 858;分类 design-media。

结尾

color-toolkit-turn 把颜色换算、对比度、推荐与 HTML 预览集中到一条 Skill 链路里,适合在支持 Skills 的编码环境中处理配色与无障碍检查。安装与坐标以 SkillHub 为准。

  • SkillHub 页面:https://www.skillhub.cn/skills/user_800d68d6/color-toolkit-turn
  • 资源地址:https://api.skillhub.cn/user_800d68d6/color-toolkit-turn
羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜