Prompts de diseño web para ChatGPT

Entrega un brief completo

Especifica público, propósito, secciones, textos y acción principal. Describe unas pocas decisiones visuales concretas. Conserva hechos, precios y enlaces; pide que se señale la información faltante en lugar de inventar testimonios o funciones.

Solicita archivos y revisa la vista previa disponible

Pide nombres de archivo e instrucciones para abrirlos. OpenAI documenta vistas previas HTML en el visor cuando están disponibles. Si recibes código, guárdalo y ábrelo localmente. Sites es un flujo separado de creación y alojamiento; un prompt no publica el sitio por sí solo.

Corrige un problema visible

Indica ancho, sección y resultado esperado. Por ejemplo, corrige una nota que se desborda a 320 píxeles sin cambiar la tipografía de escritorio ni los enlaces. Abre el archivo modificado: explicar un cambio de CSS no equivale a verificarlo en un navegador.

Entrega archivos y limitaciones

Pasa archivos reales, brief, recursos y problemas pendientes al agente de código. Debe inspeccionar el framework y las rutas, conservar autenticación, precios y contratos del backend, y comprobar la acción, el móvil y el teclado en el proyecto real.

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 an original website brief for Fieldnote, a fictional research-notes app.
Audience: small product teams. Explain collect → compare → decide.
Output: one self-contained HTML/CSS file if your current tools can create files;
otherwise provide complete code and explain how to open it locally.
Use warm paper, ink text and one clearly fictional research-note specimen.
Sections: introduction, specimen, three-step workflow and a closing workflow link.
The primary action is “Explore the workflow” and targets #workflow.
Include semantic headings, a skip link, visible focus and reduced motion.
Support 1280, 390 and 320 px. Do not add signup, prices, customer logos or metrics.
List the output files and the checks actually performed.

Review the current Fieldnote output. At 320 px, the note specimen extends
beyond the viewport. First identify the specific element and sizing rule.
Change only the specimen layout; preserve desktop typography, all copy and links.
Use wrapping or responsive sizing instead of hiding content or clipping the page.
Return the changed file, then repeat 320, 390 and 1280 px checks.
If you cannot open the result in a browser, mark those checks as not performed.
Do not describe proposed CSS as a verified fix.

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

• OpenAI · Files and previews
• OpenAI · Sites

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