Crear una landing React con IA (2/3): de prompt a componentes

En la primera parte de esta serie elegiste arquetipo, tier y primer prompt. Ahora toca la pregunta clave: ¿qué ocurre entre ese prompt y el código que ves en pantalla?

En KitekAI, el prompt no produce una captura ni un bloque opaco. Produce componentes React + Tailwind reales, modulares y legibles, que puedes previsualizar, editar y llevarte contigo. Esta parte explica cómo se traduce el brief a componentes y qué convenciones mantienen el código limpio.

Qué ocurre cuando envías el prompt

El asistente envía tu descripción a los Prompts Maestros, que inyectan contexto y arquitectura antes de que el modelo genere. Este paso es el que evita la alucinación visual: en lugar de improvisar, el modelo recibe un contrato de estructura y lo respeta.

El resultado es un 100% de precisión estructurada: el modelo devuelve exactamente el tipo de componente pedido, con la jerarquía esperada. Además, este enfoque reduce la latencia un 40% frente a un prompt suelto, y el entorno mantiene un promedio por debajo de 180 ms.

Detrás, la plataforma es 100% multi-modelo nativo: puede apoyarse en Anthropic Claude, DeepSeek, Cerebras, Google Gemini, Groq, Mistral u OpenAI, y el modelo se selecciona según el tier. A ti no te toca administrar claves de API ni elegir proveedor.

El componente como bloque de construcción

La unidad de trabajo es el componente modular. Cada arquetipo define su set, y al generar obtienes piezas con nombres reconocibles como Features, Services, PricingPackages, Testimonial, ProductGrid o SubscriptionPlans.

Esto tiene tres consecuencias prácticas:

• Composición: una landing es la suma ordenada de componentes independientes, no un archivo gigante.
• Reutilización: un componente de precios sirve en dos landings distintas sin reescribirse.
• Mantenimiento: puedes reemplazar una sección sin tocar el resto de la página.

Con más de 20 componentes modulares de alta conversión, el catálogo cubre las secciones que una landing necesita: presentación de valor, servicios, estadísticas, equipo, testimonios, precios y llamados a la acción. Una landing completa se arma en menos de 10 minutos.

De prompt a componente: un ejemplo

Volviendo al brief de la clínica odontológica de la parte 1, el prompt describe el negocio y el resultado. Internamente, la plataforma lo descompone en componentes concretos: un ValueProposition que resume la propuesta, un Services para tratamientos, un Team para el equipo médico, un Testimonial para la prueba social y un formulario de contacto.

Tú no escribes el JSX. Describes la intención y revisas el ensamblaje. Si algo no encaja, ajustas el prompt o reordenas los componentes y vuelves a generar.

Convenciones que mantienen el código legible

El código limpio no es un eslogan: es una serie de decisiones consistentes. Estas son las que más se notan al abrir el proyecto.

Naming

Los componentes usan PascalCase y nombres descriptivos (ImageSlider, LogoCloud, Stats). Los archivos y las secciones guardan una correspondencia clara con el nombre del componente, de modo que buscar en el editor no se convierte en una cacería.

Tokens semánticos de Tailwind

En lugar de repetir valores sueltos por todo el marcado, la capa visual usa tokens semánticos: nombres que expresan intención (superficie, texto principal, acento, borde) mapeados a utilidades de Tailwind. El beneficio es directo: cambiar la paleta o el espaciado es tocar pocos lugares, y no rastrear cientos de clases a mano.

Iconografía con lucide-react

La iconografía se resuelve con lucide-react, una de las librerías permitidas. Así los iconos son componentes consistentes y no imágenes sueltas que rompen el diseño o el peso de la página.

Librerías permitidas en el código generado

Parte del control de KitekAI es no dejar que el código se llene de dependencias arbitrarias. El conjunto permitido es acotado y conocido:

Librería	Para qué
react	Base del componente y del árbol de UI
lucide-react	Iconografía
gsap	Animación e interacción premium (ScrollTrigger)
framer-motion	Animación declarativa de componentes
axios	Peticiones HTTP cuando el componente las necesita
clsx	Composición condicional de clases
tailwind-merge	Resolver conflictos entre clases Tailwind

Ese límite es lo que mantiene el resultado portable: menos dependencias significa un proyecto más fácil de leer, auditar y desplegar donde quieras.

Precisión estructurada y código limpio

Dos métricas resumen el resultado de este tramo del flujo:

• 100% código limpio — sin bloques heredados ni relleno; componentes con una responsabilidad clara y clases con intención.
• 100% precisión estructurada — el componente devuelto coincide con la arquitectura solicitada, sin secciones inventadas.

Junto con el 0% de alucinaciones visuales, esto es lo que separa una generación controlada de un experimento: el modelo trabaja dentro de un contrato, no sobre un lienzo infinito.

Preguntas frecuentes

¿Puedo usar los componentes fuera de KitekAI?

Sí. El código generado es tuyo: puedes descargar el zip y llevarlo a tu propio repositorio. Funciona como una app React + Tailwind estándar, con el set de librerías permitidas.

¿Qué pasa si necesito una librería que no está en la lista?

El conjunto permitido está pensado para cubrir el 90% de una landing de marketing. Si tu proyecto necesita algo más, puedes añadirlo después de exportar el código, ya en tu propio repositorio.

¿Los componentes son reutilizables entre landings?

Sí. Al ser piezas independientes con nombres claros, un componente como PricingPackages o Testimonial puede reutilizarse en otro proyecto sin arrastrar dependencias raras.

¿Cómo evito que el código quede desordenado al iterar?

Trabaja por componentes y no por archivos gigantes. Cambia un componente, vuelve a generar si hace falta y mantén los tokens semánticos como única fuente de color y espaciado.

Siguiente paso: previsualizar y desplegar

Ya sabes cómo el prompt se convierte en componentes React + Tailwind. En la parte 3 de esta serie veremos la vista previa, el staging y el deploy a cualquier hosting.

Genera tus componentes en KitekAI y revisa las librerías permitidas en tu propio proyecto. Si tienes dudas, escribe a [email protected].