--- title: "Prompt teardown: la sección que se parece a tu app sin que" description: "El mismo prompt, pegado en dos apps de diseño opuesto, produce dos secciones perfectamente vestidas — sin una palabra sobre el estilo. Esto es lo que la generac" canonical_url: "https://es.goodbarber.com/blog/prompt-teardown-la-seccion-que-se-parece-a-tu-app-sin-que-nadie-se-lo-pida-a1118/" lang: es date: 2026-09-07 last_updated: 2026-09-07 --- # Prompt teardown: la sección que se parece a tu app sin que [Atrás](/blog/make-it-r8/) # Prompt teardown: la sección que se parece a tu app sin que nadie se lo pida Escrito por [Dumè Siacci](https://es.goodbarber.com/blog/author/dominique-siacci/) el Lunes 7 Septiembre 2026 ## El mismo prompt, pegado tal cual en dos apps de diseño opuesto: una pastelería toda en crema y rosa, una radio en negro y ámbar. Ni una sola instrucción de apariencia: ni un color, ni una tipografía, ni un radio de esquina. Las dos secciones salieron vestidas como de la casa. Esto es lo que la generación leyó sin que nadie se lo escribiera. ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/97537205-67921452.jpg?v=1785501401.190063) **Prompt teardown, episodio 4.** La serie en la que desmontamos prompts del AI Extension Builder para leer lo que realmente activan: lo que consigue cada frase, las decisiones que la generación toma sin que se las dicten, lo que la sección sabe hacer una vez en su sitio. Hoy: un único prompt, pegado dos veces en dos apps demo ficticias — y una pregunta que nadie le hizo: ¿a qué debe parecerse la sección? ## Un prompt mudo sobre el estilo La sección pedida se llama «Today & tomorrow»: el programa de los próximos dos días, leído de la agenda de la app, con una pestaña para pasar de uno a otro; el visitante fija con un pin lo que no quiere perderse, y la app recuerda esa selección de una visita a la siguiente. El prompt —está al final del artículo— describe ese uso, y nada más. Reléelo: no contiene ni una palabra sobre la apariencia. Lo pegamos en dos apps construidas para darse la espalda. «Pastries' House», pastelería ficticia: fondo crema, tipografía toda curvas, rosa chicle y chocolate. «Radio Alba», radio local ficticia: pantalla noche, títulos blancos, ámbar y rojo. Si la generación solo tuviera el prompt para trabajar, las dos secciones deberían salir idénticas. ## En la pastelería ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/97537205-67921454.jpg?v=1785501402.2380679) En «Pastries' House», la sección llega en crema: tarjetas blancas sobre el fondo de la app, horas doradas, pines y pestañas en rosa chicle — dos píldoras redondeadas, «Today» y «Tomorrow», que retoman la gramática de la barra de navegación. Los eventos que se ven son los de verdad: las hornadas y los talleres registrados en la agenda de la app, con sus miniaturas. La selección fijada se instala abajo, en una bandeja «Pinned for later» — y como pertenece solo al visitante, vive en su teléfono, recuperada en cada visita, sin cuenta ni preguntas. ![La sección generada en la app de la pastelería: cambio entre los dos días, un evento fijado, la lista se va llenando](https://assets.ww-cdn.com/blog/houseofpastries_todaytomorrow.gif) ## En la radio ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/97537205-67921455.jpg?v=1785501403.330073) En «Radio Alba», mismo prompt, otro temperamento. La sección sale en oscuro: tarjetas antracita, fechas y horas en ámbar, la pestaña activa en rojo — los acentos de la radio, no los de la pastelería. Y no es la misma sección repintada: la composición también cambia. La hora se alinea a la derecha de la tarjeta, las dos pestañas se alojan en un selector compacto, la tarjeta entera responde al dedo para fijar. Hasta el subtítulo, escrito por la generación y distinto de una app a otra: «What's happening now and next» aquí, «See what's on, and keep a short list…» allá. Dos apps, dos vestidos, dos interpretaciones — y sigue sin haber una sola consigna de estilo en el prompt. ## Lo que la generación leyó El prompt que escribes no es el único texto que recibe la generación. Con cada petición, la plataforma le adjunta la ficha de identidad visual de tu app: su paleta, rol por rol — el fondo, las superficies, el color de las acciones, el de los títulos, los separadores — con una consigna simple: la sección debe parecer nacida en esta app. Por eso el rosa chicle acaba en los pines de la pastelería y el rojo en la pestaña activa de la radio: cada una leyó su propia ficha. En [el artículo que presentaba el AI Extension Builder](https://es.goodbarber.com/blog/ai-extension-builder-crea-secciones-con-ia-sin-programar-a1038/), Jerome lo decía en una frase: el estilo global de la app — colores, espaciados, contrastes — se aplica automáticamente. La parte invisible del prompt es exactamente eso. Y no se detiene en el estilo: cuando tu descripción cita una sección de la app por su nombre — aquí, «Events» —, la generación recibe también con qué leerla. Por eso el programa que se muestra es el real, miniaturas incluidas. ¿Y si tuvieras que mantener el código tú mismo? Ese trabajo tiene nombre: una guía de estilo que transcribir en variables, cada componente que repasar, y todo que repasar otra vez al primer cambio de imagen. Aquí se rehace en cada generación — sin ocupar una línea de tu prompt. Pega mañana el mismo prompt en una tercera app: la generación leerá la ficha de esa app. ## Lo que no se mueve ![](https://cmsphoto.ww-cdn.com/superstatic/81328/art/grande/97537205-67921457.jpg?v=1785501404.3500779) No todo sigue el diseño de la app, y es a propósito. La tipografía sello de la pastelería — esos títulos golosos, todo curvas — se queda en las pantallas nativas; las secciones generadas escriben en la tipografía del sistema, el registro nativo de cada teléfono, legible en todas partes. Lo mismo con la base: zonas táctiles cómodas, contrastes suficientes, estados de carga y pantallas vacías previstos de serie. Esa parte no se negocia en el prompt — protege la sección, y a tus usuarios, sea cual sea la app. Lo más elocuente es poner lado a lado dos pantallas de la misma app: la agenda nativa de la pastelería — banners rosas, tipografía de la casa — y la sección generada. Mismos contenidos, mismas miniaturas, dos registros tipográficos — y una sola casa. ## El prompt completo Aquí está, tal como se pegó, dos veces, sin una línea más: Create a "Today & tomorrow" section for this app. It shows what's happening today and tomorrow, using the events from the app's "Events" section. Visitors switch between the two days, tap an event to pin it to their personal shortlist, and see their shortlist at a glance. Remember the shortlist between visits. Entre los dos resultados no cambió ni un carácter del prompt. Solo cambió la app — y fue la app la que hizo todo el estilo. ## Te toca Toma este prompt, sustituye «Events» por el nombre de una sección de tu app y pégalo: la sección saldrá en tu casa, con tus colores. Después haz el ejercicio inverso: pide una desviación deliberada — un botón de fijar imposible de ignorar, un bloque que rompa con el resto — y observa qué se mueve, y qué se mantiene. Es la mejor forma de sentir dónde termina tu prompt y dónde empieza lo que la plataforma lee por su cuenta. El primer episodio de la serie desmontaba una sección que recuerda dónde aparcaste y va a buscar el GPS y Maps del teléfono: [Prompt teardown: GPS, memoria y Maps a partir de una sola frase](https://es.goodbarber.com/blog/prompt-teardown-gps-memoria-y-maps-a-partir-de-una-sola-frase-a1100/). Y el [quiz de verano de la serie vecina](https://es.goodbarber.com/blog/roba-esta-idea-un-quiz-de-peliculas-creado-con-ia-que-tu-audiencia-va-a-compartir-de-verdad-a1099/) ya mostraba el mismo reflejo: generado dentro de una app, vestido por ella. El AI Extension Builder está en beta, abierto a todos: [crea una app con GoodBarber](https://es.goodbarber.com/create/) y describe tu primera sección. ## FAQ **¿Hay que describir el diseño de la app en el prompt?** No. La paleta de la app se lee en cada generación, sin que tengas que recordarla: describe el uso, el estilo llega solo. Si quieres orientar la apariencia — un ambiente, un detalle que te importa —, dilo como todo lo demás: tu descripción sigue siendo la especificación. **¿Qué pasa con la sección si después cambio el diseño de la app?** El vestido de una sección se fija en el momento en que se genera. Tras un rediseño, pide simplemente una iteración — «armoniza la sección con el nuevo diseño» — y la generación vuelve a leer la ficha de la app, ya actualizada. **¿Puedo querer una sección que rompa con el resto de la app?** Sí. La desviación deseada se describe como cualquier otra exigencia: un bloque promocional que debe contrastar, un botón que debe dominar la pantalla. La generación parte siempre de la identidad de la app — tu frase define la desviación, y la base de legibilidad se mantiene. **¿Por qué la sección no usa la tipografía de mis títulos?** Las secciones generadas escriben en la tipografía del sistema del teléfono: el registro de las interfaces nativas, legible y coherente en iOS y en Android. Tu tipografía sello sigue siendo la de tus pantallas nativas — las dos conviven en la misma app, cada una en su sitio. ![Dominique Siacci](https://blog.goodbarber.com/_public/profile/ca/ca3512f4dfa95a03169c5a670a4c91a19b3077b4-default.jpg) Sobre el autor[Dominique Siacci](https://es.goodbarber.com/blog/author/dominique-siacci/)CTO Cofundador y CTO de GoodBarber. Dirijo la visión técnica del producto: arquitectura, infraestructura y, más recientemente, la integración de la IA en el corazón de la plataforma. Desarrollador de corazón, sigo cerca del código y de las decisiones de ingeniería que permiten a miles de usuarios de GoodBarber publicar sus apps sin escribir una sola línea de código. [Leer más](https://es.goodbarber.com/blog/author/dominique-siacci/) [![LinkedIn](https://portal.ww-cdn.com/portal_static/svg/base2021/linkedin.3ed8162e2a2b.svg)](https://fr.linkedin.com/in/dsiacci/)[![X](https://portal.ww-cdn.com/portal_static/svg/base2021/x.820492c586dd.svg)](https://twitter.com/dsiacci)[![Facebook](https://portal.ww-cdn.com/portal_static/svg/base2021/fb.be37c82b8283.svg)](https://www.facebook.com/dsiacci)