Crear páginas web con AI Studio

Cree una página de destino, un resumen de una página, una ficha de producto o una vista previa social; pruebe el resultado interactivo y decida quién puede abrirlo.

Un documento puede describir una página de destino. Una imagen puede mostrar un fotograma. Ninguno permite al revisor comprobar qué ocurre al abrir la página, cómo se percibe la jerarquía en un teléfono o si la llamada a la acción sigue siendo evidente después del primer desplazamiento.

Elija Página web cuando la experiencia sea el propio borrador. AI Studio crea un objeto con una vista previa interactiva en el lienzo, de modo que pueda abrir, probar y revisar la página junto a sus fuentes, y compartirla como vista previa independiente cuando esté lista.

Resumen

Abra un lienzo editable, elija Página web y seleccione las fuentes que debe utilizar. Escoja un Estilo y describa en la indicación el público, el objetivo, las secciones y la acción principal; después, seleccione Enviar. Abra Vista previa, pruebe las vistas de escritorio y móvil, y revise cada afirmación y enlace. Si alguien ajeno al lienzo debe abrirla, el propietario puede elegir Compartir vista previa, activar Enlace público y seleccionar Copiar enlace.

Elija una página web cuando haya una experiencia que revisar

Las páginas web de AI Studio sirven para prototipos, revisiones con clientes, conceptos de campaña, resúmenes interactivos de una página y otros trabajos que necesitan abrirse, no solo describirse.

Lo que necesitaElijaPor qué
Texto editable, investigación o un brief estructuradoDocumentoLas palabras son el entregable.
Una comparación, un seguimiento o una cuadrícula de datosTablaLas filas y columnas contienen la lógica.
Una pieza visual o composición estáticaImagenUn solo fotograma basta para revisar la idea.
Una actualización o historia narradaArchivo de audioEscuchar forma parte de la entrega.
Una página que otras personas deban abrir, recorrer, pulsar y probarPágina webEl diseño y la interacción forman parte del resultado.

Una página generada es un artefacto de vista previa, no el alojamiento de su sitio web de producción ni un sistema de gestión de contenidos. Úsela para acordar la dirección y recoger comentarios. Traslade el texto, los medios, la analítica, los formularios, los textos legales y las integraciones aprobadas al sistema que gestione el sitio definitivo.

Compruebe el acceso antes de empezar

ElementoDetalles
Disponible enLienzos editables y no incrustados de las aplicaciones web y de escritorio.
Quién puede generarMiembros del espacio de trabajo con acceso de edición al lienzo.
Quién puede abrir la vista previa desde el lienzoPersonas que puedan leer el objeto terminado.
Quién puede crear un enlace públicoEl propietario de la sesión de la página generada.
Qué inicia el trabajoUna comprobación correcta de los créditos de IA del espacio de trabajo al enviar.
En qué se convierte el resultadoUn objeto con una vista previa interactiva en el lienzo actual.

Los invitados, colaboradores externos y personas con acceso de solo lectura o solo comentarios no pueden generar una página nueva. Sí pueden revisar el objeto terminado cuando sus permisos del lienzo se lo permitan.

Cree la página a partir del lienzo

  1. Abra el lienzo donde deben quedar el brief, las referencias y la página generada.
  2. Seleccione las notas, imágenes, archivos, tablas o resultados anteriores que deben servir de base.
  3. En AI Studio, elija Página web.
  4. Elija un Estilo.
  5. Escriba la indicación. Defina el público, el objetivo de la página, la acción principal, las secciones obligatorias, los límites de las fuentes y cualquier prioridad de dispositivo o plataforma.
  6. Adjunte archivos o pegue enlaces HTTPS si las fuentes aún no están en el lienzo. Espere a que terminen las subidas.
  7. Seleccione Enviar. El objeto muestra el estado de generación mientras AI Studio investiga, dirige y construye la página.
  8. Abra Vista previa cuando el objeto esté listo.

Este recorrido muestra cómo el material seleccionado del lienzo se convierte en una página web y cómo se abre el resultado para revisarlo y compartirlo.

El resultado permanece en el lienzo como una tarjeta con título, descripción, miniatura y acceso a la vista previa. Déjelo junto al brief y las referencias durante la revisión. Así, las pruebas que sustentan la página siguen visibles y el enlace no queda aislado de su contexto.

Elija el estilo según el trabajo de la página

