Im KI-Zeitalter ist eine persönliche Website der beste Lebenslauf.
Gestern habe ich einen Demo meiner persönlichen Website veröffentlicht, die fast 100.000 Aufrufe im ganzen Netzwerk erzielt hat. Viele Freunde haben mir private Nachrichten geschickt und nach der Erstellungsmethode gefragt.
https://x.com/Saccc_c/status/2071508004772475209
Danke für eure Liebe – ich werde im Detail erklären, wie man mit Codex innerhalb von 2 Stunden eine persönliche Website im eigenen Stil erstellt.
Allgemeine Schritte: Website-Inhaltsdokumente organisieren – Mit der Taste-Skill Webseiten-Referenzbilder generieren – Materialbilder separat generieren – Mit der Frontend App Builder-Skill Webseiten nachbauen
(Detailierte Schritte folgen)
Schritt 1: Mit Codex detaillierte Website-Inhaltsdokumente organisieren
Teile Codex deine persönlichen Informationen und die Inhalte, die die Website vermitteln soll, detailliert mit und lasse es ein detailliertes strukturiertes Dokument erstellen.
Mein Dokument umfasst in etwa Folgendes:
- Sacs persönliche Informationen und IP-Positionierung
- Anzahl der Seiten, Struktur und Stil
- Gesamtdesignrichtung und Layout
Kleiner Tipp: Du kannst ein Chrome-Plugin verwenden, damit Codex deine sozialen Medien einsehen kann, um Informationen zu ergänzen
Schritt 2: Mit der Taste-Skill hochwertige Webseiten-Referenzbilder generieren
Verwende die imagegen-frontend-web-Skill in der Taste-Skill, kombiniere sie mit dem Website-Inhaltsdokument und generiere detaillierte Referenzbilder für jede Seite.
GitHub-Adresse: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md
Das ist mein Prompt:
Das resultierende Referenzbild sieht wie folgt aus:
Hinweis: Die imagegen-frontend-web-Skill in der Taste-Skill ermöglicht es Codex, bei der Bildgenerierung mehr ästhetisches Gespür zu haben, sodass der Bildschirm ein designorientierteres Gefühl erhält.
Schritt 3: Die Struktur des Referenzbildes analysieren und aufschlüsseln, Schlüsselmaterialien separat generieren
Nachdem du das vollständige Referenzbild erhalten hast, müssen für jede Webseite die wichtigsten Materialien separat generiert werden. Wir können direkt in das Dialogfeld eingeben:
1Das sind die Webseiten-Referenzbilder, die ich bisher generiert habe. Bitte analysiere sie Seite für Seite und hilf mir zu beurteilen:21. Welche Teile können mit Code umgesetzt werden?32. Welche wichtigen visuellen Elemente müssen als separate Materialien generiert werden?4Fang noch nicht an, Code zu schreiben – gib mir zuerst einen Vorschlag zur Materialaufschlüsselung.
Verwende dann ImageGen, um Schlüsselmaterialbilder zu generieren und sicherzustellen, dass sie mit den Details in den Referenzbildern übereinstimmen.
Zum Beispiel das Avatarmaterial in meiner persönlichen Website:
Schritt 4: Mit der integrierten Frontend App Builder-Skill von Codex das Webseiten-Referenzbild in eine echte Webseite umsetzen
Reiche die zuvor festgelegten Referenzbilder und Materialbilder bei Codex ein, um die Webseite nachzubauen.
Hier wird die Frontend App Builder-Skill im Build Web Apps-Plugin verwendet. Sie behandelt das Referenzbild als Designentwurf und führt eine hochpräzise Nachbildung nach einem strukturierten Prozess durch.
Referenz-Prompt zum Nachbau der Webseite:
Der Nachbau-Effekt ist wie folgt:
