Ejemplos de prompts de diseño web y UI
Un prompt útil explica la tarea antes de nombrar un estilo. Estos cuatro ejemplos especifican el mensaje, la acción, los hechos y el comportamiento móvil de distintas secciones web.
Por Neruve · Actualizado el
Empieza con una página funcional
Previsualiza una página HTML funcional y aplica estas técnicas con su código y el prompt incluido en tu agente de programación.
Framewise — Plantilla HTML de landing para productos de IA
Practica la explicación del producto, la jerarquía visual y una cabecera adaptable.
Previsualizar plantillaAster Hale — Plantilla HTML de portafolio para diseñadores de producto
Adapta los servicios, los casos de proyectos y el contacto a tu trabajo.
Previsualizar plantillaLas Skills siguen siendo gratuitas y se pueden leer y copiar sin iniciar sesión. Las vistas previas son públicas; descargar el código y su prompt requiere una cuenta y la compra o el plan correspondiente. Ver acceso al código y precios
Define la tarea antes del estilo
Indica el público, objetivo, contenido necesario y destino de la acción. Define si necesitas un concepto, un prototipo o archivos para un proyecto existente. Aporta hechos reales y marca los datos ficticios para evitar promesas o funciones inventadas.
Adapta el prompt a la página y sus estados
Un hero necesita una propuesta y un siguiente paso; los precios, diferencias legibles; un panel, filtros y estados vacíos o de error; un producto, materiales y comportamiento de compra. Elige el ejemplo más cercano y sustituye sus datos sin acumular todas las funciones.
Usa el estilo como dirección
Explica dónde aplicar geometría Bauhaus, tipografía suiza, bordes neobrutalistas o lujo sobrio. Prioriza contraste, jerarquía y lectura móvil sobre la decoración. Un nombre de estilo no define por sí solo la interfaz.
Abre el resultado y corrige un problema
Comprueba el resultado en escritorio y a 390 y 320 píxeles. Prueba la acción principal y el foco del teclado. Registra el elemento, ancho y comportamiento esperado antes de pedir una corrección acotada. Marca como pendientes las comprobaciones que la herramienta no pueda realizar.
Ejercicios originales para adaptar
Estos ejemplos originales de Neruve se mantienen en inglés. Son entradas propuestas, no resultados comprobados ni prompts de plantillas de pago. Sustituye los datos ficticios antes de usarlos.
Hero Bauhaus: mensaje y acción
Design a Bauhaus-inspired hero for a fictional poster studio called Form Study.
Goal: help visitors understand the studio and follow “View the collection” to #collection.
Use one supplied poster placeholder, a compact geometric heading and a red accent.
Keep the offer readable before introducing decorative circles or rules.
At 390 px, stack the poster and text; keep the action visible and use readable contrast.
Use semantic headings, visible keyboard focus and a reduced-motion alternative.
Do not invent awards, customer logos, order counts or a working checkout.
Return the section structure and explain which parts still need implementation.Precios suizos: comparación legible
Design a Swiss-minimalist pricing comparison for a fictional planning app.
Use this labelled demonstration data only: Draft $12/month and Team $28/month,
both USD. These are fictional example prices, not Neruve prices.
Draft includes personal notes; Team adds shared notes and team comments.
Use aligned labels and a clear type scale; do not rely on color alone for differences.
At 320 px, stack cards and keep every price and feature readable.
Buttons link to #plan-details, not a real checkout. Do not invent discounts,
payment processing, trials or annual prices. Mark the entire section as a demo.Panel neobrutalista: controles y estados
Design a neo-brutalist task dashboard for a fictional studio project.
Use bold outlines and one accent without overwhelming the status information.
Include search, a status filter and a task list with title, owner and due date.
Label the data as fictional. Define loading, empty, filtered-empty and error states.
If this is a concept, annotate how each control should behave instead of claiming
it is connected to an API. If implementing, use the existing project contracts.
At 390 px, retain task names and status labels; do not hide necessary fields.
Check keyboard focus and readable contrast. Do not invent productivity metrics.Página de producto de lujo: conservar los hechos
Design a restrained luxury product page for a fictional ceramic lamp, Still One.
Use warm neutrals, generous spacing and a clearly labelled placeholder photo.
Demonstration facts: $180 USD, matte ceramic base, replaceable LED bulb,
30 cm height. These are fictional facts, not a real offer.
Show dimensions, materials and care near the main product image.
Represent the purchase area as a labelled concept; do not connect payments.
For an existing store, preserve its real price, stock, variants and cart contract.
At 390 px, keep product facts near the image and the action easy to reach.
Do not invent stock urgency, reviews, shipping promises or sustainability claims.Un ejemplo de UI Prompt que puedes abrir: Form Study
Implementamos el ejercicio hero en Codex y revisamos la página real. El archivo de entrada incluye el prompt original y una petición adicional de HTML/CSS completo. El cartel geométrico es un recurso original marcado como ilustrativo.
Qué se comprobó
A 1280, 390 y 320 px, el texto y el cartel caben en la pantalla. «View the collection» llega a la colección. El foco del teclado es visible y la preferencia de movimiento reducido desactiva el desplazamiento suave.
Abre la demo o descarga el HTML y ábrelo localmente. Compara los mismos anchos, sigue el enlace principal y prueba el teclado. Si repites el ejercicio con la entrada completa, registra tus propios resultados.
Es una implementación hero ficticia e independiente con pruebas de navegador. Los otros tres prompts siguen siendo entradas propuestas. No hay comparación de modelos, pago real ni evidencia de mejora de conversión.
Preguntas frecuentes
¿Son ejemplos gratuitos, resultados probados o prompts de plantillas?
Los cuatro prompts son ejercicios originales gratuitos. La implementación hero Form Study de abajo tiene pruebas de navegador; los otros siguen siendo entradas propuestas. Los prompts de plantillas y la descarga del código siguen las condiciones indicadas.
Explora diseños y sus prompts
El catálogo público de Neruve ofrece diseños web, prompts asociados disponibles y un directorio de Skills. Las vistas previas interactivas no requieren iniciar sesión; los prompts dependen de las condiciones del recurso y del plan. Este flujo utiliza tu propia herramienta de desarrollo y no requiere un generador público de sitios de Neruve.
Referencias oficiales
Las herramientas y skills externas pertenecen a sus autores. Los enlaces son referencias; no implican colaboración ni acceso incluido.