70 lines
3.4 KiB
Markdown
70 lines
3.4 KiB
Markdown
# Guía de Prompting V4 — Desarrollo con IA
|
|
## Guía y plantillas de prompts de alta fidelidad para el desarrollo guiado por agentes autónomos
|
|
|
|
> **Propósito:** Esta guía proporciona a los desarrolladores la plantilla oficial para redactar prompts claros, estructurados y libres de ambigüedad al delegar la creación de UI a un agente de Inteligencia Artificial.
|
|
|
|
---
|
|
|
|
## 1. Filosofía de Prompting Seguro y de Alto Impacto
|
|
|
|
Para que la IA produzca interfaces que sigan el **100% de los estándares de seguridad y rendimiento**, los prompts deben proveer contexto explícito y limitar el alcance del desarrollo.
|
|
|
|
- **Evita prompts ambiguos:** *"Hazme una pantalla de dashboard"* genera código genérico que viola la arquitectura de Next.js y el cifrado de datos.
|
|
- **Uso estructurado:** Divide tus solicitudes en: Contexto de Negocio, Enrutamiento, Especificaciones de UI, Integración de APIs, y Activación de Skills.
|
|
|
|
---
|
|
|
|
## 2. Plantilla Oficial de Prompt para Pantallas / Componentes
|
|
|
|
Copia y completa la siguiente plantilla y pégala en tu chat con el agente cuando inicies un nuevo desarrollo:
|
|
|
|
```
|
|
Implementa una pantalla en Next.js siguiendo AGENT.md, docs/guia-4-implemented-pattern.md y las reglas operacionales.
|
|
|
|
### 1. Contexto y Enrutamiento
|
|
- Nombre técnico: [ej. Dashboard de Transferencias]
|
|
- URL Path: [ej. /dashboard/transferir]
|
|
- Nivel de Seguridad: [ej. Protegida por middleware serverRequireAuth]
|
|
|
|
### 2. Especificación de UI (F Figma / daisyUI)
|
|
- Estructura visual requerida: [ej. Panel lateral, formulario central de 3 campos, tabla resumen]
|
|
- Componentes daisyUI a usar: [ej. input, select, button, card, modal]
|
|
- Estado del cliente: [ej. Registrar 'montoTransferido' en Zustand store lib/auth/client/useAuthStore.ts]
|
|
|
|
### 3. Integración de APIs (Backend Downstream)
|
|
- Endpoint a consumir: [ej. POST /api/transferencias o POST directo a backend Spring Boot]
|
|
- Cifrado requerido: [ej. Cifrar 'cuentaOrigen' y 'cuentaDestino' usando lib/cypher/encrypt.ts]
|
|
- Headers obligatorios: [ej. traceId, appId]
|
|
|
|
### 4. Activación de Skills (Gobernanza)
|
|
- Activar 'security-best-practices': para validación de flags de cookies y sanitización.
|
|
- Activar 'test-driven-development': para generar la suite de pruebas unitarias en Vitest.
|
|
- Activar 'code-review-excellence': para auditar la implementación final antes del PR.
|
|
```
|
|
|
|
---
|
|
|
|
## 3. Ejemplo Práctico
|
|
|
|
### Prompt enviado al agente:
|
|
```
|
|
Implementa una pantalla en Next.js siguiendo AGENT.md, docs/guia-4-implemented-pattern.md y las reglas operacionales.
|
|
|
|
### 1. Contexto y Enrutamiento
|
|
- Nombre técnico: Dashboard de Resumen Financiero
|
|
- URL Path: /dashboard
|
|
- Nivel de Seguridad: Protegida por middleware serverRequireAuth
|
|
|
|
### 2. Especificación de UI (F Figma / daisyUI)
|
|
- Estructura visual: Panel con 3 tarjetas de resumen (Saldo Ahorros, Saldo Corriente, Tarjeta de Crédito) y una tabla con los últimos 5 movimientos.
|
|
- Componentes daisyUI: card, table, badge, dropdown.
|
|
- Estado del cliente: Ninguno persistente.
|
|
|
|
### 3. Integración de APIs (Backend Downstream)
|
|
- Endpoint a consumir: GET /api/cuentas (Next.js Route Handler que propaga credenciales de cookie HTTP-only y llama al Spring Boot backend /cuentas).
|
|
- Cifrado requerido: Cifrar el balance y el número de cuenta al mostrar.
|
|
|
|
### 4. Activación de Skills (Gobernanza)
|
|
- Activar 'code-review-excellence' al finalizar para verificar que no haya directivas de localStorage u omisiones de auth.
|
|
```
|