HTMLPicker - HTML 컬러 피커 제작자: 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 전환으로 페이지 텍스트 직접 편집
• 다크/라이트 테마 — 시스템 테마에 자동 적응
• 듀얼 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/ 에서 개발을 지원해 주세요