mcpField
S
skillui

skillui

github.com/roentek设计与 UI881 次安装9 周前更新
代码仓库

关于 skillui

SkillUI 可从网站、本地项目或公开仓库提取设计系统，并生成 Claude 可读取的文件。它面向需要复现现有视觉风格的界面开发者，提供静态提取和基于截图的模式。

主要功能

  1. 01从 URL、本地目录和公开仓库提取
  2. 02静态与 ultra 提取模式
  3. 03导出设计文档和 Token JSON
  4. 04ultra 模式采集截图
  5. 05打包 Google Fonts

适用场景

  1. 01开发界面时匹配参考网站
  2. 02提取网站的颜色、字体和间距
  3. 03整理本地项目的设计 Token
  4. 04查看公开仓库的设计系统

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/roentek/claude_code_boilerplate_framework --skill skillui

安装后在 Claude Code 中输入/skillui确认已加载。

附带文件.skill_id

详细介绍

SkillUI — 设计系统提取器

从线上网站、本地项目或公开代码库中提取设计系统，并生成 Claude 可读取的文件（SKILL.md、DESIGN.md、令牌 JSON）。想要匹配现有网站的视觉风格时，可在构建任何 UI 前使用。

适用场景

  • 用户提供 URL，并希望匹配或克隆其设计风格
  • 用户希望从现有网站提取颜色、字体和间距
  • 用户有本地项目或代码库，并希望提取其中的设计令牌
  • 用户说“提取……的设计”“匹配这个网站”“获取……的令牌”或“提取……的样式”

模式

模式命令适用场景
URL（静态）npx skillui --url <url>快速提取 HTML/CSS/字体/颜色
URL（超强）npx skillui --url <url> --mode ultra --screens 10完整提取，包含截图、动画和交互。需要 Playwright。
本地目录npx skillui --dir ./path/to/project --name "ProjectName"扫描本地 Next.js/React/Tailwind 项目
公开代码库npx skillui --repo https://github.com/user/repo克隆并分析任意公开 GitHub 代码库

工作流

步骤 1 — 运行提取器
# Basic (recommended first try)
npx skillui --url https://example.com

# With output folder
npx skillui --url https://example.com --out ./design-systems/example

# Ultra mode (full extraction with screenshots)
npx skillui --url https://example.com --mode ultra --screens 10
步骤 2 — 在 Claude Code 中打开输出

生成的文件夹包含：

  • SKILL.md / CLAUDE.md — 打开文件夹时，Claude 会自动读取这些文件
  • DESIGN.md — 完整的设计系统文档
  • tokens/colors.json、tokens/spacing.json、tokens/typography.json
  • screens/ — 截图（仅限超强模式）
  • fonts/ — 打包的 Google Fonts（woff2）

打开生成的文件夹：

cd <generated-folder-name> && claude

或者在当前会话中使用 Read 工具直接读取 DESIGN.md，并以此作为参考。

步骤 3 — 使用设计系统

生成输出后，将令牌文件和 DESIGN.md 读入上下文，并在构建 UI 时应用。将相关令牌传递给 frontend-design 技能和 ui-ux-pro-max 设计系统生成器。

注意事项

  • 无需 API 密钥或云端依赖——完全在本地运行
  • 使用超强模式时，必须安装 Playwright：npm install playwright && npx playwright install chromium
  • 输出文件夹名称会根据网站/代码库名称自动生成
  • 输出中的 .skill ZIP 归档可供分享或存档

评论

支持 Markdown