Guía práctica de prompts de diseño web para Claude Code

Un flujo pequeño y revisable

1. Abre Claude Code en el proyecto y pide revisar stack, rutas y componentes antes de cambiar. Explicita los contratos de backend y comportamientos existentes.
2. Aporta el prompt y un brief separado con público, objetivo, texto real, recursos, acción principal y restricciones. Pide una propuesta antes de editar.
3. Revisa el resultado en navegador. Describe un defecto concreto con tamaño de pantalla y sección; pide una corrección enfocada y repite la comprobación.

Briefs originales de SaaS y portfolio

Neruve escribió este brief ficticio, separado de los prompts de pago. El texto inglés se conserva para reproducirlo.

Fieldnote is a fictional shared research-notes workspace for small product teams.
Create a calm cream-and-ink landing page. Explain collect → compare → decide.
Show a realistic sample research note, then a three-step workflow.
The primary link is “Explore the workflow” and targets #workflow.
Do not invent logos, testimonials, user counts, security guarantees, pricing,
forms or a working signup flow.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

Mira Chen is a fictional independent product designer.
Create a warm-neutral portfolio with three clearly labelled fictional projects.
For each project explain the role, constraint and illustrative outcome.
The primary link is “View selected work” and targets #projects.
Do not invent awards, employer logos, real contact addresses or business metrics.
Use semantic HTML, one clear h1, readable contrast and visible keyboard focus.
Support a 390 px mobile view without horizontal overflow and reduced motion.

Qué comprobar en el resultado

Comprueba vistas de 390 px y escritorio: encabezado claro, texto legible, enlaces funcionales, foco de teclado visible y ausencia de desbordamiento horizontal. Sustituye las afirmaciones de ejemplo por hechos verificados.

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.

Neruve escribió este brief ficticio, separado de los prompts de pago. El texto inglés se conserva para reproducirlo.

Improve the hero of this existing website in Claude Code.
Read the current framework, routes, shared components, design tokens and hero source.
Use the project's installed component library; do not add another UI framework.
Goal: make the existing offer and primary action easier to understand.

Before editing, record the hero at 1280, 390 and 320 px. Name the affected files,
the primary action's exact destination and one concrete presentation defect.
Preserve all copy, product facts, prices, route paths, API calls, forms,
authentication, checkout, analytics events, metadata, canonical and hreflang.
Use only supplied or authorized assets. Do not invent social proof or offers.

Propose one scoped change to hierarchy, spacing, typography or image placement.
After the plan is accepted, implement only the hero using existing components.
If a selected frontend design skill is available, read it for design guidance;
the existing project's behavior and this brief remain the protected contract.

Deliver the changed files and before/after screenshots at the same three widths.
Test the original primary link, visible keyboard focus and reduced motion.
Confirm that unchanged URLs, product facts and event names stayed unchanged.
Separate checks actually run from pending checks; report any regression.
Do not publish the site or describe this input as a verified Claude output.

Review the hero change against the original website and brief.
Compare the same 1280, 390 and 320 px views. Follow the original primary action.
Check for horizontal overflow, unreadable text, hidden content and lost focus.
Compare the protected routes, copy, facts, prices, form/API contracts and SEO tags.
If a defect remains, give its selector, viewport, expected behavior and evidence.
Repair only that defect, then repeat the same checks and list the actual results.
If you cannot run the browser or inspect a contract, mark it as pending.

Qué 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.

• ¿El Skill Frontend Design no aparece o no se activa?
• Taste Skill — diseño frontend (v2 experimental)
• Prompts de rediseño web para proyectos existentes

Ejercicio real: Fieldnote con Codex

Ejecutamos el brief original de Fieldnote con Codex y guardamos toda la salida. Esta página ficticia de notas de investigación permite comprobar el mismo brief con otro agente. El intento con Claude Code devolvió un error de inicio de sesión y no generó una página.

Registrado el 4 de octubre de 2026 con Codex CLI 0.145.0: una generación correcta, 35,92 segundos, sin herramientas de archivos ni shell. La CLI no informó el identificador del modelo. Entrada, salida y capturas se mantienen en inglés.

Comprobamos en navegador los diseños de 1280, 390 y 320 píxeles, el ancla del flujo y el enlace de salto por teclado. Hay un solo h1 y la nota está marcada como ficticia. No hay registro, precios ni testimonios. También revisamos contraste y reglas de movimiento reducido; no es una auditoría completa de accesibilidad.

Descarga la entrada completa en inglés y ejecútala en un agente autenticado. Abre el HTML en un navegador, repite los mismos anchos y enlaces, y registra los fallos antes de pedir una reparación concreta. El código conserva nuestro resultado real; otra ejecución puede verse diferente.

Es un ejercicio HTML/CSS independiente, no un caso de éxito de Claude Code ni una prueba del generador de Neruve. No se proporcionó DESIGN.md ni el Skill frontend-design. No demuestra superioridad, conversión, crecimiento SEO ni citas de IA.

DESIGN.md y SKILL.md resuelven tareas distintas

DESIGN.md de Google combina tokens YAML y explicaciones Markdown sobre su uso para describir la identidad visual. Pide explícitamente a Claude Code que lea el archivo; no se afirma detección automática ni exportación en Neruve. El formato y la CLI están en fase alpha y pueden cambiar.

Una skill de Claude Code ofrece instrucciones reutilizables en SKILL.md con frontmatter. Revisa origen, licencia y permisos antes de instalar. El archivo de identidad aporta contexto; la skill aporta un procedimiento o capacidad.

Qué ofrece Neruve hoy

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.

La referencia es un punto de partida. El resultado cambia según el modelo, herramienta y versión; los archivos y el acceso dependen del recurso y plan.

Referencias oficiales

• Claude Code
• SKILL.md
• DESIGN.md