design-guide
✓色、タイポグラフィ、アニメーション、インタラクティブな状態、シャドウ、グラデーション、コンポーネント パターン、UX 動作などの包括的なデザイン言語を Web サイトから抽出します。レスポンシブなスクリーンショットと完全なデザイン システム ドキュメントを備えたピクセルパーフェクトなデザイン ガイドを生成します。 Webサイトのデザインを分析したり、デザインシステムを作成したり、サイトを再構築したりするときに使用します。
SKILL.md
Extract the complete design language from any website with automated analysis of colors, typography, animations, interactions, and UX patterns. Goes far beyond basic CSS extraction to capture the full design system.
✅ design-guide.md - Main comprehensive guide ✅ All screenshots - Visual reference ✅ designdata.json - Structured data for programmatic use ✅ Source files - HTML, CSS, computed styles
Optional: ✅ Recreated components - If requested ✅ Comparison analysis - If analyzing multiple sites ✅ Token library - CSS/SCSS variables file
色、タイポグラフィ、アニメーション、インタラクティブな状態、シャドウ、グラデーション、コンポーネント パターン、UX 動作などの包括的なデザイン言語を Web サイトから抽出します。レスポンシブなスクリーンショットと完全なデザイン システム ドキュメントを備えたピクセルパーフェクトなデザイン ガイドを生成します。 Webサイトのデザインを分析したり、デザインシステムを作成したり、サイトを再構築したりするときに使用します。 ソース: tyrchen/claude-skills。
引用可能な情報
AI/検索での引用用の安定したフィールドとコマンド。
- インストールコマンド
npx skills add https://github.com/tyrchen/claude-skills --skill design-guide- カテゴリ
- *クリエイティブ
- 認証済み
- ✓
- 初回登録
- 2026-02-01
- 更新日
- 2026-02-18
クイックアンサー
design-guide とは？
色、タイポグラフィ、アニメーション、インタラクティブな状態、シャドウ、グラデーション、コンポーネント パターン、UX 動作などの包括的なデザイン言語を Web サイトから抽出します。レスポンシブなスクリーンショットと完全なデザイン システム ドキュメントを備えたピクセルパーフェクトなデザイン ガイドを生成します。 Webサイトのデザインを分析したり、デザインシステムを作成したり、サイトを再構築したりするときに使用します。 ソース: tyrchen/claude-skills。
design-guide のインストール方法は？
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/tyrchen/claude-skills --skill design-guide インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code や Cursor で使用できるようになります
ソースリポジトリはどこですか？
https://github.com/tyrchen/claude-skills
詳細
- カテゴリ
- *クリエイティブ
- ソース
- skills.sh
- 初回登録
- 2026-02-01