EstiloÚselo cuandoDirección de la página
AutoConoce el resultado, pero no necesita imponer el formato.AI Studio elige el tratamiento a partir de la indicación y las fuentes.
Página de destinoUn visitante nuevo debe entender la propuesta y realizar una acción principal.Encabezado principal, propuesta de valor, pruebas o señales de confianza, secuencia de secciones y llamadas a la acción claras.
Resumen de una páginaUn brief, propuesta, resumen de lanzamiento o actualización ejecutiva debe caber en una página compacta.Secciones fáciles de recorrer, jerarquía clara, datos clave y pocas digresiones.
Detalle de productoUn concepto de producto necesita una revisión orientada a la compra.Imágenes del producto, título y precio, variantes, envíos y devoluciones, pruebas y jerarquía de compra.
Vista previa socialUna publicación de campaña debe parecerse a la red social donde aparecerá.Una maqueta realista y pensada para móvil, con cuenta, contenido, acción, texto y datos temporales reconocibles.

Si la indicación menciona una sola plataforma social, Vista previa social se centra en ella. Pida una comparación multiplataforma solo cuando necesite varios tratamientos en un mismo resultado.

No elija Página de destino para cualquier página de aspecto cuidado. Una actualización de cinco secciones suele ser un Resumen de una página. Un lanzamiento con galería, opciones, envío y pruebas de compra corresponde a Detalle de producto. Elegir bien evita una ronda de eliminación de secciones innecesarias.

Entregue un brief de verdad

El creador puede usar imágenes seleccionadas o adjuntas, archivos, PDF, contexto de audio o vídeo, tablas, objetos de texto y enlaces web accesibles. Las imágenes sirven de referencia visual; los documentos, transcripciones, tablas y textos aportan la base para la estructura y el contenido.

EntradaÚsela para
Objetos seleccionados del lienzoMantener la página conectada con el brief, el texto aprobado, las tablas y las referencias visuales que ya se revisan.
Imágenes adjuntasAportar fotos de producto, piezas de campaña, logotipos o referencias de diseño que aún no están en el lienzo.
Documentos y medios adjuntosAportar datos, especificaciones, entrevistas, transcripciones o un brief existente.
Enlaces HTTPSAñadir páginas públicas y material de referencia al que el servicio pueda acceder.
IndicaciónDefinir el público, la función de la página, el orden del mensaje, las llamadas a la acción, los datos obligatorios y los límites.

La indicación más eficaz se parece a un pequeño brief creativo:

Crea una página de Detalle de producto para el concepto de cuidado facial seleccionado. Usa la imagen seleccionada como elemento visual principal. Público: clientes nuevos con piel sensible. Incluye beneficios, ingredientes, modo de uso, envíos y devoluciones, tres espacios para reseñas y una acción Añadir al carrito. Mantén sin cambios el precio y las afirmaciones proporcionadas. No inventes certificaciones.

Esta indicación separa las decisiones de diseño de los permisos sobre los hechos. La página puede tomar decisiones visuales firmes sin salirse de las pruebas aportadas.

Entienda el objeto de vista previa interactiva

El objeto generado no es un enlace genérico pegado en el lienzo. La acción Vista previa abre la página en un visor específico, la mantiene conectada con sus versiones generadas y ofrece vistas de escritorio, móvil y código para revisarla.

Use la vista previa para responder a cuatro preguntas:

  1. ¿La primera pantalla explica la página sin depender del brief que tiene al lado?
  2. ¿La acción principal sigue clara después del primer desplazamiento?
  3. ¿La vista móvil conserva la jerarquía en lugar de limitarse a reducirla?
  4. ¿Los enlaces, controles, medios y secciones interactivas hacen lo que promete el texto?

La página puede cargar imágenes, fuentes, scripts, vídeos y otros recursos HTTPS externos. Sus propietarios pueden bloquearlos, retirarlos o modificarlos. Vuelva a probar cualquier vista previa que dependa de ellos antes de una revisión con clientes. Sustituya los recursos externos frágiles en la implementación de producción.

Revise la página antes de enviar el enlace

Abra la página y compruebe:

