Un site web personnel est le meilleur projet pour débuter avec Codex

Dans l'ère de l'IA, un site web personnel est le meilleur CV.

Hier, j'ai publié une démo de mon site web personnel, qui a cumulé près de 100 000 vues sur les réseaux. De nombreux amis m'ont envoyé des messages privés pour me demander comment le réaliser.

https://x.com/Saccc_c/status/2071508004772475209

Merci à tous pour votre engouement. Je vais vous expliquer en détail comment utiliser Codex pour créer un site web personnel à votre image en seulement 2 heures.

Étapes générales : Organiser les documents du contenu du site — Utiliser une compétence de goût pour générer des images de référence de pages web — Générer les images des éléments séparément — Utiliser la compétence Frontend App Builder pour reproduire les pages web

(Étapes détaillées ci-dessous)

Étape 1 : Utiliser Codex pour organiser un document détaillé du contenu du site

Exprimez en détail à Codex vos informations personnelles et le contenu que le site doit véhiculer, puis laissez-le organiser un document structuré détaillé.

Mon document comprend à peu près ceci :

• Les informations personnelles de Sac et son positionnement en tant que créateur de contenu
• Le nombre de pages, la structure et le style
• La direction générale du design et la mise en page

Petite astuce : Vous pouvez utiliser une extension Chrome pour permettre à Codex de consulter vos réseaux sociaux et ainsi l'aider à compléter vos informations

Étape 2 : Utiliser une compétence de goût pour générer des images de référence de pages web de haute qualité

Utilisez la compétence imagegen-frontend-web (disponible dans les compétences de goût) en combinaison avec le document de contenu du site, afin de générer des images de référence détaillées pour chaque page.

Adresse GitHub : https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md

Voici mon prompt :

Le rendu de l'image de référence obtenu est le suivant :

Remarque : La compétence imagegen-frontend-web (dans les compétences de goût) permet à Codex d'avoir un meilleur sens esthétique lors de la génération d'images, ce qui donne un rendu plus design.

Étape 3 : Analyser et décomposer la structure de l'image de référence, puis générer séparément les images des éléments clés

Une fois que vous avez obtenu l'image de référence complète, vous devez générer séparément les éléments clés de chaque page web. Il suffit de saisir directement dans la zone de dialogue :

1Voici l'image de référence de la page web que j'ai générée. Analysez-la page par page et aidez-moi à déterminer :
21. Quelles parties peuvent être implémentées avec du code
32. Quels éléments visuels clés nécessitent une génération d'images séparée
4Ne commencez pas encore à écrire le code, donnez-moi d'abord une suggestion de décomposition des éléments.

Ensuite, utilisez ImageGen pour générer les images des éléments clés, en veillant à ce qu'elles soient cohérentes avec les détails des images de référence.

Par exemple, l'image de l'avatar sur mon site personnel :

Étape 4 : Utiliser la compétence Frontend App Builder intégrée à Codex pour reproduire l'image de référence de la page web en une véritable page web

Soumettez à Codex les images de référence et les images des éléments déterminées précédemment pour la reproduction de la page web.

On utilise ici la compétence Frontend App Builder du plugin Build Web Apps. Elle traite l'image de référence comme une maquette et effectue une restitution haute fidélité selon un processus structuré.

Exemple de prompt pour reproduire la page web :

Le résultat de la reproduction est le suivant :