Frameworks modernos

Tranqui: no vas a escribir nada de este código a mano. La IA lo hace por vos. Entonces, ¿para qué entender los frameworks? Por la misma razón por la que un buen director de campaña entiende cómo funciona el motor de Meta Ads aunque no programe el algoritmo: el que entiende el terreno, pide mejor y no se asusta cuando algo aparece en pantalla.

Cuando la IA te dice “creé un componente en React con Tailwind y un modal de shadcn”, vos vas a saber exactamente de qué te está hablando. Vas a poder pedir lo correcto, entender qué tocar y, sobre todo, perder el miedo. Eso es todo el objetivo de este módulo.

Un “stack” es la pila de herramientas que trabajan juntas para construir una web moderna. Pensalo como un auto: hay un motor, un chasis, la pintura y los detalles de lujo. Cada capa se apoya en la de abajo. Clickeá cada una para ver qué es, qué hace por vos y por qué nos importa:

¿La mejor demostración de que este stack funciona? Lo estás usando ahora. Esta misma capacitación está construida con exactamente esas cinco capas, generada prompteándole a la IA:

Las páginas y la navegación son Next.js. Cada card, botón y bloque de prompt es un componente de React. El navy de IEB, el aire entre secciones y la tipografía salen de Tailwind. Los acordeones, tabs y cards vienen de shadcn/ui. Y cuando algo aparece suave al hacer scroll, eso es Motion. Ninguna de estas líneas la escribió un programador a mano: se pidieron.

La buena noticia: para el 95% de lo que hace marketing, el stack que viste es la elección correcta por defecto. No tenés que decidir casi nada. Pero conviene saber cuándo pedir algo más simple y cuándo no hace falta tanto:

Landing rápida de campaña (una sola página, captar leads): Next.js + Tailwind + shadcn alcanza y sobra. Liviano, rápido de publicar, fácil de medir.
Sitio institucional (varias páginas, blog, SEO): el stack completo, con Motion para darle ese aire premium.
Dashboard / panel interno (datos, tablas, filtros): el stack completo + componentes de tabla de shadcn. Justo lo que vas a armar en el capstone.

Soy del equipo de marketing de {{empresa}}. Quiero {{qué querés: ej. una landing para captar leads de un curso nuevo}}.
No sé programar y voy a construir prompteando.
Recomendame el stack más simple que sirva, explicame en una frase por qué cada pieza, y avisame si hay algo que NO necesito para este caso.
No escribas código todavía.

Acá está el pago de haber entendido todo lo anterior: ahora podés hablarle a la IA con el vocabulario justo. Y si algo no te queda claro, pedile que te lo explique en tu idioma. La IA es una gran profesora paciente:

Explicame qué es {{Next.js / React / Tailwind / shadcn / Motion}} como si fuera del equipo de marketing y no supiera programar.
Usá una analogía simple, un ejemplo aterrizado a una landing o campaña, y decime en qué momento yo, como persona de marketing, lo voy a 'tocar' al pedirte cambios.
Tres párrafos cortos, sin tecnicismos.

Y cuando la IA te tire una palabra que no conocés en medio del trabajo, frenala y pedile contexto antes de seguir. No avances sobre algo que no entendés:

Recién dijiste "{{palabra o concepto que no entendés}}".
Pará un segundo: explicámelo en una frase simple, decime si es algo que yo tengo que decidir o si lo manejás vos, y después seguimos.

No te tenés que acordar de la sintaxis de nada. Te tiene que quedar el mapa: qué pieza hace qué, para nombrarla cuando le pedís a la IA. Repasá: