AI WEB STUDIO · FLOWCHART

จากทิศทางภาพสู่ Asset ที่พร้อมใช้

977-121 Module: Website Design and Development · มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต

จากทิศทางภาพสู่ Asset ที่พร้อมใช้ | AI Web Studioกระบวนการกำหนดทิศทางภาพ เขียน prompt สร้างภาพ เก็บต้นฉบับ ปรับ WebP และตรวจในหน้าเว็บ AI WEB STUDIO · FLOWCHARTจากทิศทางภาพสู่ Asset ที่พร้อมใช้ArtdirectionPromptสร้างภาพต้นฉบับPNGOptimizeWebPตรวจในหน้าเว็บลำดับ / การส่งต่อAI Web Studio · 977-121 Module: Website Design and Development

อ่านภาพนี้อย่างไร

เก็บทั้ง prompt และไฟล์ต้นฉบับไว้เป็น provenance จากนั้นสร้าง WebP ที่เบากว่าและตรวจ alt text, crop, responsive และน้ำหนักไฟล์ในบริบทจริง

แหล่งข้อมูล: courses/ai-web-studio/docs/lessons/04-design-and-assets.md, courses/ai-web-studio/docs/assets/image-provenance.md, scripts/optimize-images.mjs

สิ่งที่ย่อ: ไม่แสดงขนาดภาพแต่ละไฟล์และรายละเอียดคำสั่ง optimize ใช้ flowchart ของลำดับงาน ไม่ได้ใช้ Process type แบบหลาย actor lanes ของ skill

Prompt สำหรับสร้างซ้ำ

สร้าง flowchart ภาษาไทยขนาด 960×600 แสดง 5 ขั้น: Art direction → Prompt สร้างภาพ → ต้นฉบับ PNG → Optimize WebP → ตรวจบนหน้าเว็บ ระบุว่า prompt และ provenance ต้องเก็บในเอกสาร เน้น Prompt สร้างภาพ ลูกศรแนวนอน, ไม่มีเงา, ข้อความใหญ่ ใช้โปรไฟล์ Rawinnipa แบบ dark canvas: พื้น #0A0A0A, ข้อความ #F7F7F7, เส้นรอง #9CA3AF และ Rawin Green #3EDC81 เฉพาะโหนดหรือแถบ focal หนึ่งจุดเท่านั้น; เส้นเชื่อมใช้สี neutral #D1D5DB ใช้ Inter คู่กับ Noto Sans Thai ไม่มีเงา งานนี้อยู่ในคอร์ส AI Web Studio ซึ่งเป็นส่วนหนึ่งของ 977-121 Module: Website Design and Development มหาวิทยาลัยสงขลานครินทร์ วิทยาเขตภูเก็ต