Diseñador Web Definitivo

Qué es esto (explicación simple)

Imagina que le das a Claude un libro enorme de diseño. Un libro que tiene 67 estilos visuales (Glassmorphism, Brutalism, Minimalism...), 161 paletas de colores organizadas por industria, 57 combinaciones de fuentes de Google Fonts, y 99 reglas de UX. Con este skill, Claude ya no genera diseños genéricos — ahora sabe de diseño.

Paso a paso

1. Abre tu terminal
2. Instala la herramienta globalmente:

3. Ahora configúralo para Claude Code:

Esto genera automáticamente los archivos de configuración. Cuando abras Claude Code, ya tendrá el conocimiento de diseño cargado.

Qué es esto (explicación simple)

NanoBanana es como darle a Claude un artista que dibuja lo que le pidas. Le dices "dibújame un mockup de una landing page para una app de fitness" y genera la imagen usando los modelos Gemini de Google. Esto es útil para tener una referencia visual antes de escribir código.

Paso 1: Obtener tu API key de Gemini (gratis)

1. Ve a aistudio.google.com/apikey
2. Haz clic en "Create API Key"
3. Copia la key — la vas a necesitar en el siguiente paso

Paso 2: Configurar en tu .mcp.json

Abre (o crea) el archivo .mcp.json en la raíz de tu proyecto y agrega esto:

{
  "mcpServers": {
    "nanobanana": {
      "command": "uvx",
      "args": ["nanobanana-mcp-server@latest"],
      "env": {
        "GEMINI_API_KEY": "tu-api-key-aqui"
      }
    }
  }
}

Qué es esto (explicación simple)

Stitch es como darle a Claude un diseñador de interfaces que trabaja para Google. Le dices "diseña una pantalla de login moderna" y te genera el diseño visual completo con HTML y CSS listo para usar. Funciona con Gemini 2.5 Pro — el modelo más inteligente de Google.

Paso 1: Preparar Google Cloud (una sola vez)

1. Si no tienes Google Cloud CLI, instálalo desde cloud.google.com/sdk
2. Inicia sesión y configura tu proyecto:

3. Habilita la API de Stitch:

Paso 2: Instalar el MCP (la forma fácil)

Este comando hace todo automáticamente — configura la autenticación y agrega el MCP a tu editor:

O configurar manualmente en .mcp.json

{
  "mcpServers": {
    "stitch": {
      "command": "npx",
      "args": ["-y", "stitch-mcp"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "TU_PROJECT_ID"
      }
    }
  }
}

Qué es esto (explicación simple)

21st Dev Magic es como darle a Claude acceso a una tienda con miles de componentes premium — botones, hero sections, testimonios, pricing tables, barras de navegación. Todos hechos con React y Tailwind CSS, todos responsive, todos de alta calidad. Claude los pide con /ui y los integra directo a tu proyecto.

Paso 1: Obtener tu API key

1. Ve a 21st.dev y crea una cuenta
2. Una vez dentro, ve a la sección de API keys
3. Crea una nueva key y cópiala

Paso 2: Instalar el MCP

Reemplaza TU_API_KEY con la key que copiaste:

Ya tienes las 4 piezas instaladas. Ahora Claude puede diseñar como un profesional. Aquí está el flujo completo de cómo trabajan juntas:

El flujo paso a paso