jomvick/design-oracle

웹사이트를 분석해 디자인 시스템(색상, 타이포그래피, 컴포넌트)을 자동 추출해 Tailwind·React·디자인 토큰으로 내보내는 도구

완성 앱맘대로 써도 됨 · MIT웹·Next.js·풀스택난이도
36+0이번 주10TypeScript
중간맛 분석

스택: Next.js 15 + FastAPI + ARQ(비동기 큐) + Redis + Playwright

한눈에: URL 하나만 제공하면 풀페이지 스크린샷을 분석해 색상·타이포그래피·간격·컴포넌트(헤로, 네비게이션, FAQ 등)를 감지한 후 Tailwind v4 설정파일, React JSX, JSON 토큰, Markdown 보고서로 내보냅니다. 진행 상황을 SSE 스트림으로 실시간 표시.

바로 쓸 수 있나: 네, Compose로 한 줄이면 http://localhost:3000 에서 웹 UI 즉시 사용 가능.

데모: GIF 예시 포함되어 있으며, 분석 결과는 analyses/{id}/ 에 스크린샷, JSON, Markdown, 생성된 컴포넌트 파일 저장.

이런 레포예요

이럴 때 쓰면 좋아요

  • 기존 웹사이트의 디자인 시스템을 역으로 추출해 Tailwind 설정으로 빠르게 이식
  • 경쟁사 또는 참고 사이트의 컬러·타이포그래피·컴포넌트 패턴을 분석해 디자인 가이드 작성
  • AI 에이전트(Cursor, Claude Code)에 MCP 서버로 연결해 자동 UI 분석·코드 생성 워크플로우 구축

핵심 기능

Playwright 기반 전체 페이지 분석 및 컴포넌트 감지 (바운딩박스 포함)Tailwind v4·React JSX·JSON 토큰·Markdown 보고서 다중 형식 내보내기MCP 서버 통합으로 AI 에이전트 직접 연결 가능

대안 대비 차별점

웹사이트 디자인을 추출하는 것을 넘어, 구성된 디자인 시스템(Tailwind config, React 컴포넌트)으로 즉시 변환하고 AI 워크플로우(MCP)에 통합할 수 있는 엔드-투-엔드 파이프라인을 제공합니다.

준비물
  • Python 3.12+ (로컬 실행 시)
  • Node.js 20+ (로컬 실행 시)
  • Redis 7+ (로컬 실행 시 또는 Docker)
  • Docker & Docker Compose (Docker 방식)
바로 시작하기
  1. 저장소 클론
git clone https://github.com/jomvick/design-oracle.git
cd design-oracle
  1. 환경변수 설정 (선택사항 — Docker에서는 기본값 적용)
cp .env.example .env
  1. Docker Compose로 전체 스택 실행
docker compose up --build -d
  1. 브라우저에서 접속
http://localhost:3000

또는 로컬 실행 (Python 3.12+, Node.js 20+, Redis 7+ 필수):

  1. 환경변수 설정
cp .env.example .env
  1. start.sh 실행 (venv 생성, 의존성 설치, 전체 서비스 시작)
./start.sh
  1. http://localhost:3000 접속 후 멈추려면 Ctrl+C 입력
별 추이 · 7일
36+0 / 7일
활용성 · 따라 만들기 좋은가
따라 하기 좋음샘플 점수 46/100
  • 관대한 라이선스
  • 테스트 있음
  • 예제 디렉토리
  • 최근 활동
  • AGENTS.md
  • llms.txt
  • 템플릿

🟢 최근 활동 있음 · 2026년 생성

AI가 README 기반으로 요약했습니다 · 원문 보기