Trong thời đại AI, một trang web cá nhân là CV tốt nhất.
Hôm qua, tôi đã ra mắt bản demo trang web cá nhân của mình, nhận được gần 100.000 lượt xem trên khắp các nền tảng. Nhiều bạn đã nhắn tin hỏi về cách thực hiện.
https://x.com/Saccc_c/status/2071508004772475209
Cảm ơn mọi người vì sự yêu thích, tôi sẽ hướng dẫn chi tiết cách sử dụng Codex để tạo một trang web cá nhân theo phong cách riêng của bạn trong vòng 2 giờ.
Các bước tổng quát: Sắp xếp tài liệu nội dung trang web — Sử dụng taste skill để tạo ảnh tham khảo giao diện web — Tạo riêng ảnh nguyên liệu — Sử dụng kỹ năng Frontend App Builder để tái tạo trang web
(Các bước chi tiết bên dưới)
Bước 1: Sử dụng Codex để sắp xếp tài liệu nội dung trang web chi tiết
Trình bày chi tiết thông tin cá nhân và nội dung cần truyền tải trên trang web cho Codex, để nó sắp xếp thành một tài liệu có cấu trúc chi tiết.
Tài liệu của tôi bao gồm những mục sau:
- Thông tin cá nhân và định vị IP của Sac
- Số lượng trang, cấu trúc và phong cách
- Định hướng thiết kế tổng thể và bố cục
Mẹo nhỏ: Bạn có thể sử dụng plugin Chrome để Codex xem mạng xã hội của bạn, giúp bổ sung thông tin
Bước 2: Sử dụng taste skill để tạo ảnh tham khảo giao diện web chất lượng cao
Sử dụng kỹ năng imagegen-frontend-web trong taste skill, kết hợp với tài liệu nội dung trang web, để tạo ảnh tham khảo chi tiết cho từng trang.
Địa chỉ GitHub: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md
Đây là prompt của tôi:
Kết quả ảnh tham khảo như sau:
Lưu ý: Kỹ năng imagegen-frontend-web trong taste skill giúp Codex có thẩm mỹ tốt hơn khi tạo ảnh, màn hình sẽ có cảm giác thiết kế hơn.
Bước 3: Phân tích và tháo rời cấu trúc ảnh tham khảo, tạo ảnh riêng cho các vật liệu chính
Sau khi có ảnh tham khảo hoàn chỉnh, cần tạo riêng các vật liệu chính cho từng trang web. Chúng ta có thể nhập trực tiếp vào hộp thoại:
1Đây là ảnh tham khảo giao diện web tôi đã tạo. Hãy phân tích cấu trúc của chúng theo từng trang và giúp tôi đánh giá:21. Những phần nào có thể triển khai bằng code32. Những yếu tố hình ảnh chính nào cần tạo vật liệu riêng4Đừng bắt đầu viết code vội, hãy đưa ra gợi ý tháo rời vật liệu trước.
Sau đó, sử dụng ImageGen để tạo ảnh vật liệu chính, đảm bảo sự nhất quán với chi tiết trong ảnh tham khảo.
Ví dụ, vật liệu hình đại diện trong trang web cá nhân của tôi:
Bước 4: Sử dụng kỹ năng Frontend App Builder tích hợp trong Codex để tái tạo ảnh tham khảo giao diện web thành trang web thực
Gửi ảnh tham khảo và ảnh vật liệu đã xác định trước đó cho Codex để thực hiện tái tạo trang web.
Ở đây sử dụng kỹ năng Frontend App Builder trong plugin Build Web Apps. Nó coi ảnh tham khảo như bản thiết kế và thực hiện tái tạo với độ chính xác cao theo một quy trình có cấu trúc.
Prompt tham khảo để tái tạo trang web:
Kết quả tái tạo như sau:
