Consejos de prompts para que la IA desarrolle tu app: qué escribir para obtener mejores resultados

¿Alguna vez le pediste a Claude Code o ChatGPT que "creara una app de tareas" y recibiste algo completamente diferente a lo que tenías en mente? La IA generativa es poderosa, pero cuando tus instrucciones son vagas, la IA rellena los huecos con sus propias suposiciones.

Este artículo cubre 5 consejos prácticos para escribir mejores prompts, con ejemplos concretos de antes y después que cualquier persona, incluso principiantes, puede seguir.

1. Por qué tu prompt determina el resultado

La IA generativa escribe código basándose únicamente en tus instrucciones (prompt). Un colega humano podría preguntar "¿te refieres a esto?", pero la IA genera la respuesta más probable con solo la información proporcionada, por lo que un contexto insuficiente lleva a resultados fuera de objetivo.

Problemas causados por instrucciones vagas

• La IA elige un framework diferente al que querías
• La interfaz de usuario (diseño de pantalla) no coincide con tus expectativas
• Faltan funcionalidades esenciales o se agregan innecesarias
• El manejo de errores y las validaciones son insuficientes

La otra cara de la moneda: ser específico en tu prompt mejora drásticamente la calidad del resultado de la IA. Para saber más sobre cómo funciona la IA generativa, consulta nuestro artículo sobre ¿Qué es la IA generativa?.

2. 5 consejos para escribir prompts eficaces

Domina estos cinco puntos clave para mejorar significativamente la calidad del código generado por la IA.

Consejo 1: Especifica el stack tecnológico

En lugar de "crea una app web", indica el lenguaje, framework y base de datos exactos que deseas.

❌ Malo:
"Crea una app de tareas"

✅ Bueno (para ingenieros):
"Crea una app de tareas usando React + TypeScript.
Usa useState para la gestión de estado y
localStorage para la persistencia de datos."

✅ Bueno (para no ingenieros):
"Crea una app de tareas que funcione en el navegador.
Asegúrate de que los datos no se pierdan al cerrar la página.
Te dejo la elección de tecnologías,
pero que sea fácil de entender para principiantes."

Consejo 2: Enumera las funcionalidades con claridad

Presenta las funcionalidades requeridas como una lista con viñetas, marcando cada una como obligatoria u opcional. La IA interpreta las listas con viñetas con mayor precisión que los párrafos largos.

✅ Bueno:
"Implementa las siguientes funcionalidades:
[Obligatorio]
- Añadir tareas (campo de texto + botón de añadir)
- Marcar tareas como completadas
- Eliminar tareas
[Opcional]
- Establecer fechas límite para las tareas
- Filtrar tareas completadas"

Consejo 3: Describe la interfaz de usuario de forma concreta

"Que se vea bonita" no le dice casi nada a la IA. Proporciona detalles sobre colores, disposición y comportamiento.

✅ Bueno (para ingenieros):
"Requisitos de UI:
- Usar Tailwind CSS
- Modo oscuro (fondo: slate-900)
- Diseño con tarjetas y border-radius de 8px
- Diseño responsive mobile-first
- Botón de acción flotante fijo en la esquina inferior derecha"

✅ Bueno (para no ingenieros):
"Cómo debe verse:
- Tema de fondo oscuro
- Mostrar cada tarea como una tarjeta
- Que sea fácil de usar en el móvil
- Mantener el botón de añadir siempre visible abajo a la derecha
- Simple y limpio, como la app Notas de Apple"

Consejo 4: Indica las restricciones y lo que NO debe incluirse

Además de lo que deseas, decirle a la IA lo que no quieres mejora significativamente la precisión.

✅ Bueno (para ingenieros):
"Restricciones:
- La única librería externa permitida es Tailwind CSS
- No usar librerías de gestión de estado como Redux o Zustand
- No se necesita backend (solo frontend)
- Escribir los comentarios en español"

✅ Bueno (para no ingenieros):
"Restricciones:
- No debería requerir configuración de servidor ni base de datos
- No necesito función de inicio de sesión
- Que sea lo más simple posible
- Añadir comentarios explicativos en el código"

