Mejores Prácticas

​

Mejores Prácticas para Prompts

​

1. Domina la Ingeniería de Prompts para un Mejor Resultado:

• Claridad y Verbosidad: Los prompts claros y detallados conducen a un resultado superior. Sé específico, mencionando páginas exactas (p. ej., /dashboard) y comportamientos esperados. Usa lenguaje natural para tus solicitudes, como

Quiero que los usuarios con el rol de Inversor accedan a este componente, pero no los Administradores.

• Ayudas Visuales: Añade capturas de pantalla, especialmente al describir errores o problemas de UX. Esto proporciona un contexto visual que las palabras por sí solas podrían omitir.
• Límites y Restricciones: Dile a la IA qué no debe tocar. Por ejemplo, podrías instruir:

No edites /shared/Layout.tsx.

• Repetición para la Retención: La memoria de la IA puede ser limitada, así que repite las instrucciones importantes en varios prompts si es necesario.
• Divide Tareas Complejas: Evita intentar implementar varias cosas simultáneamente. Divide tu trabajo en partes más pequeñas y comprobables. Usa el Modo Discusión entre cada paso para validar antes de continuar. Una plantilla útil para desglosar funcionalidades incluye:

Crear la nueva página, Añadir el diseño de la UI, Conectar los datos, Añadir lógica + casos extremos, Probar por rol.

• Instrucciones Específicas por Rol: Si tu aplicación admite múltiples roles de usuario, define siempre a qué rol se aplica el prompt. Esto ayuda a prevenir errores que surgen de la lógica o componentes compartidos. Por ejemplo:

Como Inversor, quiero ver el panel de la empresa, pero no debería poder editarlo. Por favor, aísla esta funcionalidad solo para el rol de Inversor.

​

2. Utiliza el Modo Discusión con Frecuencia

• Cuándo usarlo: Cambia al Modo Discusión después de 2-3 intentos fallidos de “Intentar Arreglar”, al depurar lógica compleja o problemas de base de datos, o al planificar nuevas funcionalidades. Puedes pedirle que

"Sugiere 3 formas de implementar X".

• Recomendación de Flujo de Trabajo: Algunos usuarios encuentran efectivo pasar el 60-70% de su tiempo en el Modo Discusión, haciendo clic en “Implementar el plan” solo cuando están completamente satisfechos. Este enfoque mejora la consistencia del resultado y previene ediciones no deseadas.
• Interacción Controlada: Para evitar la ejecución de código no deseada, usa prompts como “Investiga pero no escribas código todavía” o “Sugiere 3 formas de resolver esto sin cambiar nada”. Esto mantiene el control en tus manos.
• Escapar de Bucles de la IA: Si la IA entra en un “bucle” de parchear código roto, cambia al Modo Discusión, pega una captura de pantalla del error y escribe el prompt:

"Por favor, investiga esto sin romper otras funcionalidades. Si es necesario, revierte a la última versión funcional y arréglalo desde ahí".

​

3. Remix como Último Recurso.

• Qué Hace Remix: Remix crea una copia limpia de tu proyecto en T=0. Luego puedes reconstruir con prompts mejorados y un conocimiento más claro, usando tu antiguo proyecto puramente como referencia.
• Cuándo Hacer Remix: Esto es útil si estás atascado en un bucle de errores, quieres reiniciar limpiamente conservando el historial, o necesitas desconectar un servicio de base de datos como Supabase y probar un nuevo enfoque.

​

4. Cultiva la Paciencia y la Calma

• Regla de Oro: Tómate tu tiempo con los prompts, vuelve a verificar todo y divide el trabajo en bloques pequeños y comprobables. La precisión en tus entradas se correlaciona directamente con la calidad de tus salidas.

​

5. Consejos Adicionales para un Flujo de Trabajo Mejorado

• Patrón “Estoy frustrado…”: Emplea el patrón de prompt “Estoy frustrado…” para ayudar a la IA a concentrarse mejor.
• Verificaciones Post-Edición: Después de cualquier edición importante, siempre vuelve a verificar múltiples roles y sus comportamientos, particularmente para la lógica condicional.
• Versiones de Respaldo: Almacena versiones estables como respaldo para una depuración rápida.
• Componentes Específicos por Rol: Para evitar errores de una lógica demasiado genérica, pide a la IA que

