Brand to DESIGN.md Skill

Extracts a brand's visual identity from a public URL to generate a source-aware DESIGN.md file with design tokens and component guidance.

Visit Site
Extracts a brand's visual identity from a public URL to generate a source-aware DESIGN.md file with design tokens and component guidance.

The gist

Brand to DESIGN.md Skill is a portable, local skill created by GitHub user shaom. It solves the problem of reverse-engineering a brand's visual identity by scraping a public URL to automatically generate a comprehensive DESIGN.md file. This file codifies design tokens, component guidance, and usage rules, providing a source-aware foundation for a design system.

What it does

  • Gathers public brand evidence from official pages, press kits, CSS, SVGs, and images.
  • Translates brand evidence into design tokens and practical component guidance.
  • Produces a source-aware DESIGN.md file with colors, typography, layout, and logo boundaries.
  • Creates and verifies an optional responsive HTML demo based on the extracted styles.

How it works

Architecture Diagram
Brand to DESIGN.md Skill Architecture Diagram

Users provide a public brand URL via a command-line prompt within a supported AI agent environment. The skill processes the site's assets and generates a DESIGN.md file and an optional HTML demo as output. It is delivered as a portable folder or installed via an npx command. As an open-source GitHub project, it is free to use.

Best for

This tool is best for developers and designers who need to quickly bootstrap a design system or component library from an existing public brand website.

Watch out for

This is not a standalone application; it is a 'skill' that must be installed and run within a compatible AI agent environment like Codex, Claude Code, or Cursor.