HTMLPicker - HTML 取色器

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 直接編輯頁面文字 • 深色/淺色主題 — 自動適配系統主題 • 雙介面 — 彈出視窗快速存取，側邊欄詳細工作區 📋 使用方式 • 點擊 HTMLPicker 圖示開啟側邊欄或彈出視窗 • 點擊「拾取」然後懸停並點擊頁面上的任意元素 • 查看所有設計資訊：顏色、字型、CSS、HTML、選擇器、盒模型 • 使用 AI 分析頁面的專業設計風格 • 將所有內容匯出為 AI 提示詞或結構化設計上下文 🎯 適用場景 • 前端開發者檢查 CSS 和提取設計值 • Vibe 編碼者為 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/ 支持其開發