50개의 인기 앱이 클로드가 읽을 수 있는 디자인 명세서로 리버스 엔지니어링됨: UI 클로닝을 위한 핵심 패턴

u/meliwat는 몇 주간 50개의 인기 앱을 역설계하여 구조화된 마크다운 디자인 스펙으로 만들고, 이를 Claude에 입력해 UI를 재구축했습니다. 거의 완벽한 클론과 오차가 있는 출력의 차이는 대량으로 관찰된 몇 가지 구체적인 관행에서 비롯되었습니다.

Claude가 UI 클론을 완벽하게 구현한 비결

• 범위가 아닌 정확한 값. #1A1A1A가 작동합니다. "어두운 회색"은 다섯 화면에서 다섯 가지 회색을 생성합니다.
• 사전에 상태를 모두 포함. 모든 상태(빈 상태, 로딩 중, 오류, 채워짐)를 나열하면 Claude가 임의로 상태를 만들지 않습니다.
• 개별 요소 픽셀 대신 간격 척도 사용. 4/8/16/24 간격 시스템은 모든 간격을 일일이 지정하는 것보다 더 일관된 레이아웃을 생성했습니다.
• 네비게이션을 그래프로 표현. 화면 간 전환을 명시적으로 지정하면 "이 버튼이 어디로 가는지" 추측하는 일이 없어졌습니다.

도움이 되지 않은 것

긴 설명. 일정 수준 이상에서는 단어가 많을수록 출력이 더 나빠졌습니다. 스펙은 간결하게 유지하세요.

사용 가능한 리소스

전체 컬렉션은 GitHub의 github.com/Meliwat/awesome-ios-design-md에서 오픈소스로 제공됩니다. 각 앱은 빠른 참조, 표준 빌드, 전체 픽셀 수준 클론의 세 가지 스펙 깊이로 제공됩니다. 모두 마크다운, MIT 라이선스, 의존성 없음.

커뮤니티 질문

저자가 묻습니다: Claude로 UI 클론을 해본 적이 있다면, 이 목록에 빠진 패턴을 발견했나요? 다음에 추가할 만한 앱은 무엇인가요?