Cuando los comentarios del CEO se transmiten por Slack, construimos una aplicación web de revisión con IA y nos encontramos con otra barrera

~Un diseñador creó una aplicación web con autenticación en Cloudflare junto con IA~

Hola. Soy Hashy, diseñador de UI.

Recientemente, en lugar del flujo tradicional de crear wireframes y enviarlos al cliente para su confirmación, hemos aumentado significativamente el uso de IA para crear mockups de landing pages y sitios web, y luego solicitar su aprobación.

Anteriormente, cuando recibíamos comentarios sobre el diseño por Slack:

"¡Por favor, amplía el espacio en blanco aquí!" "¡Reemplaza esta imagen!" "¡Cambia el texto aquí!"

Ese tipo de comentarios era lo normal.

A primera vista, es un enfoque común.

De hecho, hasta ahora no había habido problemas significativos con este método.

Sin embargo, desde que comencé a crear prototipos rápidamente con IA, se hizo evidente un problema particular.

Los comentarios se pierden en el flujo.

Slack es conveniente.

Aunque es conveniente, naturalmente no es una herramienta diseñada exclusivamente para revisiones de diseño.

Las comunicaciones de trabajo habituales, las conversaciones casuales, las consultas sobre otros proyectos, todo fluye en el mismo lugar.

Como resultado,

• los comentarios de corrección se pierden en otras conversaciones
• proliferan los hilos de conversación
• surgen dudas como "¿dónde estaba esa corrección?"
• la conversación cambia a otro tema sin darse cuenta

es lo que sucede.

Slack también tiene una función de lista.

Anteriormente, también escribí un artículo sobre mejora de procesos utilizando plantillas de Slack.

Comienza con plantillas de Slack para un DX sin complicaciones | Tópicos | Liberogic

Sin embargo, las notificaciones de hilos son confusas, y si vinculamos notificaciones, el área de mensajes se vuelve desordenada.

Al final,

el área de chat se vuelve cada vez más activa.

La velocidad para crear landing pages con IA se multiplicó, pero el método de revisión seguía siendo el mismo de siempre.

Si solo se acelera la generación pero luego se atasca en la revisión, parece un desperdicio.

Así que pensé:

¿Qué tal si escribo comentarios directamente en el HTML?

Mientras estaba trabajando en una página de destino, de repente pensé algo.

¿Y si pudiera escribir comentarios directamente en el HTML del prototipo creado con IA? Además, ¿y si pudiera agrupar los comentarios e imágenes adjuntas en un ZIP y pasárselos directamente a herramientas de IA como Claude Code o Codex?

Aunque es útil hacer correcciones en rojo sobre capturas de pantalla, poder revisar el propio HTML sería incluso mejor.

• Ubicación del clic
• Selector CSS del elemento objetivo
• Texto cercano
• Nombre de la página
• Imagen de referencia adjunta

y mucho más se pueden guardar también juntos.

En otras palabras,

En lugar de "arregla esto", puedes decir "corrige este elemento HTML de esta manera".

Parece que también funciona bien cuando se solicitan correcciones a través de AI.

"¿Esto no sería bastante útil?"

Así fue como comenzamos a crear

Design Marker (Verificador de correcciones en LP)

.

Lo creamos como una prueba inicial

La primera versión era una aplicación local que se ejecutaba en la computadora personal.

Su uso es muy simple.

1. Comprime el conjunto de archivos HTML en un ZIP
2. Arrastra y suelta en Design Marker
3. Muestra el HTML dentro del ZIP en el navegador
4. Haz clic en el área de interés
5. Escribir un comentario
6. Exportar un archivo ZIP de revisión que incluya información de comentarios
7. Pasar a IA como Claude Code o Codex para que realice correcciones

Puedes dejar comentarios directamente en el HTML, tal como si estuvieras trazando líneas rojas en una captura de pantalla.

Si hubiésemos creado algo así hace mucho tiempo, habría tomado muchos días.

Conforme lo íbamos desarrollando,

Listado de comentarios, nombre del responsable, saltos a la posición del comentario, adjuntar imágenes, integrar múltiples revisiones…

"También necesitaría esto" y "También necesitaría lo otro" —las funcionalidades fueron aumentando poco a poco.

A partir de aquí,

Esto... ¿no sería útil como herramienta interna normal?

Y así, poco a poco, empezamos a emocionarnos.

La compatibilidad con IA fue mucho mejor de lo que esperaba

Al crear Design Marker, lo que más me sorprendió fue la integración con IA.

