100개의 인기 앱을 역설계한 마크다운 디자인 사양서: 클로드 UI 클로닝용

한 개발자가 인기 앱 50개를 역공학하여 구조화된 마크다운 디자인 스펙으로 만들고 Claude에 입력하여 UI를 재구축했습니다. 반복 작업 후 복제 정확도를 높이는 몇 가지 중요한 패턴을 발견했으며, 100개 앱이 포함된 저장소를 게시했습니다.

Claude가 UI 복제를 완벽하게 하는 방법

• 범위가 아닌 정확한 값: #1A1A1A가 효과적입니다. "dark gray"는 화면마다 다른 다섯 가지 회색을 생성합니다.
• 상태 커버리지를 사전에: 모든 상태(비어 있음, 로딩 중, 오류, 채워짐)를 나열하면 Claude가 자체 상태를 만들어내는 것을 방지합니다.
• 간격을 척도로 사용: 요소별 픽셀 주석 대신 4/8/16/24 간격 시스템을 사용하여 더 일관된 레이아웃을 만듭니다.
• 내비게이션을 그래프로: 명시적인 화면 간 전환으로 버튼의 목적지를 추측할 필요가 없습니다.

일정 지점을 넘어서면 긴 설명문이 오히려 출력을 악화시켰습니다. 분량보다는 간결함과 정확성이 더 중요합니다.

저장소 내용

공개 저장소인 github.com/Meliwat/awesome-ios-design-md에는 100개의 앱이 포함되어 있으며, 각각 세 가지 사양 수준(빠른 참조, 표준 빌드, 전체 픽셀 수준 복제)을 제공합니다. 모든 사양은 마크다운 형식이며 MIT 라이선스로, 종속성이 없습니다. 사양을 Claude에 넣으면 더 예측 가능한 UI 출력을 얻을 수 있습니다.

대상 사용자

Claude를 사용하여 UI 구성 요소를 생성하거나 복제하는 개발자, 특히 iOS 또는 일반 앱 디자인을 다루는 경우.