主题色中性灰阶生成

SKILL前端设计

原名 theme-hue-gray

前端设计 未标注权限 许可证不明确
安装这个技能

输入浅色主题色 HEX,可选再给深色主题色,生成对应色相的中性灰阶,支持深浅双模式十阶灰,并输出色卡预览与速查表。

一句话选型结论

按资料字段整理

主题色中性灰阶生成是前端设计类的 Agent Skill,安装方式未标注,权限级别未标注,许可证不明确,有可直接复制的安装命令。技能本质是给模型读的说明书,效果取决于模型与客户端;装完先用一个小任务验证,再放进正式流程。

分类前端设计 安装方式未标注 权限级别未标注权限 许可证许可证不明确
累计安装 未标注 本周 未标注
GitHub 星标 未标注 仓库 未标注
下载量 未标注 技能市场下载数
权限级别 未标注权限 安装前请确认风险范围
许可证 许可证不明确 未说明

安装

未标注
在支持 Skills 的客户端里执行,装完问一句「你有哪些技能」验证
skillhub install user_002e6cc4/thg
  1. 1
    确认客户端支持

    确认你的客户端支持 Skills(Claude、Codex、Cursor 等),并升级到较新的版本。

  2. 2
    拿到技能文件

    执行上面的命令安装;也可以把仓库里的 SKILL.md 手动放进客户端的 skills 目录。

  3. 3
    刷新技能列表

    重新打开客户端,或刷新技能列表,让新放进来的技能被加载。

  4. 4
    验证是否生效

    问一句「你有哪些技能」,确认列表里出现它,再拿一个小任务试跑。

技能档案

前端设计
字段来自技能仓库与公开索引,中文说明由本站标注
作者 / 维护方user_002e6cc4仓库 未标注 · 版本 未标注
宿主客户端未标注技能可被这些客户端加载
安装方式未标注安装包 community
权限级别未标注权限安装前请确认风险范围
许可证未说明许可证不明确,商用前请自行确认条款
仓库可用性available技能仓库当前是否可访问
最近核验2026-11-06上游最后核验时间 · 数据更新 2026-11-06
正文体量5.0 KBSKILL.md 原文大小,越大说明说明书写得越细

能做什么

0 项能力
上游给出的能力概览与适用场景
生成品牌配套中性灰制作深色模式背景灰输出灰阶色卡速查表

典型使用场景

3 类
按分类整理的常见用法,具体以 SKILL.md 为准
出页面与组件

按描述生成页面结构和组件草稿。

调整样式与布局

改间距、配色与响应式布局。

生成设计说明

把设计稿整理成开发能接的说明。

选择建议

装之前先看这几条
按条目字段给出的判断,不替你决定用不用

值得选的地方

  • 有可直接复制的安装命令,不用自己翻文档找入口。

先想清楚的地方

  • 没有标注权限级别,实际能做什么要装好后确认。
  • 许可证不明确,商用或二次分发前先到仓库确认条款。
  • 没有做站内核验,内容以作者仓库为准。
  • 技能只是说明书,实际效果取决于模型与客户端,装完先用小任务试一遍。

更适合

  • 需要在前端设计场景里给模型补一套做法的人。
  • 愿意先读一遍 SKILL.md、确认它会让模型做什么的人。

不太适合

  • 对许可证要求很严、必须明确可商用的人。
  • 只想装完就自动变强、不打算看说明书的人。

同类对比

6 个同类
同分类里挑最接近的几条,字段以各自详情页为准
技能权限级别安装方式累计安装宿主客户端安装命令
主题色中性灰阶生成当前 未标注权限 未标注 未标注 未标注 有
前端设计 只读 GitHub 仓库 882.3 万 Codex、Claude、Cursor 有
Vercel 组合模式 联网访问 GitHub 仓库 385.9 万 Codex、Claude、Cursor 有
Vercel React native skills 前端 只读 GitHub 仓库 246.9 万 Codex、Claude、Cursor 有
adapt 搜索 浏览器控制 GitHub 仓库 202.7 万 Codex、Claude、Cursor 有
使用我的浏览器 浏览器控制 GitHub 仓库 184.8 万 Codex、Claude、Cursor 有

SKILL.md 全文

5.0 KB
模型实际读到的说明书原文,来自技能仓库

主题色中性灰生成器

Overview

把任意主题色转成一组「带色相方向的中性灰」——肉眼仍是灰,但微妙地泛出品牌色,比纯
中性灰(zinc/neutral)更有记忆点,且能与主色自然衔接。适用于背景、描边、次级文字与
深色模式表面。浅色灰锚定浅色主题色;若提供深色主题色,深色灰独立锚定其色相,支持
深浅不同色相。一次输入主题色(或双色),输出双模式(浅色 + 深色背景)十阶灰、色卡预览,
并可导出 Markdown 速查表。

When to Use

  • 用户给出一个主色/品牌色,要求生成配套的中性灰阶。
  • 用户提到「带主题色色向」「品牌灰」「色相一致的灰」「深色模式背景灰」等需求。
  • 需要快速预览一组灰的观感(色卡),或要一份可交付的色阶文档。

