Birkenpapier/ai-app-cloner

코딩 에이전트에게 스크린샷 폴더를 지정하면, 그것이 화면과 내비게이션, 디자인 시스템을 파악하여 이를 재현하는 실행 가능한 Expo / React Native 프로젝트를 작성합니다.

스크린샷으로 재구축된 6개의 앱이 iOS 26 시뮬레이터에서 네이티브로 실행됩니다. 메시지를 보내고 편집하고, 항목의 이름을 제자리에 바꾸고, 보드 위에서 카드를 이동시키고, 삭제하고, 반응할 수 있습니다.

모든 것이 기기에 영구적으로 저장됩니다. 이것들은 정적인 목업(mockups)이 아니라 작동하는 앱입니다.

▶ 2분 만에 클론 실행 확인하기 · 유용하다면 별점 주기. 다음 사람이 발견하는 방법은 그것입니다.

코딩 에이전트나 MCP가 필요하지 않습니다. 모든 demo/* 브랜치는 자체적으로 부팅되는 완성된 클론입니다:

git clone https://github.com/Birkenpapier/ai-app-cloner
cd ai-app-cloner && npm install
git checkout demo/discord # 또는: meistertask · mindmeister · todoist · keep · spendee
...

작업을 추가하고, 제자리에 이름을 바꾸고, 다른 보드 열로 드래그한 다음, 탭을 새로 고칩니다. 변경 사항이 여전히 남아 있습니다. npm run verify를 실행하여 이러한 흐름(flows)을 헤드리스(headlessly)로 재생하고 모든 화면의 스크린샷을 찍으세요. 자신만의 클론을 스크린샷으로 만들 준비가 되면, Quickstart로 이동하세요.

웹사이트는 소스 코드를 제공합니다. 개발자 도구와 DOM을 열면 CSS, 폰트, 에셋 URL이 모두 그곳에 있습니다. 휴대폰 앱은 그러한 것을 전혀 제공하지 않습니다. 읽을 마크업도 없고 복사할 스타일시트도 없으며, 오직 화면의 픽셀만 있을 뿐입니다.

따라서 스크린샷이 입력값(input)입니다. 왜냐하면 그것은 탈옥(jailbreaking)하거나, 디컴파일(decompiling)하거나, 아무것도 설치하지 않고 어떤 앱에서든 캡처할 수 있는 유일한 것이기 때문입니다. 동일한 PNG 폴더는 앱이 iOS에서 실행되든 Android에서 실행되든 작동합니다.

어려운 점은 이미지에는 숫자가 없다는 것입니다. 스크린샷만으로는

이것은 JCodesMore/ai-website-cloner-template(~26k ⭐)의 모바일 버전입니다. 그리고 차이가 바로 핵심 포인트입니다:

웹 버전은 정답지(answer key)로부터 시작합니다. 여기에는 그런 것이 없기 때문에, 어려운 부분인 측정 작업이 주석이 아니라 엔진 자체가 됩니다.

사전 준비 사항: Node 18+ · 능력을 갖춘 AI 코딩 에이전트 (Claude Code가 참고 모델) · 브라우저 자동화 MCP(Chrome / Playwright / Puppeteer). 이 차이점 비교 루프는 해당 MCP를 통해 클론을 스크린샷하기 때문에, 이것 없이는 실행할 수 없습니다.

git clone https://github.com/Birkenpapier/ai-app-cloner
cd ai-app-cloner
npm install
...

그런 다음, 코딩 에이전트 내부에서 (Claude Code가 참고 설정):

• 브라우저 자동화 MCP(Chrome, Playwright 또는 Puppeteer)를 연결합니다. 차이점 비교 루프는 에이전트가 클론을 구축하는 동안 스크린샷해야 하므로 이것 없이는 실행할 수 없습니다.
• docs/screenshots/ 폴더에 스크린샷을 넣습니다. 어떤 것을 캡처하고 파일을 어떻게 명명해야 하는지(에이전트가 한 화면과 다른 화면을 구분할 수 있도록)는 docs/screenshots/README.md를 참고하세요. - /clone-app 명령어를 실행합니다.

완성된 결과물을 먼저 보고 싶으신가요? 각 demo/* 브랜치는 완전한 클론을 담고 있습니다:
git checkout demo/discord
(또는 demo/meistertask, demo/mindmeister, demo/todoist, demo/keep, demo/spendee).

/clone-app 스킬은 하나의 진실의 원천(.claude/skills/clone-app/SKILL.md에 명령어, AGENTS.md에 프로젝트 규칙)으로부터 모든 주요 AI 코딩 에이전트를 위해 생성됩니다. 소스를 수정한 후에는 node scripts/sync-skills.mjs를 실행하세요.

그리고
bash scripts/sync-agent-rules.sh
을 실행하여 에이전트별 파일을 재생성합니다.

기술을 얻기 위해 리포지토리를 클론하는 대신, /clone-app을 Claude Code 플러그인으로 설치하여 모든 프로젝트에서 사용할 수 있습니다:

claude plugin marketplace add Birkenpapier/ai-app-cloner
claude plugin install ai-app-cloner@ai-app-cloner

이렇게 하면 /clone-app이 어디서든 사용 가능해집니다. 염두에 두어야 할 점은, 이 기술(skill)이 Expo / React Native 스캐폴드 내에 구축된다는 것이므로, 반드시 이 리포지토리의 클론본(채워지는 빈 캔버스)이나 기존 Expo 프로젝트 내부에서 실행해야 합니다. 이 기술은 스캐폴드를 위한 사전 검사(pre-flight checks)를 수행하고 누락된 부분이 있는지 알려줍니다.

클론하는 리포지토리는 빈 Expo 앱입니다. /clone-app을 실행하면 다음과 같이 채워집니다:

• 화면들은 src/app/ (Expo Router)에 들어갑니다.
• 컴포넌트들은 src/components/에 들어갑니다.
• 디자인 토큰은 tailwind.config.js와 src/lib/tokens.ts에 들어갑니다.
• 에이전트의 분석(화면 맵, 네비게이션 그래프, 화면별 사양)은 docs/research/에 들어갑니다.

따라서 결과물 자체가 클론본을 담고 있는 이 프로젝트가 됩니다. 별도의 내보내기(export) 단계는 없습니다. 만약 아무것도 실행하기 전에 완성된 결과를 보고 싶다면, 각 demo/* 브랜치에는 하나의 완전한 클론이 포함되어 있습니다.

screenshots/ ──▶ cluster into ──▶ infer navigation ──▶ app-spec.json
(app states) screens & states graph (tabs/stack) (the IR)
│
...

전체 엔진은 평이한 영어로 작성된 단 하나의 파일입니다:
.claude/skills/clone-app/SKILL.md

도중에, 이 파일은 app-spec.json을 작성합니다.

, 즉 React Native를 언급하지 않는 앱 설명(토큰, 탐색, 화면, 상태)입니다. 이것은 의도된 것입니다. RN 생성기는 오늘날 이를 읽고; 로드맵상의 네이티브 타겟들도 동일한 파일을 읽을 것입니다. 그 형태는 docs/research/app-spec.schema.json에 문서화되어 있습니다.

또한, 작업 예시와 함께 제공됩니다.

상단에 있는 클론들은 실제 앱의 스크린샷으로 구축되었기 때문에, 이미 알고 있는 것과 비교하여 출력을 판단할 수 있습니다. MeisterTask와 MindMeister는 그들의 App Store 스크린샷에서 곧바로 재구축되었습니다:

각 demo/* 브랜치 (demo/discord, demo/meistertask, demo/mindmeister, demo/todoist, demo/keep, demo/spendee)는 하나의 완전한 클론을 담고 있습니다. 이것들은 배포하기 위함이 아니라 도구를 시연하기 위해 존재합니다. 법률 및 윤리(Legal and ethics)를 참조하십시오.

스크린샷만으로도 구조적으로 읽으면 데이터 모델이 암시됩니다: 목록은 테이블이고, 카드 위의 필드는 그 열이며, 상세 보기로 연결되는 행은 외래 키 힌트입니다. 백엔드 모드는 동일한 스크린샷에서 해당 모델을 읽어 클론을 위한 타입 지정된 데이터 계층을 생성합니다. 이는 선택 사항입니다. 기본 /clone-app 실행은 변경되지 않으며, /clone-app --backend=mock으로 활성화할 수 있습니다.

IR (app-spec.json)에는 선택적 dataModel 섹션(엔티티, 필드, 타입, 열거형(enums), FK 힌트)이 추가되고, 순수 Node 생성기가 이를 src/backend/generated/ 아래의 로컬 백엔드로 변환합니다:

npm run gen:backend

사용자는 Drizzle 스키마(타입 출처의 진실), drizzle-zod 검증기, 인프로세스 tRPC CRUD 라우터(인프로세스로 불리며 HTTP가 아님), 기존 온디바이스 AsyncStorage 저장소 위에 놓인 Repository 계층(이것이 영속성임), 그리고 타입 지정된 use<Table>()를 얻게 됩니다.

hooks.
이 계층(tier)에 대해 명확히 이해해야 합니다: 이 계층은 타입 지정(typed)되고, 로컬이며, 오프라인입니다. 서버 프로세스도 없고, 네트워크 연결도 없으며, 인증(auth) 과정도 없습니다.

이것이 라운드 트립(round-trips)을 수행한다는 증거:
main 브랜치에 배포된 Notes 예제는

npm run verify를 통과합니다.
이를 통해 tRPC API를 거쳐 한 행(row)을 생성하고, 이를 렌더링하며, 이 행은 새로고침 후에도 유지됩니다. 실제 앱에서도 잘 작동합니다. demo/meistertask-backend 브랜치는
MeisterTask의 App Store 스크린샷에서 역공학(reverse-engineered)된 7개 엔티티 모델을 담고 있으며, 생성된 tRPC API를 통해 댓글 게시까지 포함하여 9가지 흐름 모두에서 verify-green 상태입니다.

솔직한 한계점: 대략 **60~80%**의 스키마만 기대해야 합니다. 추론된 모델은 검토 가능한 제안(reviewable proposal)일 뿐, 진실 값(ground truth)이 아닙니다. 복구된 관계는 nullable 힌트 컬럼으로 방출되며, 실제 데이터베이스 외래 키(foreign keys)가 절대 아닙니다. 완성 보고서(completion report)는 모든 추측과 모든 격차를 명시합니다. Supabase의 실제 Postgres와 Supabase Auth, 그리고 시작 레벨 보안(Row-Level Security)이 다음 계층인 v2.1이며, 아직 배포되지 않았습니다. ROADMAP.md를 참조하십시오.

Expo SDK 56, Expo Router(파일 기반 스크린), React Native 0.85, NativeWind(Tailwind 문법), TypeScript strict.

각 단계는 동일한 app-spec.json 파일을 읽기 때문에, 새로운 대상은 새로운 코드 생성기이지, 새로운 파이프라인이 아닙니다. 자세한 내용은 ROADMAP.md를 참조하십시오.

네이티브 이전 백엔드. 실행 가능한 백엔드가 더 큰 잠금 해제(unlock) 요소이며, 이는 화면에서 추론할 수 있습니다 (목록은 테이블이고, 상세 보기로 열리는 행은 외래 키입니다). Expo는 이미 네이티브처럼 보이므로, 네이티브 코드 생성(codegen)은 상대적으로 작은 추가 개선점이며 마지막에 구현됩니다.

이는 픽셀로부터 앱을 리버스 엔지니어링하므로, 여기서 정확도가 어떻게 나오는지 설명합니다. 모든 제한 사항은 실제이며 의도적으로 명시되었고, 이를 보완하는 내용과 함께 제시되었습니다:

스크린샷 모드에서 정확한 값 없음 → diff 루프가 구축된 화면을 렌더링하고, 이를 사용자의 스크린샷과 비교하여 불일치(delta)를 반복적으로 수정합니다. 단 한 번 추측하는 대신에입니다.*(웹 모드는 DOM에서 정확한 값을 직접 읽습니다.)자산이 픽셀에 내장됨 → 아이콘은 lucide로 재창조되어 육안으로 일치시키고, 사진과 로고는 크롭된 라스터 이미지입니다. 어떤 것도 원본 파일로 통과되지 않습니다.(웹 모드는 실제 자산을 다운로드합니다.)*커버리지가 캡처한 것과 같음 → 스크린샷을 찍지 않은 화면이나 상태는 클론할 수 없으므로, 완성 보고서에는 정확히 커버되지 않은 부분이 나열됩니다.기본 실행은 백엔드가 없음 → 데이터는 실제이지만 장치에 있으며 재로드 시에도 유지됩니다. 모든 서버 호출은 // TODO: wire backend으로 표시된 타입이 지정된 스텁입니다.

. v2.0은 화면에서 타입이 지정된 로컬 데이터 레이어를 생성하는 옵트인 백엔드 모드를 추가합니다 (/clone-app --backend=mock); 인증 및 RLS가 적용된 Supabase의 실제 Postgres 백엔드는 다음 단계이며, v2.1입니다.

사용자가 소유한 앱, 클론할 권한이 있는 앱, 또는 학습 및 프로토타이핑을 위해 클론하는 앱을 복제하세요. 다른 사람의 앱 클론본을 자신의 제품인 것처럼 제시하지 말고, 상표권, 앱스토어 규칙, 그리고 원작의 약관을 존중해야 합니다. 이 도구를 사용하여 구축한 결과물에 대한 책임은 사용자 본인에게 있습니다.

이 도구는 브랜드 자산(brand assets)이 아닌 레이아웃과 동작(behavior)을 재현합니다. 아이콘은 복사되는 것이 아니라 다시 생성되며, 앱의 원본 이미지나 로고 파일을 절대 재배포하지 않습니다. 특정 상업용 앱의 모습을 픽셀 단위로 완벽하게 재현하는 것은 여전히 저작권, 트레이드 드레스(trade-dress), 그리고 디자인 특허와 관련된 문제를 야기할 수 있으므로, 책임감 있게 클론하고 명명된 제품의 클론본을 게시하기 전에 법률 자문을 받으세요.

기여는 진심으로 환영하며, 유용한 작업 중 상당 부분은 코드가 아닙니다. 가장 효과적인 방법은 특정 앱에 대해 /clone-app 명령어를 실행한 후, 어떤 부분이 작동했고 무엇이 잘못되었는지 에이전트 검증 보고서(agent verification report)를 제출하는 것입니다. 나머지는 CONTRIBUTING.md 파일을 참고하세요. 리뷰 시 친절하게 해주세요. 우리 모두는 자 없이 스크린샷을 측정하는 법을 배우고 있으니까요. 💜

MIT 라이선스이며, LICENSE 파일을 참조하세요. Birkenpapier가 제작했습니다.