ปรับดีไซน์กับ AI ให้ได้ที่ใจ

ปัญหาที่ผมเจอตอนแรก — ขอ Lovable สร้างหน้า ได้มาแล้ว มัน "ไม่ใช่" แต่ผมพิมพ์อะไรไม่ออก เพราะไม่รู้คำที่จะอธิบายว่าอะไรไม่ใช่

หลังจากใช้บ่อยขึ้น ผมจดศัพท์ที่ AI เข้าใจไว้ พอใช้ครบสไตล์ที่ผมอยากได้ก็มาเอง

ศัพท์ดีไซน์ที่ผมใช้บ่อย

ระบุชัดที่จะแก้

อันนี้คือผิดที่ผมทำตอนแรกบ่อยที่สุด

ผมเคยพูดแบบนี้:

"ไม่ชอบเลย ทำใหม่หมด"

ผลคือ Lovable ทำใหม่หมดจริงๆ และของดีๆ ที่มีอยู่ก่อนก็หายไปด้วย

ตอนนี้ผมพูดแบบนี้:

"Hero section — เปลี่ยนพื้นหลังเป็นสีน้ำตาลอ่อน และทำให้พาดหัวใหญ่ขึ้นประมาณ 20%"

แค่ระบุ section + บอกชัดว่าจะแก้อะไร = ของส่วนอื่นไม่กระทบ

ใช้เว็บที่ชอบเป็น reference

วิธีที่ผมใช้บ่อยและได้ผลดี — ถ้ามีเว็บไหนที่ชอบ บอกให้ Lovable เลียนแบบ

"ทำ section testimonial ให้สไตล์เหมือนหน้า testimonials ของ linear.app — มีรูปโปรไฟล์, ดาว, ข้อความ และชื่อบริษัทใต้ชื่อ"

"Navbar ให้ดูเหมือน notion.so — minimal, สีอ่อน, มี backdrop blur เวลา scroll"

ภาษาคนพูดได้ ไม่ต้องใช้ศัพท์เทคนิค Lovable เข้าใจ

ภาษาแก้ที่ผมใช้บ่อย

ขนาด/ระยะห่าง

• "ทำให้ใหญ่ขึ้น/เล็กลง" / "more spacing" / "less padding"
• "compact กว่านี้" / "เพิ่ม breathing room"

สี

• "warmer / cooler color"
• "primary color เปลี่ยนเป็น [hex หรือชื่อสี]"
• "accent color สำหรับ CTA"

ตัวหนังสือ

• "ใช้ฟอนต์ serif / sans-serif"
• "headings bolder"
• "body text ใหญ่ขึ้น 16-18px"

Layout

• "เปลี่ยนจาก 3 column เป็น 2 column"
• "stack แนวตั้งบนมือถือ"
• "center align ทั้ง section"

Animation

• "เพิ่ม fade-in ตอน scroll มาเจอ section"
• "smooth scroll สำหรับ link ใน navbar"
• "cards ตอน hover ให้ยกขึ้น 4px + shadow ลึกขึ้น"

ลองฝึก iterate 5 รอบ

Hero section ให้:
- พาดหัวใหญ่ขึ้นเป็นประมาณ 4rem
- เพิ่ม sub-text ใต้พาดหัว สี gray-500 ขนาด 1.25rem
- ปุ่ม CTA ให้มี hover effect — สีเข้มขึ้นและขยาย 2-3%
- เพิ่ม scroll indicator ด้านล่าง (ลูกศรเด้งๆ)

Features section:
- icon ขนาด 48px สีตาม primary color
- การ์ด hover: ยกขึ้น 4px + shadow ชัดขึ้น
- ระยะห่างระหว่างการ์ดเพิ่มเป็น gap-8
- เพิ่มเส้นขีดบางๆ ด้านบนของแต่ละการ์ด

Section ผลงาน:
- เปลี่ยนจาก 3 column เป็น 2 column ให้การ์ดใหญ่ขึ้น
- รูปสินค้าให้สัดส่วน 4:3
- ชื่อโครงการใช้ฟอนต์ display หนาและใหญ่
- ราคาแสดงเด่น สี primary
- เพิ่มปุ่ม "ดูรายละเอียด" ในทุกการ์ด

ตรวจและแก้สำหรับมือถือ:
- Navbar ซ่อนเมนูเป็น hamburger
- Hero ลดพาดหัวเหลือ 2.5rem
- Features stack เป็นแนวตั้ง gap-6
- Section ผลงาน 1 column
- ทุกปุ่มมี touch target ≥ 44px (กดง่ายไม่พลาด)

Final polish:
- เพิ่ม fade-in animation ทุก section ตอน scroll มาเจอ
- smooth scroll สำหรับทุก anchor link ใน navbar
- รูปทุกรูปมี blur placeholder ระหว่างโหลด
- เพิ่ม favicon
- SEO basics: title, meta description, OG image
- Loading state ของ form submit

เคล็ดป้องกันความเสียหาย

• Iterate ทีละจุด ไม่ขอแก้ 5-6 อย่างพร้อมกัน — Lovable งงและพังบ่อย
• ไม่ถูกใจ — บอกให้ revert "กลับไปเวอร์ชันก่อนหน้า"
• เซฟเวอร์ชันที่โอเค ก่อนลอง experiment ใหม่ — Lovable มี version history ใช้ได้