Javier Ramos
Para recordar:
orchids es el sitio para desarrollo de prototipos Apps y Websites con Inteligencia Artificial que se usa en la clase
Javier Ramos
aqui el sitio
El vibe coding te permite crear apps sin código usando inteligencia artificial y herramientas no-code, algo clave para quienes quieren prototipar ideas rápido sin depender de un equipo de desarrolladores. Aquí aprendes no solo a usar las herramientas, sino a entender la arquitectura que corre por detrás.
La premisa es simple y poderosa: la nueva forma de mostrar ideas es creándolas. En lugar de mil reuniones o un PowerPoint que nunca llega a ningún lado, puedes desplegar una primera versión, traerla con resultados reales y mostrar iniciativa. Y aquí viene lo interesante: estas herramientas ya incluyen backend, servidores, integraciones vía API y webhooks, algo que antes estaba limitado a un grupo selecto de personas técnicas [00:38].
Por qué entender la arquitectura te da superpoderes
Saber usar la herramienta es una cosa. Entender cómo funciona por detrás es lo que te salva cuando algo falla. Hay un meme que lo dice todo: el vibe coding con alguien feliz, y luego el vibe debugging, esas horas perdidas tratando de entender qué salió mal [01:35].
Democratizar la tecnología significa que ahora puedes enfocarte en crear la idea mientras la herramienta se encarga de las partes complejas. Eso sí, con un matiz importante.
¿Puedo usar herramientas no-code para una empresa grande? Para prototipado y herramientas internas puedes empezar solo. Pero si necesitas escalar o funcionalidades avanzadas, lo ideal es que un ingeniero revise la información antes.
Para la mayoría de casos de uso puedes arrancar tú mismo y levantar la mano cuando toque crecer.
Qué es la three-tier architecture y cómo funciona
En el desarrollo de aplicaciones existe la three-tier architecture, que divide en tres capas todo lo que corre detrás de lo que ves en la web o en una app [02:04]. Entender estas tres capas es lo que te permite diagnosticar problemas y crear con criterio.
Las tres capas que forman toda aplicación
Cada capa cumple una función específica y juntas hacen que la magia suceda:
Muchas plataformas low-code crean herramientas usando estas mismas tecnologías por detrás, solo que empaquetadas para ti.
¿Dónde se guardan las bases de datos en apps no-code? En plataformas como Supabase, que lo simplifica, o motores como PostgreSQL y MongoDB, usados en miles de aplicaciones.
El ejemplo del login que lo explica todo
Imagina un login donde quieres recordar al usuario. Ese flujo une las tres capas [03:39]:
Eso es exactamente lo que hacen estas plataformas: empaquetan las tres partes y, con una interfaz conversacional, sacas plataformas completas de forma muy sencilla. Hace unos años esto era imposible.
Dónde entran los LLM, las APIs y los webhooks
La inteligencia artificial y los LLM no viven aislados. Funcionan como nodos que se conectan directamente con el presentation tier y el application tier [04:44].
Los webhooks y las APIs nos permiten conectarnos con servicios externos y disparar acciones, y viven en la parte de la lógica. Lo importante es entender que todo funciona como un sistema: dependiendo de lo que necesites, tendrás más o menos complejidad.
Un ejemplo práctico armado con low-code lo resume así: al iniciar sesión, el frontend captura el clic, el backend hace la petición y la base de datos guarda la data [05:15].
Cómo crear un landing page con inteligencia artificial
Ahora la parte práctica. El primer ejercicio es sencillo: crear una página con inteligencia artificial para prototipar cualquier cosa, en este caso una comunidad de growth [05:38].
La herramienta usada es Orchids (OrchidsApp), que genera interfaces muy cuidadas. Antes de arrancar, hay un recurso clave en la plantilla de Notion: debajo de la tabla de apuestas encontrarás prompts, glosario de automatizaciones, herramientas y design systems [06:07]. La idea es que pruebes distintos design systems y compartas tus resultados.
Anatomía de un buen prompt para prototipar
El prompt del ejemplo fue directo y con elementos concretos [06:44]:
En un par de minutos salió una primera versión sólida. Lo único que hubo que iterar fueron los colores de fondo de algunos elementos con poco contraste. La herramienta asumió los copies y las interacciones con muy buen resultado [07:22].
Y hay más: si entras al código, encuentras todos los elementos, analítica integrada al publicar, bases de datos, múltiples páginas, autenticación, login y pagos [07:50]. Estas plataformas integran todo en un solo lugar y te permiten crear cosas profesionales con un par de prompts.
Ahora te toca a ti: crea tu propia versión de un landing page, usa los prompts del Notion y cuéntanos en los comentarios qué lograste construir.
He estado haciendo muchos prototipos en local y lo mas cercano a fullstack que tenga Frontend, Backend y Base de datos es con esta Framework: vas a y creas una app nueva, le describes lo mejor posible con prompt engeeniering, segun el chat de IA que uses gemini, o chatgpt le explicas tu idea para que te refine el prompt, lo importante es que definas el full stack en el prompt Node.js-npm-React y Sqllite3 y que es para usarlo en local muy importante, porque AI studio por defecto trabaja el frontend con react, typeScript y Tailwind en la nube y vas a poder visualizar y prototipar pero si lo descargas en local no funciona bien, luego le dices que lo vas a trabajar por fases y asi ajustas hasta llegar al backend y ahi ya no podrás visualizar más, y debes descargarlo a tu pc, instalar Node.js y todas las librerias necesarias con npm y la terminal, visual studio code ayuda mucho para ver la arquitectura de archivos y abrir los archivos para actualizar. ya que vas a funcionar segun la arquitectura que te arme IA studio con servidor de frondend y de backend separados o unidos, al final es una url en tu navegador y ahi podras ver si hay errores en la consola, si botones no funcionan, etc, de ahi es volver a AI Studio y pedirle las mejoras, el va a cambiar ciertos archivos, estos los actualizas en local pegando y copiando. Sigues los pasos de instalación o se los pides a IA studio y te va a decir paso a paso que hacer para que funcione en local, se aprende mucho de programación y de arquitectura. De ahi en adelante es migrarlo a la nube con github o docker.
Javier Ramos
Para recordar:
orchids es el sitio para desarrollo de prototipos Apps y Websites con Inteligencia Artificial que se usa en la clase
Javier Ramos
aqui el sitio
Nicolás Coria
Hola Dani, me aparece que no tengo acceso a la base de datos de "Design Systems"
Daniela Gómez
ProfesorAcabo de hacer el cambio de accesos en Notion, ya deberían tener acceso (:
Gracias por avisar
Carlos Cruz
Creo que el link a notion está en los recursos del video anterior, aquí no lo veo
William David Guerra Pérez
Es mucho mejor mostrar algo ya listo y mostrar iniciativa que soltar ideas en Power Point. Para se eso pueden usar herramientas que ya tienen todas las capas incluidas: front, back, data (three tier architecture).
William David Guerra Pérez
La verdad es que los resultados son muy consistentes y profesionales.
Daniela Gómez
ProfesorBuenísimooo
Alejandra Monges
Coloqué el prompt en Orchids y me dice que debo pagar; no entiendo por qué hay una versión gratis, pero no me deja.
Jesus Agudelo
Hola debo decir que hacia años no tocaba la programación y me llamo la atención el curso, muy bien explicado los recursos solo me basto leer un par de minutos las plantillas de Notion para reconectar con el tema de la IA.
Diana Mateus
Buen día, quisiera compartir una recomendación de seguridad respecto a este punto: la función de "recordar usuario" no debería habilitarse, ya que expone el identificador de acceso y facilita ataques de fuerza bruta. Adicionalmente, las contraseñas deben almacenarse siempre con hash y SALT para garantizar su protección en caso de una brecha de datos.
Mareidys Martinez Muñoz
Actualización de Orchids
"Tal como anunciamos el 7 de julio, el equipo de Orchids se unió a Figma y Orchids dejó de funcionar el 18 de julio"
Daniela Gómez
ProfesorMareidys te recomiendo Lovable para sustituir Orchids, Figma tiene Figma Make
Boris Turcios
Andres David Martínez Saza
Hice el prototipo de una landing que permita generar QR gratuitos, con un login y estadísticas de cada uno de los códigos escaneados. Me genera los QR pero aun no los lee bien, sin embargo tiene el área de usuario bastante aceptable así como el dashboard para revisar las estadísticas. Para ser un prototipo está bastante bien de verdad ahorra mucho trabajo
JHØN AVALØZ
PROTOTIPAR
THREE TIER ARCHITECTURE
JHØN AVALØZ
Aprender a dezplegar paginas y plataformas
Arturo Arellano
La liga de Page not found - Zite no funciona
Leyder Sanchez
404* en el Notion* NO me aparecen: Apuestas / y ni espacio con los: Prompts* / :::Etc... / Desing Systems* 🤔
Alondra Maldonado Muñiz
Hola Dani, en mi caso no veo ninguna plantilla de notion, ya le di click a todos los links y no está, me la puedes compartir por favor?
Daniela Gómez
ProfesorHola Alondra, claro ingresa con este link:
Fernando Mora
Hola Dani, buen contenido. Me pasa igual con el design system en el notion. Me pide solicitar acceso.
Daniela Gómez
ProfesorGracias por avisarme, ya hice el ajuste en Notion
📌 RESUMEN — Prototipos sin código con arquitectura de Growth IA 🎯 MEMOTECNIA 👉 “**P.R.O.T.O.**” P = Prototipa rápido R = Reúne capas de arquitectura O = Orquesta APIs y webhooks T = Testea con datos reales O = Optimiza e itera ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🧠 1) POR QUÉ PROTOTIPAR SIN CÓDIGO │ ├─ Crear prototipos funcionales rápido **valida ideas antes de construirlas en serio**. ├─ Herramientas no-code permiten **armar interfaces y lógica sin programar**. ├─ Esto te da **velocidad, autonomía y aprendizaje** sobre el producto real. └─ Cuando sea necesario escalar o poner en producción, el soporte técnico puede revisar la solución. 🧠 MEMO: “Prototipa ahora, aprende rápido” ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🔧 2) ARQUITECTURA EN TRES CAPAS (THREE-TIER) │ ├─ 📌 **Presentation tier** │ → La interfaz con la que interactúa el usuario: formularios, botones, páginas visuales. │ → Lo que ves en el navegador. ├─ ⚙️ **Application tier** │ → La lógica que ocurre cuando interactúas: reglas, orquestación y flujos. │ → Aquí es donde la IA, APIs y webhooks hacen su trabajo. └─ 🗄️ **Data tier** → La capa donde se guarda información persistente (bases de datos). 🧠 MEMO: “UI → lógica → datos = sistema completo” ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🤖 3) INTEGRAR IA, APIs Y WEBHOOKS │ ├─ Los modelos de IA y APIs de servicios externos se conectan desde la capa de lógica. ├─ Webhooks permiten **escuchar eventos y disparar acciones automáticas**. ├─ Esto habilita que tu prototipo no solo muestre UI, sino que **responda** y conecte acciones. └─ Según la complejidad que necesites, puedes combinar más servicios. 🧠 MEMO: “IA + APIs → prototipo interactivo” ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🧪 4) PROTOTIPAR UNA LANDING CON IA (FLUJO PRÁCTICO) │ ├─ Define el objetivo y audiencia de tu página. ├─ Especifica estilo visual y componentes deseados. ├─ Agrega recursos (videos, enlaces, paletas de color). ├─ Genera la primera versión y revisa analítica integrada. └─ Ajusta detalles visuales y funcionales en ciclos cortos. 🧠 MEMO: “Objetivo + estilo + datos → validación temprana” ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🧠 5) HABILIDADES QUE REFUERZAS │ ├─ 🧠 Prototipado rápido con IA y no-code ├─ 🧩 Comprender UI y UX desde la práctica ├─ 🛠️ Conectar funciones con APIs, webhooks y lógica automatizada ├─ 🗄️ Gestionar datos persistentes └─ 📊 Iterar basándote en analítica real 🧠 MEMO: “Practica = criterio técnico” ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 🚀 6) CUÁNDO PEDIR APOYO TÉCNICO │ ├─ Cuando el uso crece en producción o en funciones críticas. ├─ Para integraciones complejas o con requisitos de seguridad. ├─ Al escalar a operaciones empresariales, conviene revisar arquitectura. └─ El prototipo acelera decisiones, pero el desarrollo técnico garantiza robustez. 🧠 MEMO: “Prototipo rápido → ingeniería sólida” ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 📌 RESUMEN FINAL 👉 Con herramientas no-code + IA puedes crear prototipos completos que van más allá de maquetas: integran lógica, APIs, IA y datos. 👉 Entender la **arquitectura de tres capas** (UI, lógica, datos) te permite diseñar soluciones flexibles y validarlas rápido. 👉 El objetivo es aprender y testar, no reescribir todo a mano desde cero. 🎯 MEMOTÉCNICO FINAL P = Prototipa rápido R = Reúne capas de arquitectura O = Orquesta APIs + webhooks T = Testea con datos reales O = Optimiza e itera