Como el comentario del presidente se difunde por Slack, creamos una aplicación web de revisión con IA y nos encontramos con otro obstáculo

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

Hola. Soy Hashi, diseñador de UI.

Últimamente, en lugar de dibujar wireframes y pedir al cliente que los revise, cada vez es más común usar IA para crear maquetas de landing pages o sitios web y pedir su confirmación.

Antes, cuando pedíamos que revisaran el diseño, recibíamos comentarios por Slack como

"¡Por favor, amplíe el margen aquí!" "¡Cambien esta imagen!" "¡Cambien este texto aquí!"

ese tipo de comentarios.

A primera vista, es un método habitual.

De hecho, hasta ahora no había presentado grandes problemas.

Sin embargo, desde que empezamos a crear prototipos con IA de forma constante, un problema se ha vuelto cada vez más evidente.

Los comentarios se pierden en el flujo.

Slack es práctico.

Es muy útil, pero, como es lógico, no es una herramienta diseñada exclusivamente para revisiones de diseño.

Las comunicaciones habituales del trabajo, las charlas informales y las consultas sobre otros proyectos llegan todas al mismo lugar.

Como resultado,

• los comentarios de corrección se desvían hacia otras conversaciones
• y los hilos se multiplican
• y uno acaba preguntándose: "¿Dónde estaba esa corrección?"
• y, cuando te das cuenta, la conversación ya trata de otro tema

Esto suele ocurrir.

Slack también cuenta con una función de listas.

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

Transformación digital sencilla con plantillas de Slack | Temas | Liberogic Inc.

Sin embargo, las notificaciones de los hilos resultan difíciles de seguir, y si las conectas, el campo de mensajes se vuelve un caos...

Al final,

solo el canal de chat se vuelve cada vez más ruidoso.

Crear landing pages con IA se ha vuelto muchas veces más rápido, pero el método de revisión sigue igual que antes.

Si solo la generación se acelera pero la revisión posterior se atasca, resulta una lástima.

Así que lo pensamos.

¿Y si simplemente escribiéramos los comentarios directamente en el HTML?

Mientras creaba una landing page, se me ocurrió una idea.

¿No sería genial poder escribir comentarios directamente sobre el HTML de un prototipo creado con IA? Además, ¿no sería útil poder agrupar los comentarios y las imágenes adjuntas en un ZIP y pasarlo tal cual a una IA como Claude Code o Codex?

Marcar en rojo una captura de pantalla también es fácil de entender, pero si se pudiera revisar directamente el HTML,

• el lugar donde se hizo clic
• el selector CSS del elemento objetivo
• el texto cercano
• el nombre de la página
• la imagen de referencia adjunta

también se pueden conservar junto con ella.

En resumen,

En lugar de «arregla esto», puedes decir «corrige este elemento HTML así».

Esto también parece encajar bien cuando le pides correcciones a la IA.

"¿Esto no será bastante útil?"

Así fue como empezamos a crear

Design Marker (verificador de correcciones para landing pages)

.

Lo probamos a ver qué tal

La primera versión era una aplicación local que se ejecutaba en el propio ordenador.

El uso es muy sencillo.

1. Comprimir todos los archivos HTML en un ZIP
2. Arrastrar y soltar en Design Marker
3. Mostrar el HTML del ZIP en el navegador
4. Haz clic en el lugar que te interese
5. Escribe un comentario
6. Exporta una revisión en ZIP con la información de los comentarios incluida
7. Pásalo a una IA como Claude Code o Codex para que lo corrija

Puedes comentar directamente en el HTML, como si trazaras una línea roja sobre una captura de pantalla.

Hace mucho tiempo, si alguien nos hubiera pedido crear algo así, ¡imagina cuántos días habría llevado!

Mientras lo construíamos,

una lista de comentarios, nombres de responsables, saltos a la posición de cada comentario, adjuntar imágenes, unificar varias revisiones...

"Y también esto", "y aquello también", y las funciones fueron aumentando poco a poco.

A partir de ese momento,

Esto... ¿no sería, en realidad, una herramienta interna bastante útil?

Y, poco a poco, empieza a dejarse llevar.

La compatibilidad con la IA resultó ser mejor de lo que esperaba.

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

Cuando pides cambios en un chat normal,

"Hazla un poco más grande, la imagen de arriba a la izquierda"

suele quedarse en instrucciones de este tipo.

