Créer un site

Commencez par décrire ce que vous souhaitez créer dans ChatGPT ou Codex. Examinez ensuite la première version et affinez-la au fur et à mesure.

Premiers pas avec Sites

Ouvrez ChatGPT sur le web ou dans l’application de bureau. Incluez le mot « website » dans votre prompt ou mentionnez @Sites pour lancer le processus de création de site. Par exemple, vous pouvez demander un tableau de bord des demandes de projet pour une équipe opérationnelle :

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.

Le tableau de bord est un exemple parmi d’autres. Vous pouvez adapter le processus suivant au site que vous souhaitez créer.

1. Décrivez le site

   Indiquez à ChatGPT à qui s’adresse le site et ce que vous souhaitez que les visiteurs puissent y faire. Partagez les documents ou les données nécessaires. Pour un tableau de bord des demandes, vous pouvez inclure des exemples de demandes, des responsables et des libellés de statut.

2. Examinez le site

   Essayez les actions demandées et vérifiez le contenu et les résultats par rapport à vos sources. Pour le tableau de bord, vous pouvez soumettre une demande, modifier son statut ou filtrer par responsable. Vérifiez comment le site utilise et enregistre les informations.

3. Affinez le site

   Indiquez à ChatGPT ce que vous souhaitez modifier et partagez une capture d’écran ou un site de référence si cela peut être utile. Pour le tableau de bord, vous pouvez demander : « Placez les filtres de responsable et de statut au-dessus de la liste des demandes. »

4. Gérez et partagez le site

   Revenez dans sites pour rouvrir ou modifier le site. Avant de le publier, effectuez les vérifications avant publication et partage. Choisissez qui peut le consulter et testez le lien publié en vous plaçant dans la situation d’un visiteur prévu.

Enregistrer les données et la progression

L’enregistrement d’une version du site conserve son contenu, son apparence et son comportement. Les demandes des visiteurs, les mises à jour de statut, les fichiers importés et la progression personnelle nécessitent leur propre stockage. Indiquez à ChatGPT ou Codex ce qu’il faut enregistrer et qui doit pouvoir lire ou modifier ces informations.

Pour les données partagées ou personnelles, demandez des règles d’accès appliquées côté serveur. Vérifiez que les mises à jour sont conservées après le rechargement et utilisez des comptes distincts pour confirmer les accès de chaque personne. Masquer un bouton ne protège pas les données sous-jacentes.

Pour les fichiers fournis, précisez si le site doit utiliser une copie ou actualiser les données depuis la source. Vérifiez la date de dernière mise à jour des informations.

Pour les options de stockage et de connexion, consultez Données et connexions.

Conseils pour créer votre site

• Utilisez vos sources. Joignez les fichiers, liens, définitions et formules que le site doit utiliser. Demandez à ChatGPT ou Codex de signaler les informations manquantes au lieu de les inventer.
• Décrivez les états vides et les erreurs. Expliquez ce que les visiteurs doivent voir lorsqu’une recherche ne donne aucun résultat, qu’un formulaire est incomplet ou qu’une application connectée est indisponible. Prévoyez un moyen de réessayer ou de corriger le problème.
• Partagez une référence visuelle. Joignez une capture d’écran ou un lien vers une page et précisez les détails que vous souhaitez reprendre, comme des cartes compactes ou l’emplacement de la recherche. Incluez les couleurs de marque, les polices et les consignes rédactionnelles éventuelles.
• Pensez aux téléphones. Décrivez comment les cartes, les tableaux et les formulaires doivent s’adapter à un écran étroit. Vérifiez que la navigation, les filtres et les commandes des formulaires restent utilisables sans défilement horizontal.
• Identifiez les données d’exemple. Si le contenu définitif n’est pas prêt, demandez des données clairement signalées comme exemples. Remplacez-les avant de partager le site.
• Effectuez des modifications ciblées. Demandez une seule modification à la fois et précisez ce qu’il faut conserver. Par exemple, déplacez un filtre sans modifier les données enregistrées, les règles d’accès ou les actions existantes. Testez l’interaction concernée après chaque modification.

La galerie Sites présente des exemples d’applications web que vous pouvez créer avec Sites.

Exemples de prompts

Pour un portail de ressources, commencez par un prompt court :

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.

Vous pouvez compléter cette demande avec les actions des visiteurs, les règles de recherche et vos préférences de conception :

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.

Pour un projet existant, demandez à ChatGPT de vérifier sa compatibilité et de le préparer à la publication :

Prompt :

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

Si un site doit conserver des données ou des fichiers importés, précisez-le dans votre demande :

Prompt :

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