Prompts web de Claude Design y entrega a código

Elige el entregable de diseño

Solicita un diseño web, prototipo o revisión y define el dispositivo. Consulta los flujos actuales de Claude Design en la documentación de Anthropic y las funciones de tu cuenta. Un botón dibujado no es una ruta ni un servicio conectado.

Aporta contenido y sistema de diseño

Incluye público, objetivo, secciones, destinos de acciones y textos reales. Adjunta el sistema de diseño y los recursos disponibles. Pide escritorio y móvil, jerarquía legible y contenido provisional identificado, sin logotipos ni métricas inventadas.

Revisa una sección cada vez

Señala sección, ancho y problema, junto con el contenido y las reglas que deben mantenerse. Distingue las interacciones que realmente puedes probar del comportamiento solo descrito. Comprueba el resultado antes de pedir el siguiente cambio.

Prepara la entrega para implementación

Entrega archivos de diseño, recursos, brief y estados pendientes. Pide inspeccionar el proyecto e informar dependencias faltantes. Conserva hechos y contratos del backend; verifica rutas, acciones, teclado y diseños móviles reales.

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.

Create a website design for Fieldnote, a fictional research-notes app.
Audience: small product teams. Goal: explain collect → compare → decide.
Use a warm-paper and ink direction; show one clearly fictional note specimen.
Include an introduction, specimen, three-step workflow and closing action.
The action is “Explore the workflow”; the intended destination is #workflow.
Show desktop and 390 px layouts. Keep note details readable on mobile.
Distinguish a designed control from an implemented interaction.
Do not invent signup, prices, testimonials, customer logos or product metrics.
If using a supplied design system, preserve its typography and component rules.
List open interaction and content decisions before handing the design to code.

Implement the approved Fieldnote design in the current project.
First inspect its framework, routes, components and assets.
Use the actual available design files plus this brief, not only a screenshot.
Keep the supplied copy, semantic hierarchy and #workflow destination.
Preserve backend contracts and authentication; add no signup or payment service.
Record which design elements are implemented and which remain visual placeholders.
Check desktop, 390 and 320 px layouts, the workflow link and keyboard navigation.
Return changed files and actual check results. If design import or assets are
unavailable, name that dependency rather than claiming a completed handoff.

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.

Preguntas frecuentes

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.

• Explorar biblioteca
• Plantillas HTML de landing para SaaS y prompts
• Plantillas web de portafolio y prompts de diseño

Referencias oficiales

• Anthropic · Claude Design
• Anthropic · Prototypes and UX

Las herramientas y skills externas pertenecen a sus autores. Los enlaces son referencias; no implican colaboración ni acceso incluido.