Superficies de prompt: la nueva primitiva de UX

La superficie de prompt es el nuevo botón. Un diseñador que la trata como una barra de búsqueda está lanzando un producto de 2018 en 2026. El campo de texto se ha comido el formulario, el asistente paso a paso y buena parte del panel de ajustes, y los productos que ganan son los que tratan el input como una primitiva de UX de primera clase en lugar de un textarea con un icono de avión de papel.

La mayoría de los equipos sigue lanzando el textarea. Un rectángulo pelado, un placeholder que dice "Pregunta lo que quieras", un botón de enviar y nada más. Eso es una barra de búsqueda con delirios de grandeza. Una superficie de prompt de verdad es un componente con anatomía, affordances, estado y una vía de recuperación.

Este texto es la versión operativa. Qué es realmente una superficie de prompt, las ocho partes que toda buena superficie incluye, seis modos de fallo que las matan, seis patrones con nombre que los mejores productos usan ahora mismo y una auditoría de siete preguntas que te dice en tres minutos si tu superficie es una primitiva o un comodín.

Una superficie de prompt no es un textarea

Una superficie de prompt es toda la región donde el usuario escribe, configura y lee el resultado. El input es la parte visible. El componente es todo lo que va atornillado a él.

El input en sí es un solo elemento. El estado vacío con sugerencias, los slots de adjuntos, el selector de modelo, los toggles de herramientas, la affordance de envío, la región de salida en streaming, los controles de regenerar, editar y ramificar, y la superficie de historial son el resto. Un equipo que diseña solo la caja ha lanzado la punta del iceberg.

Cursor, Claude, Linear AI, v0, Lovable, Notion AI, Raycast AI, Vercel AI Playground. Ninguno trata el input como un textarea. Cada uno lanza una superficie estructurada donde el input es la puerta de entrada a una interacción configurable, observable y reversible. Ese es el listón.

La anatomía de una superficie de prompt que funciona

Ocho partes. Estado vacío, sugerencias, slots de adjuntos, selector de modelo, toggles de herramientas, affordance de envío, región de salida en streaming, controles de revisión. Una superficie de prompt que lanza menos de seis está incompleta.

El estado vacío tiene que enseñar el producto sin volcar un muro de texto. La barra de comandos de Cursor muestra archivos recientes y prompts recientes. El menú slash de Notion AI es el estado vacío, ramificado por intención. v0 lanza una galería de prompts iniciales que sirven también como prueba. "Pregunta lo que quieras" es el enemigo. Exige que el usuario invente el caso de uso.

Las sugerencias salen al encuentro del usuario a mitad de camino. Sugerencias en chips en línea, historial de prompts recientes, autocompletados según el contexto. El selector de @-menciones de Cursor es el ejemplo de manual: acota el prompt a un archivo, una función o un documento con una sola pulsación.

Los slots de adjuntos hacen el input multimodal. v0 deja pegar una captura de pantalla y escribir el prompt sobre ella. Claude acepta PDFs, imágenes y archivos de código. Lovable acepta un frame de Figma como contexto. El slot es el contrato.

El selector de modelo, los toggles de herramientas y la affordance de envío son la capa de configuración. Le dicen al usuario qué va a pasar antes de que pase. Vercel AI Playground expone el selector de modelo como el control más prominente. Cursor alterna entre modo agente y edición en línea antes de enviar. Si escondes la configuración, el usuario adivina.

La región de salida en streaming y los controles de revisión cierran el círculo. El panel de artifacts de Claude es uno de los ejemplos más limpios que existen. La salida tiene su propia región, la superficie de prompt sigue activa y el usuario puede editar el prompt o regenerar el artifact sin perder ninguno de los dos lados.

Las señales de confianza son el detalle que sostiene todo

La superficie de prompt es donde el usuario decide si confía en el modelo. Cada señal visible gana confianza o la quema.

La confianza nace de la claridad. La identidad del modelo es visible. Las llamadas a herramientas se listan antes de ejecutarse, o se muestran en streaming mientras se ejecutan. El feedback del streaming es honesto, no un spinner falso disfrazado de trabajo. La affordance de deshacer está al alcance en menos de un segundo. La vía de error nombra qué falló y por qué. Es el mismo oficio que exige una buena UI de agentes, acotado al input.

