← Volver al Blog DevBlog
Ebook Gratuito 2024

Guía Profesional de Prompts para Desarrollo Web con IA

Domina el arte de comunicarte con inteligencias artificiales para potenciar tu desarrollo frontend y backend

📖 Introducción

La inteligencia artificial ha revolucionado la forma en que escribimos código. Herramientas como ChatGPT, Claude, GitHub Copilot y otras se han convertido en aliados indispensables para desarrolladores en todo el mundo. Sin embargo, la calidad de las respuestas depende directamente de la calidad de nuestras preguntas.

Este ebook te enseñará a estructurar prompts efectivos que maximicen la utilidad de las respuestas de la IA, tanto para proyectos frontend como backend. Aprenderás patrones, técnicas y mejores prácticas que transformarán tu experiencia trabajando con estas herramientas.

¿Por qué es importante dominar los prompts?

Un prompt bien estructurado puede ahorrarte horas de frustración, reducir iteraciones innecesarias y producir código más limpio, seguro y mantenible desde la primera intento.

Los 7 Principios Fundamentales

Antes de entrar en ejemplos específicos, domina estos principios que aplican a cualquier prompt de desarrollo:

1

Especifica el Contexto

Incluye información relevante: framework, versión, arquitectura existente, restricciones del proyecto.

2

Define el Rol

Indica el rol que debe adoptar la IA: "Eres un desarrollador senior de React" o "Actúa como arquitecto de APIs".

3

Establece el Formato

Specify cómo quieres la respuesta: código, explicaciones, diagramas, pros y contras, comparaciones.

4

Sé Explícito en el Objetivo

Describe claramente qué problema estás resolviendo o qué necesitas lograr, no solo qué código quieres.

5

Incluye Restricciones

Mentiona limitaciones técnicas, estándares de código, convenciones de naming, o requisitos específicos.

6

Proporciona Ejemplos

Los ejemplos de entrada/salida esperada o código existente ayudan a la IA a entender tu estilo.

7

Itera y Refina

Los mejores resultados vienen de conversaciones iterativas. Construye sobre respuestas anteriores.

🧠 Qué Saber Antes de Chatear con la IA

Prepararte Mentalmente

Antes de escribir tu prompt:

  • Define claramente el problema, no la solución
  • Identifica las dependencias del proyecto
  • Conoce las versiones de tus herramientas
  • Tiene a mano código relevante del proyecto

Pregúntate a ti mismo:

  • ¿Necesito código nuevo o modificar existente?
  • ¿Hay limitaciones de rendimiento o seguridad?
  • ¿Debo seguir patrones del proyecto?
  • ¿Qué tan crítico es este componente?

Errores Comunes a Evitar

❌ Prompts Vagosos:

"hazme un formulario de login" — No proporciona contexto, tecnología, estilo, validación, ni requisitos.

❌ Preguntas sin Contexto:

"¿Cómo optimizar mi base de datos?" — Sin saber el motor, volumen de datos, queries problemáticas o estructura.

❌ Dependencia Total:

Copiar código sin entenderlo puede introducir bugs, vulnerabilidades o deuda técnica.

Checklist Pre-Prompt

🎨 Prompts para Desarrollo Frontend

El desarrollo frontend abarca desde HTML/CSS básico hasta frameworks complejos como React, Vue o Angular. Aprende a pedir exactamente lo que necesitas.

Estructura de un Prompt Frontend Efectivo

Plantilla Base: Rol: [Experiencia] + Tecnología específica Contexto: [Descripción del proyecto/componente existente] Objetivo: [Qué necesito lograr] Requisitos: [Funcionalidad, estilo, responsividad, accesibilidad] Restricciones: [Límites, convenciones del proyecto] Formato: [Cómo quiero la respuesta]

Ejemplo: Componente React

✗ Mal Prompt
Crea un componente de tarjeta en React
✓ Bueno Prompt
Actúa como desarrollador senior de React con 10 años de experiencia. Contexto: Estamos construyendo un dashboard SaaS con React 18 y TypeScript. Ya usamos una librería de componentes (shadcn/ui) y Tailwind CSS para estilos. Objetivo: Crea un componente ProductCard para mostrar productos en un catálogo. Requisitos: - Debe mostrar imagen, título, precio original/descuento, rating con estrellas - Soportar estados: default, hover (elevación + borde azul), loading (skeleton), out-of-stock - Incluir botón "Añadir al carrito" que dispara la función onAddToCart(id: string) - Totalmente responsive (1 columna mobile, 3 desktop) - Accesible: aria-labels, focus visible, soporte keyboard navigation Restricciones: - Usar Tailwind (clases existentes del proyecto: bg-card, border, rounded-lg, shadow-sm) - Componente tipo cliente (client component de Next.js 14) - Props tipadas con TypeScript strict mode - No reinventar iconos: usar lucide-react Formato: Código completo con JSDoc, comentarios mínimos explicando decisiones de diseño, exportación nombrada.

