hue
从品牌信息生成完整设计系统的AI技能
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：hue。 它的用途是：从品牌信息生成完整设计系统的AI技能 完整的 Skill 内容见：https://321skill.com/skills/hue/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“从 raycast.com 的网站创建一个设计语言。” 它会引导你分析该品牌的视觉特征，并生成一套包含颜色、字体、间距和组件的完整设计系统YAML文件。或者，你可以直接上传一张品牌界面截图并说：“根据这张截图生成一个hue技能。” AI会提取截图中的设计元素来构建系统。
介绍
hue是一款开源AI技能，它能从品牌URL、名称或截图中学习品牌特征，并将其转化为一套完整、立即可用的设计系统。它解决了设计师和开发者在构建与品牌视觉风格一致的UI组件时，需要手动提取设计令牌、定义规范并确保跨项目一致性的繁琐问题。
使用方式非常直观：安装hue技能后，在AI助手会话中，只需提供品牌参考（如网站链接、品牌名或截图），并给出类似“为[品牌]创建一个设计技能”的指令，hue便会引导你完成分析过程，最终生成包含颜色、字体、间距、组件库等在内的完整设计语言文件。
该技能非常适合需要快速搭建或统一品牌化界面的前端开发者、UI设计师和产品经理。无论是启动新项目、重构旧界面，还是为不同产品线建立统一的设计规范，hue都能显著提升效率。
建议在生成设计系统后，利用其内置的验证脚本检查生成文件的语法、CSS选择器、WCAG对比度等，确保输出质量。同时，可以参考其提供的丰富示例库，了解不同风格品牌（如科技感、奢华感、复古风）的生成效果，以更好地指导你的指令。
核心特点
与手动定义或使用通用设计系统模板不同，hue能主动从任意品牌源（网址、名称、截图）中学习并提取视觉特征，自动化生成包含完整设计令牌和组件的、风格统一的设计系统，且生成的设计系统本身也是一个可复用的AI技能，能确保后续AI生成的组件在视觉上严格一致。
注意事项
不适合需要高度原创、非基于现有品牌参考的完全创新性视觉设计场景。
常见问题
hue支持哪些AI助手？
目前主要支持Claude Code和Codex（Cursor的AI引擎）。
生成的设计系统包含哪些内容？
包含颜色令牌、字体排版、间距系统、UI组件、明暗主题、页面模板和图标套件选择等。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/hue/raw/index.md 读取 hue 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/hue/raw/index.md（查看排版版本）