Exemplos de prompts de design web e UI
Um prompt útil descreve a tarefa antes de nomear o estilo. Estes quatro exemplos especificam mensagem, ação, fatos e comportamento no celular para diferentes seções de um site.
Por Neruve · Atualizado em
Comece com uma página funcional
Visualize uma página HTML funcional e aplique estas técnicas com o código e o prompt incluído no seu agente de programação.
Framewise — Template HTML de landing page para produto de IA
Pratique a apresentação do produto, a hierarquia visual e um destaque responsivo.
Visualizar modeloAster Hale — Template HTML de portfólio para designer de produto
Adapte os serviços, os casos de projetos e o contato ao seu trabalho.
Visualizar modeloAs Skills continuam gratuitas para leitura e cópia sem login. As prévias dos modelos são públicas; baixar o código e seu prompt exige conta e a compra ou o plano correspondente. Ver acesso ao código e preços
Defina a tarefa antes do estilo
Informe público, objetivo, conteúdo necessário e destino da ação. Defina se precisa de conceito, protótipo ou arquivos para um projeto existente. Forneça fatos reais e identifique dados fictícios de demonstração para evitar promessas ou funções inventadas.
Adapte o prompt à página e aos estados
Um hero precisa de proposta e próximo passo; preços, de diferenças legíveis; um dashboard, de filtros e estados vazios ou de erro; um produto, de materiais e comportamento de compra. Escolha o exemplo mais próximo e substitua seus dados sem reunir todas as funções.
Use o estilo como direção
Explique onde aplicar geometria Bauhaus, tipografia suíça, contornos neobrutalistas ou luxo discreto. Priorize contraste, hierarquia e leitura no celular antes da decoração. O nome de um estilo não define sozinho a interface.
Abra o resultado e corrija um problema
Verifique desktop e larguras de 390 e 320 pixels. Teste a ação principal e o foco do teclado. Registre elemento, largura e comportamento esperado antes de solicitar uma correção limitada. Marque como pendentes as verificações que a ferramenta não consegue realizar.
Exercícios originais para adaptar
Estes exemplos originais da Neruve permanecem em inglês. São entradas propostas, não resultados testados nem prompts de templates pagos. Substitua os dados fictícios antes de usar.
Hero Bauhaus: mensagem e ação
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.Preços em estilo suíço: comparação legível
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.Dashboard neobrutalista: controles e 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 produto de luxo: preservar fatos
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.Um exemplo de UI Prompt para abrir: Form Study
Implementamos o exercício hero no Codex e verificamos a página real. A entrada inclui o prompt original e um pedido adicional de HTML/CSS completo. O pôster geométrico é um recurso original identificado como ilustrativo.
O que foi verificado
Em 1280, 390 e 320 px, o texto e o pôster ficam dentro da largura da página. “View the collection” chega à coleção. O foco do teclado é visível; a preferência por movimento reduzido desativa a rolagem suave.
Abra a demonstração ou baixe o HTML e abra localmente. Compare as mesmas larguras, siga o link principal e teste o teclado. Ao repetir o exercício com a entrada completa, registre seus próprios resultados.
É uma implementação hero fictícia e independente com testes de navegador. Os outros três prompts continuam sendo entradas propostas. Não há comparação de modelos, pagamento real nem evidência de melhoria de conversão.
Perguntas frequentes
São exemplos gratuitos, resultados testados ou prompts de templates?
Os quatro prompts são exercícios originais gratuitos. A implementação hero Form Study abaixo tem testes de navegador; os outros continuam sendo entradas propostas. Prompts de templates e downloads do código seguem as condições exibidas.
Explore designs e os prompts associados
O catálogo público da Neruve oferece designs de sites, prompts associados disponíveis e um diretório de Skills. As prévias interativas não exigem login; os prompts seguem as permissões do item e do plano. Este fluxo usa sua própria ferramenta de desenvolvimento e não exige um gerador público de sites da Neruve.
Referências oficiais
Ferramentas e skills externas pertencem aos seus autores. Os links são referências, sem indicar parceria ou acesso incluído.