Si pides cambios en un chat normal,

"Por favor, haz la imagen de la esquina superior izquierda un poco más grande"

es el tipo de instrucción que terminas dando.

Entre personas, mirando la pantalla, de alguna manera lo entiendes; pero para la IA, es ambiguo dónde está la "esquina superior izquierda" y qué elemento es la "imagen".

Con Design Marker, al hacer clic en un elemento HTML, puedes obtener un selector CSS como este, por ejemplo.

article.strength-item:nth-of-type(1)
 > div.strength-visual-wrap
 > div.illustration-slot

Entonces le das a la IA,

Por favor, amplíe la ilustración dentro de article.strength-item:nth-of-type(1) a aproximadamente el 115% de su tamaño actual.

De esta manera puede dar instrucciones.

Si la estructura del DOM no ha cambiado drásticamente, puede identificar el objetivo de corrección de forma bastante específica.

Además, puede pasar el nombre de la página, texto cercano, comentarios e imágenes de referencia al mismo tiempo.

Hasta ahora,

¡No, no, ese no es el lugar!

Las correcciones que antes tenía que repetir varias veces a la IA ahora aciertan con el lugar deseado de una sola vez.

¿«Revisar en HTML» es muy compatible con la era de la IA, verdad?

Sentí un progreso considerable en este punto.

Pensé «¡Esto es muy útil!» y lo compartí dentro de la empresa con el resultado de que

Está bien.

Esto es conveniente.

Vamos a que todos lo usen.

Lo compartí en la empresa con gran entusiasmo.

Entonces...

¿No funciona? ¿Qué pasa, es mi configuración?

Ah...

Así es.

En mi computadora funciona.

Pero,

No funciona tal cual en la computadora de todos.

Un problema típico de las aplicaciones locales, abordado de manera clara.

Yo puedo usarla. Pero los demás no pueden.

Como soy quien desarrolla, obviamente funciona.

Sin embargo, para que otras personas la usen, se necesita instalar Node.js y preparar los paquetes de dependencia.

Para alguien acostumbrado al desarrollo, no es tan difícil.

Pero para diseñadores y directores,

primero instala Node.js

una aplicación de revisión que hay que explicar desde el principio.

…Ya no es una aplicación de revisión casual.

Entonces,

"¡Entonces, podría hacerse arrancar con un solo clic!"

pensé, y también creé un archivo de inicio llamado start-mac.command.

Al hacer doble clic,

inicia la terminal, realiza los preparativos necesarios, abre la aplicación y hasta lanza el navegador.

Perfecto.

...o eso pensé.

Pero pensándolo bien,

"Por favor, haz doble clic en este archivo .command desconocido"

bueno, esa instrucción es bastante inquietante.

¿Voy a enviarle al presidente un mensaje que diga "¡Por favor, haga doble clic aquí por ahora!"?Qué sospechoso.Sospechoso, incluso aunque lo haya creado yo mismo.

Se logró hacer algo que funciona, pero no se convirtió en la solución principal para compartir internamente.

Cuando estás creando una aplicación junto con IA,

«Funciona en mi entorno, pero otros no pueden usarlo»

Y también nos encontramos normalmente con esa pared que parece ser común en el desarrollo.

Una palabra de un ingeniero experimentado

Y entonces, mi colega ingeniero me dijo una cosa.

Crea un README y simplemente di "Carga la carpeta en CloudCode y configura siguiendo el README". ¿No te parece?

……

Estaba creando muchas funcionalidades para hacerlo más conveniente, pero si es para personas que pueden usar IA, resultó ser incomparablemente más simple de esa manera.

En lugar de intentar resolver todo desde el lado de la aplicación,

Pensamos en la forma más fácil incluyendo a los usuarios y a la IA.

También fue una buena lección.

Pero el director no escribió ningún comentario.

También creamos un README.

Simplificamos la forma de iniciarlo.

Con esto está bien.

...eso pensé.

Pero entonces...

Silencio total.

El director está ocupado, así que no me hace caso...

Fue aquí donde me di cuenta de algo aún más importante.

Hacer que la gente use la aplicación de revisión es mucho más difícil que

crear la aplicación en sí

.

Sin importar cuán conveniente sea la aplicación localmente,

«iniciar la aplicación»

es ese primer paso necesario.

Para las personas ocupadas, incluso ese primer paso se convierte en una barrera.

Entonces…

¿Por qué no hacerlo web?

¿No podrían simplemente hacer clic en la URL y usarla?

