ป้อน reference ดีๆ ให้มันดู แล้ว reference ดีๆ มาจากไหน

"ป้อน reference ดีๆ ให้ Claude ดูสิ" เป็นคำแนะนำที่ถูก แต่เอาไปทำจริงไม่ได้

reference ดีๆ คืออะไร ไปเอามาจากไหน กี่รูปถึงจะพอ

ผมเองก็เขียนแนะนำแบบนี้ไว้เมื่อสองเดือนก่อน แล้วก็ปิดท้ายโพสต์นั้นเองว่ามันลอย จับต้องไม่ได้ ค้างไว้แค่นั้นมาสองเดือน

วันนี้มาปิด

คำตอบมีสองชั้น reference ไว้ให้มันเห็นของจริงว่า layout วางยังไง ส่วนสีต้องเป็น vocabulary เพราะ reference บอกแทนไม่ได้

reference ดีๆ มาจากไหน

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

ตัวที่ปิดช่องนี้คือ Mobbin MCP ต่อไว้ที่ https://api.mobbin.com/mcp ข้างในเป็นคลัง screenshot แอปจริงหกแสนกว่าหน้า จัดหมวดไว้แล้วว่าหน้าไหนคือหน้าอะไร

ต่อเสร็จแล้ว Claude ยิงเองได้ ไม่ต้องแคปให้

สั่งได้ตรงๆ ว่าขอ onboarding แบบแอปการเงิน ขอ empty state แบบแอป productivity ขอ paywall ที่คนกดจริง มันไปหยิบของจริงมาดูก่อนวาง

ตัวนี้ไม่ฟรี ต้องมี account แบบเสียเงิน แล้วตอนต่อครั้งแรกต้อง authorize ผ่าน browser ไม่ใช่วาง URL แล้วใช้ได้เลย Pro อยู่ประมาณ 10 ยูโรต่อเดือนแบบจ่ายรายปี ใครแคปเองไหวอยู่แล้ววิธีเดิมก็ยังใช้ได้ ตัวนี้ไว้สำหรับคนที่ทำถี่จนแคปไม่ทัน

คำว่า modern clean minimal มันไม่เคยเป็น spec มันเป็นคำคุณศัพท์ ส่วน screenshot เป็น spec

อีกครึ่งที่ reference ช่วยไม่ได้

reference บอก layout ได้ แต่บอกสีไม่ได้ เพราะแคปมาสิบหน้าก็ได้สิบชุดสี เอามารวมกันแล้วมั่ว

ตรงนี้ต้องเป็น vocabulary ไม่ใช่ตัวอย่าง มีอยู่ 6 ตำแหน่ง เอาไปวางได้เลย

:root {
  --bg:      #181114;  /* พื้น อุ่น ไม่ใช่ดำสนิท */
  --ink:     #f0e6e9;  /* ตัวหนังสือหลัก ไม่ใช่ขาวสนิท */
  --accent:  #e05a72;  /* สีเน้น สีเดียวพอ */
  --surface: #241b1f;  /* การ์ด ของที่ยกจากพื้น */
  --line:    rgb(240 230 233 / 12%);  /* เส้นคั่น */
  --muted:   #a89299;  /* เสียงเบา caption timestamp */
}

กติกาข้อเดียว ห้ามพิมพ์ hex ดิบใน component ให้เรียกตำแหน่งงานแทน

พอมันไม่ต้องเดาว่าตรงนี้ควรสีอะไร มันรู้ว่าตรงนี้คือเสียงเบา ตรงนั้นคือของที่กดได้ ที่เหลือมันเลือกต่อเองได้

อยากเปลี่ยนธีมก็แก้ --accent บรรทัดเดียว ทั้งชุดขยับตาม

อยากทำแบบไหน หยิบอันไหน

reference กับ vocabulary รวมไว้ใน repo เดียว มี tokens.css มี CLAUDE.md ที่วาง root แล้ว Claude Code ทำตามเอง

แล้วใส่แอปที่ทำด้วยชุดนี้ไว้ด้วย 13 อัน รันได้จริงทุกอัน เปิดดู แก้ต่อ หรือยก pattern ไปใช้ได้เลย

• จะทำ dashboard ข้อมูลเยอะ เปิด mission-control
• จะทำหน้า list ของสะสม เปิด dogear
• จะทำ reference ค้นหนักๆ เปิด dota2-codex
• จะทำอะไรที่ motion เยอะ เปิด void-arena
• จะทำมือถือเป็นหลัก อ่านยาว เปิด reading-companion
• จะทำไทยๆ มี flow ให้เลือก เปิด wai7wat-oracle

เปิดอันที่ใกล้ที่สุด เปลี่ยนว่ามันเกี่ยวกับอะไร layout มาแล้ว สีมาแล้ว ไม่ต้องเริ่มจากหน้าขาว

แต่ละโฟลเดอร์มี README บอกว่าเป็นอะไร รันยังไง ใช้สีไหนบ้าง

เปิด agent-dev-thai.github.io/design-starter กดปุ่มเดียวเข้าไปดูได้ทั้ง 13 อัน มี 7 อันที่กดเล่นได้เลยในเบราว์เซอร์ ไม่ต้องโหลดอะไรก่อน

code อยู่ที่ github.com/agent-dev-thai/design-starter

code กับ style เอาไปได้เลย CC0 ส่วนรูปกับเสียงในตัวอย่างเป็นของเจ้าของเดิม เปลี่ยนเป็นของตัวเองก่อนใช้จริง

ไม่ต้องให้เครดิต แก้ชื่อ แก้สี ทำเป็นของตัวเองได้เลย

---

ป้อน reference ดีๆ ให้มันดู ตอนนี้จับต้องได้แล้ว