Impeccable: orientación de diseño dentro de un agente de código
Impeccable: orientación de diseño dentro de un agente de código
Distinguir habilidad, comandos y detector antes de decidir qué debe revisar una persona.
Qué aprenderás
- Tres superficies de trabajo
- Qué puede observar el detector
- Mantener revisión humana
Antes de empezar
- Una pantalla y su tarea
- Permiso para revisar la habilidad y el hook
Crear un cambio de diseño respaldado por pruebas que otra persona pueda aceptar o rechazar.
Conclusiones clave
- Habilidad y detector cumplen funciones distintas.
- Los hechos del producto no son estilos de una pantalla.
- Una prueba limpia no aprueba el diseño.
Tres superficies de trabajo
Impeccable distribuye orientación de diseño como habilidad de agente, ofrece comandos y aplica reglas deterministas al frontend. El README de la revisión inspeccionada enumera 24 comandos y 61 reglas; esas cifras describen el proyecto y no califican su calidad.
El flujo `init` escribe audiencia, propósito, restricciones y pruebas duraderas en PRODUCT.md. La dirección visual de una pantalla puede ir en DESIGN.md. Esta separación evita que una captura pasajera se confunda con la estrategia del producto.
Qué puede observar el detector
El CLI y la extensión de navegador ejecutan reglas sin clave LLM. La crítica de un agente puede añadir criterio, pero un resultado limpio no demuestra que la pantalla sirva a su público o cumpla requisitos de accesibilidad.
Empieza por una pantalla existente. Anota tarea, restricciones y sistema visual, y compara un hallazgo con el resultado renderizado. Acepta o rechaza el cambio por una razón concreta.
Mantener revisión humana
La habilidad guía cambios de un agente y los hooks pueden presentar hallazgos durante la edición. La publicación sigue necesitando revisión de texto, interacción, respuesta a distintos tamaños y evidencia de usuarios.
Esta serie inspeccionó un commit fijo. No ejecutó el binario ni la extensión y no realizó estudios de usuarios; los comandos se describen según los archivos del proyecto.
Cómo elegir
| Criterio | Opción A | Opción B |
|---|---|---|
| Best when | You need predictable behavior and easy auditing | You need adaptive optimization and have reliable telemetry |
| Main risk | May leave performance on the table | Can become difficult to explain or debug |
Pasos de implementación
- 1
Elige una pantalla y registra su tarea en PRODUCT.md.
- 2
Consulta las reglas visuales existentes.
- 3
Compara un hallazgo con la página real.
Ejemplo para copiar
contexto: publico + tarea + restricciones
pantalla: composicion + tipografia + interaccion
revision: hallazgo + renderizado + decision humanaPreguntas frecuentes
¿Es Impeccable un sistema de diseño?
Aporta guía y comprobaciones; cada producto debe definir sus propias decisiones.
¿Necesita clave de un modelo?
Según el README, el detector determinista no; la crítica del agente depende del host utilizado.
Fuentes
- Impeccable / README.mdFuente verificada 2026-09-29
- Impeccable / .agents/skills/impeccable/SKILL.mdFuente verificada 2026-09-29