DevPawDEVPAW · GROUND-UP DEV NOTES
Buscar
Menú
ES
한국어English日本語繁體中文EspañolPortuguês简体中文
Fundamentos y herramientas de IA

[Servicio gratuito #1] Corregir diseños de IA con Agentation

Pedirle a la IA que cree un sitio web ya no es difícil. Lo complicado empieza después: cuando muestras la pantalla terminada y dices: «Este botón se ve un poco raro».

9 min de lectura
Imagen de portada de [Servicio gratuito #1] Corregir diseños de IA con Agentation

Pedirle a la IA que cree un sitio web ya no es difícil. Lo complicado empieza después: cuando muestras la pantalla terminada y dices: «Este botón se ve un poco raro».

«El botón azul del centro». → La IA corrige el botón equivocado. «No, el que está encima». → Toca otra cosa. «El segundo desde arriba, junto a Login…» → Al final terminas abriendo el código tú mismo.

La causa es simple. Las personas miran la pantalla y la IA mira el código. Al unir ambas perspectivas con palabras quedan huecos. Agentation nació para cubrirlos.

Esta serie presenta servicios gratuitos, uno por uno. Comprobamos qué hacen, hasta dónde llega el uso gratuito y qué condiciones aplican. El primero es Agentation.

Señala en la pantalla y conviértelo al lenguaje que entiende la IA

Agentation es una pequeña barra de herramientas que flota sobre el sitio web que estás creando. Haz clic en el punto que no te gusta y deja una nota como «El espacio es demasiado estrecho»; la convierte en un formato que una herramienta de programación con IA puede ejecutar directamente.

Demostración oficial de Agentation: tres anotaciones convertidas en una lista Page Feedback en la terminal del agente
Señalas en la pantalla y recibes el resultado en la terminal. Ese es todo el flujo.

La clave es que «lo organiza». Con un clic se añaden automáticamente datos como estos.

  • Un selector CSS para encontrar el elemento en el código (una dirección que identifica un elemento de pantalla en el código) — body > main > .hero-section > button.cta
  • El archivo fuente y el número de línea que crearon el elemento — src/components/Button.tsx:42
  • La jerarquía de componentes React — App > LandingPage > HeroSection > CTAButton
  • Posición y tamaño, texto circundante y valores actuales de color, fuente y espaciado
Demostración oficial de Agentation que muestra como información emergente la jerarquía del componente React App-Header-Button sobre un elemento web
Con solo pasar el ratón aparece al instante qué componente es el elemento.

Al pulsar Copiar, esta información se guarda en el portapapeles.

## Page Feedback: /landing
**Viewport:** 1440×900

### 1. button
**Location:** body > main > .hero-section > button.cta
**Source:** src/components/Button.tsx:42
**React:** App > LandingPage > HeroSection > CTAButton
**Feedback:** Button is cut off on mobile viewport

Puedes ajustar la cantidad de información. Hay cuatro niveles: Compact, Standard, Detailed y Forensic; el ejemplo usa el valor predeterminado, Standard. Si necesitas averiguar por qué aparecen así el espacio o los colores, cambia a Forensic para incluir también los valores CSS aplicados.

La línea Source:—el archivo fuente y el número de línea—solo se añade en modo de desarrollo. Admite Vite, Next.js, webpack y Turbopack, aunque la configuración del bundler puede omitirla. Sin ella aún puedes buscar mediante el selector y la jerarquía de componentes; solo baja un poco la precisión.

Pégalo en Claude Code o en el chat de Cursor y listo. La IA ya no tiene que adivinar qué «botón azul» quieres decir: recibe la dirección y va directamente a ese archivo y línea.

¿No basta con dibujar una flecha en una captura?

Es un método habitual y no es inútil. Pero una captura solo es una imagen, sin conexión con el código. La IA debe volver a buscar desde cero dónde está el botón de la imagen y puede terminar corrigiendo otro botón parecido.

Agentation entrega una cadena de texto que se puede buscar, no una imagen. Con el selector y el nombre de clase, la IA puede buscar en el código y localizar exactamente el punto. Esa es la diferencia decisiva frente a una imagen con una flecha.

Diagrama comparativo entre flechas en capturas y anotaciones de Agentation: adivinar el elemento y modificar el archivo equivocado frente a usar un selector CSS y el número de línea del archivo fuente
Incluso con la misma observación, el resultado cambia según qué información la acompañe

Hay cinco formas de señalar elementos

El objetivo no siempre es un solo botón, por eso hay varios métodos.

  • Clic en elemento — Señala un botón, tarjeta o imagen.
  • Selección de texto — Sirve para corregir errores tipográficos o textos. La frase seleccionada se incluye entre comillas para que la IA pueda buscarla directamente en el código.
  • Selección múltiple — Arrastra sobre varios elementos a la vez. Es útil para pedir «Ajusta el espacio entre estas tres tarjetas».
  • Selección de área — También puedes seleccionar espacio vacío. Así puedes decir «Esta zona se siente vacía».
  • Pausar animación — Pulsa la tecla P para detener animaciones CSS, JavaScript y de vídeo. Puedes congelar ese momento que pasa demasiado rápido y señalarlo. Algunas bibliotecas de animación de terceros no se detienen por completo.
Demostración de selección de texto de Agentation: seleccionar una palabra con un error, escribir la nota Fix typo y colocar un marcador
Para corregir un solo error, selecciona la frase completa de esta manera.

También resulta útil memorizar algunos atajos. Cmd+Shift+F (Ctrl+Shift+F en Windows) activa y desactiva el modo de feedback; C copia, X elimina todo y H oculta los marcadores.

Modo de diseño para cambiar la distribución

Peticiones como «Mueve esta tarjeta a la derecha y añade un formulario debajo» se vuelven imprecisas al expresarlas con palabras. Pulsa L para cambiar la barra al modo de diseño. En vez de describir la distribución, la muestras moviéndola directamente.

  • Arrastra más de 65 elementos desde la paleta de componentes hasta la pantalla.
  • Al pasar el ratón sobre una sección existente aparece la etiqueta del selector CSS; puedes arrastrarla para cambiar el orden.
  • Activa «Wireframe de página nueva» para atenuar el diseño actual y dibujar sobre una pantalla vacía. También puedes dibujar viendo el diseño original mediante el control de opacidad.
  • También hay un campo independiente para anotar para qué sirve la página.

Cada cambio creado así se envía con uno de feedback, placement o rearrange asociado a cada anotación. La IA recibe coordenadas y dimensiones, no una frase como «Muévelo al centro». El modo de diseño se incorporó en Agentation 3.0, así que debes comprobar la versión; como las demás funciones, solo funciona en escritorio. Más información en Artículo oficial del blog.

Pantalla del modo de diseño de Agentation con un bloque Text seleccionado mediante la barra inferior y controles de tamaño
Pulsa L y podrás arrastrar directamente la distribución que antes describías con palabras.

Instalación sin llamar a un desarrollador

Si usas Claude Code, basta con una línea en la terminal.

npx skills add benjitaylor/agentation

Después escribe /agentation en Claude Code; detectará el framework y completará la instalación. Incluso sin leer código puedes llegar hasta aquí.

Para hacerlo manualmente, instala el paquete y añade una línea de componente.

npm install agentation -D
import { Agentation } from 'agentation';

function App() {
  return (
    <>
      <YourApp />
      {process.env.NODE_ENV === 'development' && <Agentation />}
    </>
  );
}

La condición NODE_ENV === 'development' significa «mostrar la barra solo durante el desarrollo». Es una medida de seguridad para ocultarla a los visitantes del servicio real, así que no la omitas.

Las instrucciones de instalación y opciones de configuración por framework están reunidas en la documentación Install y Features de Sitio web oficial.

Conecta MCP si hasta copiar y pegar te resulta pesado

Dejar una nota, copiarla y pegarla en el chat. Repetirlo también es trabajo. Al conectarlo mediante MCP (Model Context Protocol, un estándar para que las herramientas de IA intercambien datos con programas externos), desaparece todo ese viaje de ida y vuelta. La IA obtiene las notas automáticamente. Además de la barra, necesitas conectar el servidor agentation-mcp y activar la sincronización en la configuración.

A partir de aquí hay tres formas de usarlo.

  • Manos libres — Cuando aparece una nota nueva, la IA la revisa, la corrige y la marca como resuelta automáticamente. Tú solo sigues señalando problemas mientras miras la pantalla.
  • Crítica (Critique) — En cambio, la IA abre el navegador, revisa la página y deja los problemas de diseño como notas. Tú los revisas.
  • Autónomo — La IA detecta los problemas y también aplica las correcciones.

Las dos últimas requieren que la IA abra el navegador directamente, por lo que debes instalar aparte la skill agent-browser. Si es tu primera vez, empieza por Manos libres.

También es importante que las notas conectadas dejan de ser unidireccionales. Si la IA pregunta en la nota «¿Lo ponemos en 24px o 16px?», respondes en el mismo lugar. Se conservan estados como pendiente, en revisión, resuelto y pospuesto. Ya no es dejar algo y olvidarlo: se convierte en una conversación.

Tarjeta de conversación en la que un agente responde mientras cuatro anotaciones de Agentation siguen conectadas por líneas
Deja una nota y el agente responde allí mismo. No es un flujo unidireccional.

Por cierto, la estructura de datos de estas notas intercambiadas está publicada como AFS (Annotation Format Schema, esquema de formato de anotaciones). Sus creadores lo describen como «comentarios de Figma inteligentes adjuntos a una aplicación en ejecución».

Condiciones que conviene conocer antes de empezar

Para no contar solo lo bueno, dejemos claros los límites.

**No puedes modificar el sitio web de otra persona.**Es una herramienta que instalas en tu proyecto y usas mientras el servidor de desarrollo se ejecuta en tu ordenador. No es una extensión para abrir cualquier sitio y cambiar su diseño.

**Se necesita React 18 o posterior.**Si le pides a la IA que cree una aplicación web, probablemente usará React, pero verifícalo. Funciona sin problemas con frameworks SSR/SSG como Next.js, Remix y Astro. Astro no está basado en React, pero funciona si lo configuras con React.

**Solo para escritorio.**Como la herramienta requiere pasar el ratón y arrastrar para seleccionar objetivos y áreas, en móvil resulta prácticamente imposible de manejar. Para revisar problemas móviles, puedes reducir el tamaño de una ventana de navegador de escritorio.

**El resultado no contiene imágenes.**Todo es texto. Para feedback sobre color o ambiente que cuesta expresar con palabras, las capturas siguen siendo mejores.

**No puedes señalar el interior de un iframe.**Esto incluye widgets de pago y mapas incrustados desde fuera: zonas donde está alojada la pantalla completa de otro sitio. Es una limitación inevitable por la política de seguridad del navegador.

**Las notas no duran mucho.**Sin conectar MCP, se guardan en el navegador por página y desaparecen después de 7 días. Si piensas acumularlas para tratarlas más tarde, es mejor conectarlo.

El precio no supone un problema. El uso interno es gratuito tanto para particulares como para empresas. Solo necesitas una licencia aparte para redistribuirlo o ofrecerlo comercialmente. Sigue PolyForm Shield 1.0.0.

Resumen

  • Agentation es una barra que traduce la ubicación pulsada en la pantalla a una dirección de código que la IA puede entender.
  • Añade automáticamente el selector y la jerarquía de componentes; en modo de desarrollo también incluye el archivo fuente y el número de línea, para que la IA no tenga que adivinar cuál es «ese botón».
  • Puedes señalar problemas de cinco formas: clic, selección de texto, selección múltiple, selección de área y pausa de animación.
  • En el modo de diseño de la tecla L puedes arrastrar componentes, cambiar el orden de las secciones y mostrar directamente la distribución (3.0 o posterior).
  • Con Claude Code, la instalación termina ejecutando npx skills add benjitaylor/agentation y después /agentation una vez.
  • Al conectarlo con MCP, la IA obtiene las notas directamente sin copiar y pegar, y también puede preguntar y recibir respuestas.
  • Sin embargo, solo puedes usarlo en un navegador de escritorio mientras tu proyecto React 18+ se ejecuta con un servidor de desarrollo.

Si te cansas de explicar lo mismo con palabras, prueba a señalarlo con el dedo. El sitio web oficial es https://www.agentation.com/. En la próxima entrega exploraremos otro servicio gratuito.

Seguir leyendo