Topics

¡Hola! Soy Hasshi, diseñador de interfaz de usuario en Liberogic Inc.

Mi preocupación reciente es que no estoy logrando mucho progreso en la creación de una nueva LP (página de destino) para mi servicio de accesibilidad.

Afortunadamente, el director ejecutivo, encargado del diseño del sitio web de nuestra empresa, está muy ocupado con otros asuntos. Pero a este ritmo, no podremos avanzar...

"Está bien, al menos vamos a crear un borrador aquí para que la revisión del presidente sea un poco más fácil".

Todo empezó con esa idea,Producción rápida de LP mediante IA (Gemini) y una herramienta de automatización de diseño (FigmaMake)¡Esta vez, compartiré todo el proceso y mis pensamientos honestos desde la perspectiva de un diseñador!

Nuestro objetivo esta vez: ¡lograr que el presidente haga algunos "comentarios rojos" sobre el borrador!

¡Es imposible hacer algo perfecto desde el principio! ¡Sí! Primero que nada, es importante lanzar algo que el presidente pueda comentar fácilmente, ¡eso es seguro!

El proceso completo para crear un LP a la velocidad del rayo (¡aún más rápido una vez que te acostumbres!)

Aquí está la asignación de tiempo real para el flujo de producción que probamos esta vez: La parte que tomó más tiempo fue la parte de "repetición", que trataba de mejorar la precisión del diseño.

1. 【analizar】Gemini-sensei, ¿qué opinas de este LP?(15 puntos)
2. [Generación de texto]Haga que Gemini cree el texto de la página de destino, incluidas las mejoras.(15 puntos)
3. [Creación de indicaciones]Deja que Géminis lance el "hechizo mágico" que quieras lanzar en FigmaMake(5 puntos)
4. [Generación de diseño]FigmaMake, ¡lo pedí primero!(5 puntos)
5. [Repetir bucle]Mejorar la precisión mediante un viaje de ida y vuelta entre el análisis y la generación(1,5 horas)
6. Figma-izaciónImportar a Figma con el complemento Html to Design(5 puntos)
7. Correcciones de FigmaAjustes finales a los problemas de diseño(30 minutos)

¡Veamos cada paso más de cerca!

PASO 1: [Análisis] Gemini-sensei, ¿qué opinas de este LP? (15 minutos)

Primero, hacemos que Gemini lea nuestras páginas de accesibilidad existentes y obtenga comentarios honestos.

[Ejemplo de mensaje para Géminis]

Analice la página de destino para la accesibilidad web en la URL a continuación y enumere las ventajas y desventajas.

Los resultados del análisis llegaron en cuestión de segundos: "'No hay estudios de caso ni testimonios de clientes, por lo que es difícil imaginar los beneficios específicos de implementar el servicio'... ¡Guau, es tan preciso que duele! Pero es algo que no habría podido decir yo mismo, así que ¡gracias, Gemini!". Supieron expresar con precisión los problemas que presentía vagamente.

Bueno, primero que nada, entendamos la situación actual. Creé esta página, pero bueno, ¡le pediré a Gemini-sensei que me indique cualquier cosa que no note!

PASO 2: [Generación de texto] Haga que Gemini cree el texto LP incluyendo mejoras (15 minutos)

Copiaremos y pegaremos los resultados del análisis del PASO 1 y le pediremos que cree un texto que incluya sugerencias de mejora.

[Ejemplo de mensaje para Géminis]

Con base en los resultados del análisis anterior, cree una propuesta de estructura de texto para la página de destino de accesibilidad web. (Omitido) Marque claramente cualquier elemento recién añadido como [Texto de muestra].

Al incluir un texto específico como "Ejemplo de testimonio de cliente: XXXX Co., Ltd.: ¡Las consultas a través del sitio web se multiplicaron por 1,5!", se convierte instantáneamente en una página de destino. Solo con esto, sientes que has hecho bien tu trabajo.

Bueno, le entregaré la lista de críticas que recibí a Gemini y les pediré que la conviertan en algo genial. ¡Este es el mejor uso de la IA! ...Uy, tengo que asegurarme de que la marquen como "[Texto de muestra]" para no confundirme después. Soy un poco rápido para sacar conclusiones precipitadas...

PASO 3: [Crear una indicación] Haz que Géminis lance un "hechizo mágico" para lanzarlo en FigmaMake (5 minutos)

Se le pedirá que proporcione la propuesta de estructura de texto que creó en el PASO 2 y la imagen del diseño que desea crear, y que se genere un mensaje en inglés para FigmaMake.

Una vez terminado el texto, ¡a diseñar! ¡Es la parte más divertida! Pero antes, tengo que crear un "prompt" para FigmaMake. Mi inglés deficiente no me permite transmitir mi mensaje, así que se lo dejo a Gemini-sensei. ¡Cuento con él!

PASO 4: [Generación del diseño] FigmaMake, ¡déjanos el resto! (5 minutos)

¡Ahora, copia y pega el hechizo mágico y pulsa Enter! ...o eso dices. ¿Quizás consiga un diseño divino de una sola vez? ...Quizás no. ¿O quizás? Esta emoción es un poco como el gacha y es divertida.

Copia y pega el mensaje generado y haz clic en el botón "Generar diseño". Estos pocos segundos de espera son sorprendentemente estresantes. Y entonces aparece el primer diseño.

¡Guau, ya está! Pero aún es un poco simple... Seguiremos haciendo ajustes al diseño y la redacción.

