📐 Skill de diseño global

¿Eres nuevo aquí? Una skill (ya presentada en la Ruta 3) es un conjunto de instrucciones guardado en un archivo que el agente consulta por su cuenta antes de hacer cierto tipo de trabajo, como una ficha de procedimiento que un empleado saca del cajón antes de empezar una tarea que ya tiene una «forma correcta de hacerse» en la empresa. Una skill de diseño es este mismo mecanismo, especializado en front-end: guarda la paleta de colores, la tipografía, el espaciado, el estilo visual y los principios que definen lo que es «bonito» para ti, no para todo internet.

Piensa en un estudio de arquitectura de verdad: existe una carpeta física (o un PDF) llamada «manual de identidad visual» — colores exactos en código hexadecimal, fuentes aprobadas, márgenes mínimos, ejemplos de lo que se puede y lo que no se puede hacer. Todo nuevo pasante lo lee antes del primer proyecto. Nadie vuelve a explicar cada color en una reunión cada vez. La skill de diseño es exactamente ese manual, solo que el «pasante» es el agente y lee el manual por su cuenta, al inicio de cada tarea de front-end — sin que tengas que volver a escribir nada.

"Crea un sitio bonito" es una solicitud vaga porque "bonito" no tiene una definición fija: cada persona del planeta con la que se entrenó ese modelo tiene una idea diferente de lo que es "bonito", y el modelo calcula el promedio de todo, que es justamente ese "olor a IA" del módulo anterior. En cambio, una solicitud respaldada por una skill de diseño no necesita decir "bonito" ni una sola vez: la skill ya define de antemano qué significa "bonito" para ti: qué paleta usar, qué tipografía, qué espaciado y qué tono (¿serio?, ¿divertido?, ¿lujoso?, ¿artesanal?). El agente ya no inventa nada en lo visual: aplica la regla que ya existe.

Leyenda: arriba, sin ningún manual, el pedido vago cae directamente en el promedio estadístico. Abajo, el agente tiene la costumbre de abrir la skill de diseño ANTES de escribir cualquier front-end: incluso un pedido corto ya sale con la paleta, la tipografía y el tono correctos, porque la decisión ya estaba tomada en el manual.

Toda skill (recordando la Ruta 3) tiene una descripción/activador — la frase breve que le indica al agente CUÁNDO consultar ese archivo, sin tener que leerlo completo para decidirlo. En una skill de diseño, el activador es algo como «úsala antes de crear, rediseñar o revisar cualquier página, componente o interfaz». Eso hace que el agente abra el manual por su cuenta, incluso cuando solo pediste «crea un formulario de contacto» sin mencionar «diseño» ni «skill» ni una sola vez.

Después del disparador vienen las reglas de estilo propiamente dichas: paleta de colores (con los códigos hexadecimales exactos, no un "azul" o "verde" vago), la tipografía (qué fuentes usar, de qué tamaño, para títulos y para el texto corrido — tipografía es solo el nombre técnico para “la elección y el estilo de las letras”), espaciado (cuánto espacio hay entre elementos, esquinas rectas o redondeadas) y el tono visual general (¿serio y corporativo? ¿divertido y colorido? ¿minimalista y sofisticado?). Por último, una buena skill incluye ejemplos — fragmentos de código o descripciones concretas de "esto está bien" y "esto está mal", porque los ejemplos concretos guían mejor que las reglas abstractas.

¿Eres nuevo aquí? "Global vs. proyecto" se trata de DÓNDE se guarda la skill y QUÉ proyectos pueden verla (tema que se profundiza en el módulo 3.5, pero que volvemos a abordar aquí porque es central). Una skill de proyecto vive dentro de la carpeta de ese proyecto específico y solo sirve allí. Una skill global queda instalada una sola vez en un lugar de tu computadora que todos los proyectos de Claude Code detectan automáticamente; funciona en cualquier carpeta que abras, sin tener que copiar el archivo de nuevo en cada proyecto nuevo.

La diferencia práctica es enorme. Sin una skill global, cada vez que abres un proyecto nuevo —el sitio de la panadería, el dashboard de la consultora, la landing page del curso— tienes que volver a explicar desde cero: «usa este color, esta fuente, este espaciado». Eso cansa, es fácil olvidar algún detalle y el resultado varía de un proyecto a otro, aunque quisieras el MISMO estilo en todos. Con la skill instalada globalmente, guardas el manual una sola vez y cada proyecto nuevo —incluso dentro de seis meses, incluso uno que hoy ni te imaginas— ya empieza con esa misma referencia.

La disciplina que separa una skill útil de una skill olvidada cabe en una sola frase: invocar siempre la skill de diseño ANTES de escribir cualquier código de front-end, nunca después. Si dejas que el agente escriba primero el componente y «lo revise con la skill» después, ya habrá dedicado esfuerzo a construir basándose en una suposición genérica: es trabajo doble. El hábito correcto es: llega un pedido de front-end → se abre primero la skill → solo entonces se escribe el código, ya con la referencia correcta.

Objetivo: probar, en tu propio entorno, si una skill de diseño instalada globalmente cambia el resultado de una solicitud sencilla de un componente, sin que tengas que mencionar el color, la fuente ni el estilo en ningún momento, porque eso ya debería venir de la skill.

Antes de escribir HTML o CSS, verifica si hay una skill de diseño instalada
y úsala como referencia de estilo. Ahora crea una tarjeta de producto para 
con título, precio y un botón para comprar. No me preguntes el color ni la fuente: decide según la skill.

Si ya tienes una skill de diseño instalada globalmente, el resultado debería usar su paleta y tipografía, sin un «Get Started» azul genérico. Si todavía no tienes ninguna skill instalada, probablemente el agente te avisará que no encontró ninguna; eso ya confirma la lección: sin un manual que consultar, vuelve a hacer conjeturas. (Los módulos 5.6 y 5.7 explican paso a paso cómo instalar tu propia skill de diseño, con la carpeta de marca completa.)

La skill de diseño aborda la causa 1 del módulo 5.1: la falta de referencia, pero no aborda la causa 2: nadie obliga al agente a MIRAR de verdad el resultado antes de entregártelo. Una skill bien escrita reduce mucho el «aire de IA» porque el agente parte de buenas decisiones, pero no reemplaza una mirada crítica al resultado final: el CSS puede estar técnicamente bien y aun así verse desalineado, apretado o con poco contraste en una pantalla real. Justamente esa segunda mitad es lo que resuelve el siguiente módulo.