website-design-systems-mcp は何をしますか？
任意のウェブサイトから完全なデザインシステムを抽出し、AI対応のskill.mdファイルを生成します。
概要
このスキルは、ウェブサイトのデザインシステムを分析し、カラーパレット、タイポグラフィ、スペーシング、コンポーネントスタイルなどの情報を構造化された形式で抽出します。抽出結果は、AIエージェントが直接解釈できるskill.mdファイルとして出力されるため、デザインの一貫性を保ちながら効率的な開発が可能です。
使用方法
- 対象のウェブサイトURLを指定します。
- スキルが自動的にデザインシステムを抽出します。
- 生成された
skill.mdファイルをプロジェクトに追加します。
対応プラットフォーム
- Claude Code
- Cursor
- Codex
- その他のAIエージェント
抽出情報
- カラーパレット: プライマリ、セカンダリ、アクセント、背景、テキストカラー
- タイポグラフィ: フォントファミリー、サイズ、ウェイト、ラインハイト
- スペーシング: パディング、マージン、グリッドシステム
- コンポーネント: ボタン、カード、フォーム、ナビゲーションなどのスタイル定義
注意事項
- 抽出はクライアントサイドのCSSに基づきます。
- 動的に読み込まれるスタイルは抽出されない場合があります。
- 生成されたファイルはプロジェクトの要件に応じて編集してください。