Drei Lernpfade. Jeder endet mit einer Datei, die du ausfüllen oder mit deiner erstellten Seite vergleichen kannst.
Die erste nützliche KI-Seite
Für Gründer mit einem groben Angebot, aber noch keiner Seite.
Bevor du beginnst: Du kannst das Unternehmen, sein Angebot und eine gewünschte Besucheraktion benennen. Ein Designsystem brauchst du noch nicht.
Am Ende hast du: Ein einseitiges Briefing, das eine andere Person prüfen und einem Agenten geben kann, ohne dass er das Unternehmen erfinden muss.
Datei zum Aufbewahren: Ein ausgefülltes Referenz-Briefing für eine Seite, auch wenn noch kein Screenshot vorliegt.
- Was ist agentisches Design?Sieh, wie ein Agent das Briefing liest, einen benannten Teil ändert und die gerenderte Seite prüft.
- Aufgabe, Leser und Reihenfolge einer Seite festlegenSchreibe die drei Angaben auf, die ein Agent vor der Auswahl der Abschnitte braucht.
- Ein Briefing für einen KI-Website-Agenten schreibenTrenne veröffentlichbare Fakten von Ideen, die noch Vorschläge sind.
- Arbeitsblatt für ein Referenz-BriefingFülle die Zeilen zur Seitenaufgabe aus. Lass die Screenshot-Zeilen leer, wenn du keine Referenz hast.
Ein wiederverwendbares Designsystem für mehrere Seiten
Für Gründer oder Design Engineers, die einer Website mit einer brauchbaren Seite eine zweite hinzufügen.
Bevor du beginnst: Eine Seite mit festgelegten Schriften und Farben liegt als zugänglicher Code vor.
Am Ende hast du: Eine zweite Seite mit denselben Schriften, Abständen, Farben und demselben Rahmen. Die Unterschiede sind dokumentiert.
Datei zum Aufbewahren: Eine design.md für ein Übungsprojekt oder echtes Projekt, zusammen mit den genannten CSS-Variablen neben der Website gespeichert.
- Was gehört in design.md?Erfahre, welche Entscheidungen in die Datei und welche in CSS gehören.
- Welche Aufgabe jede Projektanweisungsdatei hatSpeichere Designentscheidungen, Projektregeln und Prüfverfahren in getrennten Dateien.
- Zusammengehörige Seiten konsistent gestaltenFinde Abweichungen durch einen Vergleich der Tokens, des Rahmens und der gerenderten Seiten.
- Leere design.md-VorlageKopiere die Vorlage und ersetze alle Harbor-Ledger-Angaben durch deine eigenen.
Gestaltung und Prüfung anhand von Referenzen
Für alle, die einen überzeugenden Screenshot als Referenz haben und eine Seite für ihr eigenes Unternehmen brauchen.
Bevor du beginnst: Du darfst die Referenz untersuchen und kennst dein Angebot, deine Belege und die wichtigste Besucheraktion.
Am Ende hast du: Ein Briefing mit nützlichen Layoutentscheidungen ohne fremde Unternehmensinhalte, eine Seite mit ausfüllbaren Bausteinen und eine dokumentierte Prüfung eines konkreten Fehlers.
Datei zum Aufbewahren: Ein ausgefülltes Arbeitsblatt zur visuellen und mobilen Prüfung mit Fehler, Korrektur und erneuter Kontrolle.
- Aus einem Screenshot ein Designbriefing machenÜbernimm nützliche Abschnittsfolgen, Abstände, Bildverteilungen und Betonungen. Behalte deine eigene Identität, Texte und Belege.
- Beim Austausch eines Bausteins den Seitenaufbau bewahrenTausche einen Block nur aus, wenn dein Inhalt dessen bisherige Aufgabe erfüllen kann.
- Eine generierte Seite prüfenPrüfe Layout, Tastaturbedienung und eine Handybreite, bevor du die Seite als fertig bezeichnest.
- Arbeitsblatt zur visuellen und mobilen PrüfungNutze den dokumentierten Harbor-Ledger-Fehler als Muster und halte danach deine eigene Seite fest.
