Prompts de rediseño web para proyectos existentes
Un prompt de rediseño debe indicar qué aspecto cambiar y qué preservar. Registra la interfaz actual, elige un defecto concreto y entrega un plan limitado para que la mejora pueda revisarse.
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.
Aster Hale — Plantilla HTML de portafolio para diseñadores de producto
Adapta los servicios, los casos de proyectos y el contacto a tu trabajo.
Previsualizar plantillaMeStudio — Plantilla HTML de portafolio fotográfico
Compara cuadrículas de proyectos, ritmo visual y galerías adaptables.
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
Auditar antes de pedir un rediseño con IA
Registra tecnología, rutas, controles compartidos, textos y acciones. Examina escritorio y móvil para identificar problemas de jerarquía, lectura, composición o comportamiento. Así la petición aborda la causa en lugar de añadir decoración.
Proteger navegación, formularios y SEO
Explicita destinos, login, pagos, precios y eventos analíticos. Conserva títulos, descripciones, canonical/hreflang y enlaces internos salvo que estén dentro del alcance. Compruébalos después: un diseño nuevo no prueba crecimiento orgánico ni más conversiones.
Usar capturas como evidencia, no para copiar
Aporta referencias propias o autorizadas e identifica sección y ancho. Describe cambios de orden, espaciado, contraste o imágenes, adaptados al producto y componentes actuales. Preserva los hechos sin importar identidad ni afirmaciones de otra empresa.
Reparar el diseño móvil en una pasada acotada
Identifica el elemento que desborda antes de cambiar estilos globales. Conserva contenido útil y revisa 320, 390, 768 y 1280 px, foco, enlaces e imágenes. El ejercicio es una entrada propuesta, no una afirmación de que tu sitio ya pasó estas pruebas.
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.
Un brief de rediseño web
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.Una reparación del diseño móvil
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.Ejercicio real: Fieldnote con Codex
Fieldnote incluye el brief original, el HTML de Codex sin modificar y comprobaciones de escritorio y móvil. No se proporcionó un Skill frontend-design; no es una prueba de ChatGPT ni de Claude Design.
Un prompt Claude para rediseñar un sitio existente
Empieza con un solo hero, la biblioteca de componentes actual y la acción original. El brief completo protege los hechos y el comportamiento mientras plantea una tarea visual concreta a Claude Code.
Abrir el brief completo de rediseño con ClaudeQué pruebas guardar con el resultado
Conserva los archivos modificados, capturas con los mismos anchos, el destino original de la acción y las comprobaciones de teclado, móvil y contratos protegidos. Marca como pendientes las pruebas que no pudiste realizar.
Son entradas originales propuestas para Claude Code, no resultados medidos de Claude. Elige el Skill según la tarea, revisa sus dependencias y conserva los hechos del proyecto. Taste es un proyecto comunitario independiente.
Preguntas frecuentes
¿Hay que regenerar todo el sitio por un defecto?
Empieza normalmente por el cambio mínimo que resuelva la causa. Un rediseño mayor requiere un plan revisado y regresiones de controles y comportamiento protegido. Conserva la versión anterior y compara las mismas vistas antes de aceptar.
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.