Consejo 5: Especifica el formato de salida

Indicarle a la IA cómo estructurar la salida hace que el código sea inmediatamente utilizable en proyectos reales.

✅ Bueno (para ingenieros):
"Formato de salida:
- Separar en archivos independientes por componente
  (App.tsx, TodoList.tsx, TodoItem.tsx, AddTodo.tsx)
- Poner las definiciones de tipos en types.ts
- Añadir la ruta del archivo como comentario al inicio de cada archivo"

✅ Bueno (para no ingenieros):
"Formato de salida:
- No pongas todo en un solo archivo enorme,
  sepáralo por funcionalidad
- Al inicio de cada archivo, explica en español
  sencillo qué hace ese archivo
- Incluye instrucciones de configuración paso a paso
  para que pueda copiar, pegar y ejecutar"

3. Prompt malo vs. prompt bueno (ejemplos reales)

Comparemos prompts usando una "app de control de gastos" como ejemplo para ver cómo la calidad del prompt afecta el resultado.

Prompt malo

Crea una app para controlar gastos.
Debe registrar ingresos y gastos
y mostrar gráficos.

Con esta instrucción, la IA tiene que adivinar:

• Lenguaje (¿Python? ¿JavaScript? ¿Swift?)
• ¿Web o móvil?
• Tipo de gráfico (¿barras? ¿circular? ¿líneas?)
• Almacenamiento de datos (¿base de datos? ¿archivo local?)

Prompt bueno (para ingenieros)

Crea una app web de control de gastos usando
Next.js (App Router) + TypeScript.

[Stack tecnológico]
- Frontend: Next.js 14, TypeScript, Tailwind CSS
- Gráficos: librería recharts
- Almacenamiento de datos: localStorage (sin base de datos)

[Funcionalidades]
1. Registrar transacciones (fecha, categoría, importe, nota)
2. Gráfico circular por categoría (mensual)
3. Gráfico de líneas con tendencias mensuales de ingresos/gastos
4. Vista de lista con función de eliminar

[Requisitos de UI]
- Mobile-first
- Navegación por pestañas en la parte inferior (Entrada / Lista / Gráficos)
- Colores por defecto de Tailwind CSS

[Restricciones]
- Sin APIs externas
- Sin autenticación
- Separar en archivos de componentes independientes

[Formato de salida]
- Comentario con la ruta del archivo al inicio de cada archivo
- Comentarios del código en español

Prompt bueno (para no ingenieros)

Incluso sin conocimientos de programación, describir "qué hace la app", "cómo se ve" y "qué no necesitas" es suficiente para obtener excelentes resultados.

Crea una app de control de gastos que funcione en el navegador.
Soy principiante, así que elige las mejores tecnologías.

[Lo que quiero]
1. Registrar entradas con fecha, categoría (comida,
   transporte, etc.), importe y una nota
2. Ver un gráfico circular con los gastos por categoría
3. Ver un gráfico de líneas que muestre si estoy gastando
   más que el mes pasado
4. Ver todos los registros en una lista y eliminar errores

[Cómo debe verse]
- Fácil de usar en el móvil
- Pestañas en la parte inferior (Entrada / Lista / Gráficos)
- Colores simples y limpios

[Lo que no necesito]
- Función de inicio de sesión
- Nada que requiera configuración de servidor
  (debe funcionar completamente en el navegador)

[Además]
- Incluir instrucciones de configuración para principiantes
- Añadir comentarios explicativos en el código

4. Plantillas de prompts para copiar y pegar

Solo rellena estas plantillas para crear prompts de alta calidad. Cópialas y úsalas directamente.

Crea una [tipo de app].

[Stack tecnológico]
- Lenguaje: [ej., TypeScript]
- Framework: [ej., React / Next.js / Laravel]
- CSS: [ej., Tailwind CSS]
- Almacenamiento de datos: [ej., localStorage / SQLite / MySQL]

[Funcionalidades] (marcar como Obligatorio / Opcional)
1. [Funcionalidad A] (Obligatorio)
2. [Funcionalidad B] (Obligatorio)
3. [Funcionalidad C] (Opcional)

