Kişisel Bir Web Sitesi, Codex ile Başlamak İçin En İyi Projedir

AI Çağında Kişisel Web Sitesi En İyi Özgeçmiştir

Dün kişisel web sitemin bir demosunu yayınladım ve ağ genelinde neredeyse 100.000 görüntülenme aldı. Birçok arkadaş üretim yöntemini sorarak özel mesaj gönderdi.

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

Herkese olan sevginiz için teşekkürler, Codex kullanarak 2 saat içinde kendi tarzınızda bir kişisel web sitesini nasıl yapacağınızı ayrıntılı olarak tanıtacağım.

Genel adımlar: Web sitesi içerik belgelerini düzenleyin — Beğeni becerisini kullanarak web sayfası referans görselleri oluşturun — Ayrı ayrı materyal görselleri oluşturun — Web sayfalarını kopyalamak için Frontend App Builder becerisini kullanın

(Ayrıntılı adımlar aşağıda)

Adım 1: Web sitesi içerik belgelerini düzenlemek için Codex kullanın

Kişisel bilgilerinizi ve web sitesinin iletmesi gereken içeriği Codex'e ayrıntılı olarak ifade edin ve ayrıntılı bir yapılandırılmış belge düzenlemesine izin verin.

Belgem kabaca aşağıdakileri içerir:

• Sac'ın kişisel bilgileri ve IP konumlandırması
• Sayfa sayısı, yapı ve stil
• Genel tasarım yönü ve düzeni

Küçük ipucu: Sosyal medyanızı Codex'e göstermek ve bilgileri tamamlamasına yardımcı olmak için bir Chrome eklentisi kullanabilirsiniz

Adım 2: Yüksek kaliteli web sayfası referans görselleri oluşturmak için beğeni becerisini kullanın

Beğeni becerisindeki imagegen-frontend-web becerisini web sitesi içerik belgesiyle birleştirerek her sayfa için ayrıntılı referans görselleri oluşturun.

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

İşte benim istemim:

Ortaya çıkan referans görsel efekti aşağıdaki gibidir:

Not: Beğeni becerisindeki imagegen-frontend-web becerisi, Codex'in görsel oluştururken daha fazla estetik anlayışa sahip olmasını sağlar ve ekran daha tasarım odaklı bir his verir.

Adım 3: Referans görsel yapısını analiz edip parçalara ayırın ve anahtar materyaller için ayrı ayrı görseller oluşturun

Tam referans görseli elde ettikten sonra, her web sayfası için anahtar materyaller ayrı ayrı oluşturulmalıdır. Doğrudan diyalog kutusuna girebiliriz:

1Bu şu anda oluşturduğum web sayfası referans görselidir. Lütfen yapılarını sayfa sayfa analiz edin ve şunları değerlendirmeme yardımcı olun:
21. Hangi parçalar kod ile uygulanabilir
32. Hangi anahtar görsel öğelerin ayrı ayrı materyal oluşturması gerekiyor
4Henüz kod yazmaya başlamayın, önce bana bir materyal parçalama önerisi verin.

Ardından anahtar materyal görsellerini oluşturmak için ImageGen kullanın ve referans görsellerindeki ayrıntılarla tutarlılık sağlayın.

Örneğin, kişisel web sitemdeki profil fotoğrafı materyali:

Adım 4: Web sayfası referans görselini gerçek bir web sayfasına kopyalamak için Codex'in yerleşik Frontend App Builder becerisini kullanın

Daha önce belirlenen referans görsellerini ve materyal görsellerini web sayfası kopyalama için Codex'e gönderin.

Burada Build Web Apps eklentisindeki Frontend App Builder becerisi kullanılır. Referans görselini bir taslak olarak ele alır ve yapılandırılmış bir süreç setine göre yüksek doğrulukta geri yükleme yapar.

Web sayfasını kopyalamak için referans istemi:

Kopyalama etkisi aşağıdaki gibidir: