Interaktiven Prototyp erstellen
Beginne mit der integrierten Vorlage OpenDesign Landing, passe sie an und prüfe die echte Seite vor der Übergabe. Du kannst auch anhand eines Briefings einen neuen Prototype beginnen.
Schritt 1 — Vorlage öffnen
Öffne Community und wähle OpenDesign Landing. Prüfe die Vorschau, öffne dann More ways to Use und wähle Remix, um aus dem Beispiel ein bearbeitbares Projekt zu erstellen. Use beginnt mit dem Beispiel-Prompt; Remix kopiert das Beispiel in ein Projekt, das du bearbeiten kannst.
Die Vorlage ist ein Beispieldesign. Alle darin enthaltenen Versionen, Zahlen, Testimonials und Links sind Beispielinhalte. Prüfe und ersetze sie, bevor du die Vorlage für ein echtes Produkt verwendest.
Schritt 2 — Der Seite einen klaren Zweck geben
Öffne index.html unter Design Files. Preview zeigt die Seite und Code ihren Quellcode. Entscheide, was du aus der Vorlage übernehmen möchtest: die redaktionelle Typografie, den warmen Papierhintergrund, die Collage und den Rhythmus der Abschnitte. Liste die Produktinformationen, Handlungsaufforderungen und Ziele auf, die du ersetzen wirst.
Passe diese Landingpage für ein fiktives unabhängiges Designstudio an. Behalte das warme Papier, die korallfarbenen Akzente, die redaktionelle Typografie und die Collage bei. Ersetze den Hero-Bereich, die Dienstleistungen, ausgewählte Arbeiten und den Kontakttext durch eindeutig fiktive Beispielinhalte. Sorge dafür, dass die Navigation zum richtigen Abschnitt führt; verwende Platzhalterziele statt echter Konto- oder Zahlungsabläufe. Prüfe die Desktop-Ansicht und die mobile Ansicht mit 390px. Liefere bearbeitbares HTML und die darin referenzierten Assets.Dies ist ein Beispiel-Briefing, das du anpassen kannst, und keine Behauptung, dass die Screenshots daraus generiert wurden. Wähle für ein leeres Projekt auf Home die Option Prototype, schließe die KI-Einrichtung ab und sende dein Briefing mit Referenzen.
Schritt 3 — Eine kleine direkte Änderung vornehmen
Wähle Edit, markiere das kursive Akzentwort im Hero-Bereich und ändere seinen Text unter Text von taste, in craft,. Wähle Save. Verlasse den Bearbeitungsmodus und lade die Seite neu: In der Überschrift sollte weiterhin craft, stehen. Der Leitfaden zur Canvas-Bearbeitung erläutert Typografie, Farbe, Größe, Abstände und das Rückgängigmachen.
Schritt 4 — Einen weiteren Viewport prüfen
Verwende das Menü Desktop oberhalb der Arbeitsfläche, um Mobile (390 × 844) oder Tablet (820 × 1180) auszuwählen. Prüfe Zeilenumbrüche, Navigation, Abstände, Bildzuschnitt und Touch-Ziele. Dadurch ändert sich die Vorschaugröße; das Design wird nicht automatisch korrigiert.
Schritt 5 — Eine gezielte Überarbeitung anfordern
Verwende Comment, um einem Element eine Anfrage hinzuzufügen, oder Mark, um einen Screenshot und eine Notiz zu senden. Zum Beispiel: „Färbe dieses Akzentwort korallfarben. Behalte die kursive Schriftart, Größe und Position bei.“ Das Speichern eines Kommentars führt den Agenten nicht aus. Prüfe das ausgewählte Feedback, bevor du Send to chat wählst. Siehe Feedback-Werkzeuge.
Schritt 6 — Testen und übergeben
Beende Edit, Comment und Mark, bevor du Navigation und Schaltflächen testest. Prüfe jeden Abschnittslink und jedes Ziel. Verwende dann Export, um je nach Verfügbarkeit PDF, Bild, ZIP oder eigenständiges HTML auszuwählen. Behalte referenzierte Assets bei und öffne die übergebenen Dateien außerhalb des Clients, bevor du sie als fertig betrachtest. Projektdateien und Versionen sowie Freigabe beschreiben die anderen Übergabewege.
Wenn Preview leer ist
Warte, bis die Vorschau geladen ist, und wähle dann Reload Preview. Verwende Code, um zu bestätigen, dass die Datei Inhalt enthält. Wenn sie weiterhin leer bleibt, öffne sie erneut über Design Files oder exportiere das HTML und öffne es zusammen mit seinen Assets in einem Browser. Melde die App-Version, die betroffene Datei und den Fehler, wenn sie außerhalb des Clients funktioniert, aber innerhalb des Clients fehlschlägt.