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 导航 — 浏览父/子/兄弟元素的可视化层级
• 深色/浅色主题 — 自动适配系统主题
• 双界面 — 弹窗快速访问，侧边栏详细工作区

📋 使用方式

• 点击 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/ 支持其开发