Nothing Design Skill — Instalar & Demo en vivo

Por qué usarlo

Características clave

Paleta estrictamente monocroma (solo blanco/negro/acento rojo)
Fondos de cuadrícula dot-matrix y numerales decorativos
Combinación de tipografía industrial (mono + sans grotesk)
Componentes transparentes / con capas de vidrio
Recetas de componentes: hero, feature grid, CTA, data table
Output listo para Tailwind

Demo en vivo

Cómo se ve en la práctica

listo

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "nothing-design-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ],
      "_inferred": true
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "nothing-design-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/dominikmartn/nothing-design-skill",
        "~/.claude/skills/nothing-design"
      ]
    }
  ]
}

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

{
  "context_servers": {
    "nothing-design-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/dominikmartn/nothing-design-skill",
          "~/.claude/skills/nothing-design"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

claude mcp add nothing-design-skill -- git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Nothing Design Skill

Construir una landing page al estilo Nothing

👤 Devs frontend / desarrolladores-diseñadores ⏱ ~45 min intermediate

Cuándo usarlo: El brief de marca dice 'industrial / minimalista'; quieres una landing con sabor Nothing sin inventar un sistema desde cero.

Requisitos previos

Skill instalado — git clone https://github.com/dominikmartn/nothing-design-skill ~/.claude/skills/nothing-design
Proyecto Tailwind — Configuración existente de Next.js o Vite + Tailwind

Flujo

Establecer tokens

Nothing-design: emite los design tokens (colores, escala tipográfica, espaciado) para mi configuración Tailwind.✓ Copiado

→ Fragmento de extensión Tailwind con paleta monocroma + fuentes mono/grotesk
Componer el héroe

Genera una sección héroe: numeral enorme '01.', titular, subtítulo, fondo de cuadrícula dot-matrix. Solo Tailwind, sin imágenes.✓ Copiado

→ JSX de héroe que coincide con el lenguaje
Refinar

El titular debería ser más seguro — Nothing usa alto contraste y grotesk. Ajusta.✓ Copiado

→ El peso tipográfico y el tracking cambian para coincidir con la marca

Resultado: Landing page que parece pertenecer a un producto adyacente a Nothing.

Errores comunes

Añadir colores cálidos rompe el lenguaje — El skill rechaza sugerencias fuera de la paleta si se le pide; apóyate en él

Combinar con: filesystem · shadcn-ui-mcp

Rediseñar un dashboard existente al estilo Nothing

👤 Devs que mantienen herramientas internas ⏱ ~60 min advanced

Cuándo usarlo: El admin interno parece Bootstrap 4; quieres que se sienta intencional.

Flujo

Inventariar

Nothing-design: escanea src/components/. Lista los componentes y propón un equivalente en el lenguaje Nothing para cada uno.✓ Copiado

→ Propuesta por componente
Refactorizar uno

Refactoriza DataTable.tsx al estilo Nothing. Fuente mono para números, separadores dot-matrix, acento solo en hover de fila.✓ Copiado

→ Componente actualizado que coincide con el lenguaje

Resultado: Dashboard monocromo cohesivo.

Errores comunes

Difícil de leer de un vistazo — Aumenta el contraste; Nothing es alto contraste, no bajo contraste

Generar una presentación de marketing con estética Nothing

👤 Devs de marketing ⏱ ~30 min intermediate

Cuándo usarlo: Quieres una presentación que no parezca una plantilla genérica.

Flujo

Componer

Nothing-design: genera una presentación HTML de 12 diapositivas para el lanzamiento de producto. Usa numerales enorm como marcadores de sección.✓ Copiado

→ Presentación HTML única que coincide con el lenguaje

Resultado: Presentación que refuerza la marca sin esfuerzo.

Errores comunes

Demasiado oscuro para una sala de proyector brillante — El skill incluye una inversión 'light' — solicítala

Combinar con: guizang-ppt-skill

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

nothing-design-skill + shadcn-ui-mcp

Usar componentes shadcn con tema Nothing

shadcn: obtén Form. Nothing-design: rediseña con el lenguaje de marca.✓ Copiado

nothing-design-skill + filesystem

Aplicar en todo un proyecto

Nothing-design: escanea components/, propón rediseños, luego aplica uno por uno.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar
emit_tokens	(ninguno)	Configuración del proyecto
generate_component	kind: hero\|cta\|table\|card, content	Añadir una sección
restyle_existing	path, target_kind	Poner componentes legacy en línea con el lenguaje

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: N/A
Tokens por llamada: 500–3000
Monetario: Gratis
Consejo: Genera los tokens una vez, luego estiliza los componentes de forma incremental — no re-emitas tokens en cada llamada

Seguridad

Permisos, secretos, alcance

Ámbitos mínimos: filesystem-read filesystem-write

Almacenamiento de credenciales: Ninguno

Salida de datos: Ninguno

Esta es una interpretación hecha por fans; no está afiliada con la empresa Nothing

Resolución de problemas

Errores comunes y soluciones

El output usa otros colores

Re-prompta: 'solo monocromo, acento-rojo permitido en <10% de superficie'

La combinación tipográfica se siente incorrecta

Especifica las fuentes mono + grotesk exactas en el prompt; el predeterminado es JetBrains Mono + Inter

El fondo dot-matrix parece ruido

Reduce la densidad de puntos; el skill tiene demasiada densidad por defecto en algunas pantallas

Alternativas

Nothing Design Skill vs otros

Alternativa	Cuándo usarla	Contrapartida
Valores predeterminados de shadcn/ui	Quieres un look más convencional	Genérico; sin voz de marca
Tailwind UI	Quieres algo pulido pero genérico	Se parece a todos los demás sitios Tailwind UI
Sistema de diseño personalizado	Tienes un diseñador de marca	Lento; costoso

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills