วิธีใช้ชุด Prompt นี้
นำข้อความ Prompt ไปวางในแชทของ AI ตัวหลักที่คุณใช้งาน เช่น ChatGPT หรือ Claude แล้วใส่รายละเอียดโปรดักต์ กลุ่มผู้ใช้งานหลัก และฟีเจอร์สำคัญในวงเล็บเหลี่ยม [ ]
ข้อความผลลัพธ์ที่ได้สามารถนำไปใช้อ้างอิงสำหรับการขึ้นหน้า Wireframe ใน Figma หรือนำไปประกอบในเอกสาร Product Requirement Document (PRD) ได้ทันที หากต้องการให้เน้นมาตรฐานเฉพาะ เช่น กฎการเข้าถึงของผู้พิการ (WCAG) ให้ระบุเพิ่มเติมในแชทได้ทันที
ชุด Prompt
Prompt วางแผนผังโครงสร้างขั้นตอนผู้ใช้งาน (User Flow & Information Architecture)
สวมบทบาทเป็น Lead UX Designer ช่วยออกแบบแผนผังโครงสร้างข้อมูล (Information Architecture) และขั้นตอนการใช้งาน (User Flow) สำหรับฟีเจอร์ [ระบุฟีเจอร์ เช่น ระบบสมัครสมาชิกและยืนยันตัวตน KYC สำหรับแอปการเงิน]
สิ่งที่ต้องจัดทำ:
1. รายการหน้าจอหลักทั้งหมดที่จำเป็นต้องมี (Screen Hierarchy)
2. แผนผังขั้นตอนการทำงานทีละสเต็ป (Step-by-step User Journey) ตั้งแต่จุดเริ่มต้นจนจบเป้าหมาย
3. การจัดการสถานะหน้าจอข้อยกเว้น (Edge Cases เช่น ยืนยันตัวตนไม่ผ่าน, เอกสารหมดอายุ, สัญญาณเน็ตหลุด)
4. จุดที่ควรมีระบบบันทึกความคืบหน้า (Save and Resume State)
จัดทำผลลัพธ์เป็นลำดับข้อแบบมีระดับ (Indented Hierarchy) พร้อมคำอธิบายหน้าที่ของแต่ละหน้าจอผลลัพธ์ที่ได้: โครงสร้าง User Flow ที่ครอบคลุมทุกมิติการใช้งานทั้ง Happy Path และ Edge Cases พร้อมนำไปจัดวาง Flowchart ในโปรแกรมออกแบบ
Prompt กำหนดค่า Design Tokens สำหรับระบบ Design System
สวมบทบาทเป็น Design System Specialist ช่วยกำหนดชุดตัวแปร Design Tokens พื้นฐานสำหรับแบรนด์ดิจิทัลในธีม [ระบุธีมหรืออารมณ์ เช่น คลีน มินิมอล อบอุ่น สไตล์ Cozy Organic]
สิ่งที่ต้องกำหนด:
- Color Palette: สีหลัก (Primary), สีรอง (Secondary), สีพื้นผิว (Surface/Background), สีข้อความ (Text) และสีสถานะ (Success, Warning, Error) พร้อมค่า HEX Code และระดับความสว่าง
- Typography Scale: ขนาดตัวอักษร, Line-height และ Font Weight ตั้งแต่ Display, Heading H1-H4, Body และ Caption
- Spacing and Radius System: ระยะห่างและขอบมนแบบ 4pt/8pt Grid System (xs, sm, md, lg, xl)
จัดทำผลลัพธ์เป็นโครงสร้าง JSON Design Tokens ที่พร้อมนำเข้าสู่ปลั๊กอิน Figma Tokensผลลัพธ์ที่ได้: ชุดข้อมูล Design Tokens ในฟอร์แมต JSON ที่ระบุค่าสี ขนาดตัวอักษร และระยะห่างมาตรฐานเพื่อนำไปใช้ตั้งค่าร่วมกันระหว่างทีมดีไซน์และทีมโค้ด
Prompt เขียนข้อความบนอินเทอร์เฟซ (UX Writing & Microcopy) รับมือสถานะ Error
สวมบทบาทเป็น UX Writer ช่วยเขียนข้อความบนหน้าจอ (Microcopy) สำหรับ [ระบุสถานการณ์ เช่น หน้าแจ้งเตือนการตัดเงินรายเดือนล้มเหลวเนื่องจากวงเงินไม่พอ]
ข้อความที่ต้องจัดทำ:
1. พาดหัวแจ้งเตือน (Modal/Toast Title) สั้นกระชับ ไม่สร้างความตระหนก
2. เนื้อหาอธิบายสาเหตุและวิธีแก้ไขปัญหา (Body Copy) ความยาวไม่เกิน 2 บรรทัด
3. ข้อความบนปุ่มหลัก (Primary CTA Button เช่น ลองชำระเงินใหม่ หรือ เปลี่ยนบัตร)
4. ข้อความบนปุ่มรอง (Secondary CTA Button เช่น ติดต่อเจ้าหน้าที่)
เขียนตัวเลือกข้อความมา 3 สไตล์:
- สไตล์ทางการและกระชับ (Direct and Professional)
- สไตล์เป็นมิตรและช่วยเหลือ (Empathetic and Helpful)
- สไตล์สั้นพิเศษสำหรับแจ้งเตือนบนมือถือ (Compact)ผลลัพธ์ที่ได้: ชุดข้อความ Microcopy 3 ทางเลือกที่สื่อสารปัญหาชัดเจนและแนะนำวิธีแก้ไขแก่ผู้ใช้งานอย่างสร้างสรรค์
Prompt ตรวจสอบเช็กลิสต์ความพร้อมด้านการเข้าถึงตามมาตรฐาน WCAG 2.2
สวมบทบาทเป็น Accessibility Consultant ช่วยตรวจสอบและจัดทำเช็กลิสต์ความพร้อมด้านการเข้าถึงตามมาตรฐาน WCAG 2.2 ระดับ AA สำหรับการออกแบบ [ระบุประเภทหน้าจอ เช่น แบบฟอร์มกรอกข้อมูลและชำระเงินออนไลน์]
ประเด็นที่ต้องจัดทำเช็กลิสต์:
1. อัตราส่วนความต่างของสี (Color Contrast Ratio) สำหรับข้อความและปุ่มกด
2. การนำทางด้วยแป้นพิมพ์และการแสดงสถานะโฟกัส (Keyboard Navigation and Focus Indicators)
3. การออกแบบป้ายกำกับฟอร์มและการแจ้งเตือน Error ที่ไม่พึ่งพาการใช้สีเพียงอย่างเดียว
4. ข้อกำหนดสำหรับโปรแกรมอ่านหน้าจอ (Screen Reader Attributes and ARIA Labels)
จัดทำผลลัพธ์เป็นตาราง Checklist พร้อมแนวทางปฏิบัติที่ถูกต้องสำหรับนักออกแบบและนักพัฒนาผลลัพธ์ที่ได้: ตารางตรวจสอบความพร้อมด้าน Accessibility ที่ช่วยให้ระบบเป็นไปตามมาตรฐานสากลและใช้งานได้สะดวกสำหรับผู้ใช้ทุกคน
Prompt ออกแบบโครงสร้าง Wireframe หน้า Dashboard ข้อมูลสถิติ
สวมบทบาทเป็น Product Designer ช่วยวางเค้าโครงแบบร่าง (Wireframe Blueprint) สำหรับหน้าจอแดชบอร์ด [ระบุประเภทแดชบอร์ด เช่น ระบบวิเคราะห์ยอดขายและพฤติกรรมลูกค้าสำหรับร้านค้าออนไลน์]
ส่วนประกอบที่ต้องจัดวางในหน้าจอ:
- แถบเมนูด้านข้างและส่วนหัว (Header and Navigation)
- การ์ดสรุปตัวเลขสถิติสำคัญประจำวัน 4 การ์ด (KPI Summary Cards)
- พื้นที่แสดงแผนภูมิแนวโน้มรายได้และกราฟเปรียบเทียบสัดส่วนยอดขาย
- ตารางแสดงรายการคำสั่งซื้อล่าสุดพร้อมระบบคัดกรองและค้นหา (Filter and Table)
จัดทำผลลัพธ์เป็นข้อความบรรยายโครงสร้างการจัดวางแบบกริด (Layout Grid Specs) และลำดับสายตา (Visual Hierarchy) สำหรับนำไปวาด Wireframeผลลัพธ์ที่ได้: รายละเอียดพิมพ์เขียวการจัดวางเลย์เอาต์หน้าแดชบอร์ด ช่วยให้นักออกแบบจัดลำดับความสำคัญของข้อมูลบนหน้าจอได้อย่างลงตัว
เครื่องมือที่แนะนำ
ชุดคำสั่งหมวด UI/UX ทำงานได้ดีเยี่ยมบนโมเดลภาษาชั้นนำ เช่น ChatGPT (GPT-4o) และ Claude 3.5 Sonnet โดยสามารถนำผลลัพธ์ไปประยุกต์ใช้ร่วมกับเครื่องมือออกแบบอย่าง Figma, FigJam และเครื่องมือสร้างระบบอัตโนมัติได้อย่างรวดเร็ว