Índice
- Guías de IA en tu código
- UI Basada en Componentes con Asistencia de IA
- Patrón de Casos de Uso para Lógica Desacoplada
- Cadenas de Middleware: Componibilidad Escalable
- Conclusión
La arquitectura frontend ya no está diseñada únicamente para humanos. Hoy, también debe ser entendida, generada y extendida por herramientas y agentes de IA.
Frameworks modernos como shadcn/ui, herramientas de prototipado como V0.dev y asistentes inteligentes como Junie están redefiniendo la forma en que diseñamos interfaces. Esta evolución requiere estructuras claras, convenciones sólidas y patrones que puedan ser seguidos por humanos y máquinas.
Este artículo presenta una arquitectura práctica para:
- Potenciar la creación de interfaces con IA
- Diseñar flujos colaborativos entre desarrolladores y herramientas inteligentes
- Asegurar escalabilidad y testabilidad en sistemas modernos
1. Guías de IA en tu código
Los agentes de IA necesitan contexto. Para ofrecérselo, define un archivo guidelines.md dentro de .junie/:
Framework: Next.js
Styling: Tailwind CSS 4
Language: TypeScript
Tests: Vitest + Playwright
Architecture:
- Use Case pattern
- Middleware chaining
Standards:
- Named exports only
- Use union types, no enums
- FC with PropsWithChildrenEsto permite que herramientas como Junie respeten tu stack y convenciones al generar código.
2. UI Basada en Componentes con Asistencia de IA
Con herramientas como V0.dev, puedes convertir un prompt como:
«Formulario de registro en modo oscuro con dos campos e input y botón CTA»
…en código JSX completo, accesible y estilizado, listo para producción. Integrado con shadcn/ui, este código se adapta a tu sistema de diseño y se valida automáticamente mediante Storybook o MDX docs.
3. Patrón de Casos de Uso para Lógica Desacoplada
Los agentes de IA al igual que los humanos debería ejecutar código de negocio sin acoplarse a la UI. Aquí entra el patrón de casos de uso:
export interface UseCase<In = unknown, Out = unknown> {
handle(param?: In, meta?: UseCaseOptions): Promise<Out>
}Cada caso encapsula una operación como RegisterUser o CreatePost. Puede ser ejecutado por un botón, asistentes de voz, webhooks o agentes de IA, a través de un servicio centralizado como sería el useCaseService:
await useCaseService.execute(RegisterUserUseCase, {
email: "test@example.com",
password: "secure-password",
})¿Para qué sirve el useCaseService? Me alegra que lo preguntes, en la siguiente sección te explico cómo abstrayendo la ejecución de de los casos de uso con una pieza común podremos sacarle mucho partido con una cadena de middlewares.
4. Cadenas de Middleware: Componibilidad Escalable
En lugar de ensuciar los casos de uso con lógica repetida, podemos usar los middlewares para manejar:
- Logs
- Errores
- Caché
- Seguridad
Ejemplo de Middleware de Errores:
export class ErrorMiddleware implements Middleware {
constructor(private readonly eventEmitter: EventEmitter) {}
async intercept(params: unknown, next: UseCase, options: UseCaseOptions): Promise<unknown> {
try {
return await next.handle(params)
} catch (error) {
if (!options.silentError) {
this.eventEmitter.dispatch(EventType.ERROR, error)
}
throw error
}
}
}En este caso un componente que muestre errores se podrá suscribir al event emitter para mostrar notificaciones de error al usuario.
El UseCaseService los aplica en cadena para envolver la ejecución:
export class UseCaseService {
constructor(
private middlewares: Middleware[],
private readonly container: Container,
) {}
async execute<In, Out>(
useCase: Type<UseCase<In, Out>>,
param?: In,
options?: UseCaseOptions,
): Promise<Out> {
const requiredOptions = options ?? { silentError: false }
let next = UseCaseHandler.create({
next: this.container.create(useCase),
middleware: this.container.get<EmptyMiddleware>(EmptyMiddleware.name),
options: requiredOptions,
})
for (let i = this.middlewares.length - 1; i >= 0; i--) {
const current = this.middlewares[i]
next = UseCaseHandler.create({
next,
middleware: current,
options: requiredOptions,
})
}
return next.handle(param) as Promise<Out>
}
}Ahora cuando crees la instancia de UseCaseService podrás pasarle los middlewares que quieras. Aquí las posibilidades son infinitas. Los middlewares puedes hacer que sean dinámicos en base a variables, que la configuración venga de un servicio, que dependa del tenant donde estés… En fin, muy potentes.
Tabla Resumen: Arquitectura Aumentada por IA
| Capa | Herramienta / Patrón | Rol de IA |
| UI | V0.dev + shadcn/ui | Generar JSX desde prompt |
| Documentación | MDX + Storybook | Aprender de ejemplos |
| Lógica | Use Case pattern | Invocar lógica con reglas |
| Middleware | Cadena de middlewares | Añadir funcionalidad transversal |
| IDE | .junie/guidelines.md | Alinear generación de código |
5. Conclusión
No estamos construyendo solo para navegadores. Estamos diseñando sistemas que deben ser interpretables por humanos y agentes inteligentes.
Para lograrlo:
- Define convenciones claras
- Separa lógica y presentación
- Usa middlewares para escalar con orden
La IA no reemplaza al desarrollador, lo potencia.
¿Quieres implementar esta arquitectura en tu organización?
👉 Contáctame para una sesión estratégica: cesalberca.com