La señal de confianza más barata es el botón de parar. Una respuesta en streaming sin un stop visible es una superficie hostil. El usuario ve al modelo escribir algo que ya sabe que está mal, y la única salida es cerrar la pestaña. Claude, Cursor y v0 lanzan un stop visible. La mayoría de las UIs de chat caseras se olvidan de él.

Seis modos de fallo que matan las superficies de prompt

La mayoría de las superficies de prompt en producción hoy cometen al menos uno de estos. Los arreglos no tienen nada de sutil.

El rectángulo vacío. Un textarea, un placeholder que dice "¿En qué puedo ayudarte?" y nada más. El usuario inventa el caso de uso desde cero. Arreglo: un estado vacío estructurado con tres a cinco arranques concretos ligados a capacidades reales del producto.

El input sin sugerencias. La superficie acepta un prompt pero nunca propone uno. Los usuarios avanzados aprenden los patrones. Los nuevos se van. Arreglo: prompts recientes, sugerencias acotadas (las @-menciones de Cursor, el selector de selección de v0) y autocompletados en línea calibrados al contexto actual.

El spinner de streaming muerto. Un spinner gira mientras el modelo hace en silencio diez llamadas a herramientas en segundo plano, y el usuario no tiene idea de qué significa. Arreglo: muestra el trabajo real en streaming. Llamadas a herramientas visibles, ediciones de archivos visibles, salida intermedia visible.

El modelo inamovible. El producto elige un modelo y esconde la decisión. Los usuarios avanzados no pueden enviar las tareas pesadas a un modelo más potente, y los que cuidan el presupuesto no pueden enviar las ligeras a uno más barato. Arreglo: expón el selector, ponle un valor por defecto sensato y conserva la elección por tarea.

La superficie con amnesia. Cada prompt nuevo reinicia el contexto. El usuario vuelve a pegar el archivo, la URL y el brief en cada turno. Arreglo: un memory chip, un slot de contexto fijado o un alcance a nivel de sesión que el usuario pueda ver y editar.

El regenerar destructivo. El botón de regenerar sobrescribe la salida anterior sin historial de versiones. El usuario perdió su mejor respuesta y no puede recuperarla. Arreglo: regenerar como rama, no como sobrescritura, tal como ya hacen el historial de Claude y la pila de versiones de v0.

Una biblioteca de patrones para superficies de prompt

Seis patrones con nombre separan las superficies de prompt que se sienten como primitivas de las que se sienten como comodines. Echa mano de esta lista antes de rediseñar nada.

Prompt acotado. El input acepta un token de alcance que limita lo que el modelo puede tocar. El selector de @-menciones de Cursor es el ejemplo canónico. El usuario escribe @layout.tsx y el prompt queda acotado a ese archivo. v0 tiene un alcance similar guiado por selección, donde el usuario hace clic en una región del canvas y el prompt opera sobre esa región. Acotar convierte un prompt vago en uno preciso sin obligar al usuario a escribir más.

Prompt guiado por selección. El usuario selecciona algo en el producto y la superficie de prompt aparece con la selección ya vinculada como contexto. v0 lo hace con las selecciones del canvas. Notion AI lo hace con el texto resaltado. La IA de Linear recoge el alcance de la issue automáticamente. No obligues al usuario a describir lo que ya señaló.

Toggles de herramientas en línea. La superficie expone las llamadas a herramientas como toggles o chips en el marco del input. Cursor alterna modo agente, modo edición y conjuntos de herramientas. Raycast AI expone comandos. Vercel AI Playground expone toggles de function calling. El usuario sabe qué herramientas están armadas antes de enviar.

Memory chip. Una affordance persistente que muestra lo que el modelo ya sabe de la sesión actual. ChatGPT y Claude lanzan variantes. El chip es editable, eliminable y visible, y ese es todo el truco. La memoria oculta es un riesgo de exfiltración disfrazado de función.

Prompt ramificado. Regenerar bifurca la conversación en lugar de sobrescribirla. Cada rama es un estado guardado al que el usuario puede volver. El historial de conversaciones de Claude lo muestra, v0 mantiene una pila de versiones de las UIs generadas, los hilos de chat de Cursor se pueden ramificar. Experimentar se convierte en un árbol, no en una tirada de casino.

Llamada a herramienta con puerta de aprobación. La superficie se detiene antes de una llamada destructiva a una herramienta y pide al usuario que apruebe, modifique o cancele. El composer de Cursor pone puerta a los comandos de shell arriesgados. Claude Code bloquea las operaciones destructivas tras un sistema de permisos. ChatGPT Operator bloquea las acciones de pago en el navegador. Frena el momento que no se puede deshacer y haz visible la acción en texto plano antes de ejecutarla.