Así que decidí crear una versión web de Design Marker.

Primero crearé una página previa al inicio de sesión para motivarme.

Me gustaría crear muchas cosas, pero hay mucho en qué pensar, así que por ahora es una página de inicio creada por AI.

Pensé en cómo estructurar el backend. Ahí es donde elegí Cloudflare.

Dicho esto, soy diseñador.

Cloudflare Pages、Pages Functions、Cloudflare Access、D1、R2……。

Aunque haya oído el nombre, era la primera vez que consideraba la arquitectura por mí mismo y la componía como una aplicación web.

A partir de aquí es el turno del profesor AI.

Quiero crear un panel de administración interno y una pantalla de revisión para compartir con los clientes.

Hay una forma de usar Cloudflare Access para el panel de administración.

¿Y los comentarios e información del proyecto?

Se pueden guardar en D1

¿Y el ZIP?

Existe una forma de utilizar R2

Claro. ¡Creo que lo entiendo todo!

…Solo creo que lo entiendo.

La IA es realmente excelente.

Si preguntas, te puede enseñar una estructura bastante específica.

Sin embargo, lo que sentí fuertemente durante este desarrollo fue que

que la IA te enseñe un método y que construyas un sistema seguro son dos cosas distintas

Así fue.

De «Explícame» a «¿Es correcto mi entendimiento?»

Especialmente con aspectos relacionados con la seguridad, da miedo tomar decisiones basadas únicamente en las respuestas de la IA.

Por eso, decidimos que un ingeniero senior revisara las partes que no entendía o las partes críticas.

Antes, yo

¿Quiero hacer esto en Cloudflare, cómo lo hago?

Así es como preguntaba.

Pero así, el senior también tiene que explicar todo desde el principio.

Cuando está ocupado,

«¡Senior! ¡Explícame desde el principio!»

es como si estuviera atacando sin pensar.

Esta vez, primero intercambié ideas varias veces con la IA y organicé mis propias conclusiones.

Y luego,

El panel de administración se restringe solo a los miembros del equipo interno con Cloudflare Access. La pantalla compartida requiere inicio de sesión con URL, ID y contraseña específicos del proyecto. La información del proyecto y los comentarios se guardan en D1, y el ZIP con todos los archivos de LP se guarda en R2. ¿Es correcto este enfoque?

hasta ese punto y luego consulté.

En otras palabras,

"Cuéntame"

sino más bien,

"¿Es correcto este enfoque?"

cambió.

Para mí, este fue un cambio bastante significativo.

La comunicación con los colegas se reduce, permitiéndoles dedicar tiempo a las verificaciones realmente necesarias.

Yo mismo no solo copio la respuesta de la IA y termino,

"¿Por qué se hace de esta manera?"

he podido avanzar comprendiendo esto poco a poco.

Cuando pasamos a web, nos esperaba otro desafío

De esta manera, la versión web comenzó a funcionar poco a poco.

Solo envía la URL y puede abrirse.

Es incomparablemente más fácil de usar que la aplicación local.

"¿Se resuelve con esto?"

...o eso pensé.

En el momento en que pasamos a web, surgieron de repente problemas que apenas habíamos considerado en la versión local.

Por ejemplo,

• ¿Es seguro confiar los LP previos al lanzamiento de los clientes a la nube?
• ¿Quién puede ver cuál proyecto?
• ¿Cómo se protegen las contraseñas?
• ¿Cómo se previenen los intentos de inicio de sesión no autorizados?
• ¿Se pueden mostrar con seguridad los archivos HTML cargados?
• ¿Cuándo se eliminan los datos después del cierre del proyecto?

Etc.

No es suficiente añadir una pantalla de autenticación para completar la seguridad.

Es obvio, pero solo después de construir una solución propia pude realmente comprender lo complejo que es.

Actualmente implementamos los conceptos básicos: Cloudflare Access, inicio de sesión por proyecto, y almacenamiento en D1 y R2.

Por otro lado,

Aún hay aspectos que queremos mejorar de cara al lanzamiento oficial, como el refuerzo de la protección por contraseña, la limitación de intentos de inicio de sesión, la separación de la vista previa de HTML, y las reglas de almacenamiento y eliminación de datos.

Design Marker también tiene un modo de revisión que solo funciona dentro del navegador, sin guardar los archivos ZIP en la nube.

El sistema está diseñado para guardar la información del proyecto y los archivos ZIP en la nube solo cuando se comparte un proyecto con otros usuarios.

Design Marker actualmente no es un servicio oficial.