Workflow

Step 1 — 解析主题色

从用户输入提取 HEX(带不带 # 均可),用 rgb_to_hsl 取出色相 H。整组灰锁死该 H,
只调明度 L 与饱和度 S。

Step 2 — 生成双模式灰阶

调用 scripts/generate_hue_gray.py,传入 --theme:

  • 浅色模式:gray-50(最浅) → gray-900(最深),L 从 97% 降到 13%,S 从 6% 抬到 24%。
  • 深色模式(背景/表面):命名反转,gray-900(最深 App 底) → gray-50(最浅抬升表面),
    L 从 9% 升到 42%,S 从 10% 抬到 17%。

--theme 决定浅色灰色相;--dark-theme(可选)决定深色灰色相——两者色相可不同,
分别锚定各自主题色。省略 --dark-theme 时深色灰复用浅色主题色色相(默认同色相)。
--strength 控制色向强度(0=纯中性灰,1=默认,1 以上更明显)。--mode 可选 light /
dark / both。

提醒规则(执行时必须遵循,不可省略)

当用户只提供了浅色模式主题色、未提供深色模式主题色时,脚本会按"深浅同色相"的
假设回退生成深色灰,这仅是一个简化默认、并非最终结论。此时必须在交付色卡的同时,
主动提醒用户补充深色模式主题色
(即给出 --dark-theme 的取值),说明:深色模式带
色相中性灰的色相应由深色模式主题色决定,深浅主题色未必同色相,给出深色主题色后深色
灰才能独立锚定其色相。提醒是强制步骤,不得跳过;不要假设"未指定深色主题色"就是用户
的最终意图。

Step 3 — 渲染色卡预览

脚本自动输出 gray_light.png 与 gray_dark.png(色块 + HEX + HSL 标注)。用
show_widget 把两张 PNG 内联渲染给用户看实际观感,并说明:

  • 浅色区(50–200)几乎中性,大面积铺底不抢戏;
  • 中段起色向浮现,越深越明显但 S 始终压住、不脏;
  • 深色模式是独立表面梯度,不可把浅色灰反相。

Step 4 — 交付与落地

  • 默认同时生成 Markdown 速查表(hue-gray-{hex}.md,含中文用途说明)。
  • 确认观感后,把双模式灰固化成 Ardot 颜色变量(gray-50…gray-900):
    通过 ardot-design-core 的能力,在已打开的 Ardot 文件里建 Color Variable,便于主题切换联动。

Usage Examples

# 生成 #3FD4CF 的双模式灰 + 色卡 + Markdown
python scripts/generate_hue_gray.py --theme 3FD4CF

# 仅浅色、色向更强
python scripts/generate_hue_gray.py --theme #14C9C9 --mode light --strength 1.3

# 仅深色背景灰
python scripts/generate_hue_gray.py --theme #14C9C9 --mode dark

# 深浅主题色不同:浅色 #F5319D、深色 #5B8CFF,两套灰各自锚定各自色相
python scripts/generate_hue_gray.py --theme #F5319D --dark-theme #5B8CFF

运行环境:使用 WorkBuddy 受管 Python(/Users/wst/.workbuddy/binaries/python/envs/default,
已装 Pillow);脚本在缺失依赖时会自动 pip install pillow。

Design Notes(交付时向用户说明的原则)

  • 色相锚定主题色 H,整组灰与主色同宗,叠用不显脏。
  • 深色模式灰的色相应由深色模式主题色决定;深浅主题色色相可不同,需分别锚定(用 --dark-theme 传入)。
  • 明度按 Tailwind 式 50→900 十阶,直接对应设计系统命名。
  • 深色模式需配套浅色文字梯阶(如 #EAF1F1 主文 → #8BA7A6 次级)。
  • 浅色版与深色版建议分别固化为 Ardot 颜色变量(带浅色/深色模式标记),便于联动。

常见问题

5 问
答案由本站依据条目字段整理
主题色中性灰阶生成怎么安装?

在支持 Skills 的客户端里执行:skillhub install user_002e6cc4/thg。安装方式为未标注。装完刷新技能列表或重开客户端。

主题色中性灰阶生成支持哪些客户端?

资料没有标注宿主客户端,但只要客户端支持 Skills(Claude、Codex、Cursor 等),一般都能加载。

主题色中性灰阶生成权限高吗,安全吗?

权限级别为未标注权限。安装前先看它会读取或写入哪些内容。

主题色中性灰阶生成收费吗?

本站不代收费用,也没有标注具体价格。是否收费取决于技能本身和所用的模型或客户端,正式使用前按作者说明确认。

主题色中性灰阶生成用什么许可证?

许可证标注为 未说明(许可证不明确)。商用或二次分发前请到仓库确认条款原文。

热门专题

按场景挑技能
全部专题 →

技能内容以作者仓库为准;分类、权限级别与许可证状态的中文说明为中文整理,最近核验 2026-11-06。