어떤 접점에서든 UI를 production-ready
React/Vue/Svelte 코드로
엘리먼트를 클릭하세요. 에디터로 탭하세요. CI에 파이프하세요. 브라우저든 AI 에디터든 터미널이든 Claude Code든, 빌드하는 곳으로 찾아갑니다.
왜 Codelifter인가?
단순 스크린샷 분석이 아닌 실제 DOM 구조를 기반으로 정확한 코드를 생성합니다.
DOM + AI 하이브리드
실제 렌더된 DOM을 분석해 정확한 HTML 구조를 파악하고, Qwen이 전처리 후 Claude가 최종 React 코드를 생성합니다.
CSS 애니메이션 지원
keyframes, transitions, Web Animations API를 모두 감지하여 CSS Modules 또는 Tailwind animate 형태로 변환합니다.
온디바이스 AI
Chrome의 내장 Gemini Nano를 활용해 DOM 요소를 로컬에서 분류합니다. 인터넷 없이도 기본 변환이 가능합니다.
3단계로 완성
복잡한 설정 없이 즉시 시작할 수 있습니다.
확장 설치
Chrome 웹스토어에서 무료로 설치합니다.
요소 선택
변환하고 싶은 웹 페이지 요소를 클릭합니다.
코드 복사
AI가 생성한 React 컴포넌트를 바로 사용합니다.
빌드하는 곳으로 찾아갑니다
엘리먼트를 클릭하세요. 에디터로 탭하세요. CI에 파이프하세요. Codelifter는 동일한 DOM→코드 엔진을 여덟 접점 모두에서 그대로 굴립니다. 코드는 8개 전부 Live, 마켓 게시는 진행 중인 것도 있습니다 — 카드에 표시.
Browser Extension
Click users — designers, marketers, freelancers, full-stack
Pick an element on a real page, get production-ready code in 30 seconds.
MCP Server
Claude Code / Cursor users (AI editor chat)
Let an AI agent extract a page directly and write the code.
CLI
DevOps / CI engineers / platform teams
Catch UI regressions on production pages from CI, every PR.
SDK (Node.js)
Tool builders / SaaS developers
Embed Codelifter into my own tool with one function call.
Claude Code Skill
Claude Code dotfiles users
Turn clipboard JSON or MCP result into a tsx file with one slash command.
VSCode / Cursor Extension
Full-time IDE users (backend / full-stack)
Lift a URL into the active editor without leaving the IDE.
Figma Plugin
no-code product / UI designers
Reverse-engineer a live site into a Figma library for benchmarking.
Raycast Extension
Mac power users (Raycast as primary launcher)
Cmd+Space, type lift <url>, get React in clipboard.
어떻게 연결되어 있나
여덟 접점 모두가 하나의 페어링 토큰, 하나의 Vercel + Supabase 백엔드, 하나의 Tier 2 컴포넌트 라이브러리 감지기를 공유합니다. Browser Extension이 100% 보존의 원천이고, CLI/SDK/Skill/MCP/IDE/Figma/Raycast는 headless 모드에서 ~95% 보존으로 fallback합니다.
User
├─ click ───────► Browser Extension (1/8) ─┐
├─ chat ───────► MCP Server (2/8) ─┤
├─ shell ───────► CLI (3/8) ─┤
├─ embed ───────► SDK (4/8) ─┤
├─ /codelifter ───────► Claude Code Skill (5/8) ─┤
├─ palette ───────► VSCode / Cursor (6/8) ─┤
├─ design ───────► Figma Plugin (7/8) ─┤
└─ Cmd+Space ───────► Raycast Extension (8/8) ─┘
│
shared pairing token ─────────┤
shared backend (Vercel+Supabase)여덟 접점 위에 다음으로 쌓일 것
여덟 접점은 모두 Live이고, v1.0.5는 각 접점을 더 깊게 만듭니다 — Figma 이미지 fill + absolute layout + Tier 2 component swap, watch webhook 알림, VSCode extractTab 명령, nativewind + shadcn-flutter 매핑, 신규 패키지 각각의 PostHog 직접 발사. VSCode/Figma/Raycast 정식 마켓 게시도 v1.0.5 에서 진행합니다.
에디터에서 바로 사용하기
복사-붙여넣기를 건너뛰세요. AI 코딩 도구에서 Codelifter를 직접 연결하세요.