Pero bueno, aquí fue donde empezó la verdadera acción.

PASO 5: [Repetir bucle] Mejore la precisión alternando entre el análisis y la generación (1,5 horas)

A partir de aquí, llegó el momento de intercambiar ideas con la IA. Mientras observábamos el diseño generado por FigmaMake, consultamos con Gemini sobre qué queríamos mejorar y trabajamos incansablemente para mejorar las indicaciones.

"¡Ay, no, por ahí no!", murmuré para mí mismo, más alto. Probablemente mi voz resonó por toda la oficina. Pero, curiosamente, empecé a disfrutar cada vez más de este mitin.

Sí, ¡no me fue bien a la primera! ¡Sabía que sí! ¡Pero tenía algo de esperanza! Aquí empieza la verdadera acción, una carrera a tres patas con la IA. ¿Es como si yo fuera el director y Géminis el entrenador?

Y aquí está el resultado final.

Ha mejorado mucho con respecto al primer dibujo. Sin embargo, es un fastidio borrar o añadir partes innecesarias (probablemente porque las instrucciones están traducidas del japonés al inglés, por lo que a menudo no se transmite bien la intención).

Pensé que podría ser imposible hacer más en FigmaMake, así que recurrí al método de fuerza bruta para convertirlo en datos de Figma y luego hacer correcciones.

PASO 6: [Figmaize] Importar a Figma con el complemento Html to Design (5 minutos)

Una vez que la dirección del diseño esté consolidada, es momento de transferir los datos a Figma. Los pasos se detallan a continuación.

1. El diseño generado por FigmaMake se publica primero como página web.
2. Inicie el complemento de Figma "Html a diseño".
3. ¡Ingresa la URL del FigmaMake publicado y ejecuta la importación!

Solo necesitas usar el plugin "Html to Design". Copia y pega la URL de la página que publicaste en FigmaMake y haz clic en el botón. Eso es todo lo que necesitas para convertir la página web en una capa en Figma. ¡Qué mundo tan cómodo vivimos!

Lanzamiento de FigmaMake

Primero, publique FigmaMake. Haga clic en "Publicar" y el estado cambiará a "Publicado".

Inicie el complemento de Figma "Html to Design", ingrese la URL del FigmaMake que publicó y luego impórtelo.

Inicia el plugin y pega la URL que acabas de obtener. Haz clic en el botón Importar y ¡listo!

Después de unos minutos, el diseño de salida se mostrará en Figma.

Por último, cambia el estado público a privado.

Una vez que hayas completado los pasos, cancela la publicación para devolverla a su estado privado.

Preocupaciones

Actualmente, no existen funciones para establecer una contraseña para el estado público o para crear un entorno de desarrollo, por lo que si lo usa para renovar el sitio web de una empresa, debe tener cuidado con las filtraciones de información.

Básicamente, no creo que tenga ningún impacto si estás creando contenido que se limita a tu propia empresa o si estás creando un borrador usando información ficticia, así que creo que es mejor usarlo dependiendo del proyecto (nunca lo uses para proyectos que no permitan distribución externa).

¡Bueno, esto empieza a tener buena pinta! ¡Ahora es hora de traer mi territorio, Figma! ¡Disculpa la espera, amigo!

PASO 7: [Corrección de Figma] Ajustes finales a problemas de diseño (30 minutos)

Los datos recién importados aún presentan algunos detalles toscos, con agrupaciones misteriosas y cuadros de texto que se desbordan, lo que deja mucho espacio para mejoras.

A partir de aquí, se trata de un trabajo de revisión constante: volver a ejecutar el diseño automático, recomponer elementos inconexos en componentes, ajustar los márgenes generales... Este pequeño esfuerzo mejora significativamente la calidad del diseño y lo convierte en un "borrador perfecto".

Aquí está el producto terminado.

La granularidad del diseño disminuye a medida que bajas en el LP, pero no estoy seguro de si esto es solo un aspecto inevitable de la IA o si mis instrucciones son pobres... Continuaré experimentando con varias opciones.

Importar, y... ¡Sí, el diseño es más animado y salvaje de lo que esperaba! Bueno, es el resultado del arduo trabajo de la IA. Ahora es hora de demostrarle mi cariño puliéndolo.

Resumen: Lo que aprendí al crearlo: los puntos clave del "diseño colaborativo de IA"

Lo que me di cuenta a través de este flujo de producción es que la IA no es una "varita mágica", sino un "socio excelente".

• El efecto de ahorro de tiempo que supone crear un borrador es enorme:Es mucho más rápido que empezar a trabajar en un plan de composición desde cero.
• La clave es el ciclo de prueba y error:Crear buenos diseños requiere paciencia y un diálogo repetido con la IA.
• El toque final:La calidad depende de que el diseñador no solo acepte ciegamente lo que la IA ha creado, sino que lo termine con intención.

Por cierto, cuando tímidamente le mostré este borrador al presidente...¡Qué interesante! Esto facilitará el avance de la conversación. El simple hecho de tener un punto de partida marca una gran diferencia, ¡gracias!Eso es lo que dicen.

¡Síííí! ¡Valió la pena el esfuerzo...! ¡Qué rica está la cerveza esta noche!

¡Eso es todo por ahora! La segunda parte del LP se lanzará después de que el presidente termine de añadir su tinta roja.

¿Por qué no intentar crear nuevos diseños en colaboración con IA?