Entre personas, uno puede entenderlo más o menos mirando la pantalla, pero para la IA, dónde está "arriba a la izquierda" y qué elemento es exactamente la "imagen" resulta ambiguo.

Con Design Marker, a partir del elemento HTML en el que haces clic, puedes obtener un selector CSS como este, por ejemplo.

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

Entonces, al enviarlo a la IA,

Amplíe las ilustraciones dentro de article.strength-item:nth-of-type(1) a aproximadamente el 115 % de su tamaño actual.

puede indicarse de la siguiente manera.

Si la estructura del DOM no ha cambiado mucho, es posible identificar con bastante precisión el elemento que hay que corregir.

Además, también se puede proporcionar el nombre de la página, el texto cercano, comentarios e imágenes de referencia.

Hasta ahora,

¡No, no, no es ahí!

Las correcciones que antes había que repetir varias veces a la IA para que las aplicara en el lugar correcto ahora también se consiguen con más frecuencia en un solo intento.

«Revisar en HTML», ¿no encaja bastante bien con la era de la IA?

Aquí sentí que realmente funcionaba.

Pensé: «¡Esto es muy útil!» y lo compartí con el equipo, y el resultado fue

Bien.

Esto es útil.

Hagámoslo probar también a los demás.

Lo compartí con entusiasmo en la empresa.

Y entonces...

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

Ay...

Así es.

En mi computadora sí funciona.

Pero,

Pero no funciona tal cual en las computadoras de todos.

Lo integré sin problemas, como suele ocurrir con las aplicaciones locales.

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

Como soy quien la desarrolla, por supuesto funciona.

Sin embargo, para que otras personas la usaran, era necesario instalar Node.js y preparar los paquetes de dependencias.

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

Pero, para diseñadores y directores de proyecto,

Primero, instale Node.js

Una aplicación de revisión que empieza explicando eso.

...Eso ya no es una aplicación de revisión sencilla.

Así que,

"¡Bien, si lo hago para que se inicie con un solo clic!"

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

Al hacer doble clic,

se abre la terminal, se realizan los preparativos necesarios, se inicia la aplicación y, por último, se abre el navegador.

Perfecto. Listo.

...Eso pensé, al menos.

Pensándolo con calma,

"Por favor, haga doble clic en este archivo .command que no conoce"

esa instrucción también da bastante miedo.

¿Le mando al director algo como "Haz doble clic en esto primero!"...? Suena sospechoso. Aunque lo hice yo mismo, suena sospechoso.

Funcionaba, al menos, pero no llegó a ser la versión definitiva para compartir dentro de la empresa.

Cuando desarrollas una aplicación junto con la IA,

"Funciona en mi entorno, pero los demás no pueden usarla"

un problema muy típico en el desarrollo, también te topas con eso sin más.

El consejo de un ingeniero senior

En ese contexto, un ingeniero senior me dio un consejo.

Crea un README y basta con decir: "Carga la carpeta en Claude Code y sigue las instrucciones del README para configurarlo". ¿Qué tal?

……

Intentaba hacerlo más práctico añadiendo muchas funciones, pero para quienes saben usar la IA, esa forma era mucho más sencilla.

En lugar de intentar resolverlo todo desde la aplicación,

Piensa en el método más cómodo, incluyendo a quienes lo usan y a la IA.

Esto también me ha enseñado algo.

Pero el director no deja comentarios.

También escribí el README.

Además, simplifiqué el método de inicio.

Con esto debería bastar.

...eso pensé.

Pero entonces...

Ni noticias.

Director, como está tan ocupado, no me hace caso...

Aquí me di cuenta de algo aún más importante.

Más que crear una aplicación de reseñas,

conseguir que la gente la use

es mucho más difícil.

Por muy cómoda que la hagamos en local,

"Iniciar la aplicación"

sigue siendo el primer paso necesario.

Para las personas ocupadas, incluso ese primer paso supone una barrera.

Entonces...

Entonces hagámoslo en web.

Si solo hace falta hacer clic en una URL, ¿no podría la gente usarlo?

Con esa idea en mente, decidí crear una versión web de Design Marker.

Por ahora, voy a crear la página previa al inicio de sesión para ganar impulso.

Me gustaría desarrollar muchas funciones, pero hay muchas cosas que considerar, así que por ahora será una landing page creada con IA.

Pensé en cómo montar la parte del backend y elegí Cloudflare.

Dicho esto, soy diseñador.

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

