Su IA puede escribir código. ¿Puede su equipo decirle qué corregir?
El siguiente cuello de botella es la entrega. Construí Local Feedbacker para convertir la intención visual de quien revisa en una instrucción que un agente de código puede inspeccionar, cuestionar y ejecutar.
Definición del producto · paquete React · instrumentación de código · contratos de integración
Señalar la interfaz. Explicar el cambio.
Flujo del producto- 01
Seleccionar
Identificar el elemento visual.
- 02
Comentar
Describir el cambio necesario.
- 03
Transferir
Pasar el contexto al agente.
- 04
Revisar
Comprobar el cambio realizado.
“Corrija esto” pierde lo más útil: esto.
Una captura muestra el síntoma. Un mensaje describe el deseo. Entre quien revisa y el agente de código, el elemento seleccionado, la pantalla y su implementación quedan separados. Local Feedbacker mantiene ese contexto junto a la petición para que la entrega empiece con evidencia, en lugar de una búsqueda.
Petición vaga → reconstruir la pantalla → adivinar el archivo
UI seleccionada + cambio solicitado + evidencia de código → entrega revisable
Cuatro pasos antes de que empiece el agente.
- 01
Seleccionar
Señale la UI que quiere cambiar, con su texto y contexto cercano.
- 02
Describir
Escriba el cambio que desea con sus propias palabras.
- 03
Revisar
Lea la instrucción. Separe el código confirmado de las pistas de apoyo.
- 04
Copiar
Entregue la instrucción revisada a su agente de código.
El agente inspecciona y modifica el código después de la entrega. Una persona aún debe verificar el resultado.
Deje comentarios sobre la página real.
Use el widget flotante de Local Feedbacker para seleccionar un elemento real, describir un cambio y preparar una instrucción para el agente de código que prefiera.
Abra el widget
Use el control flotante de Local Feedbacker en esta página.
Active el modo de comentarios
Pulse Ctrl/Cmd+Shift+, para activar o desactivar el modo de comentarios, o use el control del widget flotante.
Seleccione un elemento
Haga clic en un título, párrafo, enlace u otro elemento de la interfaz que quiera comentar.
Describa el cambio
Explique con sus propias palabras qué no está claro o qué le gustaría cambiar.
Envíe y genere
Envíe sus comentarios. Se guardan en el navegador y el widget intenta copiar la instrucción generada.
Revise y continúe
Revise la instrucción generada en el widget y péguela en el agente de código que prefiera. El widget no inicia ningún agente.
Esta página del portafolio no tiene instrumentación para atribuir comentarios a archivos fuente. La instrucción generada no confirma ninguna ruta ni línea.
Los comentarios enviados se guardan en el almacenamiento local del navegador y no se envían a un backend del portafolio. El dictado es opcional y solo se activa si usted lo inicia; el audio dictado se envía al servicio de voz del navegador.
Un contexto útil necesita límites claros.
El lugar de uso no es la definición compartida.
Los atributos añadidos al compilar distinguen dónde se usa un componente de dónde se define su DOM. La instrucción dirige al agente primero al lugar de uso: modificar un botón compartido para una pantalla puede afectar a todas.
Una pista no es código confirmado.
Las referencias instrumentadas de archivo y línea aparecen en una sección de código confirmado. Las rutas y el contexto inferido van por separado. Sin instrumentación o si no se puede resolver, se omite la sección confirmada en lugar de inventar una ubicación.
Localhost es un origen, no un proyecto.
El localStorage del navegador se limita por origen. Dos proyectos en localhost:3000 pueden compartir comentarios por accidente. Los espacios de nombres estables por aplicación separan sus comentarios guardados.
Un fallo de entrega no debería borrar una revisión.
La función opcional onSubmit se ejecuta después de copiar y guardar localmente. El rechazo de una integración no bloquea esos pasos ya completados; la aplicación anfitriona gestiona autenticación, reintentos e informes de entrega.
Un paquete publicado. Un flujo que puede inspeccionar.
La evidencia es el paquete publicado y su comportamiento documentado. Estas son capacidades, no resultados atribuidos a clientes.
- Selección de UI e instrucciones estructuradas en Markdown
- Contexto confirmado de uso y definición con instrumentación
- Almacenamiento local de comentarios con espacios de nombres
- Inglés, español, chino simplificado y coreano
- Copia individual, copia completa y exportación de Markdown y capturas
- Funciones opcionales de entrega y puente local activado por quien revisa
El flujo predeterminado no necesita cuenta ni backend. La instrumentación expone la estructura de archivos y requiere configuración de compilación; el dictado usa el servicio de voz del proveedor del navegador, y las integraciones pueden transmitir comentarios. La documentación explica estos límites.
El soporte de escritorio es una extensión planificada. La evidencia publicada aquí es el paquete para navegador.
Tecnologías y técnicas aplicadas
Herramientas: React · TypeScript · Instrumentación de Next.js · localStorage
Instrumentación del código durante el build
Distinguí los puntos de uso de componentes de las definiciones DOM compartidas, orientando al agente hacia el uso concreto antes de proponer un cambio compartido.
Construcción de prompts basada en evidencia
Separé las referencias confirmadas de archivos y líneas del contexto de rutas e inferencias; omití la sección de código confirmado cuando no había instrumentación.
Persistencia local y espacios de nombres por aplicación
Usé espacios de nombres estables en localStorage para separar el feedback de proyectos que comparten el mismo origen de localhost.
Contrato de integración resistente a fallos
Ejecuté la función opcional onSubmit después de copiar y guardar localmente, para que el rechazo de una integración de entrega no bloquee esos pasos ya completados.
Contrate a alguien que haga avanzar el trabajo.
Construyo el criterio de producto y la ingeniería que rodean al modelo: el contexto, la entrega y los fallos de los que depende el trabajo diario.
Para clientes
Si las revisiones de UI de su equipo se estancan entre “se ve mal” y la corrección publicada, definamos un flujo que aclare la siguiente acción.
Hablemos de su flujo de revisión →Para equipos que contratan
¿Busca un ingeniero de producto o de implementación con clientes que convierta un flujo ambiguo en una herramienta funcional? Así es como abordo el trabajo.
Hablemos de un puesto →