调色板Skill

通过提示生成专业的网站配色方案。该技能以提示为先:描述情绪、主题或基准色,它会提取锚点色、选择配色方案、构建中性色阶,并为 UI 分配角色 tokens。默认返回三套方案并渲染控制台预览;仅在请求时进行对比度检查。

GitHub 仓库脚本和参考资料在仓库中。

概览

该工具专注于 Web UI 配色探索,并提供用于 primary、secondary、accent、background、surface、text、muted、border 角色的结构化 tokens。

流程

  1. 提供一个描述情绪、主题或基准色的提示。
  2. 提取 2-3 个锚点色并选择配色方案。
  3. 构建 background、surface、text、muted、border 的中性色阶。
  4. 分配角色:primary、secondary、accent 以及辅助 tokens。
  5. 使用内置脚本渲染控制台预览。

Output

Output is kept in memory as JSON tokens, then a console preview renders the palettes with hex values. By default, it does not write files and it returns three palette options.

#1 Tropical Pop - Fresh tropical for the current site; lively and clean.

primaryLagoon Teal#16B6A4
secondarySunflare Sand#F2C56B
accentCoral Punch#FF6A5E
backgroundCloud Foam#F2FBF8
surfaceMist Glass#EAF7F2
textInk Tide#1C2B2A
mutedSea Fog#8FA8A3
borderDrift Line#D6E7E1

#2 Cream Studio - Creamy minimal with warm neutrals and a soft accent.

primaryEspresso Slate#3E3435
secondaryOat Linen#D9C9B7
accentCinnamon Clay#C56A4A
backgroundWarm Porcelain#FAF7F2
surfaceSoft Paper#F1ECE5
textDeep Roast#2F2524
mutedMellow Taupe#9A8B84
borderParchment Edge#E0D7CF

#3 Playful Signal - Playful modern with bold primaries and airy neutrals.

primaryPixel Blue#3B6CFF
secondaryLime Kick#8DEB3A
accentMagenta Pop#FF4FA3
backgroundIce Violet#F7F8FF
surfaceSoft Pixel#EEF0FF
textNight Ink#141C2A
mutedClouded Steel#9AA6C0
borderLight Frame#D6DDF2

选项与边界

可选

  • 按需进行对比度检查(AA 或 AAA 目标)。
  • 按需输出 CSS variables 或 Tailwind 格式。

非目标

  • 不提供 UI 或 CSS 框架实现。
  • 不调用外部 API。