ComprobaciónQué debe revisar
MensajeLa propuesta de valor, el público y la acción principal coinciden con el brief.
DatosNombres, precios, fechas, especificaciones, afirmaciones y referencias coinciden con las fuentes.
Escritorio y móvilLas secciones mantienen su legibilidad, orden y utilidad en ambos anchos.
Enlaces y controlesCada acción visible lleva al destino correcto o se presenta claramente como prototipo.
MediosLas imágenes cargan, los recortes funcionan y no se ha incorporado material privado o sin licencia.
MetadatosEl título, la descripción y la miniatura del lienzo identifican la versión correcta.
Contenido sensibleSe han eliminado notas internas, datos de clientes, borradores legales y promesas sin respaldo.

Use comentarios en el objeto del lienzo para las decisiones humanas. Use el acceso de IA de la página para pedir una revisión o crítica concreta. Aunque una vista previa parezca terminada, una persona responsable debe aprobar sus afirmaciones.

Comparta la vista previa con el público adecuado

Solo el propietario de la página controla su enlace público.

  1. Abra la vista previa de la página generada.
  2. Seleccione Compartir vista previa.
  3. Active Enlace público cuando cualquier persona con el enlace deba poder abrirla.
  4. Seleccione Copiar enlace y envíelo solo cuando la página haya superado la revisión.

Si Enlace público está desactivado, solo las personas con acceso al lienzo pueden abrir la vista previa. Si está activado, cualquiera que tenga el enlace puede abrir la última vista previa publicada. Desactivar el acceso público impide futuras aperturas públicas, pero no borra copias, capturas ni información que alguien ya haya recibido.

Si los revisores también necesitan las fuentes, comparta el lienzo en lugar de enviar únicamente la vista previa. La vista previa muestra el resultado. El lienzo explica por qué existe.

Deje que termine la generación antes de repetirla

Crear una página web tarda más que generar un Documento breve porque AI Studio prepara las fuentes, planifica la experiencia, crea o elige los elementos visuales, construye la página y guarda la vista previa. El objeto en procesamiento muestra el estado real de la tarea.

Puede salir del lienzo una vez aceptada la solicitud. Vuelva al mismo objeto en lugar de enviar un duplicado. Eliminar el objeto en procesamiento cancela la tarea del lienzo, pero no garantiza que el trabajo ya realizado deje de cobrarse. Eliminar una página terminada nunca devuelve créditos.

El Estilo no muestra un coste fijo para las páginas web. El consumo refleja las fuentes y el trabajo realizado. Consulte el historial de créditos de IA después de la generación y revise una página cercana al resultado en lugar de reconstruirla por un pequeño cambio de texto.

Cuando la vista previa no funciona como espera

La tarjeta sigue procesándose. Deje el objeto original en su sitio y vuelva más tarde. Actualice el lienzo una vez antes de decidir que se ha bloqueado.

No aparece la vista previa. La generación sigue pendiente, falló, se eliminó o no terminó como un resultado compatible con vista previa. No cree un duplicado hasta comprobar el objeto original y el estado de los créditos.

La vista previa funciona, pero la tarjeta tiene un título o una miniatura genéricos. Actualice el lienzo. Si el título, la descripción o la miniatura siguen siendo incorrectos, póngase en contacto con soporte e incluya el enlace del lienzo, el tipo de resultado y la hora aproximada de finalización.

Falla un enlace, una imagen, una fuente o una sección interactiva. Compruebe si el recurso externo sigue cargando directamente y si exige iniciar sesión. Sustituya los recursos privados o inestables y, después, guarde otra versión o vuelva a generar a partir de fuentes accesibles.

La página tiene un formato incorrecto. Elija el Estilo exacto y describa en la indicación la estructura necesaria. Por ejemplo, una página de detalle de producto debe incluir galería, variantes, precio, envío, pruebas y acción de compra.

El enlace público no funciona para alguien ajeno al lienzo. El propietario debe activar Enlace público. Copiar la URL no cambia la política de acceso.

La página hace afirmaciones sin respaldo. Corrija las fuentes y la indicación y, después, edite o vuelva a generar una vez. Una vista previa convincente no es una prueba. Consulte Cuando el resultado de IA no es correcto.

La página sigue bloqueada después de actualizar. Póngase en contacto con soporte e incluya el nombre del espacio de trabajo, el enlace del lienzo, el tipo de resultado, la hora aproximada de envío, un resumen de la indicación, los tipos de archivos adjuntos y si los créditos se bloquearon o consumieron. No envíe contraseñas, credenciales privadas ni datos de clientes innecesarios.

Enviar feedback

¿Te resultó útil este artículo?