AI UI Prompts: 300+ Plantillas que Realmente Funcionan (2026)

Escribes "crea una landing page" en tu herramienta de IA. Lo que sale parece diseñado por un comité de marketing en 2015. ¿Te suena familiar? Aquí va la verdad que nadie quiere admitir: la mayoría de los devs están usando

0xMinds Team

Jan 25, 2026·14 min read

AI UI Prompts: 300+ Plantillas que Realmente Funcionan (2026) - Featured Image

Escribes "crea una landing page" en tu herramienta de IA. Lo que sale parece diseñado por un comité de marketing en 2015. ¿Te suena familiar?

Aquí va la verdad que nadie quiere admitir: la mayoría de los devs están usando la generación de UI con IA de forma completamente incorrecta. Le echan la culpa a la herramienta cuando el problema está en el prompt. Un prompt vago produce resultados vagos. Un prompt específico produce algo que puedes llevar a producción de verdad.

Pasé el último año probando, refinando y catalogando más de 300 prompts de IA para cada componente de interfaz que puedas necesitar. Los que están en esta guía no son teóricos: son plantillas probadas en campo que generan código listo para producción en el primer intento.

Esta es tu referencia completa. Guárdala en favoritos. Compártela con tu equipo. Y deja de reinventar la rueda cada vez que necesitas un componente nuevo.

Lo que te llevás de aquí

La especificidad gana: Los prompts con detalles de layout, estilo y comportamiento superan a los vagos por un factor de 10

La fórmula de 5 elementos: Componente + Layout + Estilo Visual + Contenido + Especificaciones Técnicas = resultados consistentes

Listo para copiar y pegar: Cada categoría incluye prompts que puedes usar de inmediato con 0xMinds, v0, Lovable o Cursor

300+ plantillas: Cubre todos los patrones de UI principales, desde hero sections hasta toggles de dark mode

Organizado por caso de uso: Encontrás lo que necesitás en segundos, no en horas

Cómo usar esta colección de prompts

Esta no es una guía que se lee de corrido de principio a fin. Es una referencia a la que vas a volver decenas de veces.

Tabla de Contenidos

Así sacás el máximo provecho:

Para resultados rápidos: Saltá directamente a la sección que corresponde a tu tarea actual. Cada categoría tiene prompts para copiar y pegar que funcionan de inmediato.

Para aprender: Primero lee "La anatomía de un buen prompt de IA". Entender por qué funcionan estos prompts te ayuda a adaptarlos a tus necesidades específicas.

Para construir páginas completas: Empezá con los componentes de página, luego sumá navegación, formularios y visualización de datos. Cada sección referencia guías más detalladas que profundizan en cada tema.

Consejo pro: Los prompts de esta guía funcionan en todas las herramientas de IA más usadas: 0xMinds, v0, Lovable, Cursor y muchas más — todas accesibles desde cualquier parte de Latinoamérica. El principio universal es la especificidad: cuanto más contexto le das a la IA, mejor es el resultado.

La anatomía de un buen prompt de IA

Antes de sumergirte en las 300+ plantillas, entendamos qué hace que un prompt de IA realmente funcione.

La mayoría de los prompts fallidos comparten el mismo problema: son demasiado vagos. "Crea una hero section" no le da ninguna dirección a la IA. Va a elegir configuraciones al azar que probablemente no coinciden con lo que tenés en mente.

Los prompts efectivos incluyen cinco elementos clave:

Elemento	Qué cubre	Ejemplo
Tipo de componente	Qué estás construyendo	Hero section, formulario de contacto, tabla de precios
Layout	Disposición espacial	Split-screen, centrado, grilla
Estilo visual	Colores, tipografía, mood	Dark mode, fondo con gradiente, minimalista
Contenido	Texto, datos, interacciones	Títulos, CTAs, datos de ejemplo
Especificaciones técnicas	Framework, librerías	React, Tailwind, shadcn/ui

La fórmula en acción:

[TIPO DE COMPONENTE] para [CONTEXTO/INDUSTRIA].
Layout: [DISPOSICIÓN ESPECÍFICA]
Visual: [COLORES, TIPOGRAFÍA, MOOD]
Contenido: [TÍTULOS, CTAS, DATOS]
Técnico: [FRAMEWORK + LIBRERÍAS]

Prompt malo:

Create a dashboard

Prompt bueno:

Create an analytics dashboard for a SaaS product.
Layout: Left sidebar navigation, main content area with 4 metric cards at top,
        large line chart below, and recent activity table at bottom.
