Repolode
Submit
jomvick

jomvick/design-oracle

Analyzes any website with Playwright and exports its design system as Tailwind v4 config, React components, design tokens, or a DESIGN.md report.

View on GitHubWebsite
Stars
81
Forks
5
Open issues
0
Last commit
2 months ago

What is it?

Design Oracle takes a URL, renders the full page in Chromium with Playwright, and extracts the site's visual system: colors, typography, spacing, components such as hero, pricing, nav and FAQ sections, and UX patterns. Each analysis is stored with its screenshot, a component overlay, and raw JSON data.

The extracted results can be exported as a Tailwind v4 theme, React JSX component stubs, structured JSON design tokens, or a Markdown design report. The project runs as a FastAPI backend with an ARQ worker over Redis, a Next.js web UI with live progress over SSE, and can be deployed with Docker Compose.

It can also be used by AI agents through an MCP server over HTTP or stdio, or through a lightweight `uvx design-oracle-mcp` client. Component detection relies on heuristics rather than vision models, and the project uses single-user SQLite storage with a 1440×900 viewport.

Key features

  • 01Full-page capture with Playwright and Chromium.
  • 02Extracts colors, typography, spacing and component bounding boxes.
  • 03Exports Tailwind v4 config, React JSX, JSON design tokens and Markdown reports.
  • 04Live analysis progress via SSE and Redis pub/sub.
  • 05Exposes analysis tools to AI agents through an MCP server.

Use cases

  • Turning an existing website's styling into a Tailwind theme for a redesign.
  • Generating React component stubs that mirror a reference site's layout.
  • Giving an AI coding agent a structured summary of a site's design before building UI.
  • Documenting a competitor's or legacy site's design system as a Markdown report.

Quick start

  1. 1

    Clone the repo and enter the directory

  2. 2

    Copy env file (optional in Docker)

    cp .env.example .env
  3. 3

    Start with Docker Compose, then open http://localhost:3000

    docker compose up --build -d

Things to know

  • Analysis uses a single 1440×900 viewport; multi-device analysis is not implemented.
  • Sites with advanced bot protection may block Playwright and may still need CAPTCHA solving or paid proxies.
  • Component detection relies on heuristics, not ML or vision models.
  • SQLite storage suits local single-user use, not multi-tenant deployments.

Topics

#design-system#design-tokens#website-analysis#tailwind#playwright#react#mcp#arq#fastapi#nextjs

FAQ

What is design-oracle?
Analyzes any website with Playwright and exports its design system as Tailwind v4 config, React components, design tokens, or a DESIGN.md report. Design Oracle takes a URL, renders the full page in Chromium with Playwright, and extracts the site's visual system: colors, typography, spacing, components such as hero, pricing, nav and FAQ sections, and UX patterns. Each analysis is stored with its screenshot, a component overlay, and raw JSON data.
Is design-oracle free to use? What license does it have?
design-oracle is open source under the MIT license. Check the license terms before using it in commercial products.
Is design-oracle still maintained?
Updated within 6 months. The last commit to design-oracle was on Aug 9, 2026.
What can I use design-oracle for?
Turning an existing website's styling into a Tailwind theme for a redesign. Generating React component stubs that mirror a reference site's layout. Giving an AI coding agent a structured summary of a site's design before building UI. Documenting a competitor's or legacy site's design system as a Markdown report.
How do I install design-oracle?
Clone the repo and enter the directory Copy env file (optional in Docker): cp .env.example .env Start with Docker Compose, then open http://localhost:3000: docker compose up --build -d
Where can I get design-oracle?
The source code and installation instructions are on GitHub: https://github.com/jomvick/design-oracle

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects