การสร้าง Landing Page ด้วย Next.js จากรูปภาพต้นแบบ

ขั้นตอนการทำงานที่ซับซ้อนสำหรับการสร้าง Landing Page จากรูปภาพโดยใช้ Next.js ร่วมกับการสร้างเนื้อหาด้วย image generation และการตรวจสอบด้วย Playwright

พรอมต์
/goal สร้าง Landing Page ตามรูปภาพที่แนบมาโดยใช้ Next.js จนกว่าความแม่นยำในการจำลองจะสูงกว่า 95% สำหรับส่วนที่ยากต่อการสร้างด้วยวิธีอื่นนอกเหนือจากการใช้รูปภาพ ให้สร้างขึ้นโดยการสร้างเนื้อหาที่เหมาะสมด้วย image_gen - ไอคอนและรูปภาพควรตรงกับรูปภาพต้นฉบับให้มากที่สุด ให้ตัดส่วนที่เกี่ยวข้องจากรูปภาพต้นฉบับและส่งไปยัง image_gen เพื่อใช้เป็นรูปภาพอ้างอิง (ใช้ codex exec -i เพื่อส่งรูปภาพอ้างอิงและระบุ prompt ผ่านทาง standard input) - ตรวจสอบให้แน่ใจว่าเว็บไซต์รองรับการแสดงผลบนอุปกรณ์ต่างๆ (Responsiveness) โดยตรวจสอบความกว้างตั้งแต่ 375 ถึง 1440px เพื่อให้มั่นใจว่าจะไม่มีการเลื่อนในแนวนอน องค์ประกอบซ้อนทับกัน หรือถูกตัดออก (ใช้ w-full max-w-[Npx] สำหรับการ์ดที่มีความกว้างคงที่ และใช้ absolute positioning เฉพาะกับความกว้างขนาดใหญ่เท่านั้น) - ดำเนินการวนซ้ำโดยใช้ Playwright แคปหน้าจอ -> เปรียบเทียบกับต้นฉบับ -> แก้ไข จนกว่า npm run build จะผ่าน

วิธีใช้ prompt นี้

  1. 1

    คัดลอก prompt เต็มด้านบน

  2. 2

    เปิดแพลตฟอร์มที่รองรับ claude-fable-5 เช่น YouMind แล้ววาง prompt ลงไป

  3. 3

    เปลี่ยนหัวข้อ สไตล์ หรือรายละเอียดให้ตรงไอเดียของคุณ แล้วสร้าง

นี่คือ AI prompt ฟรีจากคลัง prompt ของ YouMind สำรวจ เว็บเพจ prompt อีกนับพันรายการ ทั้งหมดคัดลอกและปรับใช้ได้ฟรี

ดู เว็บเพจ prompt เพิ่มเติม

สำรวจเพิ่มเติม

คลัง AI

ค้นหา prompt ด้วย AI

ให้ AI ช่วยค้นหา prompt หลายหมื่นรายการ กรองตามโมเดล ช่วงเวลา คีย์เวิร์ด และจัดเรียงตามยอดมีส่วนร่วม เช่น ยอดวิว ยอดบันทึก ยอดแชร์ และอื่นๆ

เครื่องมือด้านภาพ

รูปภาพเป็นพรอมต์

เปลี่ยนรูปภาพใดก็ได้ให้เป็นพรอมต์ภาพ AI แบบละเอียด เครื่องมือแปลงรูปภาพเป็นพรอมต์ฟรีจะวิเคราะห์องค์ประกอบ สไตล์ และแสง ให้คุณสร้างลุคเดิมซ้ำได้ในไม่กี่วินาที

สร้างมาเพื่อครีเอเตอร์ ฟรีตลอดไป

YouMind คือผู้ช่วยสร้างสรรค์ AI ที่ครีเอเตอร์ทั่วโลกไว้วางใจ ทุกพรอมต์ที่นี่คัดสรรมาเพื่อช่วยให้คุณสร้างสรรค์ได้ดีและเร็วขึ้น

สำรวจพรอมต์เพิ่มเติม