1. เลือกสไตล์ที่เหมาะกับงาน

เปิด getdesign.md ซึ่งรวบรวมรูปแบบการออกแบบเป็นไฟล์ Design.md เลือกตัวอย่างที่ใกล้กับงานของคุณ ตัวอย่างในคลิปเลือกแนว Sentry ก่อนนำมาปรับเป็นเว็บขายหนังสือ

ดูมากกว่าความสวยของหน้าปก ลองพิจารณาความอ่านง่าย พื้นที่วางสินค้า และลักษณะปุ่มว่าตรงกับสิ่งที่คนเข้าเว็บต้องทำหรือไม่

ทำเว็บให้มีสไตล์เดียวกันด้วยไฟล์ Design.md ภาพจากตัวอย่าง
ตัวอย่างการใช้งานจากคลิปสาธิตของ Moshi

2. ดาวน์โหลดไฟล์ Design.md

เปิดรายละเอียดสไตล์แล้วดาวน์โหลด Design.md เก็บไฟล์ไว้กับโปรเจกต์ เนื้อหาในไฟล์ช่วยบอกระบบสี ฟอนต์ และรูปแบบองค์ประกอบที่ควรใช้ร่วมกัน

3. แนบไฟล์พร้อมข้อมูลเว็บจริง

เปิดเครื่องมือเขียนเว็บด้วย AI ที่ใช้ เช่น Codex แนบ Design.md แล้วบอกประเภทเว็บที่ต้องการ พร้อมข้อความและภาพจริงของสินค้า ตัวอย่างคือเว็บขายหนังสือและภาพหนังสือที่ต้องนำไปแสดง

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

4. ตรวจทั้งหน้าตาและการใช้งาน

เปิดเว็บที่ได้ ตรวจว่าสี ตัวอักษร ปุ่ม และระยะห่างสอดคล้องกันทั้งหน้า แล้วลองบนหน้าจอมือถือด้วย

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

ดูวิธีทำต่อในคลิป

ถ้าอ่านแล้วยังไม่เข้าใจ ดูวิธีทำในคลิป YouTube Shorts ด้านล่าง แล้วลองทำตามไปพร้อมกันได้เลย

ไม่มี Prompt

บทความนี้ไม่มี Prompt แจก

อยากเห็นวิธีทำทีละขั้น?

ถ้าอ่านแล้วยังไม่เข้าใจ ดูวิธีทำในคลิป YouTube Shorts นี้ แล้วลองทำตามไปพร้อมกันได้เลย