Crea un prototipo interactivo
Empieza con la plantilla integrada OpenDesign Landing, personalízala y comprueba la página real antes de entregarla. También puedes crear un nuevo Prototype a partir de un briefing.
Paso 1 — Abre la plantilla
Abre Community y elige OpenDesign Landing. Revisa la vista previa, abre More ways to Use y elige Remix para crear un proyecto editable a partir del ejemplo. Use comienza a partir del prompt de ejemplo; Remix copia el ejemplo en un proyecto que puedes editar.
La plantilla es un diseño de muestra. Todas las versiones, cifras, recomendaciones y enlaces que contiene son contenido de ejemplo; revísalos y sustitúyelos antes de usarla para un producto real.
Paso 2 — Dale a la página un propósito claro
Abre index.html desde Design Files. Preview muestra la página y Code muestra su código fuente. Decide qué conservar de la plantilla: su tipografía editorial, el fondo cálido de papel, el collage y el ritmo de las secciones. Haz una lista de los datos del producto, las llamadas a la acción y los destinos que vas a sustituir.
Adapta esta página de destino para un estudio de diseño independiente ficticio. Conserva el papel cálido, los detalles en coral, la tipografía editorial y el collage. Sustituye el contenido del hero, los servicios, los trabajos seleccionados y el contacto por contenido de muestra claramente ficticio. Haz que la navegación lleve a la sección correcta; usa destinos de marcador de posición en lugar de flujos reales de cuenta o pago. Comprueba la versión de escritorio y la versión móvil de 390px. Entrega el HTML editable y los recursos a los que hace referencia.Este es un briefing de ejemplo que puedes adaptar, no una afirmación de que las capturas de pantalla se hayan generado a partir de él. Para crear un proyecto en blanco, elige Prototype en Home, completa la configuración de la IA y envía tu briefing con referencias.
Paso 3 — Haz una pequeña edición directa
Elige Edit, selecciona la palabra de énfasis en cursiva del hero y cambia su Text de taste, a craft,. Elige Save. Sal del modo de edición y vuelve a cargar la página: el encabezado debería seguir mostrando craft,. La guía de edición del lienzo explica la tipografía, el color, el tamaño, el espaciado y cómo deshacer cambios.
Paso 4 — Comprueba otra ventana gráfica
Usa el menú Desktop situado encima del lienzo para elegir Mobile (390 × 844) o Tablet (820 × 1180). Comprueba los saltos de línea, la navegación, el espaciado, el recorte de las imágenes y las áreas táctiles. Esto cambia el tamaño de la vista previa, pero no corrige automáticamente el diseño.
Paso 5 — Solicita una revisión específica
Usa Comment para adjuntar una solicitud a un elemento o Mark para enviar una captura de pantalla y una nota. Por ejemplo: «Haz que esta palabra de énfasis sea de color coral. Mantén su fuente en cursiva, su tamaño y su posición». Guardar un comentario no ejecuta el agente. Revisa los comentarios seleccionados antes de elegir Send to chat. Consulta las herramientas de comentarios.
Paso 6 — Prueba y entrega
Sal de Edit, Comment y Mark antes de probar la navegación y los botones. Comprueba el enlace y el destino de cada sección y, después, usa Export para elegir PDF, imagen, ZIP o HTML independiente, según estén disponibles. Conserva los recursos referenciados y abre la entrega fuera del cliente antes de considerarla terminada. Archivos y versiones del proyecto y uso compartido explican las demás opciones de entrega.
Si Preview está en blanco
Espera a que se cargue la vista previa y elige Reload Preview. Usa Code para confirmar que el archivo tiene contenido. Si sigue en blanco, vuelve a abrirlo desde Design Files o exporta el HTML y ábrelo en un navegador junto con sus recursos. Si funciona fuera del cliente pero falla dentro, informa de la versión de la aplicación, el archivo afectado y el error.