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

La diferencia entre un resultado mediocre y uno excelente casi siempre está en cómo pides las cosas. Esta guía te enseña la estructura que funciona y te da ejemplos listos para copiar. Toca cada paso para abrirlo.

The difference between a mediocre result and an excellent one almost always comes down to how you ask. This guide teaches you the structure that works and gives you ready-to-copy examples. Tap each step to open it.

Antes de empezar: necesitas tener Claude Code instalado y funcionando (guía).Before you start: you need Claude Code installed and working (guide).

1 La fórmula: contexto + objetivo + detallesThe formula: context + goal + details

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.

A good prompt has three parts:

Part	Question it answers	Example
Context	What is this project?	”I have a personal landing page made with HTML.”
Goal	What do I want to achieve?	”I want to add a contact section.”
Details	Exactly how do I want it?	”With a form that asks for name, email and message.”

Combined: “I have a personal landing page in HTML. I want to add a contact section with a form asking for name, email and message. It should visually match the rest of the page.”

The more specific you are, the better the result.

2 Prompts para crear cosas nuevasPrompts for creating new things

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.

When you want to build something from scratch, these patterns work well:

To create a file or component:

“Create a [name] file that does [function]. It should look [visual description] and work on [context: mobile, desktop, etc.].”

To start a new project:

“I want to create a [project type] for [what it's for]. Start with the basic file structure and explain what each one will do.”

To add a feature:

“To this existing page add [feature]. Don’t change the current design, only add the new thing.”

Tip: always ask it to explain what it did. That way you learn and can catch anything that’s off.

3 Prompts para corregir o cambiar algoPrompts for fixing or changing something

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ó.

To fix an error:

“I’m getting this error: [paste the exact error as it appears]. Don’t change anything else, just fix this problem.”

To change something you don’t like:

“The contact button is too far down and doesn’t look good on mobile. Move it above the form and make the font larger.”

To undo something:

“What you just did doesn’t work for me. Go back to the previous state and explain another way to do it.”

Tip: when there’s an error, copy the full error message (even if it’s in English and you don’t understand it). Claude reads it and knows exactly what happened.

4 Prompts para entender tu códigoPrompts for understanding your code

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.

You don’t need to understand every line, but it helps to know what each part does. These prompts help:

“Explain in simple terms what the [name] file does. As if I didn’t know how to code.”

“What happens if I change [this part]? Would it break something?”

“Which files are the most important in this project and what does each one do?”

“Give me a 3-point summary of how [part of the project] works.”

Asking for explanations isn’t a sign of weakness, it’s the fastest way to learn.

Atajo: plantilla de prompt lista para copiarShortcut: ready-to-copy prompt template

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.

Copy this template and fill in the blanks each time you start something new:

Context: [briefly describe your project and what technology it uses]
I want: [describe the result you need]
Requirements: [list the important details]
Constraints: [what should NOT be changed or touched]
When done: explain what you changed and why.

Real example:

Context: I have a portfolio site in HTML/CSS with an index.html file and an images folder.
I want: Add a "My Projects" section with 3 cards showing each project's name, description and image.
Requirements: Cards must be responsive (work on mobile). Colors in navy blue and white.
Constraints: Don't touch the existing header or footer.
When done: explain which files you changed and how to add more projects in the future.

Si algo sale malIf something goes wrong

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

Problem	Fix
Claude changed things I didn’t ask for	Say: “Undo the changes in `[file]`, leave it as it was”
The result isn’t what I expected	Be more specific: describe in more detail what you want visually
Claude says it can’t do something	Break the task into smaller steps and ask one at a time
After several tries it’s still wrong	Start a new chat, describe the context from scratch and try explaining it differently

Prompts para construir: cómo pedirle bien las cosas a Claude CodePrompts for building: how to ask Claude Code the right way

Cambiar PlaylistSwitch Playlist