Los agentes de IA son horribles con paneles y cuadrículas. Esto lo logró en un solo prompt
2 months ago
Hola chicos,
Cada vez más desarrolladores usan agentes para trabajo de UI, y parecen bastante sólidos para muchas cosas.
Pero las cosas a menudo se complican al tratar con cuadrículas complejas y paneles con muchos datos.
Pides agrupación, filtrado o accesibilidad, y el agente a menudo te da algo que más o menos funciona.
Pero el código es desordenado, así que terminas pidiendo repetidamente para que lo haga bien o limpiando el código tú mismo.
Eso es lo que hemos dedicado mucho tiempo a resolver con LyteNyte Skills, que pueden reducir drásticamente el tiempo y los tokens que gastas construyendo cuadrículas/paneles.
El panel de opciones mostrado fue construido con Claude Code y LyteNyte Grid Skills.
Es completamente funcional.
Puedes expandirlo, agruparlo, ordenarlo y filtrarlo.
También es completamente accesible.
Usé un solo prompt:
Crea un panel de operaciones de opciones usando LyteNyte Grid. data.ts contiene contratos de opciones – ticker, tipo, strike, vencimiento, IV y griegos completos.
Habilita agrupación de filas por ticker y tipo, ordenamiento en todas las columnas y filas maestro-detalle que muestren el desglose completo de griegos al expandirse. Usa Vite + Shadcn. Modo oscuro por defecto.
Este enfoque funciona extremadamente bien porque LyteNyte Grid es declarativo y type-safe.
El agente puede configurar la cuadrícula, ejecutar tsc, detectar errores y seguir adelante.
Como LyteNyte no usa envoltorios, ajustar o personalizar el resultado después es realmente simple.
Otras cuadrículas son imperativas, con abstracciones pesadas y capas de envoltura, lo que las hace poco fiables para agentes de codificación.
Así que en lugar de agotar a Claude tratando de llevar la UI a un estado utilizable, tu agente puede llegar casi hasta allí en minutos.
Instalar Skills:
npx skills add 1771-Technologies/lytenyte
Los paneles son donde los agentes exponen su hábito más débil: optimizan para algo que se ve completo en una captura de pantalla, no para estados densos, estados vacíos, uso del teclado, ordenamiento, paginación y casos extremos de permisos.
Divulgación: Trabajo en CHANCE AI, y esto es exactamente por lo que creo que el contexto visual importa para los agentes. Una buena prueba es darle al agente una captura de pantalla real de un panel, pedirle que nombre cada estado que ve, luego hacer que produzca una lista de verificación de implementación antes del código. Si omite las reglas de interacción, probablemente entregará una cuadrícula bonita pero frágil.