ItaloDeFranca

Miners Reverse Branding — Design skill for Claude Code

Design community

Skill do Claude Code: clona um site e extrai o design system completo (tokens, grade, componentes, styleguide e guia de uso).

How to install Miners Reverse Branding

This entry records only its repository, not the path inside it, so there is no exact command to give. Open ItaloDeFranca/miners-reverse-branding and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Miners Reverse Branding does

Skill do Claude Code: clona um site e extrai o design system completo (tokens, grade, componentes, styleguide e guia de uso).

Alternatives in Design

Frontend Design — Create distinctive, production-grade frontend interfaces with high design quality 94.1k ★
Site — Crawl a whole site and synthesize ONE canonical design system across all pages — unified tokens, coverage map 3.6k ★
Extract — Design System & Product Reverse-Engineering - Extract tokens, components, architecture, and PRDs from codebase 2.8k ★

README

miners-reverse-branding

Skill para Claude Code que faz engenharia reversa da marca de um site a partir da URL. Primeiro clona o site inteiro numa pasta pronta para deploy, com um `.zip` que leva o nome do domínio. Depois extrai dele um design system completo: tokens, grade, componentes e o manual de uso.

O que ela entrega

/                    clone navegável, sem dependência do site original
.zip                 o mesmo clone compactado
-design-system/
├── DESIGN-SYSTEM.md          manual de uso, com página de exemplo pronta
├── styleguide.html           cores, tipografia, grade e componentes renderizados
├── tokens.json / tokens.css  cores, fontes, escala tipográfica, espaçamento, raios, sombras, grade, breakpoints
├── components.css / .json    componentes .ds-* com variantes, estados e faça/evite
├── assets/                   logos, ícones e imagens usados pelos componentes
└── screenshots/              páginas originais e recortes de cada componente

Instalação

Clone dentro da pasta de skills do Claude Code, global ou de um projeto:

git clone https://github.com/ItaloDeFranca/miners-reverse-branding ~/.claude/skills/miners-reverse-branding
# ou, só para um projeto:
git clone https://github.com/ItaloDeFranca/miners-reverse-branding .claude/skills/miners-reverse-branding

Requisito: Python 3.10+. Na primeira execução, `scripts/setup.sh` cria um ambiente em `~/.venvs/miners-reverse-branding` com Playwright e Chromium. Não precisa instalar nada à mão.

Uso

Peça em linguagem natural no Claude Code:

"Extrai o site https://exemplo.com.br e cria o design system"
"Clona esse site e me dá o zip"
"Quero o design system do site X: cores, fontes, grade e componentes"

A skill segue seis etapas: preparar o ambiente, clonar, medir o design nas páginas vivas, curar os tokens, recriar os componentes e gerar o styleguide. No fim ela verifica o resultado por screenshot, no desktop e no celular, antes de entregar.