website-design-systems-mcp は何をしますか？
🎨 Webサイトから完全なデザインシステムを抽出し、AI対応のskill.mdファイルを生成して、デザイン要素を効率的に再現します。
概要
このスキルは、指定されたWebサイトのデザインシステム（カラー、フォント、スペーシングなど）を自動解析し、AIエージェントが直接利用できる構造化されたskill.mdファイルを出力します。
特徴
- カラーパレット抽出: サイトで使用されている主要色とアクセント色を自動検出
- タイポグラフィ解析: フォントファミリー、サイズ、行間などを取得
- スペーシングシステム: marginやpaddingの一貫性を分析
- エフェクト: シャドウ、ボーダー半径、トランジションなども収集
- AI対応出力: 生成されたskill.mdをAIエージェントが直接読み取り可能
対応プラットフォーム
- Claude Code
- Cursor
- その他MCP対応ツール
使用方法
- 解析したいWebサイトのURLを指定します。
- スキルが自動的にデザインシステムを抽出します。
- 生成されたskill.mdファイルをAIエージェントに読み込ませます。
- AIが抽出されたデザイン要素を使用して、新しいプロジェクトを開始できます。
出力例
# Design System: ExampleSite
## Colors
- Primary: `#1a73e8`
- Secondary: `#34a853`
- Background: `#ffffff`
- Text: `#202124`
## Typography
- Font Family: 'Roboto', sans-serif
- Heading Size: 2.5rem
- Body Size: 1rem
注意事項
- 抽出は公開されているCSSやインラインスタイルに基づきます。
- JavaScriptによる動的スタイルは一部取得できない場合があります。
- 生成されたskill.mdはプロジェクトの
.ai/skills/ディレクトリに保存することを推奨します。