Uso de Grok Bot: Fotomosaicos en Figma

Es posible que hayas visto algunos mosaicos de tres paneles en tu timeline. 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:

Creando el fotomosaico

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

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

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

Esto es solo un lienzo con un activo principal, componentizado y dividido 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 para formar una 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 resolución completa y calcula las relaciones de aspecto.
7
8- Recorta tres paneles de exportación (izquierdo / centro / 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 en los tres paneles [enlace a la imagen] - usa este activo, no el fondo de la publicación de referencia
13
14- Principal: captura de pantalla de cursor.com en una pantalla 4K simulada (2× DPR). Amplía la página para que la interfaz 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- 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. Mismo margen interior L/R/B alrededor de la página
19
20- Organiza en Figma con componentes para que un solo pegado actualice todos los paneles: Fondo, Principal (Arc), Maestro, más tres clips de exportación del Maestro
21
22Tu trabajo estará listo cuando editar el fondo o el 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 se desvían, pregúntale por qué.

Tal vez el bot no esté usando correctamente el diseño automático. Tal vez el relleno esté mal. Tal vez un radio de borde necesite un ajuste.

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

Viendo mi bot trabajar

Algunos puntos importantes:

• Estoy usando un lenguaje preciso. Nota cómo lo llamé "fotomosaico" y no "una imagen dentro de otra 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 ensamblan tres imágenes en collage para formar una imagen más grande?"
• Cada mensaje debe comenzar con una mentalidad de principiante: ¿cómo aprendo todo lo que necesito para hacer esto bien?
• Mi primer intento no fue perfecto. Llegué al mensaje anterior preguntándole a Grok Bot "dime qué necesitabas desde el principio para hacer esto bien en el primer intento"
• Siempre pregúntate: "¿cómo puedo duplicar este flujo de trabajo o asegurarme de que la IA pueda hacerlo 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 significa pensar desde primeros principios, comunicarse efectivamente 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 el 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.