SOTA Sync
← 返回 FEED
AGENT2026-04-17

两个开源工具让AI Agent学会任何品牌设计：hue + design-extract

Jason Zhu今天推荐了两个配套工具，组合起来形成完整闭环：design-extract从任意网站提取设计系统 → hue让Claude Code按这个设计系统生成UI。配合昨天开源的HyperFrames，直接延伸至视频渲染层。

hue：Claude Code的品牌学习Skill

hue是一个开源Claude Code Skill（251 Stars，Apache 2.0），核心功能：学习任何品牌并转化为完整设计系统，之后AI生成的所有UI都匹配这个品牌。

安装一次，以后Agent构建的所有界面都与品牌一致——不需要每次手动描述品牌规范。

核心流程

1. 分析参考网站/App截图
2. 提取颜色、字体、排版、间距、组件模式
3. 生成 BRAND.md（品牌规范文档）
4. 以后所有代码生成都引用这个文件

支持Claude Code和Codex，安装方式：

npx skills add dominikmartn/hue

与HyperFrames的连接

hue生成的BRAND.md可以直接传给HyperFrames——后者支持自定义设计系统注入着色器、颜色、字体。这意味着视频中的UI元素（图表、按钮、标题卡）可以完全复用品牌的视觉语言，而不是每次手动指定颜色代码。

design-extract：逆向任何网站完整设计系统

design-extract是designlang包的CLI工具（npm包名：designlang，也叫DESIGNLANG），专注于从任意网站提取完整设计系统。比hue更底层，输出8种格式。

8种输出文件

文件用途
*-design-language.mdAI优化的Markdown，可直接喂给任何LLM重建设计
*-preview.html可视化报告：色板、字体级联、阴影、a11y评分
*-design-tokens.jsonW3C Design Tokens格式
*-tailwind.config.jsTailwind CSS主题配置
*-variables.cssCSS自定义属性
*-figma-variables.jsonFigma Variables导入（含暗色模式）
*-theme.jsReact主题（Chakra/Stitches/Vanilla Extract）
*-shadcn-theme.cssshadcn/ui globals.css变量

超越颜色的5个能力

大多数提取工具只给颜色和字体。designlang填补了5个市场空白：

1. 布局系统提取 不只是给出颜色，而是提取网格列模式、flex方向、容器宽度、gap值——设计的"架构骨架"。

Layout: 55 grids, 492 flex containers

2. 响应式多断点捕获 在4个视口（mobile/tablet/desktop/wide）爬取网站，精确映射响应式变化：

designlang https://vercel.com --responsive
# 输出：Nav visibility hidden → visible at 768px
# H1 size 32px → 48px at 768px

3. 交互状态捕获 编程方式悬停和聚焦交互元素，捕获实际样式变化：

/* Button Hover */
background-color: rgb(83,58,253) → rgb(67,47,202);
box-shadow: none → 0 4px 12px rgba(83,58,253,0.4);

4. 实时站点同步 把线上网站作为真相来源，而非Figma——自动检测设计变更并更新本地tokens：

designlang sync https://stripe.com --out ./src/tokens

5. 多品牌对比 并排比较N个品牌，输出颜色重叠分析、字体排版对比、间距系统、a11y评分。

新功能（v5）

  • Clone命令：一行命令生成完整Next.js应用，应用目标网站的设计
  • Apply命令：自动检测项目框架（Tailwind/shadcn/ui/纯CSS），直接写入对应配置文件
  • 评分系统：7个维度打分（颜色纪律/字体/间距/阴影/圆角/a11y/_token化）
  • Auth提取：支持cookie和自定义header，提取需要登录的内部页面
  • SVG图标提取：去重分类，按尺寸和风格（outline/solid/duotone）组织
  • 字体文件检测：识别Google Fonts/自托管/CDN/系统字体，生成@font-face CSS

安装：

npx designlang https://stripe.com        # 直接使用
npx skills add Manavarya09/design-extract # 作为Agent Skill

完整工作流：三工具串联

design-extract 提取任意网站设计系统
       ↓
hue 学习品牌规范生成 BRAND.md
       ↓
Claude Code 按品牌规范生成UI
       ↓
HyperFrames 用GSAP+HTML渲染视频

三个工具都是开源的，都是npm-based，都是AI-native的。design-extract解决"提取"问题，hue解决"学习"问题，HyperFrames解决"输出"问题——每一层都可以被AI Agent驱动。

相关