"Crea un componente específicamente para el [rol X] y no reutilices componentes compartidos a menos que estén claramente definidos".

​

Biblioteca de Prompts – Estrategias y Ejemplos

1. Iniciando Proyectos

• Cuándo usar: Al principio de un proyecto para ayudar a la IA a comprender los requisitos de alto nivel y construir la base. Actúa como tu resumen inicial del proyecto.
• Cómo usar: Describe el tipo de aplicación, las tecnologías clave (frontend, backend, servicios) y las características principales. Dirige a la IA sobre dónde empezar, generalmente la página principal o una característica crucial.

"Necesito una aplicación de gestión de tareas con: - Pila Tecnológica: Frontend con Next.js, Tailwind CSS para estilos, Supabase para autenticación y base de datos. - Características Principales: Creación de proyectos y tareas, asignación de tareas a usuarios, recordatorios de fechas de vencimiento y una vista general en el panel. Comienza construyendo la página principal del panel, que contenga: - Un encabezado con navegación, - Una lista de proyectos con su estado, - y un botón para crear un nuevo proyecto. Proporciona datos de prueba por ahora y asegúrate de que el diseño sea limpio y responsivo".

2. Mejoras de Diseño UI/UX

• Cuándo usar: Para refinar el atractivo visual de tu aplicación sin alterar su funcionalidad. Esto incluye pulir la UI, ajustar diseños o implementar un estilo de diseño específico.
• Cómo usar: Define claramente el alcance de los cambios de diseño y enfatiza que la funcionalidad debe permanecer intacta. Guía a la IA sobre la estética deseada (p. ej., moderna, minimalista). Aborda múltiples cambios uno a la vez y menciona cualquier parte de la UI cuya lógica no deba ser alterada.

La UI de la aplicación debe mejorarse, sin cambiar ninguna funcionalidad. - Mantén toda la lógica y gestión de estado existentes tal como están. - Mejoras Visuales: Actualiza el estilo de la página del panel: usa un diseño de tarjeta moderno para cada listado de proyectos, mejora la paleta de colores para un mejor contraste y aumenta el espaciado para un diseño más limpio. - Asegúrate de que estos cambios no rompan ninguna funcionalidad o flujo de datos. Objetivo: mejoras puramente cosméticas para un aspecto más pulido, con la aplicación comportándose exactamente como antes.

3. Asegurando la Responsividad

• Cuándo usar: Cuando tu aplicación necesita adaptar su diseño a varios tamaños de pantalla (móvil, tableta, escritorio). Ideal como una revisión final en tareas con mucha UI.
• Cómo usar: Enfatiza un enfoque mobile-first e instruye a la IA para que asegure la responsividad en los puntos de interrupción estándar. Menciona las pautas específicas del framework CSS (p. ej., los puntos de interrupción sm, md, lg, xl de Tailwind) y solicita que se eviten los anchos fijos.

Nuestra aplicación necesita ser completamente responsiva en móviles, tabletas y escritorios. - Sigue una estrategia mobile-first: prioriza el diseño para pantallas pequeñas, luego ajústalo para pantallas más grandes. - Usa las mejores prácticas modernas de UI/UX para el diseño responsivo. (Para Tailwind CSS, usa los puntos de interrupción estándar sm, md, lg, xl – no uses puntos de interrupción personalizados a menos que sea necesario.) - Asegúrate de que cada página (especialmente el panel y las páginas de detalle del proyecto) se reajuste correctamente en una pantalla pequeña: los elementos deben apilarse o redimensionarse según sea necesario, el texto debe permanecer legible y ningún contenido debe desbordarse de la pantalla. - No cambies el diseño central ni la funcionalidad, solo asegúrate de que se adapte de manera flexible a diferentes tamaños de pantalla. Después de hacer los cambios, por favor, verifica dos veces el diseño en las dimensiones de un iPhone 12 y en un ancho de escritorio típico.

