jomvick/design-oracle

어떤 프로젝트인가요?

핵심 기능

• 01Playwright와 Chromium으로 전체 페이지를 캡처합니다.
• 02색상, 타이포그래피, 간격, 컴포넌트 경계 상자를 추출합니다.
• 03Tailwind v4 설정, React JSX, JSON 디자인 토큰, Markdown 보고서를 내보냅니다.
• 04SSE와 Redis pub/sub를 통해 분석 진행 상황을 실시간으로 보여줍니다.
• 05MCP 서버를 통해 AI 에이전트에 분석 도구를 제공합니다.

활용 사례

• 기존 웹사이트의 스타일을 리디자인용 Tailwind 테마로 변환합니다.
• 참고 사이트의 레이아웃을 반영하는 React 컴포넌트 스텁을 생성합니다.
• UI를 만들기 전에 AI 코딩 에이전트에 사이트 디자인을 구조화해 요약해 제공합니다.
• 경쟁사 또는 레거시 사이트의 디자인 시스템을 Markdown 보고서로 문서화합니다.

빠른 시작

1. 1

   저장소를 클론하고 디렉터리로 이동합니다

2. 2

   env 파일을 복사합니다(Docker에서는 선택 사항)

   cp .env.example .env
3. 3

   Docker Compose로 시작한 다음 http://localhost:3000 을 엽니다

   docker compose up --build -d

사용 전 알아둘 점

• !분석은 단일 1440×900 뷰포트를 사용하며, 여러 기기에서의 분석은 구현되어 있지 않습니다.
• !봇 방지 기능이 고도화된 사이트에서는 Playwright가 차단될 수 있으며, CAPTCHA 해결이나 유료 프록시가 필요할 수도 있습니다.
• !컴포넌트 감지는 ML이나 비전 모델이 아닌 휴리스틱에 의존합니다.
• !SQLite 스토리지는 로컬 단일 사용자 환경에 적합하며, 멀티 테넌트 배포에는 적합하지 않습니다.

토픽

자주 묻는 질문

design-oracle은(는) 무엇인가요?

Playwright로 웹사이트를 분석해 디자인 시스템을 Tailwind v4 설정, React 컴포넌트, 디자인 토큰 또는 DESIGN.md 보고서로 내보냅니다. Design Oracle은 URL을 받아 Playwright와 Chromium으로 전체 페이지를 렌더링하고, 색상, 타이포그래피, 간격, hero·pricing·nav·FAQ 섹션 같은 컴포넌트와 UX 패턴 등 사이트의 시각적 시스템을 추출합니다. 분석 결과는 스크린샷, 컴포넌트 오버레이, 원본 JSON 데이터와 함께 저장됩니다.

design-oracle은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

design-oracle은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

design-oracle은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. design-oracle의 마지막 커밋은 2026년 8월 9일입니다.

design-oracle은(는) 어디에 사용할 수 있나요?

기존 웹사이트의 스타일을 리디자인용 Tailwind 테마로 변환합니다. 참고 사이트의 레이아웃을 반영하는 React 컴포넌트 스텁을 생성합니다. UI를 만들기 전에 AI 코딩 에이전트에 사이트 디자인을 구조화해 요약해 제공합니다. 경쟁사 또는 레거시 사이트의 디자인 시스템을 Markdown 보고서로 문서화합니다.

design-oracle는 어떻게 설치하나요?

저장소를 클론하고 디렉터리로 이동합니다 env 파일을 복사합니다(Docker에서는 선택 사항): cp .env.example .env Docker Compose로 시작한 다음 http://localhost:3000 을 엽니다: docker compose up --build -d

design-oracle은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/jomvick/design-oracle