UI UX Collector — Design skill for Claude Code

UI-UX-Collector

**Chrome 插件** for [ui-ux-pro-max](https://github.com/feitangyuan/ui-ux-pro-max) skill (1w+ ⭐)

浏览网页时一键收集 UI 设计，自动分析风格/配色/字体，存入本地知识库。

为什么需要这个插件？

[ui-ux-pro-max](https://github.com/feitangyuan/ui-ux-pro-max) 是 Claude Code 的 UI/UX 设计助手，内置 50+ 风格库。这个插件让你：

• 实时收集：看到喜欢的网页，点一下就保存
• 自动分析：Claude 自动提取颜色、字体、布局、效果
• 可搜索：以后设计时，让 Claude 参考你收集的案例

演示

插件界面

使用流程

┌─────────────────────────────────────────────────────────┐
│  1. 浏览网页        2. 点击插件         3. 查看收藏      │
│  ┌─────────┐      ┌─────────┐       ┌─────────┐        │
│  │ 网页内容 │  →   │ Analyze │   →   │ 已保存   │        │
│  └─────────┘      └─────────┘       └─────────┘        │
└─────────────────────────────────────────────────────────┘

前提条件（必须）

这个插件依赖以下工具，使用前请先安装：

1. Claude CLI

curl -fsSL https://claude.ai/install.sh | sh
claude -v  # 验证

2. ui-ux-pro-max skill

git clone https://github.com/feitangyuan/ui-ux-pro-max.git ~/.claude/skills/ui-ux-pro-max
ls ~/.claude/skills/ui-ux-pro-max  # 验证

---

安装

1. 下载插件

git clone https://github.com/feitangyuan/UI-UX-Collector.git ~/ui-ux-collector

2. 安装到 Chrome

1. 打开 chrome://extensions
2. 开启「开发者模式」（右上角）
3. 点击「加载已解压的扩展程序」
4. 选择 ~/ui-ux-collector/extension 文件夹

3. 启动服务器

node ~/ui-ux-collector/host/server.js

看到以下输出表示成功：

╔═══════════════════════════════════════════════════════════╗
║  UI/UX Design Collector - Host Server                     ║
║  Running on http://localhost:3847                         ║
╚═══════════════════════════════════════════════════════════╝

---

使用

收集设计

1. 浏览任意网页
2. 点击 Chrome 工具栏的插件图标
3. 点击「Analyze This Page」
4. 等待 Claude 分析完成（约 10-30 秒）

查看收藏

点击插件图标 → 「View Collection」

• 点击卡片展开详情
• 点击 × 删除

在 Claude Code 中搜索

# 搜索你收集的设计
python3 ~/.claude/skills/ui-ux-pro-max/scripts/search.py "dark glassmorphism" --domain collected