Discover and explore top open-source AI tools and projects—updated daily.
bergsideExtract website styles into AI-ready design blueprints
New!
Top 31.3% on SourcePulse
This Chrome extension extracts design styles from any website, generating structured DESIGN.md or SKILL.md files compatible with the TypeUI format. It empowers developers and designers to create AI-consumable design system blueprints for tools like Google Stitch and Claude Code, streamlining the process of translating visual designs into code.
How It Works
The extension automatically analyzes the active browser tab to capture key design elements, including typography, colors, spacing, and shadows. It then processes this data to generate markdown files adhering to the comprehensive TypeUI specification. This structured output serves as a blueprint for AI agents, enabling them to understand and replicate a website's design system.
Quick Start & Requirements
chrome://extensions > Enable Developer mode > Load unpacked).node tests/run-tests.mjs.Highlighted Details
DESIGN.md for design documentation and SKILL.md for AI agents.Maintenance & Community
The provided README does not contain specific details regarding maintainers, community channels (like Discord/Slack), sponsorships, or roadmap information.
Licensing & Compatibility
Licensed under the permissive MIT License. This license generally allows for broad commercial use and integration into closed-source projects without significant restrictions.
Limitations & Caveats
The extension's effectiveness is dependent on the complexity and structure of the target website. It relies on the accuracy of style extraction and the compatibility of the generated TypeUI markdown with specific AI tools. No information is provided on browser compatibility beyond Chrome or potential performance bottlenecks with highly complex sites.
4 days ago
Inactive
HugoBlox
VoltAgent