Quick Summary: 📝
Dembrandt is a command-line tool that automatically extracts design system tokens (like colors, typography, and borders) from any website. It uses Playwright to drive a browser, allowing for reverse-engineering of design elements into structured data, usable for AI agents and CI/CD pipelines.
Key Takeaways: 💡
✅ Dembrandt instantly extracts a website's entire design system into usable design tokens (colors, typography, etc.) with a single command.
✅ It's a massive time-saver for developers, automating the tedious process of manual style extraction for new projects or audits.
✅ The tool seamlessly integrates with AI agents, allowing for natural language queries to extract design information.
✅ Its beta web app enables automatic design drift tracking in CI/CD, visual diffing, and snapshot comparisons to maintain design consistency.
✅ A comprehensive recipe library provides ready-to-use workflows for tasks like WCAG audits, benchmarking, and Figma integration.
Project Statistics: 📊
- ⭐ Stars: 2637
- 🍴 Forks: 251
- ❗ Open Issues: 0
Tech Stack: 💻
- ✅ TypeScript
Hey fellow developers! Ever found yourself needing to quickly understand the design language of a website? Maybe you're building a new feature, auditing a competitor, or trying to bring consistency to your own project. Manually sifting through CSS to extract colors, fonts, and spacing can feel like a never-ending treasure hunt. But what if I told you there's a new tool that turns this tedious task into a lightning-fast, one-command operation? Get ready to say hello to Dembrandt!
Dembrandt is an incredible open-source project that acts like a digital artist, meticulously extracting a website's entire design system into easily usable design tokens. Think of it: logo, colors, typography, border styles, spacing, and so much more – all with a single command. It's like having a superpower to instantly dissect any web page's visual DNA. You just point it at a URL, and Dembrandt, powered by a headless Chromium browser, goes to work, giving you a structured output of all those beautiful design elements. No more inspecting elements one by one!
The benefits for us developers are huge. First and foremost, it's a massive time-saver. Imagine setting up a new project or onboarding to an existing one; instead of guessing or painstakingly extracting styles, you can have a foundational design system in seconds. This is a game-changer for front-end developers, UI engineers, and even designers looking to bridge the gap between design and code.
But it doesn't stop there! Dembrandt integrates beautifully with AI agents. If you're using tools like Claude Code or Cursor, you can literally ask your agent to "extract the color palette from dembrandt.com," and it will automatically use Dembrandt to get the job done. Pair it with dembrandt-skills, and your agent gains even more UX intelligence, helping with accessibility, interaction states, and even orchestrating full design pipelines. This is the future of intelligent design system management!
And for those who need to keep an eye on design consistency over time, the Dembrandt App (currently in beta) is a dream come true. You can track "design drift" automatically from your CI/CD pipeline. Every time you deploy, Dembrandt takes a snapshot, compares it to a baseline, and gives you a visual diff of what changed – colors, fonts, spacing, shadows. This means you can catch unintended style changes before they even hit production, ensuring your brand identity remains pixel-perfect. You can compare snapshots side-by-side, scrub through a timeline, and even copy tokens directly for use in other tools.
Finally, Dembrandt offers a fantastic "Recipe Library" at dembrandt.com/recipes. These are ready-to-run workflows for common tasks like competitor benchmarking, WCAG accessibility audits, integrating with Figma, or setting up agentic design system builds. It's a treasure trove of practical applications that really showcase the power and versatility of this tool.
Dembrandt is more than just a utility; it's a foundational tool that streamlines design system workflows, enhances collaboration, and empowers developers and AI agents alike to work more efficiently with design. Whether you're a solo developer, part of a large team, or exploring AI-driven development, Dembrandt offers a powerful way to understand, manage, and maintain the visual integrity of your web projects. Seriously, go check it out – your design system workflow will thank you!
Learn More: 🔗
🌟 Stay Connected with GitHub Open Source!
📱 Join us on Telegram
Get daily updates on the best open-source projects
GitHub Open Source👥 Follow us on Facebook
Connect with our community and never miss a discovery
GitHub Open Source
Top comments (0)