Crear un sitio

Empieza describiendo lo que quieres crear en ChatGPT o Codex. Después, revisa la primera versión y perfecciónala sobre la marcha.

Primeros pasos con sitios

Abre ChatGPT en la web o en la aplicación de escritorio. Incluye la palabra "website" en tu prompt o menciona @Sites para iniciar el flujo de trabajo de sitios. Por ejemplo, puedes pedir un panel de solicitudes de proyectos para un equipo de operaciones:

Prompt:

Build a project request dashboard website for my operations team. Let team members submit requests, see who owns each one, update the status, and filter the list. Require people to sign in with their workspace account, and keep the request data saved between visits.

El panel es un ejemplo. Puedes adaptar el siguiente flujo al sitio que quieras crear.

1. Describe el sitio

   Dile a ChatGPT a quién va dirigido el sitio y qué quieres que hagan las personas. Comparte los documentos o datos que necesita. Para un panel de solicitudes, puedes incluir solicitudes de ejemplo, responsables y etiquetas de estado.

2. Revisa el sitio

   Prueba las acciones que pediste y compara el contenido y los resultados con tu material de origen. En el panel, puedes enviar una solicitud, cambiar su estado o filtrar por responsable. Confirma cómo usa y guarda la información el sitio.

3. Perfecciona el sitio

   Dile a ChatGPT qué quieres cambiar y comparte una captura de pantalla o un sitio de referencia si resulta útil. Para el panel, puedes pedir: «Coloca los filtros de responsable y estado encima de la lista de solicitudes».

4. Gestiona y comparte el sitio

   Vuelve a sitios para abrir o editar el sitio. Antes de publicarlo, sigue las comprobaciones de revisión y uso compartido. Elige quién puede visitarlo y comprueba el enlace publicado como uno de los visitantes previstos.

Guardar registros y progreso

Guardar una versión de un sitio conserva su contenido, diseño y comportamiento. Las solicitudes de los visitantes, las actualizaciones de estado, los archivos subidos y el progreso personal necesitan su propio almacenamiento. Dile a ChatGPT o Codex qué debe guardar y quién debe poder leerlo o cambiarlo.

Para los registros compartidos o personales, pide reglas de acceso aplicadas en el servidor. Comprueba que las actualizaciones se conserven después de recargar y usa cuentas distintas para confirmar el acceso de cada persona. Ocultar un botón no protege el registro subyacente.

Para los archivos proporcionados, especifica si el sitio debe usar una copia o actualizarse desde el origen. Comprueba cuándo se actualizó la información por última vez.

Para conocer las opciones de almacenamiento e inicio de sesión, consulta Datos y conexiones.

Consejos para crear tu sitio

• Usa tu material de origen. Adjunta los archivos, enlaces, definiciones y fórmulas que debe usar el sitio. Pide a ChatGPT o Codex que señale la información que falta en lugar de completarla.
• Describe los estados vacíos y de error. Explica qué deben ver los visitantes cuando una búsqueda no tenga coincidencias, un formulario esté incompleto o una app conectada no esté disponible. Incluye una forma de reintentar o corregir el problema.
• Comparte una referencia visual. Adjunta una captura de pantalla o un enlace a una página e indica los detalles que quieres usar, como tarjetas compactas o la ubicación de la búsqueda. Incluye los colores de marca, las fuentes o las pautas de redacción.
• Ten en cuenta los teléfonos. Describe cómo deben adaptarse las tarjetas, tablas y formularios a una pantalla estrecha. Comprueba que la navegación, los filtros y los controles de formulario sigan siendo utilizables sin desplazamiento horizontal.
• Etiqueta los datos de ejemplo. Si el contenido final no está listo, pide registros de muestra etiquetados como ejemplos. Sustitúyelos antes de compartir el sitio.
• Haz cambios específicos. Pide un cambio a la vez e indica qué debe conservarse. Por ejemplo, mueve un filtro sin cambiar los registros guardados, las reglas de acceso ni las acciones existentes. Prueba la interacción afectada después de cada cambio.

La galería de Sites muestra ejemplos de aplicaciones web que puedes crear con Sites.

Ejemplos de prompts

Para un centro de recursos, empieza con un prompt breve:

Prompt:

Build a resource hub website where project leads can search our kickoff resources by task. Use the resource list I attach. Save a version without deploying it so I can review it.

Puedes ampliar esa solicitud con acciones para los visitantes, reglas de búsqueda y preferencias de diseño:

Prompt:

Build a resource hub website for project leads preparing a kickoff. Use the resource list I attach, with its titles, descriptions, task labels, and source links.

Visitor actions:

- Choose a task, such as preparing an agenda.
- Search within that task's resources.
- Select a result to open its source link.

Search rules:

- When the search is empty, show all resources for the selected task.
- If no task is selected, show the full list.
- If there are no matches, offer a way to clear the filters and show the help contact from my list.
- Flag entries with missing titles or links for my review.
- Search filters can reset when the visitor returns.

Design preferences:

- Use a white background and dark text. Keep descriptions to one sentence, with a layout that works on a phone.
- If I provide a reference screenshot, use it for the search placement and compact resource cards.
- If I provide a brand guide, use its accent color.

Save a version without deploying it so I can review the layout and try the search.

Para un proyecto existente, pide a ChatGPT que compruebe la compatibilidad y lo prepare para publicarlo:

Prompt:

Deploy this project with sites. Check whether it is compatible, make any required changes, and give me the deployment URL.

Cuando un sitio necesite recordar registros o archivos subidos, inclúyelo en tu solicitud:

Prompt:

Add player scores and avatar uploads to this game. Keep the scores and uploaded avatars between visits.