Cómo están escritos los prompts de este sitio

Cada snippet viene con un prompt, y cada prompt sigue la misma forma. Esta página explica esa forma para que puedas escribir el tuyo cuando la estantería no tenga lo que necesitas.

La única regla: describe el resultado, no el código

Una herramienta de programación con IA es buena convirtiendo una descripción precisa en CSS. Es mala adivinando qué significa "que quede más bonito". Por eso el prompt nombra el color como valor hex, el radio en píxeles, la sombra con sus desplazamientos y su desenfoque, y qué pasa en hover, focus y active. Nada queda al gusto.

Este es el prompt de Bloque cobalto:

Un botón azul sólido #2563eb con texto blanco de 15px semibold, radio de 8px y padding de 13px por 24px. Lleva una sombra azul tenue de 1px; al pasar el cursor se oscurece a #1d4ed8 y la sombra crece a 0 4px 12px con azul al 35%. En active pasa a #1e40af sin sombra. El foco muestra un outline azul translúcido de 3px.

Léelo otra vez y cuenta los números. Seis. Esa es la diferencia entre un prompt que reproduce el botón y uno que produce "un botón azul", cosa que cualquier herramienta ya hace sola, normalmente mal.

Las cuatro partes

1. Forma y tamaño. Padding, radio, borde, tamaño y peso de fuente. Si el elemento tiene un ancho fijo, dilo.
2. Color. Fondo, texto, borde, cada uno como hex o como valor rgba. Nombra el espacio de color solo cuando importe (oklch para degradados que no deben ensuciarse).
3. Estados. Hover, focus-visible, active, disabled. Di qué cambia, cuánto, y cuánto dura la transición.
4. Movimiento. Si algo se anima, da la duración, el easing y si se repite. Menciona prefers-reduced-motion cuando la animación sea decorativa.

Qué añade el selector de herramienta

El pequeño menú "para" junto a cada botón de Copiar prompt antepone una frase ajustada a la herramienta: mantén los nombres de clase, usa CSS puro, no añadas librerías. Claude Code y Cursor instalan encantados una dependencia para dibujar un spinner si les dejas. Esa frase lo evita. La elección se recuerda en tu navegador, así que la fijas una sola vez.

Por qué se pega también el marcado

El prompt copia el HTML de la demo debajo de la descripción. Sin él, la herramienta se inventa su propia estructura, y una tarjeta con otro orden de elementos necesita otro CSS. Con él, la herramienta estiliza exactamente lo que hay en esta página.

Escribir el tuyo

Abre el inspector del navegador sobre cualquier elemento que te guste, lee los valores computados y anótalos en el orden de cuatro partes de arriba. Sáltate los adjetivos. Si te pillas escribiendo "moderno" o "limpio", cambia la palabra por un número. Un prompt escrito así suele ser más corto que el CSS que produce, y sobrevive a que lo pegues en otra herramienta el mes que viene.