SOFTWARE DEVELOPER
Sign In & Sign Up
ออกแบบหน้า Auth ที่ชัด ปลอดภัย และรองรับทุก state
สิ่งที่คุณจะได้
- Authentication แบบ original พร้อม responsive layout
- React + TypeScript + Tailwind code ที่นำไปต่อได้
- Interaction states และ accessibility checklist
- คำอธิบาย design decisions และจุดที่ต้อง custom
ปรับแต่งให้ตรงกับธุรกิจคุณ
ช่องไหนไม่กรอก Prompt จะตัดบรรทัดนั้นออกให้เอง
เคล็ดลับการใช้
- เปลี่ยนข้อความตัวอย่างให้ตรงสินค้าก่อนใช้
- ทดสอบ keyboard และหน้าจอ 320px ก่อนส่งงาน
ตัวอย่าง Prompt
คุณคือ Senior Product Designer และ Frontend Engineer ที่สร้าง interface ใช้งานจริงด้วย React, TypeScript และ Tailwind CSS
## บริบท
- สินค้า/บริการ: [สินค้า / บริการหลัก]
## งานของคุณ
สร้าง Authentication แบบใหม่สำหรับบริบทนี้ ห้ามคัดลอก component หรือข้อความจากเว็บตัวอย่าง
ทิศทางเฉพาะ: ครอบ sign in, sign up, forgot password, provider state, password visibility และ error ที่บอกวิธีแก้
1. เริ่มด้วย content hierarchy และ user goal ก่อนเลือก decoration
2. ส่ง React component แบบ TypeScript ใช้ semantic HTML และ Tailwind CSS โดยไม่พึ่ง asset ภายนอก
3. รองรับ mobile 320px, tablet และ desktop พร้อมระบุ breakpoint behavior
4. ใส่ hover, focus-visible, disabled, loading, empty และ error state เท่าที่เกี่ยวข้อง
5. ใช้ข้อความตัวอย่างใหม่ที่สัมพันธ์กับสินค้า ห้าม lorem ipsum
6. ดู accessibility: keyboard, heading order, label, contrast, reduced motion และ screen reader
7. แยกส่วนที่ต้อง custom เป็น props/data ไม่ hardcode เนื้อหาซ้ำใน JSX
8. สรุป file structure, dependency ที่ต้องใช้ และวิธีติดตั้ง
## กติกาผลลัพธ์
- ตอบเป็นภาษาไทย ใช้ศัพท์เทคนิคภาษาอังกฤษได้ตามความเหมาะสม
- ให้ตัวเลข ตัวอย่าง และขั้นตอนที่ลงมือทำได้จริง ห้ามตอบกว้างๆ
- ถ้าข้อมูลที่ให้มาไม่พอ ให้ระบุสมมติฐานที่ใช้ไว้ด้านบนก่อนเริ่ม
- จบด้วย "ขั้นตอนถัดไป 3 ข้อ" ที่ทำได้ภายในสัปดาห์นี้
Prompt นี้ยาวเกินกว่าจะแนบไปกับลิงก์ได้ — กดปุ่มด้านบนแล้วระบบจะคัดลอกให้ เปิดแชทขึ้นมาแล้วกด Ctrl+V ได้เลย
กรอกช่องเดียวแล้วกด Generate ได้เลย ช่องปรับละเอียดเติมเมื่ออยากได้ผลตรงขึ้น
Prompt ฉบับเต็ม
โครงสร้าง Prompt ที่ระบบใช้ — ช่อง {{...}} จะถูกแทนที่ด้วยข้อมูลของคุณ
Prompt นี้เขียนเป็นภาษาไทยและสั่งให้ AI ตอบกลับเป็นภาษาไทย
ดูโครงสร้างเต็ม (27 บรรทัด)
คุณคือ Senior Product Designer และ Frontend Engineer ที่สร้าง interface ใช้งานจริงด้วย React, TypeScript และ Tailwind CSS
## บริบท
- สินค้า/บริการ: {{product}}
- ผู้ใช้เป้าหมาย: {{audience}}
- โทนภาพและภาษา: {{tone}}
- ข้อมูลเพิ่มเติม: {{details}}
## งานของคุณ
สร้าง Authentication แบบใหม่สำหรับบริบทนี้ ห้ามคัดลอก component หรือข้อความจากเว็บตัวอย่าง
ทิศทางเฉพาะ: ครอบ sign in, sign up, forgot password, provider state, password visibility และ error ที่บอกวิธีแก้
1. เริ่มด้วย content hierarchy และ user goal ก่อนเลือก decoration
2. ส่ง React component แบบ TypeScript ใช้ semantic HTML และ Tailwind CSS โดยไม่พึ่ง asset ภายนอก
3. รองรับ mobile 320px, tablet และ desktop พร้อมระบุ breakpoint behavior
4. ใส่ hover, focus-visible, disabled, loading, empty และ error state เท่าที่เกี่ยวข้อง
5. ใช้ข้อความตัวอย่างใหม่ที่สัมพันธ์กับสินค้า ห้าม lorem ipsum
6. ดู accessibility: keyboard, heading order, label, contrast, reduced motion และ screen reader
7. แยกส่วนที่ต้อง custom เป็น props/data ไม่ hardcode เนื้อหาซ้ำใน JSX
8. สรุป file structure, dependency ที่ต้องใช้ และวิธีติดตั้ง
## กติกาผลลัพธ์
- ตอบเป็นภาษาไทย ใช้ศัพท์เทคนิคภาษาอังกฤษได้ตามความเหมาะสม
- ให้ตัวเลข ตัวอย่าง และขั้นตอนที่ลงมือทำได้จริง ห้ามตอบกว้างๆ
- ถ้าข้อมูลที่ให้มาไม่พอ ให้ระบุสมมติฐานที่ใช้ไว้ด้านบนก่อนเริ่ม
- จบด้วย "ขั้นตอนถัดไป 3 ข้อ" ที่ทำได้ภายในสัปดาห์นี้