Repolode
提交项目
amaancoderx

amaancoderx/npxskillui

一个命令行工具，把网站、代码仓库或本地项目的设计系统提取成 Claude Code 可直接读取的技能文件夹。

在 GitHub 查看官网
Star
2,418
Fork
250
未关闭 Issue
6
最近提交
5个月前

这是什么？

SkillUI 是一个命令行工具，可以抓取在线网站、Git 仓库或本地代码目录，提取其中的设计系统，包括颜色变量、字体层级、间距网格和组件模式。输出结果是一个包含 SKILL.md 和 CLAUDE.md 的文件夹，Claude Code 打开后会自动加载这些设计上下文，便于按照原站风格生成界面。

工具提供多种模式。默认模式在不启动浏览器的情况下对 HTML、CSS、字体和设计令牌做静态分析；Ultra 模式基于 Playwright 采集滚动截图、悬停与聚焦状态差异、CSS 关键帧、布局结构和 DOM 组件指纹；Dir 模式扫描 .css、.scss、.ts、.tsx、.js、.jsx 文件中的 Tailwind 配置、CSS 变量和设计令牌；Repo 模式则会克隆公开仓库并执行 Dir 模式。

运行环境需要 Node.js 18 及以上版本。所有分析都在本地完成，不需要 AI 服务或 API 密钥。使用 Ultra 模式还需额外安装 Playwright 和 Chromium。

核心功能

  • 01从网址、Git 仓库或本地目录中提取颜色、字体和间距等设计令牌。
  • 02自动生成 Claude Code 可直接读取的 SKILL.md 和 CLAUDE.md。
  • 03Ultra 模式通过 Playwright 采集滚动截图、悬停聚焦差异和 CSS 动画。
  • 04输出 JSON 格式的令牌文件和 CSS 变量，并打包本地字体。
  • 05全部在本地运行，无需 AI 模型或 API 密钥。

适用场景

  • 参考现有网站的视觉风格，快速搭建新的落地页。
  • 在让 Claude Code 新增页面前，为其提供内部应用的设计上下文。
  • 为缺少设计规范文档的代码库整理设计令牌。

标签

#design-system#claude-code#cli#css#design-tokens#playwright#static-analysis

常见问题

npxskillui 是什么？
一个命令行工具，把网站、代码仓库或本地项目的设计系统提取成 Claude Code 可直接读取的技能文件夹。 SkillUI 是一个命令行工具，可以抓取在线网站、Git 仓库或本地代码目录，提取其中的设计系统，包括颜色变量、字体层级、间距网格和组件模式。输出结果是一个包含 SKILL.md 和 CLAUDE.md 的文件夹，Claude Code 打开后会自动加载这些设计上下文，便于按照原站风格生成界面。
npxskillui 可以免费使用吗？用的什么许可证？
npxskillui 没有声明许可证。代码虽然公开，但没有许可证就没有明确的使用授权，正式使用前建议先联系作者。
npxskillui 还在维护吗？
半年内有更新。npxskillui 最近一次提交是在 2026年5月7日。
npxskillui 适合用来做什么？
参考现有网站的视觉风格，快速搭建新的落地页。 在让 Claude Code 新增页面前，为其提供内部应用的设计上下文。 为缺少设计规范文档的代码库整理设计令牌。
在哪里获取 npxskillui？
源代码和安装说明在 GitHub 上：https://github.com/amaancoderx/npxskillui

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目