jomvick/design-oracle

这是什么？

核心功能

• 01使用 Playwright 和 Chromium 捕获整页截图。
• 02提取颜色、字体排版、间距及组件的位置框。
• 03导出 Tailwind v4 配置、React JSX、JSON 设计令牌和 Markdown 报告。
• 04通过 SSE 和 Redis pub/sub 实时展示分析进度。
• 05通过 MCP 服务向 Cursor、Claude Code 等 AI 工具提供分析能力。

适用场景

• 将现有网站的样式转换为 Tailwind 主题，用于改版。
• 生成与参考网站布局相近的 React 组件骨架。
• 在 AI 编码智能体构建界面前，为其提供结构化的设计体系摘要。
• 将竞品或旧版网站的设计体系整理为 Markdown 报告。

快速上手

1. 1

   克隆仓库并进入目录

2. 2

   复制环境变量文件（Docker 下可选）

   cp .env.example .env
3. 3

   使用 Docker Compose 启动，然后打开 http://localhost:3000

   docker compose up --build -d

使用前须知

• !分析仅支持单一 1440×900 视口，尚未实现多设备分析。
• !带有高级机器人防护的网站可能拦截 Playwright，仍可能需要验证码破解或付费代理。
• !组件检测基于启发式规则，而非机器学习或视觉模型。
• !SQLite 存储适合本地单用户使用，不适用于多租户部署。

标签

常见问题

design-oracle 是什么？

用 Playwright 分析任意网站，提取其设计系统，并导出为 Tailwind 配置、React 组件、设计令牌或 DESIGN.md 报告。 Design Oracle 输入一个网址，用 Playwright 在 Chromium 中渲染整页，提取该网站的视觉体系，包括颜色、字体排版、间距、Hero、定价、导航、FAQ 等组件，以及交互模式。每次分析会保存整页截图、组件标注图和原始 JSON 数据。

design-oracle 可以免费使用吗？用的什么许可证？

design-oracle 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

design-oracle 还在维护吗？

半年内有更新。design-oracle 最近一次提交是在 2026年8月9日。

design-oracle 适合用来做什么？

将现有网站的样式转换为 Tailwind 主题，用于改版。 生成与参考网站布局相近的 React 组件骨架。 在 AI 编码智能体构建界面前，为其提供结构化的设计体系摘要。 将竞品或旧版网站的设计体系整理为 Markdown 报告。

design-oracle 怎么安装和运行？

克隆仓库并进入目录 复制环境变量文件（Docker 下可选）: cp .env.example .env 使用 Docker Compose 启动，然后打开 http://localhost:3000: docker compose up --build -d

在哪里获取 design-oracle？

源代码和安装说明在 GitHub 上：https://github.com/jomvick/design-oracle