Uso de Grok Bot: Fotomosaicos en Figma

Es posible que hayas visto algunos mosaicos de tres paneles en tu cronología. Aquí te mostramos cómo puedes crearlos con @bot en @figma.

https://x.com/kazarov_d/status/2094470313862136145

Cualquier diseñador sabe cómo hacer uno, solo que es un poco tedioso.

https://x.com/studiobakers/status/2095077637639262295

Así que deberíamos preguntarnos: "¿cómo puedo usar la IA para que esto sea un 90 % menos tedioso, para poder concentrarme en las partes creativas e interesantes del diseño?"

Grok Bot puede hacer exactamente eso.

Si no te importa el "cómo" y solo quieres una plantilla de @bot, puedes encontrar una aquí: https://x.ai/bot/dYpPe1PCZv2WJDVTYDwhc

De lo contrario, así es como construí la mía:

Creación del fotomosaico

Mi enfoque general con Grok Bot es: desglosar cómo crearías el activo tú mismo, y luego indicarle a @Bot que haga exactamente lo mismo.

En este caso, el flujo de trabajo era un diseño en Figma.

https://x.com/justinsunyt/status/2096635033603756354

Esto es solo un lienzo con un activo principal, dividido en componentes y repartido en tres paneles. Podemos aplicar ingeniería inversa a las relaciones de aspecto observando publicaciones existentes en X.

Le pedí a Bot que hiciera exactamente esto: aquí está mi primer mensaje optimizado.

Reemplaza Cursor Gothic, [enlace a la imagen] y [insertar archivo] con tus activos.

1Aplica ingeniería inversa a este formato de publicación: es un fotomosaico de tres imágenes que se unen en una sola captura de pantalla ancha sobre un fondo compartido.
2
3https://x.com/kazarov_d/status/2094470313862136145
4https://x.com/studiobakers/status/2095077637639262295
5
6- Obtén cada panel a máxima resolución y calcula las relaciones de aspecto.
7
8- Recorta tres paneles de exportación (izquierdo / central / derecho)
9
10- Conviértelo en un nuevo diseño en el archivo adjunto [insertar archivo] - mantenlo en una sola sección
11
12- Nuevo fondo para los tres paneles [enlace a la imagen] - usa este activo, no el fondo de la publicación de referencia
13
14- Elemento principal: captura de pantalla de cursor.com en una pantalla 4K simulada (2× DPR). Amplía la página para que la interfaz de usuario y el texto se lean a distancia. Confirma que la captura sea realmente la página de inicio (navegación + titular)
15
16- Sombra paralela centrada + esquinas redondeadas reales en la ventana. Las esquinas superiores de la página web necesitan una capa recortada/enmascarada o se verán cuadradas
17
18- Navegador estilo Arc: carcasa oscura de Cursor ink, semáforos de colores, URL centrada en Cursor Gothic. La barra de título y el texto de la URL deben ajustarse a la altura. Misma inserción I/D/Abajo alrededor de la página
19
20- Organiza en Figma con componentes para que un solo pegado actualice todos los paneles: Fondo, Elemento principal (Arc), Maestro, más tres clips de exportación del Maestro
21
22Tu trabajo estará listo cuando editar el fondo o el elemento principal una vez actualice el maestro y las tres exportaciones.

Después de enviar el mensaje, revisa tu bot cada pocos minutos; si las cosas van mal, pregúntale por qué.

Quizás el bot no está usando el diseño automático correctamente. Quizás el relleno está mal. Quizás un radio de borde necesita un ajuste.

Haz el cambio, anota por qué fue necesario y luego integra esas cosas en tu próximo mensaje.

Viendo cocinar a mi bot

Algunos puntos importantes:

• Estoy usando un lenguaje preciso. Observa cómo lo llamé "fotomosaico" y no "una imagen dentro de una imagen como tres cositas en una cosita"
• No sabía qué era un fotomosaico, pero le pregunté a Grok "¿cómo se llama cuando se ensambla un collage de tres imágenes para formar una imagen más grande?"
• Cada mensaje debe partir de una mentalidad de principiante: ¿cómo aprendo todo lo que necesito para hacer esto bien?
• Mi primer intento no fue perfecto. Llegué al mensaje de arriba preguntándole a Grok Bot: "dime qué necesitabas desde el principio para hacer esto bien en el primer intento"
• Pregúntate siempre: "¿cómo puedo duplicar este flujo de trabajo o asegurarme de que la IA pueda hacer todo la próxima vez?" Esto es algo que @poteto recalca mucho.
• No usé un bot especializado para esto, solo uno general conectado a Figma. Para algo puntual, está bien, pero para tareas repetitivas probablemente crearía uno especializado.

Grok Bot se trata de más que usar la IA de manera efectiva; se trata de cómo usar una computadora de manera efectiva.

Eso implica pensar desde los primeros principios, comunicarse de manera efectiva y tener paciencia. Usar Grok Bot se trata principalmente de resolver problemas.

El activo terminado

Además, ahora tengo un activo duradero que puedo reutilizar, como hice en esta publicación:

Reutilizando mi activo para una publicación sobre el anuncio del iPad

Sin entender este formato, no habría podido hacer la publicación del anuncio del iPad de manera oportuna.

El papel del creativo es evocar emociones.

Grok Bot me permite concentrarme en la selección de activos y las imágenes, mientras que él se encarga de todo lo demás.

La pregunta más popular que recibo es "¿cómo puedo usar Grok Bot?"; aquí hay una forma de usarlo para diseño.