design-oracle

Design Oracle은 웹사이트를 분석하고 전체 디자인 시스템을 추출하는 MIT 라이선스 도구입니다. 이 도구는 Next.js 프론트엔드, FastAPI 백엔드, ARQ 워커, Redis, SQLite 및 Playwright/Chromium 분석 파이프라인을 결합하여 작동합니다. 핵심 기능으로는 Playwright를 이용한 전체 페이지 캡처, 시각적 점수 및 휴리스틱을 통한 디자인 DNA 분류, 히어로(hero), 가격 책정(pricing), 내비게이션(nav), FAQ와 같은 요소의 바운딩 박스 기반 컴포넌트 감지, SSE 및 Redis pub/sub을 통한 실시간 진행 상황 표시가 포함됩니다. 또한 Tailwind v4 설정, React JSX 컴포넌트, JSON 디자인 토큰 및 Markdown 형식의 DESIGN.md 보고서로 내보낼 수 있으며, MCP를 통해 AI 워크플로우용 분석 도구를 제공합니다. 설치를 위해 Docker Compose 사용이 권장됩니다. 저장소 설명에 따라 .env.example을 .env로 복사하고 docker compose up --build -d를 실행한 후 http://localhost:3000에 접속하면 됩니다. 로컬 start.sh 옵션을 사용하려면 Python 3.12+, Node.js 20+, Redis 7+가 필요하며, 가상 환경, Playwright Chromium, Redis, ARQ 워커, 3000번 포트의 Next.js 및 5000번 포트의 FastAPI를 실행합니다. API에는 상태 확인(health), 분석(analyze), 상태(status), 결과(result), SSE 이벤트, 스크린샷, 삭제, 디자인 목록 및 Tailwind, 컴포넌트, design.md, 토큰 내보내기 엔드포인트가 포함됩니다. 각 분석 결과는 analyses/{id}/ 경로에 screenshot.png, screenshot-overlay.png, result.json, DESIGN.md, tailwind.config.js, components.jsx 및 design-tokens.json으로 저장됩니다. MCP 서버는 http://localhost:5000/mcp에서 HTTP SSE를 통해 제공되거나 stdio 모드로 단독 실행 가능합니다. 경량 uvx CLI인 design-oracle-mcp는 Playwright/Chromium 없이 HTTP를 통해 백엔드를 호출합니다. opencode, Cursor 및 Claude Code를 위한 도구 스니펫이 문서화되어 있습니다. Cloudflare Tunnel 스크립트인 start-public.sh를 통해 앱을 임시 공개 HTTPS URL로 노출할 수 있습니다. 알려진 제한 사항: 분석은 현재 단일 1440x900 뷰포트를 사용합니다. 봇 보호 사이트는 Playwright를 차단할 수 있으며, 기본 및 중간 수준의 보호를 위한 STEALTH_MODE 옵션이 제공되지만 기업 수준의 보호는 여전히 CAPTCHA나 유료 프록시가 필요할 수 있습니다. 컴포넌트 감지는 ML/비전 기반이 아닌 휴리스틱 방식이며, SQLite 저장소는 로컬 또는 단일 사용자용으로 적합하며 멀티 테넌트 배포에는 적합하지 않습니다.