HTMLPicker - HTML カラーピッカー

要素をピックして色（HEX, RGB, HSL）、CSS、フォント、レイアウトを抽出。AIプロンプトを生成。

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/ で開発をサポートしてください