ในยุค AI เว็บไซต์ส่วนตัวคือ Resume ที่ดีที่สุด
เมื่อวานนี้ ผมปล่อย Demo เว็บไซต์ส่วนตัว ซึ่งมียอดเข้าชมเกือบ 100,000 ครั้งทั่วทั้งเครือข่าย เพื่อนๆ หลายคนส่งข้อความส่วนตัวมาถามถึงวิธีการทำ
https://x.com/Saccc_c/status/2071508004772475209
ขอบคุณทุกคนสำหรับความรักครับ ผมจะแนะนำรายละเอียดวิธีการใช้ Codex เพื่อสร้างเว็บไซต์ส่วนตัวในสไตล์ของคุณเองภายใน 2 ชั่วโมง
ขั้นตอนทั่วไป: จัดระเบียบเอกสารเนื้อหาเว็บไซต์ — ใช้ Taste Skill เพื่อสร้างภาพอ้างอิงหน้าเว็บ — สร้างภาพ素材แยกต่างหาก — ใช้ Frontend App Builder Skill เพื่อทำซ้ำหน้าเว็บ
(มีขั้นตอนรายละเอียดดังนี้)
ขั้นตอนที่ 1: ใช้ Codex เพื่อจัดระเบียบเอกสารเนื้อหาเว็บไซต์โดยละเอียด
แสดงข้อมูลส่วนตัวและเนื้อหาที่เว็บไซต์ต้องการสื่อถึง Codex อย่างละเอียด แล้วให้มันจัดระเบียบเป็นเอกสารที่มีโครงสร้างชัดเจน
เอกสารของผมคร่าวๆ จะประกอบด้วยสิ่งเหล่านี้:
- ข้อมูลส่วนตัวและการวางตำแหน่ง IP ของ Sac
- จำนวนหน้า โครงสร้าง และสไตล์
- ทิศทางและเค้าโครงโดยรวมของการออกแบบ
เคล็ดลับเล็กน้อย: คุณสามารถใช้ปลั๊กอิน Chrome เพื่อให้ Codex ดูโซเชียลมีเดียของคุณและช่วยเสริมข้อมูลให้คุณได้
ขั้นตอนที่ 2: ใช้ Taste Skill เพื่อสร้างภาพอ้างอิงหน้าเว็บคุณภาพสูง
ใช้สกิล imagegen-frontend-web ใน Taste Skill ร่วมกับเอกสารเนื้อหาเว็บไซต์ เพื่อสร้างภาพอ้างอิงโดยละเอียดสำหรับแต่ละหน้า
ที่อยู่ GitHub: https://github.com/Leonxlnx/taste-skill/blob/main/skills/imagegen-frontend-web/SKILL.md
นี่คือ Prompt ของผม:
ผลลัพธ์ของภาพอ้างอิงที่ได้มีดังนี้:
หมายเหตุ: สกิล imagegen-frontend-web ใน Taste Skill จะช่วยให้ Codex มีสุนทรียภาพมากขึ้นเมื่อสร้างภาพ และหน้าจอจะมีความรู้สึกด้านการออกแบบมากขึ้น
ขั้นตอนที่ 3: วิเคราะห์และแยกโครงสร้างของภาพอ้างอิง จากนั้นสร้างภาพสำหรับวัสดุสำคัญแยกต่างหาก
หลังจากได้ภาพอ้างอิงที่สมบูรณ์แล้ว จำเป็นต้องสร้างวัสดุสำคัญสำหรับแต่ละหน้าเว็บแยกกัน เราสามารถป้อนข้อความในกล่องโต้ตอบได้โดยตรง:
1นี่คือภาพอ้างอิงหน้าเว็บที่ฉันสร้างขึ้นมาได้ โปรดวิเคราะห์โครงสร้างของพวกมันทีละหน้าและช่วยฉันประเมิน:21. ส่วนไหนที่สามารถเขียนโค้ดได้32. องค์ประกอบภาพสำคัญใดบ้างที่ต้องสร้างวัสดุแยกต่างหาก4ยังไม่ต้องเริ่มเขียนโค้ด ให้คำแนะนำในการแยกวัสดุมาก่อน
จากนั้นใช้ ImageGen เพื่อสร้างภาพวัสดุสำคัญ เพื่อให้แน่ใจว่าสอดคล้องกับรายละเอียดในภาพอ้างอิง
ตัวอย่างเช่น วัสดุภาพ Avatar ในเว็บไซต์ส่วนตัวของผม:
ขั้นตอนที่ 4: ใช้ Frontend App Builder Skill ในตัวของ Codex เพื่อทำซ้ำภาพอ้างอิงหน้าเว็บให้เป็นหน้าเว็บจริง
ส่งภาพอ้างอิงและภาพวัสดุที่กำหนดไว้ก่อนหน้านี้ให้ Codex เพื่อทำซ้ำหน้าเว็บ
ที่นี่ใช้สกิล Frontend App Builder ในปลั๊กอิน Build Web Apps มันจะถือว่าภาพอ้างอิงเป็นแบบร่างออกแบบ และทำการปรับแต่งให้มีความเที่ยงตรงสูงตามชุดกระบวนการที่มีโครงสร้าง
Prompt อ้างอิงสำหรับการทำซ้ำหน้าเว็บ:
ผลลัพธ์ของการทำซ้ำมีดังนี้:
