design-system-analyzer
✓ChromeDevTools を使用して Web サイトの UI スタイルを分析し、正確な CSS トークン、アニメーション、およびインタラクション状態を抽出します。ユーザーを誘導しながら複雑なサイトやボット対策にも対応します。 「このサイトを分析する」、「UI スタイルを抽出する」、「[URL] からデザイン システムを作成する」、または「ビジュアル スタイルを学習する」をトリガーします。
SKILL.md
Analyze websites via ChromeDevTools to extract deep CSS logic (keyframes, transitions, tokens) and generate comprehensive Design System System Prompts.
For the best experience (no CAPTCHAs, shared login cookies), advise the user to run Chrome with: chrome.exe --remote-debugging-port=9222 (See references/setup-guide.md for details)
IMPORTANT: Do NOT take screenshots. Screenshots consume excessive context and are unnecessary - all visual data is extracted from CSS.
ChromeDevTools を使用して Web サイトの UI スタイルを分析し、正確な CSS トークン、アニメーション、およびインタラクション状態を抽出します。ユーザーを誘導しながら複雑なサイトやボット対策にも対応します。 「このサイトを分析する」、「UI スタイルを抽出する」、「[URL] からデザイン システムを作成する」、または「ビジュアル スタイルを学習する」をトリガーします。 ソース: nakanosanku/ohmyskills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/nakanosanku/ohmyskills --skill design-system-analyzer- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
design-system-analyzer とは？
ChromeDevTools を使用して Web サイトの UI スタイルを分析し、正確な CSS トークン、アニメーション、およびインタラクション状態を抽出します。ユーザーを誘導しながら複雑なサイトやボット対策にも対応します。 「このサイトを分析する」、「UI スタイルを抽出する」、「[URL] からデザイン システムを作成する」、または「ビジュアル スタイルを学習する」をトリガーします。 ソース: nakanosanku/ohmyskills。
design-system-analyzer のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/nakanosanku/ohmyskills --skill design-system-analyzer インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/nakanosanku/ohmyskills