Estamos en la fase de validación, enfocados principalmente en uso interno.

En otras palabras, lo que creamos esta vez es:

"¡Un servicio completamente seguro ha sido completado!"

no es el caso.

Más bien,

una aplicación en desarrollo donde estamos identificando qué debemos proteger e implementando las medidas necesarias una por una

.

Pasar a web no es solo cuestión de comodidad.

También surge la responsabilidad de custodiar los datos de los usuarios.

Esta experiencia me brindó mucho aprendizaje.

Panel de administración del diseñador completado.

Desde el panel, todos los empleados pueden verificar todas las correcciones.

Al acceder a la página de detalles, puedes abrir enlaces rápidos de propuestas de estructura de esta forma, lo que te permite ver la LP directamente y escribir comentarios.

De esta manera, puedes revisar los comentarios marcados como LP. También es posible consultar comentarios anteriores, lo que hace que las revisiones de la estructura sean más fluidas.

Incluso con IA, el aprendizaje fue necesario.

A través del desarrollo, sentí algo con mucha fuerza.

Gracias a la IA, incluso los diseñadores pueden desafiarse a sí mismos en el desarrollo mucho más fácilmente que antes.

Yo mismo,

"Quiero crear esto"

hasta algo que realmente funciona, el rango sin duda se ha ampliado.

Pero eso

"ya no necesito estudiar"

no significaba eso.

Era todo lo contrario.

Esta configuración es la recomendada

¡Entendido!

solo es peligroso.

Lo que realmente se necesitaba era,

«¿Por qué?» «¿Esta vez también está bien así?» «¿No falta algo?» «¿No sería mejor que un experto verificara esta parte?»

era lo que se pensaba.

Es necesario poseer el conocimiento para juzgar si la propuesta de IA se adapta a las condiciones de esta ocasión y qué es lo que falta.

La IA es realmente un compañero en quien confiar.

Pero al final, es el ser humano quien toma la decisión y asume la responsabilidad.

La web de Design Marker en esta ocasión fue también una oportunidad para replantearse cómo relacionarse con la IA.

En la era de la IA, lo que más cambiará será quizás la revisión.

La IA crea un sitio LP en cuestión de minutos.

Un borrador que antes llevaba horas aparece de forma sorprendentemente rápida.

Pero después de eso,

"Aquí así" "Amplía este espacio un poco" "Cambia solo esta imagen"

este tipo de intercambio no ha cambiado mucho desde hace tiempo.

Solo aumenta la velocidad de creación,

una persona verifica, comunica los cambios necesarios y vuelve a crear.

Esta parte sigue siendo bastante humana.

Por eso últimamente,

no solo la IA en sí,

cómo interactúan la IA y las personas

creo que este mecanismo también se vuelve importante.

Design Marker es uno de esos experimentos.

Ahora

Estamos experimentando con comentarios en HTML, adjuntos de imágenes, integración de múltiples revisiones, control de versiones por proyecto, y más.

Todavía hay muchas cosas que queremos hacer en el futuro.

Anotaciones directas en capturas de pantalla.

Solicitudes de corrección por IA desde comentarios.

Mejora de la comparación entre versiones.

Mejora de la usabilidad para revisiones con múltiples participantes.

Y por supuesto, mayor seguridad en autenticación, vista previa en HTML y gestión de datos.

Nuestro plan es comenzar a usarlo internamente y mejorarlo paso a paso.

Al principio,

"Quería hacer algo para evitar que los comentarios de Slack se perdieran"

era la sensación con la que comenzamos a desarrollar esta pequeña herramienta.

Pero antes de que nos diéramos cuenta,

creamos una aplicación local,

no convencimos al presidente para que la usara,

la migramos a web,

estudiamos Cloudflare,

enfrentamos desafíos de seguridad,

consultamos con colegas ingenieros senior,

y terminamos reflexionando sobre cómo relacionarnos con la IA.

…bueno, en realidad solo quería crear una aplicación de revisión. Resultó haber mucho más en qué pensar de lo que esperaba.

Pero lo interesante es que ahora puedo transformar esos pequeños inconvenientes en mi trabajo cotidiano en algo real, trabajando junto con la IA.

Cuando podamos desarrollarlo hasta el punto de poder hacerlo público con confianza, me gustaría presentar Design Marker de manera más oficial.

Pero antes de eso.

Primero, voy a hacer un esfuerzo para que el CEO escriba comentarios adecuados (risas). Pero por ahora, parece que podré disfrutar de una buena bebida hoy.