마크다운으로 작성된 200개 이상의 앱 디자인 명세서 – 클로드나 커서에 드래그하면 정확한 UI 클론 생성

Claude에게 UI를 글로 설명하면 비슷하지만 정확하지 않습니다. 색상이 다르고, 간격이 다르고, 상태가 누락됩니다. 해결책은 설명 대신 정확한 명세서를 제공하는 것입니다. 한 개발자가 200개 이상의 인기 앱을 구조화된 마크다운 디자인 명세서로 정리한 목록을 유지 관리하고 있으며, spectr.to/gallery에서 확인할 수 있습니다.

각 명세서에 포함된 내용

• 색상의 정확한 16진수 코드
• 타이포그래피 스케일 정의
• 간격 값 (패딩, 마진, 갭)
• 모든 화면 상태 (로딩, 빈 상태, 오류 등)
• 화면 전환을 보여주는 탐색 그래프
• SwiftUI, Jetpack Compose, Expo 렌더러에 대한 별도 명세서

각 명세서는 종속성이 없는 마크다운 파일입니다. Claude, Cursor 또는 모든 AI 에이전트에 바로 드래그하면 추측하는 대신 실제 값을 사용합니다.

사용 방법

spectr.to/gallery의 갤러리를 둘러보며 앱을 찾습니다. 대상 프레임워크에 맞는 마크다운 명세서를 다운로드(또는 복사)합니다. 파일을 AI 에이전트의 컨텍스트에 드래그하거나 인라인으로 붙여넣습니다. 그러면 에이전트가 정확한 명세서를 사용하여 UI 코드를 생성합니다.

유지 관리자는 다음 두 가지 사항에 대한 피드백을 적극적으로 구하고 있습니다: 추가할 앱, 그리고 명세서를 파일로 드래그하는 것과 인라인으로 붙여넣는 것 중 어떤 방식이 더 나은 결과를 제공하는지입니다. 이에 대해 의견이 분분하므로 실제 사용자의 의견을 환영합니다.