JhonnyCCM

Design Extractor MCP — Design skill for Claude Code

Design community

Ingeniería inversa de sistemas de diseño, tipografía y contenedores web convertidos en directivas listas para │ Agentes de IA (Claude, Codex, Antigravity, Cursor.

How to install Design Extractor MCP

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

What Design Extractor MCP does

Ingeniería inversa de sistemas de diseño, tipografía y contenedores web convertidos en directivas listas para │ Agentes de IA (Claude, Codex, Antigravity, Cursor.

Alternatives in Design

CloudCLI — 8,400+ Free open-source web/mobile UI for Claude Code, Cursor CLI, and Codex 8.7k ★
Companion — 2,200+ Web & mobile UI for Claude Code & Codex 2.2k ★
Drawbridge — Design editor for Claude Code and Cursor 960 ★

README

Design Extractor MCP 🌐✨

**Model Context Protocol (MCP) Server & CLI para ingeniería inversa de sistemas de diseño, estructuras de contenedores y generación de directivas para Agentes de IA.**

[![MCP Standard](https://img.shields.io/badge/MCP-Protocol%201.0-blue.svg)](https://modelcontextprotocol.io) [![Python 3.10+](https://img.shields.io/badge/Python-3.10%2B-green.svg)](https://python.org) [![Playwright](https://img.shields.io/badge/Engine-Playwright%20Chromium-orange.svg)](https://playwright.dev) [![Rich Terminal](https://img.shields.io/badge/UI-Rich%20Terminal-purple.svg)](https://github.com/Textualize/rich)

🎯 ¿Qué hace este proyecto?

**Design Extractor MCP** es un servidor que navega cualquier página web en tiempo real usando un navegador headless (Playwright) para inspeccionar tanto el código fuente como los estilos computados del DOM.

Extrae automáticamente:

🎨 Paleta y Tokens de Color: Fondos de canvas, superficies/tarjetas, colores de texto (alto contraste y atenuado), acento de marca y bordes, con normalización automática a HEX/RGBA.
🔤 Sistema Tipográfico Completo: Familias tipográficas para títulos y cuerpo, jerarquía exacta (H1, H2, H3, H4 y Párrafos) con tamaños en píxeles, pesos (font-weight), interlineados (line-height) y espaciado de letras (letter-spacing).
📐 Arquitectura de Layout y Divs: Anchuras máximas de contenedor (max-w-*), espaciado rítmico de secciones (py-16 / py-24), patrones de rejilla (CSS Grid y Flexbox), y esqueletos estructurales HTML limpios de Header, Hero, Cards y Botones.
🔍 Inteligencia de Código Fuente: Detección de frameworks en el HTML (Next.js, React, Vue, Astro, Webflow, Shopify, WordPress, Tailwind CSS), puntos de interrupción responsivos reales (@media del CSS original) y animaciones @keyframes.
🤖 Prompt Maestro para Agentes (Master Directives): Genera una hoja de instrucciones exhaustiva en Markdown (.md) lista para copia