HTMLPicker 作成者: ExileCode

HTMLPicker はウェブページ上のあらゆる要素をピックアップし、CSS、色、フォント、レイアウトシグナルを抽出——Cursor、Copilot、Claude Code、Codex 用の AI 実装プロンプトを生成します。

🔑 主な機能

• 要素ピッカー — あらゆる要素をクリックして色（HEX/RGB/HSL）、フォント、CSS スタイル、セレクター、HTML コードを表示
• AI プロンプト生成 — デザインスタイルを Cursor、Copilot、Claude Code、Codex 用の実装プロンプトに変換
• ページパレット — ワンクリックでページ全体のカラースキームを抽出、頻度分析付き
• スクリーンショット — 可視領域と全ページスクロールキャプチャ
• デザインエクスポート — 色、フォント、スペーシングを JSON、CSS、Markdown、または AI コンテキストパックとしてエクスポート
• リアルタイムスタイル変更 — 任意のページで色やフォントをリアルタイムに変更
• DOM ナビゲーション — 親/子/兄弟要素の視覚的階層を閲覧
• ページ編集 — contenteditable を切り替えてページテキストを直接編集
• ダーク/ライトテーマ — システムテーマに自動適応
• デュアル UI — クイックアクセス用ポップアップ、詳細ワークスペース用サイドバー

📋 使い方

• HTMLPicker アイコンをクリックしてサイドバーまたはポップアップを開く
• 「Pick」をクリックし、ページ上の要素にホバーしてクリック
• すべてのデザイン情報を表示：色、フォント、CSS、HTML、セレクター、ボックスモデル
• AI でページのプロフェッショナルなデザインスタイルを分析
• すべてを AI プロンプトまたは構造化デザインコンテキストとしてエクスポート

🎯 こんな方に最適

• CSS を検査しデザイン値を抽出するフロントエンド開発者
• Cursor、Copilot、Claude Code、Codex 用の AI プロンプトを生成するバイブコーダー
• 既存のビジュアルシステムを AI/開発チームに伝えるデザイナー
• DevTools を開かずにデザイン仕様を取得するプロダクトマネージャー
• 生成コードでページスタイルを複製するノーコードビルダー

🌐 多言語サポート

18 言語に対応：English, 简体中文, 繁體中文, 日本語, 한국어, Deutsch, Français, Español, Português, Italiano, Русский, Nederlands, Polski, Türkçe, العربية, ไทย, Tiếng Việt, Bahasa Indonesia

🔒 プライバシー重視

HTMLPicker は個人データを一切収集しません。すべての処理はブラウザ内でローカルに行われます。アカウント不要。トラッキングなし。オプションの AI 分析機能は、ユーザーが明示的にトリガーしたときのみ圧縮されたデザイン証拠を自分の API キー（BYOK）に送信します。

💡 開発をサポート

HTMLPicker は無料でご利用いただけます。役に立った場合は、htmlpicker.com/donate/ で開発をサポートしてください