Spectr: 픽셀 완벽한 클로드 클론을 위해 화면 녹화에서 앱 스펙을 작성하는 MCP

u/thanpolas의 게시물 "비결은 프롬프트가 아니라 스펙이었다"는 Claude로 iOS 앱을 클론하는 많은 개발자들에게 공감을 불러일으켰습니다. 병목은 프롬프트가 아니라 UI를 설명하는 것이었습니다. 각 화면마다 약 30분의 설명이 필요했고, Claude는 여전히 잘못 이해하여 화면당 세 번의 반복이 필요했습니다.
Spectr을 소개합니다 — iOS 앱의 .mp4 또는 .mov 녹화를 받아 자동으로 spec.md를 출력하는 MCP(Model Context Protocol) 도구입니다. Vision 처리는 Claude 구독을 통해 실행됩니다(별도 API 키 불필요). 각 녹화는 처리하는 데 5~10분이 걸립니다.
스펙이 포함하는 내용
생성된 스펙은 7개 섹션으로 구성된 문서로 다음을 다룹니다:
- 정확한 16진수 색상 코드
- 정확한 글꼴 두께
- 정확한 간격 값
- 모든 화면 상태
- 모든 전환
- 구성 요소 인벤토리
- 탐색 그래프
이 정도의 세부 수준은 Claude의 /goal 모드가 무인으로 픽셀 완벽한 클론을 생성할 수 있을 만큼 정밀합니다.
세 가지 설치 방식
Spectr는 다음 형태로 제공됩니다:
- MCP 서버 — Claude Code, Claude Desktop 및 모든 MCP 호환 호스트에서 작동
- CLI —
spectr ./recording.mp4 ./spec.md실행 - Claude Code 스킬 — 자연어로 트리거, 명령어 암기 불필요
이 프로젝트는 u/Working-Middle2582가 만들었습니다. 실제 iOS 앱에서 생성된 실제 스펙 갤러리는 spectr.to/gallery에서 확인할 수 있습니다. 작성자는 정직한 피드백을 요청하고 있습니다 — 과장은 말고, 그냥 평가해 달라고요.
이것은 AI 코딩 에이전트를 위해 UI 스펙을 수동으로 문서화하는 데 수시간을 소비하는 데 지친 모든 사람에게 실용적인 솔루션입니다. Claude로 앱을 클론해 왔다면, 프롬프트가 아니라 스펙이 병목이었을 가능성이 높습니다.
📖 전체 소스 읽기: r/ClaudeAI
👀 See Also
ClaudeAI 브레인스토밍 모드, 목업과 UI 승인을 위한 시각적 동반자 기능 추가
한 사용자가 ClaudeAI 브레인스토밍 모드에서 로컬 웹 서버에 목업을 제공하는 새로운 'Visual Companion' 기능을 발견했습니다. 이 기능을 통해 실제 개발 전에 UI를 주고받으며 수정할 수 있습니다.

커밋 이슈: 미완성 GitHub 저장소를 분석하고 '매장'하는 도구
한 개발자가 '커밋먼트 이슈즈(Commitment Issues)'라는 웹 도구를 만들어 GitHub 저장소를 분석해 프로젝트가 사실상 중단된 상태인지 판단한 후, 재미있는 '장례' 증명서를 생성합니다. 이 도구는 머신러닝이 아닌 휴리스틱에 기반합니다.

AutoSkillUpdate: 오래된 기술을 감지하는 Claude 코드 플러그인
AutoSkillUpdate는 코드베이스를 스캔하여 기존 스킬과 비교하고 차이점을 식별하는 오픈소스 Claude Code 플러그인입니다. 파일 경로와 라인 참조가 포함된 차이점 보고서를 제공하며, 사용자 확인 후 오래된 스킬을 재작성하는 기능을 제공합니다.

Claude Code가 클라우드 환경에서 ANTHROPIC_API_KEY가 설정된 경우 자동으로 실패합니다
클라우드 환경에서 ANTHROPIC_API_KEY를 설정하면 Claude Code가 오작동하고 예상치 못한 API 사용 요금이 발생할 수 있습니다. 사용자들은 추가 사용량과 응답 없는 동작을 보고했습니다.