Prompts de redesign para sites existentes
O prompt deve explicar a apresentação a mudar e o que precisa permanecer. Registre a interface atual, escolha um defeito concreto e forneça um plano limitado para produzir uma melhoria verificável.
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.
Aster 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 modeloMeStudio — Template HTML de portfólio de fotografia
Compare grades de projetos, ritmo das imagens e galerias responsivas.
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
Auditar antes de pedir um redesign à IA
Registre tecnologia, rotas, controles compartilhados, textos e ações principais. Examine desktop e celular para distinguir hierarquia, legibilidade, layout e falhas de comportamento. Assim o pedido aborda a causa em vez de acrescentar decoração.
Proteger navegação, formulários e SEO
Explicite destinos, login, checkout, preços e eventos analíticos. Preserve títulos, descrições, canonical/hreflang e links internos salvo quando fizerem parte do pedido. Confira após editar: um novo layout não comprova crescimento nas buscas nem mais conversões.
Usar capturas como evidência, não para copiar
Use referências próprias ou autorizadas e identifique seção e largura. Descreva mudanças de ordem, espaçamento, contraste e imagens adaptadas ao produto e componentes atuais. Preserve os fatos sem incorporar identidade ou afirmações de outra empresa.
Corrigir o layout móvel em uma passada limitada
Identifique o elemento que transborda antes de mudar estilos globais. Mantenha conteúdo relevante e teste 320, 390, 768 e 1280 px, foco, links e imagens. O exercício é uma entrada proposta, não uma afirmação de que seu site já passou nos testes.
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.
Um briefing de redesign de site
Audit this existing website before redesigning it.
Read its stack, routes, page copy, API calls, forms and shared components.
Protected: canonical URLs, navigation destinations, login/checkout behavior,
prices, analytics events and existing product facts.
Goal: make the offer and primary action easier to understand without new claims.
Record the current desktop and mobile layouts. Identify the three most useful
presentation changes, with section names and screenshot evidence.
Propose a small plan: hierarchy, typography, spacing and reusable component rules.
After approval, change one section first and show the result before expanding.
Retest the original links/forms, 1280/390/320 px layouts, keyboard focus and images.
Preserve headings, metadata, canonical/hreflang and internal links unless the
brief explicitly calls for an SEO change. Report actual checks, not assumed passes.Uma correção de layout móvel
Repair horizontal overflow at 320 px in the existing hero.
Find the element causing overflow before changing styles.
Preserve desktop layout, copy, image meaning, primary action and all destinations.
Use wrapping, responsive sizing or a stacked layout appropriate to this section;
do not hide meaningful content or disable horizontal scrolling on the whole page.
Check the same hero at 320, 390, 768 and 1280 px, including keyboard focus.
Return the changed files, before/after evidence and unresolved failures.Exercício real: Fieldnote com Codex
Fieldnote inclui o briefing original, o HTML do Codex sem alterações e verificações em desktop e celular. Nenhum Skill frontend-design foi fornecido; não é um teste do ChatGPT ou do Claude Design.
Um prompt Claude para reformular um site existente
Comece com um hero, a biblioteca de componentes existente e a ação original. O briefing completo protege fatos e comportamento e fornece ao Claude Code uma tarefa visual concreta.
Abrir o briefing completo de reformulação ClaudeQuais evidências guardar
Guarde arquivos alterados, capturas nas mesmas larguras, o destino original da ação e testes de teclado, celular e contratos protegidos. Marque como pendente o que não puder testar.
São entradas originais sugeridas para Claude Code, não saídas verificadas do Claude. Escolha o Skill pela tarefa, revise dependências e preserve os fatos do projeto. Taste é um projeto comunitário independente.
Perguntas frequentes
É preciso regenerar todo o site por um defeito?
Normalmente comece pela menor alteração que resolva a causa. Um redesign maior exige plano revisado e verificações de regressão. Preserve a versão anterior e compare as mesmas visualizações antes de aceitar.
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.