Crear una landing React con IA (1/3): arquetipo, tier y prompt
Una idea de negocio no debería esperar semanas para tener su primera landing. Con KitekAI, el punto de partida no es un lienzo en blanco ni una plantilla rígida: es un asistente guiado que te lleva del arquetipo al despliegue con código React + Tailwind limpio.
Esta es la primera parte de una serie de tres. Aquí cubrimos las decisiones que definen todo lo demás: qué arquetipo elegir, qué tier de generación usar y cómo escribir el primer prompt. En las siguientes entregas veremos cómo el prompt se convierte en componentes y cómo se previsualiza y despliega.
El objetivo es concreto: una landing completa en menos de 10 minutos y más de 20 componentes modulares de alta conversión.
Qué significa generar una landing React con IA
KitekAI es una plataforma de ingeniería frontend con React asistida por IA. No es un constructor no-code genérico ni una herramienta de suscripción mensual. La generación ocurre dentro de un entorno controlado: eliges piezas conocidas, describes tu negocio y la plataforma ensambla componentes React + Tailwind reales, no imágenes de una interfaz.
El flujo del asistente tiene tres pasos:
- Arquetipo — defines la clase de sitio que necesitas.
- Tier de generación — eliges el perfil de velocidad y calidad.
- Describe el sitio — escribes el primer prompt con el contexto de tu cliente o proyecto.
De ahí salen componentes que puedes previsualizar, ajustar y preparar para deploy. Todo el proceso se apoya en los Prompts Maestros, que inyectan contexto y arquitectura para que el resultado sea 100% código limpio y 100% precisión estructurada.
Los 4 arquetipos base
El arquetipo es la decisión más importante porque determina qué conjunto de componentes propone la plataforma. KitekAI parte de 4+ arquetipos base:
| Arquetipo | Nombre | Uso típico |
|---|---|---|
corporate_services |
Corporate & Professional Services | abogados, clínicas, consultoría, agencias |
digital_commerce |
Digital & Retail E-Commerce | tiendas online, catálogos, lanzamientos de producto |
online_services |
SaaS & Digital Products | software, apps, productos por suscripción |
personal_pages |
Personal Pages & Portfolios | desarrolladores, creativos, freelancers, consultores |
Cada arquetipo trae su propio set de componentes. Esto es lo que hace que el resultado se sienta diseñado para tu negocio y no reciclado:
- Corporate & Professional Services: Features, ImageSlider, LogoCloud, Portfolio, PricingPackages, Services, Stats, Team, Testimonial, ValueProposition.
- Digital & Retail E-Commerce: ImageSlider, LogoCloud, NewArrivals, ProductGrid, Promotions, Testimonial.
- SaaS & Digital Products: Integrations, PlatformModules, Stats, SubscriptionPlans, Testimonial.
- Personal Pages & Portfolios: Biography, ImageSlider, LogoCloud, ProjectShowcase, SkillsMatrix, Stats, Testimonial.
Elegir bien el arquetipo no te encierra: te da un punto de partida coherente. Puedes añadir, quitar o reordenar componentes en pasos posteriores.
Cómo elegir el tier de generación
Los tiers son perfiles de generación, nunca planes mensuales. KitekAI ofrece tres:
| Tier | Codename | Velocidad | Perfil |
|---|---|---|---|
| Performance | Deep Architecture | 45–60 s | Complejo, máxima calidad; incluye GSAP / Framer Motion / Three.js por defecto |
| Standard | Balanced Logic | 20–30 s | Equilibrio calidad/velocidad para la mayoría de landings |
| Ultrafast | Sub-second | < 10 s | Rápido y económico para iteraciones cortas |
La regla práctica es sencilla. Si estás explorando el concepto y vas a iterar el copy, Ultrafast te deja ver resultados sin gastar de más. Cuando la estructura ya está clara pero quieres moverte rápido, Standard. Y si la landing es la pieza central de una campaña y necesitas máxima calidad con animación premium, Performance.
Independientemente del tier, la latencia promedio del entorno se mantiene por debajo de 180 ms y la reducción de latencia frente a un prompt suelto es del 40%.
El primer prompt en el asistente guiado
El tercer paso es describir el sitio. Un buen primer prompt no es un párrafo largo: es un brief ordenado. Estos son los elementos que conviene incluir:
- Qué hace el negocio y a quién le habla.
- La acción principal que quieres que haga el visitante.
- El tono (técnico, cercano, institucional).
- Secciones obligatorias (por ejemplo, precios, equipo, preguntas frecuentes).
- Restricciones de marca que ya conozcas.
Un ejemplo de prompt inicial para un arquetipo corporate_services:
Clínica odontológica en Bogotá. Público: adultos 25-55 que buscan
ortodoncia e implantes. Acción principal: agendar valoración.
Tono: profesional y cálido. Secciones: servicios, equipo médico,
testimonios, preguntas frecuentes y formulario de contacto.
Paleta sobria, mucho espacio en blanco.
No necesitas describir la implementación técnica. No pides "un div con grid de tres columnas": describes el negocio y el resultado esperado. La plataforma se encarga de traducirlo a componentes React + Tailwind.
Cuánto cuesta generar tu landing
El modelo de KitekAI es de pago por uso (PAYG): 1 crédito = 1 USD, sin suscripciones y con créditos que nunca vencen. El costo de cada componente sigue una fórmula pública:
component_cost (créditos) = tier_fixed + model_base_fee + design_surcharge
Con los valores habilitados hoy, el precio por componente se mueve en un rango de aproximadamente $0.60 – $2.00 USD, con un promedio observado de $1.04. Una landing de 16 componentes puede costar desde $10.40 (Ultrafast) hasta $32.00 (Performance), según el arquetipo y los ajustes de diseño. Puedes recargar desde $20 / $50 / $100 / $250 USD vía MercadoPago y revisar todo en tu panel de administración.
La transparencia es el punto: ves el costo por componente antes de generar, con auditoría de consumos 100% trazable y multi-organización.
Preguntas frecuentes
¿Necesito saber React para empezar?
No para generar. El asistente guiado te pide decisiones de negocio, no de código. Sin embargo, el resultado es React + Tailwind legible, así que si eres desarrollador puedes leerlo, extenderlo y versionarlo como cualquier proyecto propio.
¿Puedo cambiar de arquetipo después de generar?
Sí. El arquetipo define el set inicial de componentes, pero el flujo está pensado para iterar: puedes añadir, quitar o reordenar secciones y volver a generar. Cambiar de arquetipo es útil cuando el modelo de negocio cambia (por ejemplo, pasar de servicios a producto digital).
¿Qué diferencia hay entre los tres tiers?
Solo el perfil de generación: velocidad, costo y nivel de interactividad. Performance tarda 45–60 s e incluye animación premium; Standard, 20–30 s; Ultrafast, menos de 10 s. El tipo de componentes no cambia, cambia la profundidad con que se construyen.
¿La landing generada es realmente mía?
Sí. El código generado es tuyo: puedes descargar el zip y alojarlo donde quieras. La plataforma hornea un export estático que no depende de KitekAI para funcionar.
Genera tu primera landing
Elegir arquetipo, tier y prompt es todo lo que necesitas para empezar. En la parte 2 de esta serie veremos cómo ese prompt se convierte en componentes React + Tailwind limpios.
Cuando estés listo, crea tu landing en KitekAI y revisa el detalle de precios en planes. También puedes consultar la política de privacidad o escribir a [email protected] si tienes dudas.
¿Listo para generar tu landing?
Del arquetipo al deploy con código React + Tailwind real.
Ir al pipeline
