Ejemplos de prompts para una aplicación web: 10 modelos para SaaS, herramientas internas y portales de clientes
Diez prompts completos para una aplicación web, un párrafo cada uno, listos para pegar en un creador de apps con IA. Cada uno indica los roles y quién ve qué, el inicio de sesión, la lista principal, los estados, los correos y los pagos, con los prompts de seguimiento para enviar después.
Aquí tiene 10 ejemplos de prompts para una aplicación web, listos para copiar en un creador de apps con IA: tres productos SaaS, tres herramientas internas, dos portales de clientes y dos paneles de control. Cada uno ocupa un párrafo y puede enviarse como primer mensaje. Sustituya lo que va entre [corchetes] y conserve el resto. Un prompt de aplicación web se distingue de un prompt de sitio web sobre todo en una cosa: dice quién inicia sesión, qué puede ver y modificar cada rol y qué ocurre cuando un registro cambia de estado.
Siguen los siete bloques (contexto, objetivo, usuarios, pantallas, datos, restricciones, tono) de nuestros ejemplos de prompts para crear una app, y añaden las cinco líneas que necesita una aplicación web con usuarios reales. Si la app va a vivir en un teléfono, use mejor nuestros ejemplos de prompts para una app móvil.
Lo que debe decir un prompt de aplicación web y un prompt de sitio web no
Un sitio web muestra las mismas páginas a todo el mundo. Una aplicación web muestra a cada usuario sus propios datos, deja que unos los modifiquen y otros solo los lean, y hace avanzar los registros de un estado al siguiente. Cinco líneas cubren la diferencia:
Línea
Qué escribir
Por qué importa
Roles y permisos
Cada rol y lo que puede ver y modificar: "un cliente ve solo sus propias facturas"
Sin esta frase, la IA construye una pantalla que muestra todos los registros a todos los usuarios
Inicio de sesión
Quién se registra, cómo y a quién se invita: "correo y Google, clientes solo por invitación"
Un registro abierto y un acceso solo por invitación son dos apps distintas
Lista principal
Las columnas, los filtros y el buscador de la pantalla que se usa todo el día
En una app de empresa, casi todo el tiempo se pasa en una sola tabla
Estados
Los pasos por los que pasa un registro, en orden: "nuevo, en curso, en espera, terminado"
Los estados mandan sobre los filtros, el panel y los correos
Correos y pagos
Qué evento envía qué correo, y qué se paga y con qué frecuencia
Un correo sin desencadenante se convierte en spam; un precio sin regla se convierte en un error
La primera línea es la que más se omite y la que más importa. El control de acceso defectuoso, en el que un usuario puede leer o modificar datos que no son suyos, encabeza el OWASP Top 10 de riesgos de las aplicaciones web. En una app construida sobre Supabase, esas reglas se convierten en políticas de seguridad a nivel de fila en la base de datos, como describe la documentación de Supabase. Una frase clara en el prompt es lo que permite a la IA escribirlas.
Prompts de SaaS
Un SaaS tiene clientes que se registran por su cuenta, pagan una suscripción y trabajan cada uno en su propio espacio. El prompt debe decir qué contiene una cuenta, qué es gratis y qué es de pago, y qué muestra la parte pública antes del registro.
Tablero de opiniones de clientes
SaaS · Producto
Crea una aplicación web SaaS en la que [empresas de software] recopilan las peticiones de funciones de sus usuarios. Roles: propietario del espacio de trabajo, miembro del equipo, usuario final (vota y comenta, sin acceso a la parte de administración). Inicio de sesión: propietarios y miembros se registran con correo o Google; los usuarios finales entran con correo desde el tablero público. Pantallas: tablero público con las peticiones ordenadas por votos, detalle de una petición con comentarios, hoja de ruta pública en tres columnas, lista de administración con todas las peticiones y filtros por estado y etiqueta, ajustes del espacio de trabajo con el logotipo y el color del tablero. Datos: un espacio de trabajo tiene varios tableros; una petición tiene un título, una descripción, etiquetas, un número de votos y un estado (en revisión, planificada, en curso, entregada). Restricciones: un voto por usuario final y petición, un correo a los votantes cuando una petición pasa a entregada, un plan gratuito con [1 tablero] y un plan de pago de [19 $ al mes] con Stripe con tableros ilimitados. Estilo limpio: blanco, índigo, tablas compactas.
Seguimiento de candidatos para una agencia pequeña
SaaS · Selección de personal
Crea una aplicación web para [una agencia de selección con 8 reclutadores] que permita seguir a los candidatos. Roles: administrador, reclutador, cliente (ve solo la lista corta de sus propias ofertas). Inicio de sesión: el personal con correo, los clientes con un enlace de invitación. Pantallas: lista de ofertas, embudo de una oferta como tablero Kanban (captado, preseleccionado, entrevista, propuesta, contratado, descartado), ficha del candidato con subida del CV, notas e historial, vista del cliente con la lista corta y botones de aprobar o rechazar. Datos: una empresa cliente tiene varias ofertas; una oferta tiene varias candidaturas; una candidatura une a un candidato con una oferta y tiene una etapa. Restricciones: CV guardados de forma privada y visibles solo para el personal y el cliente afectado, un correo al reclutador cuando un cliente aprueba a un candidato, búsqueda por nombre y habilidad, importación de los candidatos existentes desde un archivo CSV. Estilo profesional: blanco, verde oscuro, listas densas.
Actas de reuniones con IA
SaaS · Herramienta de IA
Crea una aplicación web para [equipos de consultoría] que convierta la transcripción de una reunión en un resumen y una lista de tareas. Roles: administrador del equipo, miembro. Inicio de sesión: correo o Google; el administrador invita a los miembros. Pantallas: pegar o subir una transcripción (texto o archivo .vtt), resultado de la IA (resumen, decisiones, tareas con responsable y fecha límite) que el usuario edita antes de guardar, lista de reuniones con buscador, lista de tareas de todas las reuniones filtrada por responsable y estado. Paso de IA: la transcripción se envía a un modelo de lenguaje mediante una función del servidor; la clave de la API nunca llega al navegador; el usuario siempre revisa antes de guardar. Datos: un equipo tiene varias reuniones; una reunión tiene un resumen y varias tareas; una tarea tiene un responsable, una fecha límite y un estado (abierta, hecha). Restricciones: los miembros ven solo las reuniones de su equipo, un correo semanal a cada miembro con sus tareas abiertas, [50 reuniones al mes] en el plan de pago. Estilo sereno: blanco roto, grafito, un solo acento turquesa.
Prompts de herramientas internas
Una herramienta interna sustituye a una hoja de cálculo que ha crecido demasiado. Nadie se registra por su cuenta: el administrador invita al equipo. El prompt dedica sus palabras a la tabla principal, los estados y quién puede modificar qué. Nuestro creador de herramientas internas aplica ese método de principio a fin.
Control de stock e inventario
Herramienta interna · Operaciones
Crea una aplicación web interna para [una tienda de repuestos con 2 almacenes] que controle el stock. Roles: administrador, personal de almacén (registra movimientos, no puede cambiar precios), ventas (solo lectura). Inicio de sesión: correo, solo por invitación. Pantallas: lista de productos con el stock por almacén, filtros por categoría y proveedor y un filtro "por debajo del mínimo", ficha del producto con el historial de movimientos, formulario para registrar un movimiento (entrada, salida, traslado entre almacenes), lista de proveedores, borrador de pedido de compra generado con los productos por debajo del mínimo. Datos: un producto tiene una referencia, un proveedor, un nivel mínimo y un nivel de stock por almacén; un movimiento tiene un tipo, una cantidad, una fecha y la persona que lo registró. Restricciones: el stock nunca baja de cero, cada cambio se registra con su autor, importación CSV del catálogo actual, un correo diario al administrador con los productos por debajo del mínimo. Estilo práctico: blanco, azul marino, tablas grandes.
CRM de embudo de ventas
Herramienta interna · Ventas
Crea una aplicación web de CRM sencilla para [un equipo B2B de 5 comerciales] que vende [programas de formación]. Roles: responsable comercial, comercial. Inicio de sesión: correo, solo por invitación. Pantallas: embudo como tablero Kanban (lead, contactado, reunión, propuesta, ganado, perdido) con arrastrar y soltar, ficha de la oportunidad con contactos, notas, próxima acción e importe, lista de empresas, mis tareas de hoy, panel del responsable con el valor del embudo por etapa y por comercial. Datos: una empresa tiene varios contactos y oportunidades; una oportunidad tiene un responsable, un importe, una etapa y una fecha de próxima acción. Restricciones: los comerciales ven todas las oportunidades pero editan solo las suyas, el responsable edita todo, un correo de recordatorio por la mañana con las próximas acciones vencidas, importación CSV de los contactos existentes, un motivo obligatorio cuando una oportunidad pasa a perdido. Estilo incisivo: blanco, negro, un solo acento naranja.
Lista de incorporación de empleados
Herramienta interna · RR. HH.
Crea una aplicación web interna para [una empresa de 60 personas] que gestione la incorporación de los nuevos empleados. Roles: administrador de RR. HH., responsable, nuevo empleado. Inicio de sesión: correo; el administrador de RR. HH. crea las cuentas. Pantallas: plantillas de incorporación (una lista de tareas con el equipo responsable: RR. HH., TI, responsable), incorporaciones en curso con barra de progreso, detalle de una incorporación con las tareas agrupadas por semana, la página del propio nuevo empleado con sus tareas, documentos por firmar y contactos. Datos: una plantilla tiene varias tareas con un equipo responsable y un desfase en días respecto a la fecha de inicio; una incorporación copia una plantilla para una persona y una fecha de inicio; una tarea tiene un estado (pendiente, hecha) y una fecha de finalización. Restricciones: un nuevo empleado ve solo su propia incorporación, los responsables ven las incorporaciones de su equipo, un correo a cada equipo responsable cuando vence una tarea, documentos subidos guardados de forma privada. Estilo cálido: crema, azul profundo, tarjetas redondeadas.
Prompts de portales de clientes
Un portal de clientes es una herramienta interna con una puerta al exterior: el equipo trabaja de un lado, y cada cliente ve del otro solo sus propios registros. Aquí, la frase de permisos lo es todo. Más ejemplos en nuestra guía del portal de clientes.
Portal de una gestoría
Portal de clientes · Contabilidad
Crea una aplicación web de portal de clientes para [una gestoría con 4 contables y 150 clientes pequeñas empresas]. Roles: administrador de la gestoría, contable, cliente. Inicio de sesión: el personal con correo; los clientes por invitación de su contable. Pantallas para los clientes: documentos que deben aportar este mes con un botón de subida, sus documentos subidos por año, mensajes con su contable, sus facturas de la gestoría. Pantallas para el personal: lista de clientes con el número de documentos que faltan, ficha del cliente, solicitar un documento (título, fecha límite), hilos de mensajes. Datos: una empresa cliente tiene un contable y varias solicitudes de documentos; una solicitud tiene una fecha límite y un estado (solicitada, recibida, validada); un documento pertenece a una solicitud. Restricciones: un cliente ve solo su propia empresa, archivos guardados de forma privada, un correo al cliente cuando se crea una solicitud y un recordatorio [3 días] antes de la fecha límite. Estilo de confianza: blanco, azul oscuro, sin adornos.
Portal de proyectos y aprobaciones de una agencia
Portal de clientes · Agencia
Crea una aplicación web de portal para [una agencia de diseño] que comparta el trabajo con los clientes y recoja sus aprobaciones. Roles: administrador de la agencia, diseñador, cliente. Inicio de sesión: el personal con correo; los clientes con un enlace de invitación por proyecto. Pantallas para los clientes: sus proyectos, entregables pendientes de aprobación con vista previa, aprobar o pedir cambios con un comentario, cronología del proyecto. Pantallas para el personal: tablero de proyectos, subir una versión de un entregable, hilo de comentarios por entregable, horas registradas por proyecto. Datos: un proyecto pertenece a un cliente y tiene varios entregables; un entregable tiene varias versiones y un estado (borrador, enviado, cambios solicitados, aprobado). Restricciones: los clientes ven solo sus proyectos y solo las versiones marcadas como enviadas, un correo al cliente cuando se envía una versión y al diseñador cuando el cliente responde, fecha de aprobación y aprobador guardados para cada versión. Estilo editorial: blanco, negro, espaciado generoso.
Prompts de paneles de control y back office
Un panel de control lee los datos más de lo que los escribe. Diga de dónde vienen las cifras, cuáles importan, en qué periodo y quién puede verlas.
Panel de ventas de una pequeña cadena
Panel · Comercio
Crea un panel de control web para [una cadena de 6 cafeterías]. Roles: propietario (todos los locales), encargado de local (solo su local). Inicio de sesión: correo, solo por invitación. Fuente de datos: un CSV de ventas diario por local que sube cada encargado, con fecha, producto, cantidad e importe. Pantallas: resumen con los ingresos, el número de ventas y el ticket medio del periodo seleccionado, comparados con el periodo anterior; ingresos por local y por día en gráficos; los 10 productos más vendidos; página de subida con el historial de archivos importados; ajustes con el horario de cada local. Restricciones: un encargado ve solo su propio local, un archivo de una fecha ya importada sustituye los datos antiguos tras una confirmación, filtro de periodo (esta semana, este mes, personalizado), exportación de cualquier tabla en CSV. Estilo claro: blanco, marrón café, gráficos legibles sin 3D.
Back office de administración de un marketplace
Back office · Marketplace
Crea una aplicación web de back office de administración para [un marketplace de muebles de segunda mano]. Roles: administrador, moderador (revisa anuncios y denuncias, no puede emitir reembolsos). Inicio de sesión: correo, solo cuentas del personal, creadas por el administrador. Pantallas: anuncios pendientes de revisión con aprobar y rechazar (motivo obligatorio), denuncias de usuarios con el anuncio o el miembro denunciado, ficha del miembro con sus anuncios, pedidos y advertencias, lista de pedidos con filtros por estado, formulario de reembolso para los administradores. Datos: un miembro tiene varios anuncios y pedidos; un anuncio tiene un estado (pendiente, publicado, rechazado, vendido); una denuncia une a quien denuncia, un objetivo y un motivo; cada acción del administrador se guarda con su autor y su fecha. Restricciones: un anuncio rechazado envía un correo a su vendedor con el motivo, un miembro con [3 advertencias] se suspende automáticamente, todas las tablas con búsqueda y ordenación. Estilo funcional: gris claro, paneles blancos, rojo para las acciones destructivas.
Prompts de seguimiento para una aplicación web
El primer prompt construye el esqueleto. Después, inicie sesión con cada rol y compruebe lo que ve antes de añadir nada. Cada mensaje posterior debe cambiar una sola cosa: un rol, una columna, un estado, un correo, un error. Diga qué construir, dónde va y qué debe quedar intacto.
Cuándo
Prompt de seguimiento que adaptar
Añadir un rol
Añade un rol [lector] que ve [todos los proyectos] en solo lectura, sin botones de edición y sin acceso a [los ajustes]. Los demás roles no cambian.
Corregir un permiso
Ahora mismo un [cliente] puede abrir la [factura] de otro cliente cambiando la URL. Restringe las [facturas] a su propietario en la base de datos, no solo en la interfaz.
Añadir una columna o un filtro
En la lista de [oportunidades], añade una columna [fecha de próxima acción], ordenable, y un filtro [solo vencidas]. No cambies las demás columnas.
Añadir pagos
Añade un plan [Pro] de [19 $ al mes] con Stripe Checkout. Las cuentas gratuitas conservan [1 tablero]; Pro desbloquea tableros ilimitados. Mantén la clave secreta de Stripe en el servidor.
Corregir un error
En [el formulario de movimientos de stock], un traslado resta la cantidad del primer almacén pero no la suma al segundo. Esperado: ambos se actualizan a la vez. Corrige solo esto.
En el creador de aplicaciones web con IA de Cadrant, estos prompts producen una aplicación web en React con su backend de Supabase: base de datos, inicio de sesión, almacenamiento de archivos y funciones del servidor, conectado a una cuenta de Supabase abierta a su nombre, de modo que los datos siguen siendo suyos. Pruebe cada rol en la vista previa en vivo, itere conversando y publique en una URL de Cadrant o en su propio dominio. Si está comparando herramientas, nuestra guía de alternativas a Lovable pone a los principales builders frente a frente. El prompt en sí funciona en cualquiera de ellos: cinco líneas web, un párrafo y los corchetes rellenados con su proyecto.
Ejemplos de prompts para aplicación web: 10 modelos | Cadrant