4. Refactorización de Código

• Cuándo usar: Periódicamente, especialmente cuando el código se vuelve desordenado o lento. La refactorización mejora la estructura del código, la legibilidad o el rendimiento sin alterar su comportamiento externo.
• Cómo usar: Identifica el alcance (archivo, funcionalidad o base de código). Para archivos específicos, usa el prompt: “Refactoriza este archivo para mayor claridad y eficiencia, pero no alteres su funcionalidad o resultado”. Especifica áreas de enfoque como reducir la duplicación o simplificar la lógica. Para refactorizaciones más grandes, pide a la IA que planifique en pasos o audite el código primero.

Refactoriza el archivo del componente ProjectList, pero mantén su comportamiento y UI exactamente iguales. Objetivos: - Mejorar la estructura y legibilidad del código (simplificar funciones complejas, dividirlas en más pequeñas si es necesario). - Eliminar cualquier variable o importación no utilizada. - Asegurarse de que el archivo siga las mejores prácticas y esté bien documentado. No introduzcas ninguna nueva funcionalidad ni cambies cómo funciona el componente para el usuario – esto es puramente una limpieza de código para la mantenibilidad. Si alguna parte del código no está clara, añade un breve comentario para aclararlo.

5. Tipos de Aplicaciones y Funcionalidades

Tienda de E-commerce: Listado de productos, búsqueda, filtrado, carrito, pago, cuentas de usuario.

CMS: Panel de administración, creación/edición/publicación de contenido, texto enriquecido, subida de imágenes, SEO.

Gestión de Proyectos: Tableros de tareas, listas, tarjetas, asignación, fechas de vencimiento, arrastrar y soltar.

Feed de Redes Sociales: Publicaciones, comentarios, me gusta, compartir, perfiles de usuario, notificaciones, scroll infinito.

Panel de Analíticas: Varios tipos de gráficos, filtrado de datos, selección de rango de fechas, informes exportables.

Plantilla de Aplicación SaaS: Autenticación de usuarios, gestión de suscripciones, configuración, panel, acceso basado en roles.

Interfaz de Chat con IA: Historial de conversaciones, indicadores de escritura, hilos de mensajes, retroalimentación.

Herramienta de Generación de Contenido con IA: Generar contenido basado en entradas, opciones de refinamiento, guardado, exportación.

Componente de Recomendación: Basado en el comportamiento/preferencias del usuario, retroalimentación, explicación de las recomendaciones.

Sistema de Personalización: UI personalizable, recomendaciones de contenido, control del usuario sobre la personalización.

6. Planificación Estratégica con IA

• Cuándo usar: Antes de comenzar una implementación compleja de varios pasos, o cuando tienes una funcionalidad grande que necesita ser desglosada. Los prompts de planificación te permiten delinear un enfoque antes de escribir el código, ahorrando créditos y evitando una dirección equivocada.
• Cómo usar: Pide a la IA un plan o una lista de verificación. Por ejemplo, “Describe un plan paso a paso para X” o “Antes de programar, enumera los pasos que tomarás para implementar Y”. Es mejor hacer esto en el Modo Discusión para evitar la ejecución de código.

"Antes de escribir cualquier código, planifica la implementación de la nueva funcionalidad de Notificaciones. - Enumera cada paso necesario para añadir notificaciones por correo electrónico cuando una tarea está vencida. - Considera tanto los aspectos del frontend (cambios en la UI, si los hay) como del backend (creación de verificaciones programadas o disparadores). - Asegúrate de que el plan mantenga estable la funcionalidad actual – no podemos romper nada existente. - Proporciona el plan como una lista ordenada (1, 2, 3, ...), con una breve explicación de cada paso. Una vez que describas el plan, haz una pausa para revisarlo. No hagas ningún cambio en el código todavía.". La IA podría responder con un plan como: 1. Añadir un campo de marca de tiempo a las tareas. 2. Crear una función del lado del servidor para verificar tareas vencidas. 3. Integrar el envío de correos electrónicos. 4. Actualizar la UI para los interruptores de notificación. 5. Probar el flujo.