Prompts para CSS y Estilos

✓ Prompt Efectivo
Necesito una animación CSS para un botón de loading spinner. Contexto: Button component existente en proyecto vanilla JS, usa CSS custom properties (--primary-color, --bg-hover). Requisitos: - Spinner circular con 3 puntos saltando - Duración de 1.2 segundos por ciclo - Colores: inherit de --primary-color - Debe funcionar como pseudo-elemento ::after Restricciones: - Solo CSS vanilla, sin librerías - Compatibilidad: últimos 2 años de navegadores - Debe ser reutilizable (vía CSS custom properties) Genera solo el CSS necesario.

Prompts para Responsive y Accesibilidad

💡 Consejo Pro:

Cuando pidas ayuda con accesibilidad, especifica siempre: "Incluye ARIA labels, roles semánticos, focus management y contraste WCAG AA mínimo".

✓ Prompt Efectivo
Rewtea este HTML para que sea accesible y responsive. Código actual: [pegar HTML] Requisitos: - Estructura semántica correcta (landmarks, heading hierarchy) - Navegación por teclado completa - ARIA labels donde sea necesario - Mobile-first responsive (breakpoints: 640px, 768px, 1024px) - Ratio de contraste mínimo 4.5:1 - Skip links para navegación principal

⚙️ Prompts para Desarrollo Backend

El backend requiere precisión en lógica, seguridad y arquitectura. Aprende a comunicar requisitos técnicos complejos de forma efectiva.

Estructura de un Prompt Backend Efectivo

Plantilla Base: Rol: [Especialización] + Stack tecnológico Contexto: [Arquitectura, servicios, constraints] Objetivo: [Endpoint, servicio, lógica de negocio] Requisitos: [Validación, autenticación, manejo de errores] Seguridad: [Autenticación, permisos, sanitización] Formato: [Código, tests, documentación]

Ejemplo: API REST

✗ Mal Prompt
Crea un endpoint para registrar usuarios
✓ Bueno Prompt
Actúa como backend engineer senior especializado en Node.js y seguridad. Contexto: - API REST con Express.js 5.x + TypeScript - Base de datos: PostgreSQL 15 con Prisma ORM - Autenticación: JWT con refresh tokens (ya existe módulo auth) - Estructura del proyecto: Controller → Service → Repository Objetivo: Crear endpoint POST /api/users/register Requisitos funcionales: - Campos: email (único), password, firstName, lastName, role (opcional, default: 'user') - Validación: email formato válido, password mínimo 8 chars, 1 mayúscula, 1 número, 1 símbolo - Hash password con bcrypt (cost factor 12) - Enviar email de verificación después de crear usuario (integración existente con SendGrid) Requisitos técnicos: - DTOs con class-validator - Manejo de errores: 400 (validación), 409 (email duplicado), 500 - Rate limiting: 5 requests/minuto por IP - Logging con Winston (nivel info para éxito, error para fallos) - Response: { user: {...sin password}, token, refreshToken } Seguridad: - Sanitizar inputs contra SQL injection (Prisma lo maneja, pero documentar) - Headers: helmet, cors configurado - No exponer detalles de errores internos Formato: Código completo para controller, service, repository, DTOs, y archivo de rutas. Incluye tests unitarios con Jest.

Prompts para Bases de Datos

✓ Prompt Efectivo
Diseña el schema de Prisma para un sistema de reservas. Requisitos: - Usuarios: id, email, nombre, createdAt - Espacios: id, nombre, descripción, capacidad, precioPorHora, ubicación - Reservas: id, usuarioId, espacioId, fechaInicio, fechaFin, estado (pending/confirmed/cancelled), precioTotal - Un usuario puede tener muchas reservas - Un espacio puede tener muchas reservas - Validar que no haya overlapping dates para el mismo espacio Contexto: - PostgreSQL 15 - API Node.js/Express - Necesitamos soft delete para reservas canceladas - Índices para queries frecuentes: reservas por usuario, reservas por espacio y fecha

Prompts para Mensajería y Colas

💡 Consejo Pro:

Para sistemas con colas o mensajería, siempre especifica: "Incluir manejo de dead letters, reintentos automáticos, y idempotencia".

Ejemplo: Worker/Background Job

