Prompts de diseño web para Stitch: SaaS y portfolios

Dar a Stitch una tarea web concreta

Define público, objetivo, orden de secciones y acción principal antes de los adornos. Aporta textos reales y recursos permitidos; identifica los marcadores provisionales. Elige entre landing page, portfolio o pantalla de apoyo para evitar mezclar recorridos distintos.

Prompts SaaS que explican la propuesta

Explica el problema, un ejemplo de producto y la secuencia de uso con funciones y condiciones comprobadas. Fieldnote utiliza una nota ficticia y un enlace al proceso, sin testimonios inventados, cifras de clientes ni formularios de registro funcionales.

Prompts de portfolio con contexto de proyectos

Describe rol, restricción y resultado ilustrativo de cada proyecto. Mantén su explicación cerca de la imagen en móvil y marca los recursos provisionales. Mira es un portfolio web ficticio, no un currículum, plantilla de Notion o recomendación real.

Ajustar móvil y comprobar la implementación

Solicita un cambio en una sección concreta y conserva el resto de la dirección. Revisa orden de lectura, saltos de línea y etiquetas. Al convertir el concepto en un sitio, verifica navegación, formularios, tamaños y contenido: el concepto no acredita funcionamiento en producción.

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.

Design a website concept for Fieldnote, a fictional research-notes workspace.
Audience: small product teams. The page explains collect → compare → decide.
Create a warm-paper and ink direction with one realistic, clearly fictional note.
Sections: compact introduction, note specimen, three-step workflow and a final
link to the workflow. The primary action reads “Explore the workflow”.
Keep typography and button treatments consistent across the screens.
Create desktop and narrow-screen variants with readable copy and no horizontal
overflow. Do not add signup forms, prices, logos, testimonials or user counts.
This is a visual concept. Identify which interactions need implementation later.

Create a website concept for Mira Chen, a fictional product designer.
Show three explicitly fictional projects. Each explains role, constraint and
illustrative outcome without fabricated business metrics or employer logos.
Use a restrained warm-neutral direction, clear project hierarchy and readable
image captions. The primary action is “View selected work”.
Show desktop and narrow-screen layouts; on mobile, keep project details near
their corresponding image. Use placeholder media labelled as placeholder.
Do not invent real contact details, awards or working application forms.

Refine only the mobile project section in this concept.
Keep the selected palette, typography, project order and desktop direction.
At 390 px, stack each project image, title and supporting text in reading order.
Keep controls easy to distinguish from captions. Do not shorten the project facts
or add new sections. Show the changed section and list what still needs to be
implemented and checked in the exported website.

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

• Google · Stitch
• Google · DESIGN.md

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