Communitygithub.com

arvindrk/extract-design-system

あらゆる公開Webサイトからデザイントークン(色、タイポグラフィ、スペーシング、ボーダー半径、シャドウ)を抽出します。ローカルプロジェクト向けにJSONとCSSカスタムプロパティを生成。AIエージェントスキル(Claude、Cursor、Codex)およびスタンドアロンCLIとして利用可能です。

extract-design-system とは?

このスキルは、任意の公開Webサイトからデザイントークン(色、タイポグラフィ、スペーシング、ボーダー半径、シャドウ)を自動抽出し、ローカルプロジェクトで即座に利用可能なJSONおよびCSSカスタムプロパティ形式で出力します。AIエージェント(Claude、Cursor、Codex)に統合して使用できるほか、コマンドラインから単体で実行可能なCLIとしても提供されます。抽出したトークンは、デザインシステムの迅速な分析や、既存アプリケーションへの一貫性のあるスタイル適用に役立ちます。開発者は、このスキルを使ってターゲットサイトのスタイルを効率的に調査・再現でき、手動コピーミスを防ぎつつ、デザインの一貫性を簡単に維持できます。基本的な動作としては、指定されたURLのページを解析し、計算済みスタイルやCSSルールからトークンを抽出する仕組みです。

対応✓Claude Code✓Codex CLI✓Cursor
npx skills add arvindrk/extract-design-system

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

extract-design-system は何をしますか?

あらゆる公開Webサイトからデザイントークン(色、タイポグラフィ、スペーシング、ボーダー半径、シャドウ)を抽出します。ローカルプロジェクト向けにJSONとCSSカスタムプロパティを生成。AIエージェントスキル(Claude、Cursor、Codex)およびスタンドアロンCLIとして利用可能です。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル