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 키로 전송합니다. 💡 개발 지원 HTMLPicker은 무료로 사용할 수 있습니다. 도움이 되셨다면 htmlpicker.com/donate/ 에서 개발을 지원해 주세요