Visual: Dark mode (#0a0a0a background), purple accent color, clean shadows.
Content: Metric cards show Users, Revenue, Conversion, Churn with sample data.
         Chart shows last 30 days. Activity table has 10 rows.
Technical: React, Tailwind CSS, Recharts for visualization, shadcn/ui components.

El segundo prompt elimina la ambigüedad. La IA sabe exactamente qué construir.

Ahora apliquemos esta fórmula a cada componente de UI principal.

Componentes de página (Hero, Landing, Precios)

Los componentes de página son las piezas grandes: hero sections, grillas de features, tablas de precios y landing pages completas. Estos marcan el tono de todo lo demás.

Cómo usar esta colección de prompts

Hero Sections

La hero section tiene unos 3 segundos para convencer a alguien de quedarse. Los prompts genéricos producen resultados genéricos — y los resultados genéricos no retienen a nadie.

Para plantillas detalladas y más de 25 variaciones, consultá nuestra guía completa de prompts para hero sections con IA.

Plantilla de hero para SaaS:

Create a SaaS hero section for a project management tool.
Layout: Split-screen, headline + CTAs on left, product mockup on right.
Visual: White background, blue accent (#2563eb), clean shadows on mockup.
Content: Bold headline about team productivity, "Start Free" primary CTA,
         "Watch Demo" secondary button. Trust badge showing "10k+ teams".
Technical: React + Tailwind CSS, fully responsive (stack on mobile).

Hero de lanzamiento para startup:

Build a pre-launch hero for a fintech startup.
Layout: Centered content, email capture prominent, waitlist counter.
Visual: Dark mode with gradient mesh background (purple to blue), minimal.
Content: Bold claim headline, single email input, "Join X others" counter.
Technical: React, Tailwind, animate counter on load.

Hero para e-commerce:

Fashion brand hero section, editorial style.
Layout: Full-bleed product image with minimal text overlay.
Visual: High contrast, magazine aesthetic, no clutter.
Content: Brand name top-left, "Shop Collection" bottom-center.
Technical: React + Tailwind, image lazy loading, responsive.

Tipo de hero	Ideal para	Elementos clave
Split-screen	SaaS, B2B	Mockup del producto + headline
Centrado	Startups, lanzamientos	Captura de email, prueba social
Full-bleed	E-commerce, portfolios	Visual primero, texto mínimo
Fondo de video	Agencias, marcas premium	Atmósfera sobre información

Secciones de landing page

Más allá de la hero, las landing pages necesitan features, prueba social y llamadas a la acción. Nuestra guía de prompts para landing pages con IA cubre más de 50 plantillas para cada sección.

Grilla bento de features:

Create a bento grid feature section with 6 cards.
Layout: Asymmetric grid (2 large cards, 4 small).
Visual: Muted backgrounds, purple accent on icons, subtle hover lift.
Content: Icon + headline + one-line description per card. Features:
         Real-time sync, Team collaboration, Custom workflows,
         Analytics, API access, Priority support.
Technical: React, Tailwind, CSS grid.

Sección de testimonios:

Build a testimonial carousel with 3 visible cards.
Layout: Horizontal scroll on mobile, cards side-by-side on desktop.
Visual: Light background, large quotation marks as background element.
Content: Quote, name, title, company, avatar for each. Auto-rotate.
Technical: React, Tailwind, pause on hover.

Para plantillas de testimonios dedicadas que construyen confianza real, revisá nuestra guía de prompts para secciones de testimonios con IA.

Tablas de precios

Las páginas de precios son el campo de batalla de la conversión. Un buen prompt puede ser la diferencia entre "lo pienso" y "¡toma mi dinero!".

Tres niveles de precio:

Design a pricing section with 3 tiers: Free, Pro, Enterprise.
Layout: Three cards side-by-side, middle tier highlighted.
Visual: Middle card elevated with shadow, "Most Popular" badge.
Content: Plan name, price/month, feature list with checkmarks, CTA.
         Monthly/yearly toggle at top with "Save 20%" for yearly.
Technical: React + Tailwind + shadcn/ui.

Tabla comparativa:

Create a pricing comparison table.
Layout: Feature rows, plan columns, sticky header.
Visual: Clean lines, checkmarks for included, X for excluded.
Content: 10 feature rows, 3 plan columns with specific values.
Technical: React, Tailwind, convert to accordion on mobile.

Consejo para mercados latinoamericanos: si tu producto tiene un tier gratuito, ponlo en primer plano dentro del prompt. Los devs y usuarios en México, Argentina, Colombia y Chile evalúan el tier gratis antes de mirar el precio de los planes pagos. Pedir explícitamente un botón "Comenzar gratis" visible puede duplicar tu tasa de conversión.

Nuestra guía de prompts para tablas de precios con IA tiene más de 20 plantillas que convierten — no solo muestran precios.

La navegación define la usabilidad de tu app. Los usuarios deben encontrar lo que necesitan sin tener que pensarlo demasiado.

Navbars

Navbar estándar para SaaS:

Create a navbar for a SaaS product.
Layout: Logo left, links center, CTA button right.
Visual: White background, subtle bottom border, fixed on scroll.
Content: Links: Features, Pricing, Docs, Blog. CTA: "Get Started".
Mobile: Hamburger menu with slide-in drawer.
Technical: React, Tailwind, useState for mobile menu.

Mega menu:

Build a navbar with mega menu dropdown.
Layout: Standard navbar with Products dropdown showing categories.
Visual: Mega menu opens to full-width with 3 columns of links.
Content: Product categories with icons and descriptions.
Technical: React, Tailwind, hover to open, click on mobile.

Para más de 40 plantillas de navegación incluyendo mega menus complejos, consultá nuestra guía de prompts para navbar y footer con IA.

Sidebars

Los sidebars son esenciales en dashboards y paneles de administración. Si los implementás mal, tu app se convierte en un laberinto.

Sidebar colapsable para dashboard:

Create a collapsible sidebar for a SaaS dashboard.
Layout: Icons when collapsed, icons + labels when expanded.
Visual: Dark background, active state highlight, smooth transition.
Content: 8 navigation items with icons, grouped into sections.
         Collapse button at bottom. User avatar at top.
Technical: React, Tailwind, persist state in localStorage.

Sidebar para panel de administración:

Build an admin sidebar with nested navigation.
Layout: Multi-level menu with expandable sections.
Visual: Light mode, indented sub-items, arrow indicators.
Content: Top-level: Dashboard, Users, Products, Settings.
         Each has 3-4 sub-items.
Technical: React, Tailwind, recursive component for nesting.

Nuestra guía de prompts para sidebars y drawers con IA cubre más de 30 patrones para navegación en SaaS.

Footers

Los footers suelen quedar en segundo plano, pero son espacio de alto valor para links, prueba social y conversiones.

Footer estándar:

Create a footer with 4 link columns and newsletter signup.
Layout: Link columns left, newsletter form right, legal at bottom.
Visual: Dark background, organized, social icons included.
Content: Columns: Product, Company, Resources, Legal.
         Newsletter with email input and "Subscribe" button.
Technical: React, Tailwind, mobile-responsive grid.

Componentes de formulario (Inputs, Validación, Multi-paso)

Los formularios son engañosamente difíciles. Parecen simples — unos inputs y un botón — pero los edge cases te van a dar más de un dolor de cabeza si no sos específico.

Nuestra guía de prompts para formularios con IA tiene más de 35 plantillas que cubren cada tipo de formulario. Aquí van los esenciales:

Formularios de contacto y registro

Formulario de contacto con validación:

Create a contact form with name, email, and message.
Validation: All required, email format check, 500 char limit on message.
States: Loading on submit, success toast, inline error messages.
Technical: React Hook Form, Tailwind, accessible labels + ARIA.

Formulario de registro:

Build a signup form with name, email, password.
Validation: Email format + "already exists" check, password strength meter.
Content: Requirements checklist for password, terms checkbox.
States: Loading, success redirect, error handling.
Technical: React Hook Form, Zod validation, Tailwind.

Wizards multi-paso

Wizard de onboarding:

Create a 3-step onboarding wizard.

Step 1 - Personal: Name, email, avatar upload.
Step 2 - Preferences: Industry dropdown, company size, use cases.
Step 3 - Setup: Username with availability check, notification toggles.

Include: Progress bar, Previous/Next buttons, validation per step,
         data persists between steps.
Technical: React, Tailwind, form state management.

Para patrones completos de flujos de onboarding, consultá nuestra guía de prompts para flujos de onboarding con IA.

Carga de archivos

Los componentes de carga de archivos se rompen constantemente cuando los prompts son demasiado vagos. Sé explícito sobre los comportamientos esperados.

Uploader con drag-and-drop:

Create a file upload component with drag-and-drop.
Features: Dropzone area, file preview, progress bar, file type validation.
Limits: 5MB max, images only (jpg, png, webp).
States: Idle, dragging over, uploading, complete, error.
Technical: React, Tailwind, mock upload progress.

Nota para apps con pagos en LatAm: si tu aplicación procesa pagos en América Latina, incluí en tu prompt que el formulario debe soportar Mercado Pago además de tarjeta de crédito internacional. Es la pasarela de pagos dominante en la región — presente en México, Argentina, Brasil, Chile y Colombia — y sus usuarios esperan verla como opción nativa, no como un extra.

Nuestra guía de prompts para carga de archivos con IA cubre drag-drop, multi-archivo y patrones de recorte de imágenes.

Comparativa de formularios

Tipo de formulario	Desafío principal	Qué no puede faltar en el prompt
Contacto	Prevención de spam	Reglas de validación, estados de éxito
Registro	Complejidad de contraseña	Medidor de fortaleza, confirmación
Multi-paso	Persistencia del estado	Indicador de progreso, navegación
Carga de archivos	Manejo de errores	Límite de tamaño, validación de tipo
Pago	Percepción de seguridad	Formato de tarjeta, badges de confianza, Mercado Pago

Visualización de datos (Tablas, Gráficas, Cards)

Los dashboards dependen de cómo mostrás los datos. Las tablas necesitan ordenarse. Las gráficas necesitan informar. Las cards necesitan organizar.

Tablas de datos

Las tablas son notoriamente complejas — ordenamiento, filtrado y paginación necesitan instrucciones explícitas.

Tabla de datos con ordenamiento:

Create a data table with sorting and filtering.
Layout: Table with header row, 10 data rows, pagination at bottom.
Features: Click header to sort (asc/desc indicators), search input above,
          column filters, row selection checkboxes.
Visual: Clean borders, hover state, alternating row colors.
Technical: React, Tailwind, TanStack Table patterns.

Tabla de usuarios para panel admin:

Build a user management table for an admin panel.
Columns: Avatar, Name, Email, Role (badge), Status (badge), Actions.
Actions: Edit button, delete with confirmation, status toggle.
Features: Search, role filter dropdown, bulk actions.
Technical: React, Tailwind, shadcn/ui Table components.

Nuestra guía de prompts para tablas de datos con IA tiene más de 15 plantillas para tablas complejas.

Gráficas y visualizaciones

Las gráficas requieren especificidad de librería — Recharts, Chart.js y D3 producen código muy diferente entre sí.

Gráfica de línea para dashboard:

Create a line chart showing revenue over time.
Data: Last 30 days, mock data with upward trend.
Features: Hover tooltip with exact values, axis labels, responsive.
Visual: Single line in brand color, grid lines, clean labels.
Technical: React, Recharts, Tailwind wrapper.

Dashboard con múltiples gráficas:

Build a dashboard section with 4 charts.
Layout: 2x2 grid of chart cards.
Charts: Line (revenue), Bar (users by region), Pie (traffic sources),
        Area (daily active users).
Visual: Consistent color palette, chart titles, legends.
Technical: React, Recharts, Tailwind grid.

Para más de 25 plantillas de gráficas y patrones de visualización de datos, revisá nuestra guía de prompts para gráficas con IA.

Layouts de dashboard

Dashboard de SaaS:

Create a SaaS analytics dashboard.
Layout: 4 metric cards top, large chart middle, activity table bottom.
Metrics: Users, Revenue, Conversion %, Churn % with trend arrows.
Chart: 30-day line chart, toggleable between metrics.
Table: Recent activities with timestamp, user, action columns.
Technical: React, Tailwind, Recharts.

Nuestra guía de prompts para dashboards con IA cubre más de 40 plantillas para paneles admin y vistas de analítica.

Componentes de feedback (Modales, Toasts, Alertas)

Los componentes de feedback le dicen al usuario qué está pasando. Los modales capturan la atención. Los toasts confirman acciones. Las alertas advierten sobre problemas.

Modales y diálogos

Modal de confirmación:

Create a confirmation dialog for delete actions.
Layout: Centered modal with overlay, icon at top.
Content: Warning icon (red), title "Are you sure?", description,
         Cancel and Delete buttons.
Visual: Red accent for danger, subtle animation on open.
Technical: React, Tailwind, focus trap, escape to close.

Modal con formulario:

Build a modal containing a contact form.
Layout: Modal with header, form body, footer with buttons.
Content: Name, email, message fields. Cancel + Submit buttons.
Behavior: Validate before submit, close on success, show errors inline.
Technical: React, Tailwind, shadcn/ui Dialog, React Hook Form.

Nuestra guía de prompts para modales y popups con IA tiene más de 30 plantillas para cada tipo de modal.

Notificaciones toast

Sistema de toasts:

Create a toast notification system with 4 variants.
Types: Success (green), error (red), warning (yellow), info (blue).
Features: Auto-dismiss after 4s, dismiss button, stacks multiple,
          position in top-right corner.
Technical: React, Tailwind, context for global state.

Componentes de alerta

Alerta inline:

Build alert components for 4 states.
Types: Success, error, warning, info.
Layout: Icon left, text right, optional dismiss button.
Visual: Colored left border, muted background matching type.
Technical: React, Tailwind, polymorphic component.

Componentes avanzados (Animaciones, Dark Mode, Accesibilidad)

Los componentes avanzados son los que separan las interfaces profesionales de las amateur. Estos patrones agregan un nivel de pulido que los usuarios perciben aunque no puedan describir exactamente qué lo hace diferente.

Animaciones y micro-interacciones

Las animaciones mal hechas se sienten torpes. Bien hechas, se sienten mágicas.

Efectos hover:

Create a card component with polished hover animations.
Default: Subtle shadow, normal scale.
Hover: Lifts (translateY -4px), shadow deepens, content shifts slightly.
Transition: Smooth 200ms ease, no jank.
Technical: React, Tailwind transitions, or Framer Motion.

Estados de carga:

Build a loading skeleton system for a card grid.
Layout: 3x3 grid of skeleton cards.
Animation: Pulse/shimmer effect on each skeleton.
Match: Same dimensions as actual content cards.
Technical: React, Tailwind animate-pulse.

Transiciones de página:

Create page transition animations.
Behavior: Fade out current page, fade in new page.
Duration: 300ms, easing curve ease-in-out.
Technical: Framer Motion AnimatePresence, React Router.

Para patrones completos de animación, revisá nuestro tutorial de prompts para animaciones y micro-interacciones con IA.

Dark mode

El dark mode ya no es opcional — pero implementarlo mal crea pesadillas de accesibilidad.

Selector de tema:

Build a dark mode toggle with system preference detection.
Features: Toggle button, persists preference in localStorage,
          respects system preference on first visit.
Visual: Sun/moon icon, smooth transition between themes.
Technical: React, Tailwind dark: classes, useEffect for detection.

Sistema de colores dark mode:

Create a component that demonstrates dark mode theming.
Light: White backgrounds, dark text, colored accents.
Dark: Near-black backgrounds (#0a0a0a), light text, adjusted accents.
Ensure: Proper contrast ratios (4.5:1 minimum).
Technical: Tailwind CSS dark mode, CSS custom properties.

Nuestra guía de prompts para dark mode con IA cubre sistemas de temas completos que no se rompen.

Accesibilidad

El 96% de las interfaces generadas por IA no pasan auditorías básicas de accesibilidad. Estos prompts lo corrigen de raíz.

Formulario accesible:

Create a contact form following WCAG 2.1 AA standards.
Requirements:
- Labels associated with inputs (not placeholders only)
- aria-required on required fields
- aria-describedby linking errors to fields
- Focus visible on all interactive elements
- Error states not color-only
- 44x44px minimum touch targets
Technical: React, Tailwind, proper semantic HTML.

Navegación por teclado:

Build a dropdown menu with full keyboard support.
Keyboard: Arrow keys navigate, Enter selects, Escape closes,
          Tab moves to next focusable element.
Visual: Clear focus indicator on active item.
Technical: React, Tailwind, useRef for focus management.

Optimización para lectores de pantalla:

Create an accordion component optimized for screen readers.
Requirements:
- Button triggers with aria-expanded
- aria-controls linking to content panels
- Content hidden with proper aria-hidden
- Announce state changes
Technical: React, Tailwind, semantic HTML.

El cheat sheet de la fórmula de prompts

Una referencia rápida para escribir prompts que funcionan:

Elementos esenciales

1. TIPO DE COMPONENTE: ¿Qué estás construyendo?
2. LAYOUT: ¿Cómo está dispuesto espacialmente?
3. ESTILO VISUAL: Colores, tipografía, mood
4. CONTENIDO: Texto, datos, interacciones
5. TÉCNICO: Framework, librerías, restricciones

Plantilla por tipo de componente

Hero section:

[Industry] hero section.
Layout: [split/centered/full-bleed]
Headline: [topic or text]
CTA: [button text]
Visual: [background, colors, mood]
Technical: [framework]

Formulario:

[Form type] form with [fields].
Validation: [rules per field]
States: [loading, success, error handling]
Technical: [form library, styling]

Tabla de datos:

[Context] data table.
Columns: [list with types]
Features: [sort, filter, pagination, selection]
Visual: [styling details]
Technical: [table library, framework]

Modal:

[Purpose] modal/dialog.
Layout: [structure]
Content: [elements inside]
Behavior: [open/close, keyboard, focus]
Technical: [component library]

Checklist de calidad rápido

Antes de enviar cualquier prompt:

Especificaste el tipo de componente y el contexto
Incluiste detalles de layout (no solo "buen layout")
Mencionaste colores o sistema de diseño
Describiste todos los estados (cargando, éxito, error)
Listaste los requerimientos técnicos (framework, librerías)
Agregaste requerimientos móviles/responsive
Incluiste accesibilidad si es relevante

Preguntas frecuentes

¿Cuál es la longitud ideal para un prompt de UI con IA?

De 3 a 7 oraciones que cubran los cinco elementos clave: componente, layout, visual, contenido y especificaciones técnicas. Más detalle ayuda, pero no escribas una novela. Si superás las 200 palabras, probablemente estás complicándolo de más.

¿Qué herramienta de IA funciona mejor con estos prompts?

Estos prompts son independientes de la herramienta — funcionan con Construí con Fardino →, v0, Lovable, Cursor y la mayoría de los generadores de código con IA. El principio (especificidad) es universal. Algunas herramientas pueden interpretar ciertas palabras clave de forma diferente, pero el enfoque central aplica en todas partes.

¿Cómo obtengo resultados consistentes entre generaciones?

Incluí las restricciones de tu sistema de diseño en cada prompt: "Usar Tailwind CSS, componentes de shadcn/ui, fuente Inter, bordes rounded-lg." La consistencia viene de las restricciones. Sin ellas, cada generación es una apuesta nueva.

¿Puedo combinar prompts de distintas secciones?

Absolutamente. "Tomá el sidebar de la sección de navegación y combinalo con la tabla de datos de la sección de visualización" funciona muy bien. Pensá en estas plantillas como piezas de LEGO — están diseñadas para trabajar juntas.

¿Por qué mi resultado a veces sigue viéndose genérico?

Probablemente te están faltando detalles visuales específicos. Agregá un elemento inesperado: una animación particular, un peso tipográfico inusual, una combinación de colores distintiva, o una inspiración de diseño nombrada ("inspirado en la estética de Linear" o "inspirado en la UI de Rappi"). Los prompts genéricos producen outputs genéricos.

¿Cómo manejo páginas complejas con múltiples componentes?

Dividilas en secciones. Generá cada sección por separado y luego ensamblá. Intentar generar una página compleja en un solo prompt suele producir menor calidad que construir de forma incremental.

¿Qué hago si el resultado es casi perfecto pero no del todo?

Iterá. Agregá el ajuste específico a tu prompt: "Igual que antes pero los botones con rounded-full en lugar de rounded-lg." Los refinamientos pequeños se acumulan hasta llegar exactamente a lo que necesitás.

¿Con qué frecuencia debería actualizar mi biblioteca de prompts?

Cada vez que encuentres un prompt que funciona bien para tu caso de uso específico, guardalo. Las plantillas de esta guía son puntos de partida: tus versiones personalizadas con los colores de tu marca, tu librería de componentes preferida y tus patrones habituales van a ser aún más valiosas.

Errores comunes que hay que evitar

Después de revisar miles de interfaces generadas por IA, estos son los patrones que consistentemente producen malos resultados:

Error 1: El estético vago

No hagas esto:

Create a modern, clean dashboard

"Moderno" y "limpio" no le dicen nada concreto a la IA. Cada diseñador los interpreta distinto. La IA va a elegir configuraciones al azar que probablemente no coinciden con lo que imaginaste.

Hacé esto en su lugar:

Create a dashboard with:
- White background, 4px border radius, subtle shadows
- Inter or system font, 14px base size
- Purple (#7c3aed) accent color
- Inspired by Linear's minimal aesthetic

Error 2: Olvidarse de los estados

Formularios sin estados de error. Botones sin indicadores de carga. Cards sin efectos hover. Si no los especificás, no los vas a obtener.

Incluí siempre:

Estados de carga para cualquier acción asíncrona
Estados de error para validaciones
Estados vacíos para listas y tablas
Estados hover/focus para elementos interactivos
Confirmación de éxito para envíos de formularios

Error 3: Ignorar el celular

"Hacelo responsive" es mejor que nada, pero sigue siendo vago. Especificá qué pasa en cada breakpoint.

Sé explícito:

Responsive behavior:
- Desktop: 3 cards per row
- Tablet: 2 cards per row
- Mobile: 1 card per row, stacked

Error 4: Olvidarse de la accesibilidad

La mayoría de los outputs de IA omiten la accesibilidad por completo. Si necesitás componentes accesibles (y los necesitás), solicitá explícitamente:

Jerarquía de headings correcta
Labels y roles ARIA
Navegación por teclado
Manejo del foco
Requisitos de contraste de color
Consideraciones para lectores de pantalla

Error 5: Contenido genérico

El texto de placeholder como "Lorem ipsum" produce outputs de aspecto genérico. Usá contenido realista:

Content: Real headlines about productivity gains.
         Actual feature names: "Smart Search", "Team Workspaces".
         Realistic metrics: "2.5x faster", "10k+ users".

Flujo de trabajo para iterar prompts

Lograr resultados perfectos en el primer intento es poco frecuente. Acá va un flujo de trabajo para refinar prompts de forma eficiente:

Paso 1: Empezá amplio

Tu primer prompt debe cubrir lo esencial: tipo de componente, layout básico y stack técnico. No sobreingenieries el primer intento.

Paso 2: Evaluá la estructura primero

¿El layout está bien? ¿Las secciones principales están donde esperabas? Si la estructura está mal, corregila antes de preocuparte por los colores.

Paso 3: Refiná lo visual

Una vez que la estructura es correcta, agregá refinamientos visuales: colores, tipografía, espaciado, sombras. Son más fáciles de ajustar que cambios fundamentales de layout.

Paso 4: Agregá pulido

Última pasada: animaciones, estados hover, micro-interacciones. Estos son los detalles que separan lo bueno de lo excelente.

Paso 5: Documentá lo que funciona

Cuando des con un prompt que funciona, guardalo. Construí tu propia biblioteca de plantillas personalizada para tu stack y sistema de diseño.

Construyendo tu biblioteca de prompts

Las plantillas de esta guía son puntos de partida. Tu biblioteca personalizada va a ser aún más valiosa.

Qué guardar

Prompts que funcionaron a la primera
Tus colores de marca y restricciones del sistema de diseño
Patrones de componentes comunes para tu aplicación
Requerimientos técnicos (librerías, frameworks)
Requerimientos de accesibilidad

Estructura de plantilla

Creá una plantilla para cada tipo de componente que uses regularmente:

## [Nombre del Componente]

### Contexto
- Usado para: [describí el caso de uso]
- Sistema de diseño: [tus restricciones]
- Framework: [tu stack]

### Prompt base
[Tu prompt probado acá]

### Variaciones
- Versión dark mode: [prompt]
- Versión compacta: [prompt]
- Versión mobile-first: [prompt]

Compartir y colaborar en equipo

Si trabajás en equipo — ya sea en una startup local, un estudio de producto o en un equipo distribuido al estilo Globant — mantené una biblioteca de prompts compartida. La consistencia entre los miembros del equipo produce outputs de UI consistentes. Tus devs junior pueden generar componentes de la misma calidad que tus seniors.

Guías relacionadas

Esta página pilar te da el panorama general. Estas guías profundizan en tipos de componentes específicos:

Componentes de página

Prompts de IA para landing pages: 50+ plantillas — Plantillas completas de página de hero a footer
Prompts de IA para hero sections: 25+ plantillas — Hero sections que detienen el scroll
Prompts de IA para tablas de precios — Tablas que convierten, no solo muestran
Prompts de IA para secciones de testimonios — Construí confianza con prueba social

Navegación

Prompts de IA para navbar y footer: 40+ plantillas — Patrones de navegación profesionales
Prompts de IA para sidebar y drawer: 30+ plantillas — Navegación para SaaS y apps admin

Formularios e inputs

Prompts de IA para formularios: 35+ plantillas — Desde formularios de contacto hasta wizards multi-paso
Prompts de IA para carga de archivos — Drag-drop, progreso, validación
Prompts de IA para flujos de onboarding — Journeys de usuario que convierten

Datos y dashboards

Prompts de IA para dashboards: 40+ plantillas — Paneles admin y analítica
Prompts de IA para tablas de datos: 15+ plantillas — Tablas ordenables y filtrables
Prompts de IA para gráficas: 25+ plantillas — Visualización de datos bien hecha

Feedback e interacción

Prompts de IA para modales y popups: 30+ plantillas — Diálogos, confirmaciones, alertas

Avanzado

Prompts de IA para animaciones — Micro-interacciones y transiciones
Prompts de IA para dark mode — Sistemas de temas que no se rompen

Empezá a construir

Ya tenés el manual completo para la generación de UI con IA. Más de 300 plantillas organizadas por caso de uso. Una fórmula que funciona en cualquier herramienta. Guías detalladas para cada componente principal.

Pero los prompts solo valen lo que construís con ellos.

Elegí una plantilla. Personalizala para tu proyecto. Generá algo real. El mejor componente de interfaz es el que ya está en producción — no el que seguís perfeccionando.

¿Listo para probar estos prompts? Construí con Fardino →

Escrito por el equipo de 0xMinds. Construimos herramientas de IA para devs de frontend que publican.

#pillar-page#AI prompts#UI generation#vibe coding#templates

Build with Fardino

Got an idea? Build it now.

Describe the site or app you want — Fardino turns it into a live website.

⌘+Enterto launch

Tabla de Contenidos

Cómo usar esta colección de prompts

La anatomía de un buen prompt de IA

Componentes de página (Hero, Landing, Precios)

Hero Sections

Secciones de landing page

Tablas de precios

Componentes de navegación (Navbar, Sidebar, Footer)

Navbars

Sidebars

Footers

Componentes de formulario (Inputs, Validación, Multi-paso)

Formularios de contacto y registro

Wizards multi-paso

Carga de archivos

Comparativa de formularios

Visualización de datos (Tablas, Gráficas, Cards)

Tablas de datos

Gráficas y visualizaciones

Layouts de dashboard

Componentes de feedback (Modales, Toasts, Alertas)

Modales y diálogos

Notificaciones toast

Componentes de alerta

Componentes avanzados (Animaciones, Dark Mode, Accesibilidad)

Animaciones y micro-interacciones

Dark mode

Accesibilidad

El cheat sheet de la fórmula de prompts

Elementos esenciales

Plantilla por tipo de componente

Checklist de calidad rápido

Preguntas frecuentes

¿Cuál es la longitud ideal para un prompt de UI con IA?

¿Qué herramienta de IA funciona mejor con estos prompts?

¿Cómo obtengo resultados consistentes entre generaciones?

¿Puedo combinar prompts de distintas secciones?

¿Por qué mi resultado a veces sigue viéndose genérico?

¿Cómo manejo páginas complejas con múltiples componentes?

¿Qué hago si el resultado es casi perfecto pero no del todo?

¿Con qué frecuencia debería actualizar mi biblioteca de prompts?

Errores comunes que hay que evitar

Error 1: El estético vago

Error 2: Olvidarse de los estados

Error 3: Ignorar el celular

Error 4: Olvidarse de la accesibilidad

Error 5: Contenido genérico

Flujo de trabajo para iterar prompts

Paso 1: Empezá amplio

Paso 2: Evaluá la estructura primero

Paso 3: Refiná lo visual

Paso 4: Agregá pulido

Paso 5: Documentá lo que funciona

Construyendo tu biblioteca de prompts

Qué guardar

Estructura de plantilla

Compartir y colaborar en equipo

Guías relacionadas

Componentes de página

Navegación

Formularios e inputs

Datos y dashboards

Feedback e interacción

Avanzado

Empezá a construir

Got an idea? Build it now.

Related Articles

La Guía Definitiva de Sitios Web para tu Negocio: Crea, Lanza y Aparece en Google con IA (2026)

Prompts de IA para Hero Sections que Convierten (25+ Plantillas)

Cursor vs Windsurf en 2026: El Gran Duelo de los IDEs con IA

Google AI Studio para Vibe Coding: Tutorial Práctico para Desarrolladores Frontend

El Checklist de Seguridad para Vibe Coding: 15 Pasos para Hacer Deploy de Código IA sin Vulnerabilidades

Related Articles

La Guía Definitiva de Sitios Web para tu Negocio: Crea, Lanza y Aparece en Google con IA (2026)

Prompts de IA para Hero Sections que Convierten (25+ Plantillas)

Cursor vs Windsurf en 2026: El Gran Duelo de los IDEs con IA

Google AI Studio para Vibe Coding: Tutorial Práctico para Desarrolladores Frontend

El Checklist de Seguridad para Vibe Coding: 15 Pasos para Hacer Deploy de Código IA sin Vulnerabilidades