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

클로드 코드 HUD: AI 코딩 세션 모니터링을 위한 터미널 대시보드
claude-code-hud는 Claude Code 세션을 위한 실시간 모니터링을 제공하는 터미널 대시보드로, IDE 없이도 컨텍스트 창 사용량, API 속도 제한, 파일 변경 사항을 보여줍니다. npx claude-code-hud로 실행하세요.

Culpa: AI 에이전트 디버깅을 위한 오픈 소스 결정론적 재생 엔진
Culpa는 오픈 소스 도구로, 전체 실행 컨텍스트와 함께 LLM 에이전트 세션을 기록하여 실제 API를 호출하지 않고 기록된 응답을 스텁으로 사용해 결정론적 재생을 가능하게 합니다. 프록시 모드나 Python SDK를 통해 Anthropic 및 OpenAI API와 함께 작동합니다.

AI 코딩 에이전트가 20턴 후에 엉터리 결과물을 내는 이유: 맥락 맹목성
API 로그 심층 분석 결과, Cursor와 Claude Code가 더 나빠진 것이 아니라 노이즈로 가득 찬 블로트된 컨텍스트 윈도우로 인해 질식하고 있으며, 이는 아키텍처 파괴로 이어집니다.

오픈소스 벤치마크 러너: 실제 워크플로우에서 OpenClaw 에이전트 테스트
새로운 오픈소스 프로젝트를 통해 YAML로 정의한 실제 개인 작업을 기준으로 OpenClaw 에이전트를 벤치마킹할 수 있으며, 실제 에이전트 워크스페이스 가져오기도 지원합니다.