Atlas for AI
🔧 Công cụ lập trình•Mã nguồn mở•Đang hoạt động

Design Extract

CLI trích xuất design system từ website thật, tạo design tokens, Figma variables, Tailwind config và nhiều output cho design-to-code.

#design-extract
Truy cập websiteXem GitHub⚖️ So sánh
Danh mục
🔧 Công cụ lập trình
Giá
Mã nguồn mở
GitHub Stars
⭐ 4,206
Ngôn ngữ
HTML
License
MIT
Ngày thêm
2026-04-22
design-systemdesign-tokensfigmatailwindmcp-serveropen-source
Tóm tắt từ README GitHub
Built by Manav Arya Singh ( @Manavarya09 ) Sponsors      Atlas Cloud — powers OpenAI-compatible --smart classification. For AI coding workflows, try the Atlas Cloud coding plan . Bloome — deploys your AI clone to handle every audience conversation, running in the cloud, 24/7. Try designlang on Bloome . --- designlang points a headless browser at any URL and reads the design system off the live DOM. One command emits 17+ files — DTCG tokens, Tailwind config, shadcn theme, Figma variables, motion tokens, typed component anatomy, brand voice, page-intent labels, and a paste-ready prompt pack for v0 / Lovable / Cursor / Claude Artifacts. It also goes where extractors don't: layout patterns , responsive behavior across 4 breakpoints , hover / focus / active states , WCAG contrast scoring , multi-page consistency , drift checks against a live source-of-truth , visual-diffs , and a shareable graded report card . Quick start Drop a live design-score badge in any README: Watch it read — live Extraction Theatre ( ) Don't take the output on faith — watch it happen. On designlang.app/watch you paste a URL and a real headless Chromium opens the page and reads i
Xem thêm từ README.md

Đánh giá chi tiết

Tổng quan

Design Extract là một công cụ CLI thiên về design-to-code, có thể crawl website thật bằng headless browser rồi trích xuất gần như toàn bộ design language của site đó. Đầu ra không chỉ là vài màu và font cơ bản, mà còn bao gồm design tokens theo chuẩn DTCG, Figma variables, Tailwind config, CSS custom properties, motion tokens, anatomy stubs cho component và cả brand voice summary.

Điểm mạnh của công cụ này là độ tham vọng khá cao nhưng vẫn bám vào use case thực tế: audit một site đang chạy, dựng lại design system, kiểm tra drift giữa codebase và website live, so sánh nhiều brand, hoặc chuyển hóa giao diện thật thành tài sản có thể dùng cho developer và designer. Với team làm UI systems, migration hoặc reverse-engineering design, đây là một tool rất đáng chú ý.

Tính năng chính

  • Trích xuất design system từ website live bằng headless browser
  • Sinh design tokens, Figma variables, Tailwind config và nhiều output khác
  • Phân tích layout patterns, motion language, responsive behavior và interaction states
  • Có lint, drift check, visual diff và hỗ trợ đồng bộ giữa site thật với token files
  • Hỗ trợ MCP/server workflow cho Claude Code, Cursor, Windsurf và các flow design-to-code hiện đại

Ai nên dùng

Hợp với frontend engineer, design systems team, product designer hoặc ai cần phân tích nhanh design language của một website đang chạy.

Hạn chế

  • Tính năng nhiều nên sẽ hơi “quá tay” nếu bạn chỉ cần lấy vài token đơn giản
  • Chất lượng đầu ra vẫn phụ thuộc vào DOM thực tế và mức độ phức tạp của site nguồn
  • Workflow phù hợp nhất với người quen design systems, không hẳn tool one-click cho người mới
Design Extract | Atlas for AI