Hue：一键提取网站风格，AI 设计系统新工具

看到喜欢的网站风格，想用 AI 工具复刻却不知道怎么写 prompt？Hue 这个开源工具可以帮你一键提取任何网站的设计风格，生成完整的设计系统文件，直接用于 Claude Code 等 AI 编程工具。

什么是 Hue

Hue 是一个完全免费的开源工具，访问 hueapp.io 即可使用。它的核心功能是从任何网站中提取设计风格，转换为可复用的设计系统和 Skill 文件。

如何使用

安装完成后，在任何 AI 对话中使用触发词即可：

• "仿照 stripe 创建设计系统"
• "用 hue 从 notion 提取设计系统"
• "generate a hue skill from this screenshot（附截图）"

Hue 会自动执行完整的 16 步流程：分析网站 → 拆解组件 → 选择图标 Kit → Hero 区域 → 确认 → 生成完整的 Skill 文件夹（包含 SKILL.md + design-model.yaml + references + 4 个 HTML 预览）。

版权保护机制

Logo 和产品图片属于版权资产，Hue 不会将别人的 Logo 复制到你的 Skill 中。

图标同样有保护机制——Hue 内置了 icon-kits.md 替代库：它会识别品牌图标的风格（线宽、圆角、humanist/geometric），然后从 6 个开源免费图标库（Lucide、Phosphor、Tabler、Iconoir、Material Symbols、Heroicons）中挑选最接近的替代方案。

适用场景

对于使用 Claude Code 等 AI 编程工具做 Vibe Coding 的开发者来说，Hue 是一个非常实用的辅助工具。它解决了"看到好设计却不知道如何用 prompt 描述"的痛点，让 AI 能更准确地理解和复刻设计风格。