✓ Prompt Efectivo
Crea un worker en Node.js con Bull Queue para procesar emails de bienvenida. Contexto: - Redis 7.x como broker - Bull Queue con Bull Board para monitoring - SendGrid para envío de emails - Users table con campo emailVerified booleano Requisitos: - Job: sendWelcomeEmail(userId) - Obtener datos de usuario desde PostgreSQL - Renderizar email con template EJS (archivo existente en /templates) - Retry policy: 3 intentos, exponential backoff (1min, 5min, 15min) - Dead letter queue después de 3 fallos - Logging detallado: inicio, éxito, fallo con razón - Idempotencia: verificar emailVerified antes de enviar Formato: Worker completo con setup de cola, processor, y script de prueba.

Prompts para Seguridad

✓ Mejores Prácticas de Seguridad en Prompts:
  • Siempre menciona "sanitizar inputs" y "usar parameterized queries"
  • Especifica headers de seguridad: helmet, CSP, CORS
  • Indica si hay datos sensibles involucrados
  • Mentiona compliance: GDPR, SOC2, PCI-DSS si aplica

📋 Plantillas Reutilizables

Copia y adapta estas plantillas para tus proyectos diarios:

Template: Bug/Error

Prompt para resolver errores: Tengo el siguiente error en [tecnología/versión]: [PEGA EL ERROR COMPLETO] Contexto: - OS: [tu SO y versión] - [Framework] versión: [número] - Error ocurre cuando: [describe la acción] Qué he intentado: - [Lista de soluciones ya intentadas] Pregunta: ¿Cuál es la causa raíz y cómo lo resuelvo? Incluye prevención para el futuro.

Template: Refactorización

Prompt para mejorar código existente: Refactoriza este [componente/función/módulo]: [PEGA EL CÓDIGO] Objetivos: - [ ] Mejorar legibilidad - [ ] Mejorar rendimiento - [ ] Agregar tests - [ ] Seguir patrón [nombre] Restricciones: - No cambiar la API pública/interfaz - Mantener compatibilidad con [versión] - Mantener backward compatibility

Template: Code Review

Prompt para revisión de código: Eres un code reviewer senior. Revisa el siguiente código: [PEGA EL CÓDIGO] Focus en: 1. Seguridad (vulnerabilidades, inyecciones, exposición de datos) 2. Performance (N+1, memory leaks, queries ineficientes) 3. Best practices (naming, SOLID, patrones) 4. Posibles edge cases 5. Mejoras opcionales Formato: Para cada issue encontrado: - Severidad: [Crítica/Alta/Media/Baja] - Ubicación: [archivo:línea] - Problema: [descripción] - Sugerencia: [solución] - Código corregido (si aplica)

Template: Explicación de Código

Prompt para entender código complejo: Explica este código de forma simple y clara: [PEGA EL CÓDIGO] Requisitos: - Explicación línea por línea o por bloques lógicos - analogies para conceptos complejos - Diagrama de flujo si es necesario - Cómo se integra con el resto del sistema - Casos de uso típicos

🚀 Consejos Avanzados

Encadenamiento de Prompts

No intentes obtener todo en una sola pregunta. Construye conversaciones:

Paso 1
"Diseña la arquitectura para una API de e-commerce"
Paso 2
"Ahora implementa el endpoint de checkout siguiendo esa arquitectura"
Paso 3
"Añade tests para ese endpoint"

Especificar Formato de Respuesta

💡 Frase mágica:

"Responde en formato markdown con encabezados ## para cada sección y código en bloques con el lenguaje especificado."

Pedir Alternativas

Cuando tengas dudas sobre la mejor approach:

✓ Prompt Efectivo
"Para implementar caching en mi API Node.js, ¿cuáles son las opciones? Compara Redis vs Memcached vs caché en memoria para un caso de uso con 10k requests/min y datos que cambian cada 5 minutos. Incluye pros/contras y recomendación."

⚠️ Limitaciones y Precauciones

🚨 Importante:
  • Verifica TODO el código generado antes de usarlo en producción
  • Nunca compartas API keys, contraseñas o secrets en prompts
  • El código puede estar desactualizado (verifica versiones)
  • La IA puede "alucinar" APIs o funciones que no existen
  • Revisa licencias de código sugerido (MIT, GPL, etc.)
  • No confíes ciegamente en respuestas de seguridad

Señales de Código Peligroso

Siempre revisa manualmente:

📚 Recursos Adicionales

Herramientas Recomendadas

  • ChatGPT (GPT-4 para código)
  • Claude (análisis profundo)
  • GitHub Copilot (IDE integration)
  • Cursor (IDE enfocado en IA)
  • Phind (búsqueda técnica)

Para Seguir Aprendiendo

  • Documentación oficial de frameworks
  • MDN Web Docs
  • Stack Overflow (investigar)
  • Repositorios open source
  • Blogs de desarrolladores senior