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 直接編輯頁面文字
• 深色/淺色主題 — 自動適配系統主題
• 雙介面 — 彈出視窗快速存取，側邊欄詳細工作區

📋 使用方式

• 點擊 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/ 支持其開發