Aunque ya conocía los nombres, era la primera vez que diseñaba la arquitectura por mi cuenta y la construía como una aplicación web.

Ahora es el turno de la IA como mi maestra.

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

Existe la opción de usar Cloudflare Access para el panel de administración

¿Y los comentarios o la información del proyecto?

Se puede guardar en D1

¿Y el ZIP?

Existe la opción de usar R2

Ya veo. Creo que lo he entendido todo.

...Solo es la sensación.

La IA realmente es muy competente.

Si se lo preguntas, incluso te explica una estructura bastante concreta.

Sin embargo, lo que más sentí durante este desarrollo fue que

Que la IA pueda enseñarte un método y que puedas crear un sistema seguro son cosas distintas

esa fue la conclusión.

De "Por favor, explícamelo" a "¿Es correcto entender esto así?"

Sobre todo en las partes relacionadas con la seguridad, me da miedo tomar decisiones basándome solo en las respuestas de la IA.

Por eso, decidí que las partes que no entiendo o que son importantes las revise un ingeniero senior.

Si hubiera sido yo antes,

Quiero hacer esto con Cloudflare, ¿qué debo hacer?

creo que habría empezado preguntando desde ese punto.

Pero así, el senior también tendría que explicármelo todo desde cero.

Y con alguien tan ocupado,

"¡Senpai! ¡Por favor, enséñame desde el principio!"

es como lanzarse de cabeza sin ningún plan.

Esta vez, primero me dediqué a organizar las ideas a mi manera, intercambiando mensajes con la IA una y otra vez.

Y luego,

La pantalla de administración se restringe solo a los miembros internos mediante Cloudflare Access. La pantalla compartida se inicia sesión con la URL, el ID y la contraseña de cada proyecto. La información de los proyectos y los comentarios se guardan en D1, y el paquete ZIP completo de la landing page se guarda en R2. ¿Es correcto este entendimiento?

Llegué hasta este punto y después lo consulté.

En resumen,

"Por favor, enséñame"

en lugar de

"¿Es correcto este entendimiento?"

Y así fue como terminé cambiando la frase.

Para mí, fue un cambio bastante grande.

Las consultas con mis superiores se redujeron, y ahora pueden dedicar su tiempo a los puntos que realmente requieren revisión.

Yo tampoco me quedo solo con copiar la respuesta de la IA,

"¿por qué se hace así?"

sino que poco a poco he ido entendiendo esos motivos y avanzo con ellos.

Al pasarlo a la web, apareció otro obstáculo

Así, la versión web fue funcionando poco a poco.

Basta con enviar la URL para abrirla.

Es muchísimo más fácil de usar que una aplicación local.

"¿Entonces con esto ya está resuelto?"

...Eso pensé, al menos.

En cuanto lo llevamos a la web, salieron a la luz problemas que en la versión local apenas nos habíamos planteado.

Por ejemplo,

• ¿Es seguro confiar en la nube las landing pages de clientes antes de su publicación?
• ¿Quién puede ver cada proyecto?
• ¿Cómo se protegen las contraseñas?
• ¿Cómo se evitan los intentos de inicio de sesión no autorizados?
• ¿Cómo se puede mostrar de forma segura el HTML subido?
• ¿Cuándo se eliminan los datos de un proyecto una vez finalizado?

etc.

Añadir una sola pantalla de autenticación no significa que la seguridad esté resuelta.

Es algo obvio, pero hasta que no lo construí yo mismo no me di cuenta de su verdadero peso.

Actualmente hemos implementado los mecanismos básicos, como Cloudflare Access, inicio de sesión por proyecto y almacenamiento en D1 y R2.

Por otro lado,

todavía quedan aspectos que nos gustaría mejorar antes de una publicación general formal, como el fortalecimiento de la protección con contraseña, la limitación de intentos de inicio de sesión, la separación de la vista previa HTML y las reglas de almacenamiento y eliminación de datos.

Design Marker también incluye un modo que permite revisar el ZIP únicamente dentro del navegador, sin guardarlo en la nube.

Solo cuando se comparten proyectos en la nube, se guardan la información del proyecto necesaria y el ZIP.

Actualmente, Design Marker todavía no es un servicio oficial.

Nos encontramos en una fase de validación, centrada principalmente en el uso interno.

Lo que hemos creado con esta iniciativa es, en realidad,

"¡Hemos completado un servicio totalmente seguro!"

no es algo de lo que podamos hablar.

Más bien,

