Eine Website erstellen

Beschreiben Sie zunächst in ChatGPT oder Codex, was Sie erstellen möchten. Prüfen Sie anschließend die erste Version und verfeinern Sie sie Schritt für Schritt.

Erste Schritte mit Sites

Öffnen Sie ChatGPT im Web oder in der Desktop-App. Verwenden Sie das Wort „website“ in Ihrem Prompt oder erwähnen Sie @Sites, um den Sites-Workflow zu starten. Sie könnten beispielsweise ein Dashboard für Projektanfragen für ein Betriebsteam anfordern:

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.

Das Dashboard ist ein Beispiel. Sie können den folgenden Ablauf an die Website anpassen, die Sie erstellen möchten.

1. Beschreiben Sie die Website

   Teilen Sie ChatGPT mit, für wen die Website gedacht ist und was die Besucher dort tun sollen. Stellen Sie die benötigten Dokumente oder Daten bereit. Für ein Anfrage-Dashboard könnten Sie Beispielanfragen, zuständige Personen und Statusbezeichnungen angeben.

2. Prüfen Sie die Website

   Probieren Sie die angeforderten Aktionen aus und gleichen Sie die Inhalte und Ergebnisse mit Ihrem Ausgangsmaterial ab. Beim Dashboard könnten Sie eine Anfrage einreichen, ihren Status ändern oder nach zuständiger Person filtern. Prüfen Sie, wie die Website Informationen verwendet und speichert.

3. Verfeinern Sie die Website

   Teilen Sie ChatGPT mit, was Sie ändern möchten, und stellen Sie bei Bedarf einen Screenshot oder eine Referenzwebsite bereit. Beim Dashboard könnten Sie beispielsweise darum bitten: „Platzieren Sie die Filter für zuständige Personen und Status oberhalb der Anfrageliste.“

4. Verwalten und teilen Sie die Website

   Kehren Sie zu Sites zurück, um die Website erneut zu öffnen oder zu bearbeiten. Führen Sie vor der Veröffentlichung die Prüfungen vor der Freigabe durch. Legen Sie fest, wer die Website besuchen darf, und prüfen Sie den veröffentlichten Link aus Sicht eines vorgesehenen Besuchers.

Datensätze und Fortschritt speichern

Wenn Sie eine Website-Version speichern, bleiben deren Inhalt, Design und Verhalten erhalten. Besucheranfragen, Statusaktualisierungen, hochgeladene Dateien und persönlicher Fortschritt benötigen einen eigenen Speicher. Teilen Sie ChatGPT oder Codex mit, was gespeichert werden soll und wer es lesen oder ändern darf.

Fordern Sie für gemeinsame oder persönliche Datensätze Zugriffsregeln an, die auf dem Server durchgesetzt werden. Prüfen Sie, ob Aktualisierungen nach dem Neuladen gespeichert bleiben, und verwenden Sie separate Konten, um den Zugriff jeder Person zu überprüfen. Das Ausblenden einer Schaltfläche schützt den zugrunde liegenden Datensatz nicht.

Geben Sie bei bereitgestellten Dateien an, ob die Website eine Kopie verwenden oder die Daten aus der Quelle aktualisieren soll. Prüfen Sie, wann die Informationen zuletzt aktualisiert wurden.

Informationen zu Speicher- und Anmeldeoptionen finden Sie unter Daten und Verbindungen.

Tipps zum Erstellen Ihrer Website

• Verwenden Sie Ihr Ausgangsmaterial. Fügen Sie die Dateien, Links, Definitionen und Formeln bei, die die Website verwenden soll. Bitten Sie ChatGPT oder Codex, fehlende Informationen zu kennzeichnen, statt sie zu ergänzen.
• Beschreiben Sie Leer- und Fehlerzustände. Erläutern Sie, was Besucher sehen sollen, wenn eine Suche keine Treffer liefert, ein Formular unvollständig ist oder eine verbundene App nicht verfügbar ist. Sehen Sie eine Möglichkeit vor, den Vorgang zu wiederholen oder das Problem zu beheben.
• Teilen Sie eine visuelle Referenz. Fügen Sie einen Screenshot oder einen Link zu einer Seite bei und weisen Sie auf die Details hin, die Sie übernehmen möchten, etwa kompakte Karten oder die Platzierung der Suche. Geben Sie auch Markenfarben, Schriftarten oder Schreibrichtlinien an.
• Planen Sie für Smartphones. Beschreiben Sie, wie Karten, Tabellen und Formulare auf einen schmalen Bildschirm passen sollen. Prüfen Sie, ob Navigation, Filter und Formularelemente ohne horizontales Scrollen bedienbar bleiben.
• Kennzeichnen Sie Beispieldaten. Wenn die endgültigen Inhalte noch nicht vorliegen, bitten Sie um Datensätze, die als Beispiele gekennzeichnet sind. Ersetzen Sie diese, bevor Sie die Website teilen.
• Nehmen Sie gezielte Änderungen vor. Fordern Sie jeweils eine Änderung an und geben Sie an, was beibehalten werden soll. Verschieben Sie beispielsweise einen Filter, ohne die gespeicherten Datensätze, Zugriffsregeln oder vorhandenen Aktionen zu ändern. Testen Sie nach jeder Änderung die betroffene Interaktion.

Die Sites-Beispielsammlung zeigt Web-Apps, die Sie mit Sites erstellen könnten.

Beispiel-Prompts

Beginnen Sie für ein Ressourcenportal mit einem kurzen Prompt:

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.

Sie könnten diese Anfrage um Besucheraktionen, Suchregeln und Designwünsche erweitern:

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.

Bitten Sie ChatGPT bei einem vorhandenen Projekt, die Kompatibilität zu prüfen und es für die Veröffentlichung vorzubereiten:

Prompt:

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

Wenn eine Website Datensätze oder hochgeladene Dateien speichern muss, geben Sie dies in Ihrer Anfrage an:

Prompt:

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