[Requisitos de UI]
- [Enfoque de diseño]
- [Esquema de colores / tema]
- [Diseño responsive: sí/no]

[Restricciones]
- [Librerías a evitar / funcionalidades innecesarias]

[Formato de salida]
- [Enfoque de separación de archivos]
- [Idioma de los comentarios]

Plantilla para no ingenieros

Incluso sin conocimientos técnicos, rellenar esta plantilla le da a la IA todo lo que necesita.

Crea una [tipo de app].
Soy principiante en programación, así que elige
las mejores tecnologías por mí.

[Lo que quiero] (marcar como "Imprescindible" / "Deseable")
1. [Lo que quiero #1] (Imprescindible)
2. [Lo que quiero #2] (Imprescindible)
3. [Lo que quiero #3] (Deseable)

[Cómo debe verse]
- [¿Para móvil? ¿Para ordenador?]
- [App de referencia: "como Notion", "como Trello"]
- [¿Tema claro? ¿Modo oscuro?]

[Lo que no necesito]
- [Inicio de sesión, pagos, etc.]

[Además]
- Incluir instrucciones de configuración para principiantes
- Añadir comentarios explicativos en el código
- Mantener la estructura general lo más simple posible

5. Cómo mejorar los resultados con iteración

Conseguir código perfecto con un solo prompt es poco frecuente. Construir progresivamente mediante una conversación con la IA es el enfoque más eficiente.

Paso 1: Comienza con el esqueleto

Empieza pidiendo solo la estructura básica.

"Primero, configura la estructura básica del proyecto
e implementa solo la función de añadir tareas."

Paso 2: Prueba y da retroalimentación específica

Ejecuta el código generado y reporta los problemas concretos.

"El campo de texto no se borra al hacer clic
en el botón de añadir. Por favor, limpia el campo después de añadir.
Además, se pueden añadir cadenas vacías:
añade una validación para evitarlo."

Paso 3: Agrega funcionalidades de forma incremental

Una vez que lo básico funciona, añade funcionalidades paso a paso.

"Añadir y eliminar tareas ya funciona correctamente.
Ahora, por favor añade:
1. Marcar como completada (checkbox)
2. Filtro para mostrar/ocultar tareas completadas
Añádelo al código existente sin cambiar
lo que ya funciona."

Para una visión más amplia sobre la creación de apps con IA, consulta nuestro artículo sobre si los principiantes pueden crear apps con IA.

6. Errores comunes de principiantes

Error 1: Pedir todo de una sola vez

Solicitar más de 10 funcionalidades en un solo prompt satura a la IA, lo que resulta en implementaciones a medias. Pide de 3 a 5 funcionalidades a la vez para obtener los mejores resultados.

Error 2: Usar un lenguaje vago

"Que se vea bonita" o "agrega algunos datos de ejemplo" son el tipo de instrucciones vagas con las que la IA más dificultades tiene. Usa números específicos y ejemplos concretos en su lugar.

❌ "Añade algunos datos de ejemplo"
✅ "Añade estas 5 entradas de ejemplo como datos iniciales:
   - Supermercado 12,50 € (Alimentación)
   - Billete de autobús 1,40 € (Transporte)
   - Comida del mediodía 10,00 € (Alimentación)
   - Libro 16,99 € (Educación)
   - Factura de la luz 75,00 € (Suministros)"

Error 3: Solo pegar el mensaje de error

Pegar solo el mensaje de error sin contexto puede llevar a la IA a una solución incorrecta. Describe qué hiciste y qué sucedió.

❌ "TypeError: Cannot read properties of null"

✅ "Al hacer clic en el botón de eliminar una tarea,
aparece este error:
TypeError: Cannot read properties of null
El error ocurre en la línea 42 de TodoList.tsx.
Añadir y mostrar tareas funciona correctamente."

Error 4: Iniciar un chat nuevo en lugar de continuar

El chat de IA mantiene el contexto a lo largo de la conversación. Iniciar un chat nuevo pierde todas las decisiones de diseño tomadas hasta el momento. Continúa en el mismo chat para mayor eficiencia.

7. Resumen

Preguntas frecuentes