Demo de imagineAI: no está hecha para Nico ni es su página oficial. Usamos su perfil público como ejemplo porque tiene una marca muy clara en Instagram. Su nombre, su foto y las tapas de sus libros pertenecen a sus titulares.
Si tenés un Linktree, probablemente se ve igual que el de todos: fondo de color, botones blancos redondeados, una lista de links uno abajo del otro. Cumple su trabajo, pero no suena a vos. En este artículo te mostramos cómo armamos, en una hora y con una IA de diseño, una página de links con los colores, las letras y el orden de prioridades de una persona real. Están los tres prompts exactos, para que los copies y los cambies por tus datos.
El antes y el después
Nico Grupe es coach de desarrollo personal y tiene cerca de un millón de seguidores en Instagram. Su marca ahí se reconoce en un segundo: naranja, papel crema, letras gruesas en mayúsculas y una frase escrita a mano. Su Linktree, en cambio, tiene los colores y la forma de Linktree.
Tres cosas cambian. Lo que se vende pasa arriba y se ve distinto del resto. Los colores y las letras salen de su Instagram. Y los cuatro libros dejan de ser cuatro botones para convertirse en una sola fila de tapas.
Paso 1: el design system
Un design system es el manual de estilo de una marca escrito de forma que lo pueda leer una máquina: colores con su código, tipografías, tamaños, bordes, cómo se ven los botones y cómo habla la marca. Si se lo das a la IA antes de pedirle una página, la página sale con esa identidad y no con la de una plantilla genérica.
Qué adjuntar antes de escribir nada:
- Capturas de entre 6 y 9 publicaciones recientes de su Instagram, de distintos formatos (placas de frase, portadas de reels, diagramas).
- Su foto de perfil.
- El link de su web, que le pasás dentro del prompt para que la IA la visite.
Probamos esto en Claude Design, la herramienta de Anthropic que genera páginas y las muestra en pantalla para revisarlas. Este fue el primer prompt, tal cual:
Quiero armar el design system personal de Nico Grupe, divulgador de filosofía estoica y desarrollo personal. Es una demo de imagineAI: no lo hacemos para él, es un ejemplo de lo que se puede hacer.
Entrá a su web, https://nicogrupe.com, y mirá las capturas de su Instagram que te adjunto. Sacá de ahí su estilo real, sin inventar uno nuevo:
- Una paleta de 4 a 6 colores, con sus códigos y para qué se usa cada uno.
- Dos tipografías de Google Fonts, una para títulos y otra para texto, que se parezcan a las que usa.
- Tamaños de texto, espacios, bordes y sombras.
- Cómo se ven los botones, las tarjetas y los links.
- El tono: cómo escribe y cómo le habla a su comunidad.
Mostrámelo en una página que pueda revisar y entregámelo también como un archivo que pueda guardar y darle a la IA en cada pedido.Qué sacó la IA y de dónde
Lo importante del prompt es la frase «sin inventar uno nuevo». La IA midió los colores que ya usa, sin elegir otros. Cuando la web y Instagram no coincidían, ganó Instagram, porque es su canal principal.
| Elemento | Valor | De dónde salió |
|---|---|---|
| Naranja | #F76E09 | El cartelito «50 MINUTOS» de sus reels y las etiquetas de sus portadas |
| Papel crema | #E9E2D7 | El fondo de todas sus placas de frase y de sus diagramas |
| Tinta | #111111 | El texto de sus placas y sus tarjetas oscuras. Casi negro, nunca negro puro |
| Ámbar | #FB9F1A | El aro de degradé de sus historias destacadas. Se usa solo como inicio de un degradé |
| Títulos | Montserrat ExtraBold, en mayúsculas | Las portadas de sus reels («TU EGO NO SOS VOS»). Es la Google Font más parecida |
| Texto | DM Sans | Los textos de su página de coaching |
| Frases a mano | Patrick Hand | La letra de sus placas de frase. Es una aproximación: su letra real no es una fuente |
La IA también anotó un detalle de accesibilidad que ningún diseñador novato suele mirar: el naranja puro sobre fondo crema no se lee bien en letra chica. Por eso el design system dice que el naranja va en letras grandes y en botones, y que los textos chicos van en tinta.
Al final de este paso tenés un archivo de texto con todo esto. Lo vas a pegar al principio de cada pedido siguiente.
Paso 2: la página de links
Con el design system en mano, el segundo prompt pide la página. Fijate que el pedido trae un orden concreto, link por link, con una razón detrás de cada lugar.
Con el design system de Nico, armame su página de links para el celular, en un solo archivo HTML. Tiene que verse como su marca y no como un Linktree genérico.
Ordená los links por importancia, en vez de ponerlos todos iguales uno abajo del otro:
1. Arriba de todo, su foto, su nombre y una frase corta con su estilo.
2. Lo principal, destacado: Coaching 1 a 1 con Nico (https://nicogrupe.com/coaching).
3. La newsletter «Desarrollo personal sin marketing» (https://nicogrupe.kit.com/newsletter), con un botón claro para suscribirse.
4. Su canal verificado de WhatsApp (https://whatsapp.com/channel/0029Vb8th6F47Xe8JtPMKu0H).
5. «Mis libros», en una fila de tapas: Aprende a leer LEYENDO (su primer libro), Manual de vida de Epicteto, Sobre la vida feliz de Séneca y Meditaciones de Marco Aurelio, los tres comentados por Nico.
6. Al pie, íconos de sus redes: Instagram, TikTok, YouTube y su podcast en Spotify.
Al final de la página poné, chiquito: «Concepto de imagineAI · demo, no es la página oficial de Nico Grupe».
Tiene que verse perfecta en un celular de 390 px de ancho y cargar rápido. Sin emojis: usá íconos.El resultado es un único archivo HTML de unos 34 KB. Se abre en cualquier celular, no depende de ninguna plataforma y no tiene cuota mensual.
El orden nuevo
- Foto, nombre y una frase. La frase es de su propio Instagram: «Dejá de vivir en piloto automático».
- Coaching 1 a 1, en una tarjeta negra grande con el botón naranja.
- Newsletter, con un botón de suscripción a la vista.
- Canal de WhatsApp.
- Los libros, como una fila de tapas.
- Redes, como íconos al pie.
Por qué ese orden
Cada decisión de orden responde a una razón de marketing. Son cuatro y valen para cualquier página de links.
Una sola acción principal
Quien llega desde Instagram tiene unos segundos. Si todos los botones pesan igual, no sabe por dónde empezar y se va. Arriba va lo que vende, y se ve distinto: acá, el coaching.
Menos opciones, más clics
Siete botones iguales obligan a leerlos todos. Agrupar los cuatro libros en una fila deja cuatro bloques y la persona decide más rápido.
La newsletter es un contacto propio
Un seguidor de Instagram depende del algoritmo. Un mail es tuyo y llega cuando vos lo mandás. Por eso la newsletter va segunda y con el botón visible.
La misma marca de punta a punta
Del reel a la página, los mismos colores y la misma letra. La persona reconoce que sigue en el lugar correcto, y eso da confianza antes de que lea nada.
Paso 3: revisar
La IA se equivoca con cosas chicas: un texto cortado, un botón que se sale de la pantalla, un link mal copiado. El tercer prompt es corto y le pide que se corrija a sí misma:
Abrila en tamaño celular, revisá que no haya nada cortado y que todos los links funcionen. Corregí lo que encuentres.Después mirala vos, en tu celular y no solo en la compu. Chequeá cada dato que aparezca en la página: si la IA agregó una cifra, un horario o una frase que tu marca no dijo nunca, sacala.
Publicarla gratis
La página es un archivo HTML, así que alcanza con cualquier lugar que sirva archivos. Nosotros usamos Cloudflare Pages, que tiene plan gratuito:
- Creá una cuenta en Cloudflare y entrá a Workers & Pages.
- Tocá Create, elegí Pages y después Upload assets.
- Ponele un nombre al proyecto.
- Arrastrá la carpeta que contiene tu archivo. Tiene que llamarse
index.html. - Tocá Deploy. En unos segundos tenés tu página en
tunombre.pages.dev.
Si preferís no tocar nada, también podés pedirle a la IA que la publique por vos.
Lo único que se paga es un dominio propio, si querés una dirección como tunombre.com en lugar de .pages.dev. Se abona una vez por año.
Adaptalo a tu caso
- Prompt 1: cambiá el nombre, la descripción de la persona y el link de la web. Adjuntá capturas de tu propio Instagram y tu foto. Sacá la frase de «demo de imagineAI».
- Prompt 2: reemplazá la lista numerada por tus links, en el orden que te convenga. Lo que más querés vender va primero. Cambiá la frase del pie o borrala.
- Prompt 3: sirve tal cual.
- Si no tenés Instagram con marca definida: adjuntá tu logo, tu web o cualquier pieza tuya, y pedile a la IA que parta de ahí.
Guardá este artículo, copiá los tres prompts y cambiá los datos por los tuyos. Con una hora y una buena lista de links ordenada por importancia, tu página puede sonar a vos.
¿Querés que armemos tu página de links, o tu sitio completo, con tu marca?
Diseñamos y construimos con IA, con pago único y el código en tus manos.