---
slug: "brand-to-design-md-skill"
source_type: "readme"
source_url: "https://cdn.jsdelivr.net/gh/shaom/brand-to-design-md-skill@main/README.md"
repo: "https://github.com/shaom/brand-to-design-md-skill"
source_file: "README.md"
branch: "main"
---
# Brand to DESIGN.md Skill

![Brand to DESIGN.md Skill cover](https://github.com/shaom/brand-to-design-md-skill/raw/HEAD/assets/brand-to-design-md-cover.png)

A portable local skill that turns a public brand URL into a source-aware `DESIGN.md`, extracting visual evidence into design tokens, component guidance, usage boundaries, and optional responsive demo verification.

## Try it online

[![Try brand-to-design-md on Socialistic](https://socialistic.ai/api/embed/brand-to-design-md-skill-961624)](https://socialistic.ai/zh/skill/brand-to-design-md-skill-961624?utm_source=github&utm_medium=readme&utm_campaign=20260524-x-claude-skill-builders&utm_content=badge)

Paste a public brand URL to generate a `DESIGN.md` without installing the skill locally.

## What it does

- Gathers public brand evidence from official pages, press kits, CSS, SVGs, images, and design case studies.
- Translates brand evidence into design tokens and practical component guidance.
- Produces a source-aware `DESIGN.md` with colors, typography, layout, components, imagery, logo boundaries, and Do/Don't guidance.
- Optionally creates and verifies a responsive HTML demo.

## Skill location

The skill lives at:

```text
skills/brand-to-design-md/SKILL.md
```

This repository intentionally excludes agent-specific metadata so the skill stays portable.

## Usage

Install or copy the `skills/brand-to-design-md` folder into any agent environment that supports local skills, including Codex, Claude Code, Cursor, and OpenClaw.

If your environment supports the `skills` CLI, install directly from GitHub with:

```bash
npx skills add https://github.com/shaom/brand-to-design-md-skill --skill brand-to-design-md
```

Example prompt:

```text
Use brand-to-design-md to extract https://example.com into a DESIGN.md and demo HTML.
```