Estos patrones se componen. Una gran superficie de prompt suele lanzar acotado, guiado por selección, herramientas en línea y puertas de aprobación como un único componente coherente. Los patrones no están en tensión, están en concierto.

La auditoría de superficie de prompt en siete preguntas

Pásala sobre cualquier input de IA antes de lanzarlo. Si falla tres o más, la superficie no está lista.

1. Estado vacío. ¿La superficie enseña al usuario qué escribir, o le suelta un campo en blanco?
2. Sugerencias. ¿La superficie propone el siguiente prompt según el contexto, el historial reciente o la selección?
3. Alcance. ¿Puede el usuario acotar el prompt a un archivo, una selección, un bloque o una sesión sin escribir más?
4. Visibilidad de la configuración. ¿Son visibles el modelo, las herramientas y el nivel de autonomía antes de enviar, y no enterrados en un cajón de ajustes?
5. Honestidad del streaming. ¿La salida en streaming muestra el trabajo real, o es un spinner que no significa nada?
6. Parar y revisar. ¿Hay un botón de parar visible durante el streaming y un regenerar no destructivo después?
7. Transparencia de la memoria. ¿Puede el usuario ver y editar lo que el modelo recuerda a lo largo de la sesión?

Una superficie que pasa las siete se siente como una primitiva. Una que falla tres o más se siente como una barra de búsqueda. La distancia entre esos dos resultados es lo que separa el diseño de producto AI-native del IA pegada con celo.

Los equipos que construyen la superficie de prompt como un componente de verdad son también los que tratan sus prompts como componentes en el lado de ingeniería. La disciplina da frutos de la misma manera.

FAQ

¿Qué es una superficie de prompt?

Una superficie de prompt es toda la región de la UI donde el usuario escribe el prompt, configura y lee el resultado. Incluye el input, el estado vacío, las sugerencias, los slots de adjuntos, el selector de modelo, los toggles de herramientas, la affordance de envío, la región de salida en streaming y los controles de revisión. Tratarla como un textarea es el error. Tratarla como un componente es el listón.

¿En qué se diferencia una superficie de prompt de un input de chat?

Un input de chat es una caja de mensajes turno a turno. Una superficie de prompt es un componente de interacción configurable, observable y reversible. La UI de chat optimiza para la conversación. Una superficie de prompt optimiza para la claridad del objetivo, la confianza en el modelo y el rendimiento de las tareas. El input de chat es una posible expresión de una superficie de prompt, no un sinónimo.

¿Cuáles son los errores de diseño de UI de prompt más comunes?

Rectángulos vacíos sin sugerencias, spinners de streaming muertos, modelos inamovibles, superficies con amnesia que olvidan el contexto en cada prompt, botones de regenerar destructivos que sobrescriben una buena salida y botones de parar ausentes durante el streaming. Cada uno se arregla con un pequeño cambio en la superficie. Ninguno se arregla con copy.

¿Qué productos tienen las mejores superficies de prompt en 2026?

Cursor por los prompts acotados, Claude por el historial ramificable y el panel de artifacts, v0 por los prompts guiados por selección, Linear AI por los prompts integrados, Notion AI por el estado vacío del menú slash, Raycast AI por la disciplina del selector y Vercel AI Playground por la visibilidad de la configuración. Ninguno lanza todos los patrones a plena fuerza, y por eso la categoría sigue completamente abierta.

Construye el input como si fuera el producto

La superficie de prompt es el componente más importante de cualquier producto AI-native, y la mayoría de los equipos sigue diseñándola como una ocurrencia tardía. Un textarea, un botón de enviar, un placeholder, a producción. Esa pila se pudrió el día en que Cursor y Claude subieron el listón.

Trata el input como una primitiva. Lanza las ocho partes. Evita los seis modos de fallo. Compón los seis patrones. Pasa la auditoría de siete preguntas. El producto que sale al otro lado se siente como 2026 y no como una barra lateral de chat de 2022 con un logo nuevo.

Si quieres un equipo que lance superficies de prompt como componentes completos en lugar de textareas, contrata a Brainy. Diseñamos UI de producto AI-native de punta a punta, desde el estado vacío hasta el panel de salida en streaming, con las señales de confianza integradas antes de que el primer usuario escriba una sola palabra.