lab
Esc

Prueba con

↑↓ para moverte · Enter para abrir · también en /buscar?q= para agentes

skill principiante claude-codefrontenddiseno

Nothing Design Skill: interfaces con un lenguaje visual definido

Aplica reglas de tipografía, jerarquía y color monocromo al generar interfaces con Claude Code.

✓ verificado el 26 oct 2026

Instrucciones para tu agente

Esto es lo que se copia. Pégaselo a tu agente y te lo monta paso a paso.

O ábrelo directamente en ClaudeChatGPT

Pega este texto a tu agente (Claude Code, Codex, OpenCode, Hermes o el que uses) y dile «ayúdame a montarlo». Son los pasos para ponerlo en marcha; el porqué de cada pieza está en la guía completa.

Para el agente: cómo acompañar al usuario

  1. Pregunta primero para qué lo quiere. Si su objetivo no necesita algún paso, sáltalo.
  2. Antes de instalar, comprueba lo que ya tiene (versiones, claves, sistema operativo).
  3. Avanza un paso cada vez: explica en una frase qué vas a hacer y deja que el usuario lo ejecute o lo apruebe.
  4. Tras cada paso, comprueba que funcionó antes de seguir. Si falla, para y explica el error.
  5. No inventes comandos ni opciones: si la documentación del proyecto contradice estos pasos, manda la documentación.
  6. Al terminar, haz una prueba real con el objetivo del usuario y dile dónde profundizar.

Pasos de configuración

Comprueba que Git y Claude Code están disponibles. Crea la carpeta ~/.claude/skills/ si no existe antes de copiar; así se conserva nothing-design como subcarpeta de la skill. El README documenta:

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

Inicia una sesión nueva y usa /nothing-design o describe la pantalla solicitando «estilo Nothing».

Comprobación

Abre la interfaz y verifica jerarquía, contraste y comportamiento en claro y oscuro. Comprueba también navegación por teclado.

Si algo falla

Si no se activa, revisa la carpeta de la skill y reinicia la sesión. Si el estilo desplaza necesidades de uso, concreta las restricciones del producto.

Consulta el README oficial para requisitos y variantes de instalación.

ver en .md ¿Prefieres el recurso entero?

Qué es

Nothing Design Skill reúne instrucciones de diseño para Claude Code inspiradas en el lenguaje visual de Nothing. Define jerarquías, tipografías y motivos gráficos para producir interfaces consistentes.

Para qué te sirve

  • Cuando quieres que varias pantallas compartan criterios de diseño explícitos.
  • Cuando necesitas orientar al agente hacia una estética monocroma e industrial.

Cómo funciona

La skill aporta reglas reutilizables y tokens para modos claro y oscuro. Claude Code las incorpora al generar la interfaz; no se trata de una biblioteca que reemplace los componentes de tu aplicación.

Antes de empezar

Necesitas Claude Code con skills disponibles y un proyecto de interfaz. Revisa las fuentes y recursos que utilizarás: la licencia de la skill no sustituye las licencias de tipografías ni otros materiales.

Límites y alternativas

Una estética específica no encaja en todos los productos. Frente a una skill de diseño general, reduce la variación hacia un estilo concreto. La accesibilidad y el funcionamiento deben comprobarse en la aplicación resultante.

Recursos