Usar un prompt de snippet en tu proyecto

Has copiado un prompt. Aquí tienes dónde pegarlo, qué decir alrededor y qué comprobar cuando el resultado no coincide con la demo.

Paso 1: apunta la herramienta al archivo correcto

Antes de pegar, dile a la herramienta en qué archivo van los estilos y qué elemento recibe la clase. Con una línea basta: "Aplica esto al botón de envío en src/components/Form.tsx, los estilos van en form.css." Sin esa línea, Claude Code hará una suposición razonable y Cursor a veces creará un archivo nuevo junto al que querías.

Paso 2: pega el prompt tal cual

El prompt ya contiene los números y el marcado. No lo resumas. No recortes las líneas de hover y focus para ahorrar espacio; son justo las partes que las herramientas hacen mal por su cuenta.

Paso 3: comprueba tres cosas

• El nombre de clase sobrevivió. A las herramientas les gusta renombrar .btn-041 a .primary-button. Bien si lo pediste. Si no, puede que el resto del prompt ya no apunte a nada.
• No se añadió ninguna dependencia. Abre el diff. Si package.json cambió para añadir una librería de animación por un keyframe de 12 líneas, revierte eso y repite "solo CSS puro".
• El focus sigue funcionando. Tabula hasta el elemento. Si el contorno ha desaparecido, la herramienta quitó la regla :focus-visible. Pídele que la devuelva.

Adaptar los colores

La forma más rápida de encajar un snippet en tu paleta: pega el prompt y añade "sustituye #2563eb por nuestro azul de marca, que es #1b4fd8, y mantén los mismos pasos de luminosidad para hover y active". La herramienta recalculará los tonos más oscuros. Si tu proyecto usa custom properties de CSS, di "usa var(--brand) en vez del hex" y las conectará.

Cuando el resultado sigue viéndose distinto

Nueve de cada diez veces es una de estas:

1. Un reset global de tu proyecto pone border-radius: 0 o box-shadow: none en los botones. Revisa la cascada.
2. La fuente. Las demos usan la pila de fuentes del sistema. Tu proyecto usa algo más estrecho o más ancho, así que el padding se ve raro. Ajusta el padding, no la fuente.
3. El preflight de Tailwind. Elimina los fondos de los botones. Añade type="button" y la clase, y asegúrate de que el archivo CSS carga después de las utilidades.

Usar el gemelo en markdown

Cada página de snippet tiene una versión .md en la misma dirección. Si tu herramienta puede leer URLs (Claude Code puede, con un fetch), te saltas el portapapeles y dices "lee designforai.dev/snippet/btn-041.md y aplícalo al botón de pago". Mismo contenido, sin paso de copia.