Community研究&データ分析github.com

david-lai-jpg/design-system-extractor-skill

Claude Codeスキル。ライブWebサイトからデザインシステムを抽出します。Firecrawl MCPを使用してブランディング、CSSトークン、タイポグラフィをスクレイピングし、構造化されたCSSカスタムプロパティ、Style Dictionary JSON、分析レポート、ビジュアルプレビューページを出力します。

design-system-extractor-skill とは?

このClaude Codeスキルは、任意のライブWebサイトを分析し、そのデザインシステムを自動的に抽出して構造化された成果物を生成します。Firecrawl MCPを利用してサイトをスクレイピングし、ブランディング要素(色、フォント)、CSSカスタムプロパティ、タイポグラフィの詳細を収集します。収集されたデータから、CSSカスタムプロパティファイル、Style Dictionary互換のJSON、詳細な分析レポート、そしてビジュアルプレビューページの4つの成果物を生成します。このスキルは、既存のWebサイトのデザインシステムを迅速に把握したり、新しいプロジェクトのデザイントークンをベースラインとして抽出したりするのに役立ちます。デザイナーやデベロッパーが手動でCSSを検査する手間を省き、一貫性のあるデザインシステムの文書化と再利用を促進します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add david-lai-jpg/design-system-extractor-skill

Installed? Explore more 研究&データ分析 skills: affaan-m/uspto-database, affaan-m/scholar-evaluation, affaan-m/literature-review · View all 6 →

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

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

ドキュメント

design-system-extractor-skill は何をしますか?

Claude Codeスキル。ライブWebサイトからデザインシステムを抽出します。Firecrawl MCPを使用してブランディング、CSSトークン、タイポグラフィをスクレイピングし、構造化されたCSSカスタムプロパティ、Style Dictionary JSON、分析レポート、ビジュアルプレビューページを出力します。

関連スキル