Una aplicación en desarrollo en la que vamos identificando qué debe protegerse e implementando, una por una, las medidas necesarias.

.

Pasar algo a la Web no solo significa hacerlo más conveniente.

También implica asumir la responsabilidad de custodiar los datos de los usuarios.

Esta vez aprendimos mucho.

Esta es la pantalla de administración completada para el fabricante de diseños.

Desde el panel, el personal puede revisar todas las correcciones marcadas en rojo.

Al entrar en la página de detalle, se puede abrir un enlace rápido a la propuesta de estructura y así ver la landing page directamente o escribir comentarios.

Después, los comentarios escritos sobre la landing page se pueden consultar de esta forma. Además, es posible revisar comentarios anteriores, lo que ha agilizado las correcciones de la estructura.

Aunque exista la IA, el estudio seguía siendo necesario.

Durante este desarrollo, también me quedó otra impresión muy clara.

Gracias a la IA, a los diseñadores también les resulta mucho más fácil atreverse con el desarrollo que antes.

Yo mismo,

"quiero crear esto"

el alcance de lo que se puede llevar desde esa idea hasta algo que realmente funciona se ha ampliado claramente.

Pero eso,

"ya no hace falta estudiar"

no significaba eso.

Más bien, era todo lo contrario.

Esta estructura es la que recomendamos

¡Entendido!

No basta con eso, es arriesgado.

Lo que realmente se necesita es

"¿Por qué?" "¿Con esto basta también esta vez?" "¿Se nos está pasando algo?" "¿Esta parte no sería mejor confirmarla con un especialista?"

fue lo que llegamos a concluir.

Se necesita conocimiento para determinar si la propuesta de la IA encaja con las condiciones de este caso y qué le falta.

La IA es realmente un compañero en el que se puede confiar.

Pero, al final, quien decide y asume la responsabilidad es la persona.

La conversión de Design Marker a la web también nos llevó a reflexionar de nuevo sobre cómo convivir con este tipo de IA.

En la era de la IA, lo que más va a cambiar podría ser la revisión

La IA genera una landing page en cuestión de minutos.

El borrador inicial, que antes tardaba horas, ahora aparece sorprendentemente rápido.

Pero, después,

"Cambia esto así" "Amplía un poco este margen" "Cambia solo esta imagen"

Este tipo de intercambio, sorprendentemente, no ha cambiado desde hace mucho tiempo.

Solo ha aumentado la velocidad de creación,

una persona revisa, comunica los cambios necesarios y vuelve a crear la versión.

Esta parte sigue siendo bastante humana.

Por eso, últimamente,

no solo la IA en sí,

cómo la IA y las personas se comunican entre sí

también creo que irá cobrando importancia un mecanismo de este tipo.

Design Marker es uno de los experimentos realizados con este fin.

Actualmente, el contenido introducido se guarda en

Estamos probando funciones como comentarios en HTML, adjuntar imágenes, integrar varias revisiones y el control de versiones por proyecto.

Todavía hay muchísimas más cosas que queremos hacer.

Marcar en rojo directamente sobre las capturas de pantalla.

Solicitar a la IA correcciones a partir de los comentarios.

Mejoras en la comparación entre versiones.

Mayor facilidad de uso para las revisiones de varias personas.

Y, por supuesto, también mejoras de seguridad, como la autenticación, la vista previa de HTML y la gestión de datos.

Por ahora, la idea es usarlo internamente y mejorarlo poco a poco.

Al principio,

"Quiero hacer algo para que dejen de llegar tantos comentarios de Slack"

era una pequeña herramienta que empecé a crear con la idea de que sería algo sencillo.

Pero, sin darme cuenta,

creé una aplicación local,

pero el director no llegó a usarla,

así que la convertí en una aplicación web,

estudié Cloudflare,

me preocupé por la seguridad,

y consulté con un ingeniero senior.

Terminamos reflexionando incluso sobre cómo convivir con la IA.

......Solo quería crear una aplicación de revisión, pero resultó que había bastante que considerar.

Sin embargo, creo que es un cambio interesante poder dar forma, junto con la IA, a pequeñas incomodidades que surgen en nuestro propio trabajo.

Cuando lo hayamos desarrollado hasta un punto en el que podamos publicarlo con confianza, me gustaría presentar oficialmente Design Marker.

Antes de eso.

Primero me esforzaré en conseguir que el presidente escriba un comentario como es debido (jaja). De todos modos, hoy parece que podremos disfrutar de una buena bebida