style-extractor — ウェブのスタイルと動的表現を抽出するSkill

Tool
style-extractor — ウェブのスタイルと動的表現を抽出するSkill

style-extractor — ウェブのスタイルと動的表現を抽出するSkill

style-extractorは、実際のウェブページから色・フォント・間隔・コンポーネント構造などの「スタイル証拠」と、実行時に発生するアニメーションや動的効果（timing、easing、keyframes、遅延チェーン、JS駆動の動作手がかり）を自動で抽出するSkillです。出力は設計者向けのスタイルガイド（Markdown）で、オプションでHTMLプロトタイプも生成します。Chrome DevToolsのMCP経由で実ブラウザを操作し、ネットワークやトレース、スクリプト実行を組み合わせて高精度に証拠を収集します。

https://github.com/Lucent-Snow/style-extractor

概要

style-extractorは「サイトの見た目（style）＋動き（motion）」を設計証拠として抽出するためのSkillです。実ブラウザ（Chrome）をデバイスとして制御するためにchrome-devtools-mcpを必須依存にし、ページの計算済みスタイル、レイアウト、カラー、フォント、コンポーネント境界や状態遷移マトリクスを収集します。さらにランタイムで発生するアニメーション情報（タイミング関数、キーフレーム、遅延チェーンやJSによる駆動の痕跡）も補完して、設計者が再利用できるMarkdownベースのスタイルガイドや任意のHTMLプロトタイプに変換できます。実行はNode.js（npx）とCodex CLIなどMCP対応クライアントから行います。

GitHub

リポジトリの統計情報

  • スター数: 35
  • フォーク数: 1
  • ウォッチャー数: 35
  • コミット数: 3
  • ファイル数: 4
  • メインの言語: JavaScript

主な特徴

  • 実ブラウザ（Chrome）を制御して取得するため、表示上の「実際の」スタイルを抽出
  • CSS/DOMだけでなくランタイムアニメーション（timing, easing, keyframes, delay chain, JS駆動）を収集
  • 抽出結果をMarkdown形式のスタイルガイドに変換、必要に応じてHTMLプロトタイプを生成
  • Codex CLIなどMCP対応エージェントと連携する設計で自動化に向く

技術的なポイント

style-extractorは、「観測可能な実行環境」を前提にしている点が最大の技術的特徴です。DevToolsのMCP（chrome-devtools-mcp）を介してChromeをリモート操作し、ページロード時のネットワークやレンダリングトレース、スクリーンショット、スクリプト実行を組み合わせてデータを収集します。具体的には計算済みスタイル（getComputedStyle）からカラー、フォント、マージン／パディングといったレイアウト指標を取り出し、DOMノードのバウンディングボックスでコンポーネント候補を推定します。動的効果はCSSのtransition/animationを解析するだけでなく、Web Animations APIやrequestAnimationFrame、MutationObserver、イベントリスナーの有無、トレース上のTimelineイベントなどを手掛かりに、JSで駆動されるアニメーションの存在やタイミングを補完します。抽出したトークン（色・サイズ・タイミングなど）は設計トークンへ正規化し、Markdownのスタイルガイドに整形。オプションのHTMLプロトタイプでは抽出トークンをCSS変数にマッピングして再現可能なサンプルを出力します。実運用ではログインや動的ロード、レスポンシブ切替のシナリオをどう再現するかが課題で、MCPを使ったシーケンス実行（クリックやホバーの自動化）やフルページトレース取得が精度向上に寄与します。

プロジェクトの構成

主要なファイルとディレクトリ：

  • README.md: file
  • SKILL.md: file
  • references: dir
  • scripts: dir

まとめ

実ブラウザ観測でスタイルと動的表現の「証拠」を自動抽出する実用的なSkill。

リポジトリ情報：

READMEの抜粋：

style-extractor

这是一个用于“网站风格 + 动效”证据提取的 Skill：从真实网页中提取颜色/字体/间距/组件/状态矩阵，并在网站存在动态效果时，补全运行时动效证据（timing、easing、keyframes、delay chain、JS 驱动动效线索）。输出为风格指南（Markdown），可选生成 HTML 原型。

依赖

  • Node.js（需要能运行 npx）
  • Chrome（Stable）
  • Codex CLI（或任何支持 MCP 的客户端）
  • 必装：chrome-devtools-mcp（Chrome DevTools MCP）：让 agent 能控制/检查真实 Chrome，抓网络请求、截图、运行脚本、录 trace 等

安装

1) 安装 Chrome DevTools MCP（chrome-devtools-mcp）

具体教程不列出

2) 安装本 Skill

  1. 直接从仓库下载 zip（压缩包）
  2. 解压并放到 Codex skills(claude code同理) …