Codelifter — DOM → React·Tailwind CSS 변환기

웹 페이지를 React/Vue/Svelte + Tailwind 코드로 클릭 한 번에 변환. 월 20회 무료. Pro 요금제 출시 예정.

═══════════════════════════════════════════════════════════════ NOTICE — Pro plan launching soon. All users currently get the full Free tier (20 conversions/month). ═══════════════════════════════════════════════════════════════ Convert any web page element into clean React + Tailwind CSS code — instantly. Codelifter is a Chrome extension that turns any website element into production-ready React, Vue 3, or Svelte 5 components. Click an element on any page, and get a working component in seconds. No API key. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ WHAT IS CODELIFTER? A DOM-to-code converter. It captures a page's structure, computed styles, and animations, then generates framework-idiomatic code via server-side Claude + Qwen AI. WHO IS IT FOR? • Frontend developers replicating UI patterns from reference sites • AI-assisted coders using Claude Code, Cursor, Windsurf, Zed (via MCP) • Freelancers and agencies starting client projects from real working code WHY NOT JUST A SCREENSHOT? Screenshots give you a picture. Codelifter gives you the DOM tree, computed styles, pseudo-elements, CSS animations, and detected JS libraries — with PII automatically masked before transmission. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ HOW IT WORKS 1. Click the Codelifter icon → side panel opens 2. Pick any element — a button, card, nav, or entire page 3. Server-side AI returns annotated React + Tailwind code 4. Copy, download as ZIP, or send to Claude Code / Cursor / Windsurf ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ KEY FEATURES ▸ Smart DOM Extraction — computed styles, pseudo-elements, layout data. Browser defaults filtered automatically. ▸ CSS Animation Support — @keyframes, transitions, Web Animations API. ▸ Tier 2 Library Detection (16 libraries) — Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. Generated code signals the library so your AI editor preserves it. ▸ Multi-Framework Output — React (JSX), Vue 3 (Composition API), Svelte 5 (runes). All Tailwind. ▸ Privacy-First — PII (email, phone, credit card, Korean RRN) masked on-device before transmission. No tracking, no analytics, no storage. ▸ On-Device AI Preprocessing — Chrome Gemini Nano / Edge Phi-4-mini ▸ Powered by Claude + Qwen — server-side. No API key. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ AI EDITOR INTEGRATION (v1.0.2) ▸ Claude Code Skill — type /codelifter to convert the active browser tab ▸ MCP Server — Cursor, Windsurf, Zed, VS Code Copilot via local WebSocket (ws://127.0.0.1:12307) ▸ CLI — npx codelifter extract, for CI and GitHub Actions ▸ SDK — @codelifter/sdk for Node.js ▸ Security — crypto.timingSafeEqual pairing token, 127.0.0.1-only bind, 3-strike rate limit ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ PRO (COMING SOON): CDP Mode (pixel-perfect styles, CSS variables, media queries), design token extraction (LAB color clustering, spacing scales), responsive breakpoints (7 viewports), snapshot-diff runtime animation detection, visual component detection, behavior fingerprinting. PLANS • Free — 20 conversions/month, available now (no credit card) • Pro — $14/month, 70 conversions/month, launching soon ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LIMITATIONS Canvas/WebGL pages (Figma, Google Maps), complex D3.js charts, drag-and-drop interactions, cross-origin iframes, and runtime JS animations (GSAP, Framer Motion) are not fully reproduced — but detected libraries are flagged for your AI editor. PRIVACY DOM and CSS data of the page you convert is sent to our AI server via Vercel proxy, used only for code generation, never stored, never sold. MCP local server binds to 127.0.0.1 with token auth. Full policy: https://codelifter.vercel.app/privacy REQUIREMENTS Chrome 114+ (Gemini Nano needs 131+). No API key. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ SUPPORT Email: jh0580jh@tididig.com ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ━━━━━━━━ 한국어 (Korean) ━━━━━━━━ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ═══════════════════════════════════════════════════════════════ 안내 — Pro 요금제는 곧 출시됩니다. 현재 모든 사용자는 Free(월 20회) 전체 기능을 사용하실 수 있습니다. ═══════════════════════════════════════════════════════════════ 웹 페이지의 어떤 요소든 클릭 한 번으로 React + Tailwind CSS 코드로 변환. Codelifter는 DOM→코드 변환 Chrome 확장입니다. 웹사이트의 아무 요소나 선택하면 프로덕션 수준의 React, Vue 3, Svelte 5 컴포넌트가 몇 초 안에 생성됩니다. API 키 불필요. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Codelifter가 뭔가요? DOM 구조, computed 스타일, 애니메이션, 검출된 JS 라이브러리를 서버 사이드 Claude + Qwen AI로 분석하여 프레임워크에 맞는 코드로 생성하는 DOM→코드 변환 도구입니다. 누구에게 유용한가요? • 참고 사이트의 UI 패턴을 빠르게 복제하려는 프론트엔드 개발자 • Claude Code, Cursor, Windsurf, Zed 등 AI 에디터 사용자 (MCP 지원) • 실제 작동하는 코드로 클라이언트 프로젝트를 시작하려는 프리랜서·에이전시 스크린샷 툴과 뭐가 다른가요? 스크린샷은 이미지만 주지만, Codelifter는 DOM 트리, computed 스타일, 의사 요소, CSS 애니메이션, 검출된 JS 라이브러리를 함께 제공합니다. PII는 전송 전 기기 내에서 자동 마스킹됩니다. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 사용 방법 1. Codelifter 아이콘 클릭 → 사이드 패널 열림 2. 요소 선택 — 버튼, 카드, 내비, 전체 페이지 3. 서버 AI가 주석 달린 React + Tailwind 코드 생성 4. 복사, ZIP 다운로드, 또는 Claude Code / Cursor / Windsurf로 전송 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 주요 기능 ▸ 스마트 DOM 추출 — computed 스타일, 의사 요소, 레이아웃. 브라우저 기본값 자동 제거 ▸ CSS 애니메이션 지원 — @keyframes, 트랜지션, Web Animations API ▸ Tier 2 라이브러리 검출 (16종) — Framer Motion, Motion One, GSAP, AOS, ScrollMagic, Locomotive Scroll, Lenis, Three.js, Spline, Lottie, Rive, Video.js, Plyr, MUX Player, AutoAnimate, React Transition Group. 생성 코드에 라이브러리 보존 힌트 포함 ▸ 멀티 프레임워크 — React (JSX), Vue 3 (Composition API), Svelte 5 (룬). 모두 Tailwind ▸ 프라이버시 우선 — PII(이메일·전화·카드·주민번호) 기기 내 자동 제거. 트래킹·분석·저장 없음 ▸ 온디바이스 AI 전처리 — Chrome Gemini Nano / Edge Phi-4-mini ▸ Claude + Qwen 기반 — 서버 사이드, API 키 불필요 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ AI 에디터 통합 (v1.0.2) ▸ Claude Code Skill — /codelifter 입력으로 활성 탭 변환 ▸ MCP 서버 — Cursor, Windsurf, Zed, VS Code Copilot (로컬 WebSocket ws://127.0.0.1:12307) ▸ CLI — npx codelifter extract, CI / GitHub Actions용 ▸ SDK — @codelifter/sdk, Node.js 통합 ▸ 보안 — timingSafeEqual 페어링 토큰, 127.0.0.1 전용 bind, 3-strike rate limit ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ Pro (곧 출시): CDP 모드 (픽셀 단위 스타일, CSS 변수, 미디어 쿼리), 디자인 토큰 추출 (LAB 색상 클러스터링, 간격 스케일), 반응형 브레이크포인트 (7개 뷰포트), 스냅샷 diff 런타임 애니메이션 검출, 시각적 컴포넌트 감지, 행동 핑거프린트. 요금제 • Free — 월 20회, 지금 이용 가능 (신용카드 불필요) • Pro — $14/월, 월 70회, 곧 출시 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 제한 사항 Canvas/WebGL 페이지(Figma, Google Maps), 복잡한 D3.js 차트, 드래그앤드롭, cross-origin iframe, 런타임 JS 애니메이션(GSAP, Framer Motion)은 완전 재현되지 않습니다. 다만 검출된 라이브러리는 AI 에디터에 힌트로 전달됩니다. 개인정보 변환을 요청한 페이지의 DOM/CSS는 Vercel 프록시를 통해 AI 서버에 전송되어 코드 생성에만 사용되며, 저장·판매되지 않습니다. MCP 로컬 서버는 127.0.0.1 전용 bind + 토큰 인증. 전체 정책: https://codelifter.vercel.app/privacy 요구사항 Chrome 114+ (Gemini Nano는 131+). API 키 불필요. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 문의 이메일: jh0580jh@tididig.com