Prompts para construir: cómo pedirle bien las cosas a Claude Code

Un buen prompt tiene tres partes:

Parte	Pregunta que responde	Ejemplo
Contexto	¿Qué es este proyecto?	”Tengo una página web de presentación personal en HTML.”
Objetivo	¿Qué quiero conseguir?	”Quiero agregar una sección de contacto.”
Detalles	¿Cómo lo quiero exactamente?	”Con un formulario que pida nombre, email y mensaje.”

Juntado: “Tengo una página web de presentación personal en HTML. Quiero agregar una sección de contacto con un formulario que pida nombre, email y mensaje. Que combine visualmente con el resto de la página.”

Cuanto más concreto seas, mejor resultado obtienes.

Cuando quieres construir algo desde cero, estos patrones funcionan bien:

Para crear un archivo o componente:

“Crea un archivo [nombre] que haga [función]. Que se vea [descripción visual] y funcione en [contexto: celular, escritorio, etc.].”

Para empezar un proyecto nuevo:

“Quiero crear [tipo de proyecto] para [para qué sirve]. Empieza por la estructura básica de archivos y explícame qué va a hacer cada uno.”

Para agregar una funcionalidad:

“A esta página que ya existe agrega [funcionalidad]. Que no cambie el diseño actual, solo agrega lo nuevo.”

Truco: pídele siempre que te explique qué hizo. Así aprendes y puedes detectar si algo no está bien.

Para arreglar un error:

“Me sale este error: [pega el error exacto tal como aparece]. No cambies nada más, solo arregla este problema.”

Para cambiar algo que no te gusta:

“El botón de contacto está muy abajo y no se ve bien en celular. Muévelo arriba del formulario y agranda la fuente.”

Para deshacer algo:

“Lo que acabas de hacer no me convence. Vuelve al estado anterior y explícame otra forma de hacerlo.”

Truco: cuando hay un error, copia el texto completo del mensaje (aunque sea en inglés y no lo entiendas). Claude lo lee y sabe exactamente qué pasó.

No necesitas entender cada línea, pero sí conviene saber qué hace cada parte. Estos prompts ayudan:

“Explícame en términos simples qué hace el archivo [nombre]. Como si yo no supiera programar.”

“¿Qué pasa si cambio [esta parte]? ¿Rompería algo?”

“¿Qué archivos son los más importantes en este proyecto y qué hace cada uno?”

“Dame un resumen en 3 puntos de cómo funciona [parte del proyecto].”

Pedir explicaciones no es señal de debilidad: es la forma más rápida de aprender.

Copia esta plantilla y rellena los huecos cada vez que empieces algo nuevo:

Contexto: [describe brevemente tu proyecto y en qué tecnología está]
Quiero: [describe el resultado que necesitas]
Requisitos: [lista los detalles importantes]
Restricciones: [qué NO debe cambiar o tocar]
Al terminar: explícame qué cambiaste y por qué.

Ejemplo real:

Contexto: Tengo un sitio de portfolio en HTML/CSS con un archivo index.html y una carpeta de imágenes.
Quiero: Agregar una sección "Mis proyectos" con 3 tarjetas que muestren nombre, descripción e imagen.
Requisitos: Que las tarjetas sean responsivas (funcionen en celular). Colores en azul marino y blanco.
Restricciones: No toques el encabezado ni el pie de página existentes.
Al terminar: explícame qué archivos cambiaste y cómo agregar más proyectos en el futuro.

Problema	Solución
Claude cambió cosas que no pedí	Dile: “Deshaz los cambios en [archivo], déjalo como estaba”
El resultado no es lo que esperaba	Sé más específico: describe con más detalle qué quieres visualmente
Claude dice que no puede hacer algo	Divide la tarea en pasos más pequeños y pídelos uno por uno
Lleva varios intentos y sigue mal	Empieza un chat nuevo, describe el contexto de cero y prueba otra forma de explicarlo