design-md-chrome  by bergside

Extract website styles into AI-ready design blueprints

Created 1 week ago

New!

1,241 stars

Top 31.3% on SourcePulse

GitHubView on GitHub
Project Summary

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

  • Install by loading the extension unpacked in Chrome (chrome://extensions > Enable Developer mode > Load unpacked).
  • Requires Google Chrome browser.
  • Local development tests can be run using node tests/run-tests.mjs.
  • Official quick-start and documentation links are not explicitly provided in the README.

Highlighted Details

  • Supports auto-extraction of typography, colors, spacing, radius, shadows, and motion.
  • Generates DESIGN.md for design documentation and SKILL.md for AI agents.
  • The generated markdown follows a detailed structure covering Mission, Brand, Style Foundations, Accessibility, Writing Tone, Rules, and Quality Gates.
  • Includes an "Explain (?)" action to detail the generation process and TypeUI references.

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.

Health Check
Last Commit

4 days ago

Responsiveness

Inactive

Pull Requests (30d)
0
Issues (30d)
0
Star History
1,253 stars in the last 13 days

Explore Similar Projects

Feedback? Help us improve.