amaancoderx/npxskillui

これは何？

主な機能

• 01任意のURLから色のトークン、タイポグラフィのスケール、余白のグリッドを抽出
• 02Playwrightを使うultraモードで、スクロール時のスクリーンショット、ホバー・フォーカス時の差分、CSSキーフレームを取得
• 03ローカルのCSS、SCSS、JS/TSコードをスキャンし、デザイントークンとTailwindの設定を抽出
• 04公開Gitリポジトリを直接クローンして解析
• 05Claude Codeが自動で読み込むSKILL.mdとCLAUDE.mdを生成

ユースケース

• 既存サイトに合わせたランディングページを構築する前に、Claude Codeに参照用のデザインシステムを渡す
• 既存のローカルNext.jsまたはTailwindプロジェクトのビジュアルトークンをドキュメント化する
• 競合サイトが余白、タイポグラフィ、動きをどのように扱っているかを調べる

クイックスタート

1. 1

   CLIをグローバルにインストールする

   npm install -g skillui
2. 2

   URLからデザインシステムを抽出する

   skillui --url https://notion.so
3. 3

   出力フォルダーをClaude Codeで開き、UIを作成するよう依頼する

   cd notion-design && claude

使う前に知っておきたいこと

• !Ultraモードを使用するには、PlaywrightとChromiumを別途インストールする必要があります。
• !Node.js 18以降が必要です。

トピック

よくある質問

npxskillui とは？

Webサイト、Gitリポジトリ、ローカルのコードベースからデザインシステムを抽出し、Claude Codeが読み込めるファイルを生成するCLI。 SkillUIは、Webサイト、公開Gitリポジトリ、ローカルプロジェクトのデザインシステムをリバースエンジニアリングするコマンドラインツールです。色、タイポグラフィ、余白、アニメーション、コンポーネント、スクリーンショットを収集し、SKILL.mdとCLAUDE.mdを含むフォルダに出力することで、Claude Codeがビジュアルの特徴を自動的に取り込めるようにします。

npxskillui は無料で使えますか？ライセンスは？

npxskillui にはライセンスが明記されていません。コードは公開されていますが、ライセンスがない場合は再利用の許諾がないため、利用前に作者に確認することをおすすめします。

npxskillui は今もメンテナンスされていますか？

半年以内に更新あり。npxskillui の最終コミットは 2026年5月7日 です。

npxskillui は何に使えますか？

既存サイトに合わせたランディングページを構築する前に、Claude Codeに参照用のデザインシステムを渡す 既存のローカルNext.jsまたはTailwindプロジェクトのビジュアルトークンをドキュメント化する 競合サイトが余白、タイポグラフィ、動きをどのように扱っているかを調べる

npxskillui のインストール方法は？

CLIをグローバルにインストールする: npm install -g skillui URLからデザインシステムを抽出する: skillui --url https://notion.so 出力フォルダーをClaude Codeで開き、UIを作成するよう依頼する: cd notion-design && claude

npxskillui はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/amaancoderx/npxskillui