# CLAUDE.md — Design System & กฎห้าม AI Slop (สำหรับเว็บขายของ)

> วางไฟล์นี้ไว้ในโฟลเดอร์โปรเจกต์ แล้ว Claude Code / AI จะยึดเป็นกติกาตอนสร้างเว็บ
> ปรับค่าในวงเล็บ [ ] ให้ตรงแบรนด์คุณ แล้วเริ่มสั่งงานได้เลย

---

## บุคลิกแบรนด์ (แก้ให้ตรงคุณ)
- ชื่อร้าน/แบรนด์: [ชื่อแบรนด์]
- ขายอะไร: [สินค้า]
- ลูกค้าคือใคร: [กลุ่มเป้าหมาย]
- โทนที่อยากให้รู้สึก: [เลือก: สะอาดมินิมอล / อบอุ่นเป็นกันเอง / หรูพรีเมียม / สดใสวัยรุ่น]

---

## Design Tokens (ระบบที่ AI ต้องใช้ทั้งเว็บ)

### สี — ใช้แค่นี้ ห้ามเพิ่มสีสดมั่ว
- พื้นหลักของเว็บ: ขาว/ครีม `#ffffff` หรือ `#faf8f5`
- ตัวอักษรหลัก: เกือบดำ `#1a1a1a` (อย่าใช้ดำสนิท)
- ตัวอักษรรอง/คำอธิบาย: เทา `#6b7280`
- สีแบรนด์ (ใช้กับหัวข้อ/จุดเน้น): [#สีแบรนด์ เช่น #c2410c]
- สีปุ่มหลัก (CTA): [#สีปุ่ม — สีเดียวเด่นๆ]
- เส้นขอบ/เส้นคั่น: เทาจางมาก `#e5e7eb`
- **ห้าม:** gradient ม่วง-น้ำเงินเต็มหน้า, สีนีออน, สีสดหลายสีพร้อมกัน

### ฟอนต์ — หัว 1 + เนื้อหา 1
- ฟอนต์หัวข้อ: [เช่น "IBM Plex Sans Thai" หรือ "Anuphan"] น้ำหนัก 600–700
- ฟอนต์เนื้อหา: [เช่น "Sarabun" หรือ "Noto Sans Thai"] น้ำหนัก 400
- ขนาด: Hero 40–56px / หัวรอง 22–28px / เนื้อหา 16–18px / คำอธิบาย 14px
- line-height เนื้อหา: 1.7

### ระยะห่าง — สเกลคงที่
- ใช้เฉพาะ: 4, 8, 12, 16, 24, 32, 48, 64, 96px
- ระยะห่างระหว่าง section: 64–96px
- ใส่ white space เยอะ = ดูแพง

### องค์ประกอบ
- มุมโค้ง: 8–16px สม่ำเสมอทั้งเว็บ
- เงา: บางมาก (`0 1px 3px rgba(0,0,0,.06)`) ไม่ฟุ้ง
- ปุ่ม: ทึบ สีเดียว ตัวอักษรหนา มุมโค้งเท่าการ์ด
- ไอคอน: ใช้ Lucide เส้นบาง ชุดเดียว ห้าม emoji ในหัวข้อ

---

## กฎห้าม AI Slop (เช็กทุกครั้งก่อนส่งงาน)
1. ❌ ห้าม gradient ม่วง-น้ำเงินฟุ้งทั้งหน้า → ใช้สีแบรนด์ + พื้นเป็นกลาง
2. ❌ ห้าม emoji เกลื่อนหัวข้อ → ใช้ไอคอนเส้นชุดเดียว
3. ❌ ห้าม stock photo / รูป AI → เว้นช่อง `[ใส่รูปสินค้าจริงที่นี่]` ไว้ให้เจ้าของใส่เอง
4. ❌ ห้ามฟอนต์ default → ใช้ฟอนต์ที่ระบุข้างบน
5. ❌ ห้ามจัดกึ่งกลางทุกอย่าง → เนื้อหายาวชิดซ้าย
6. ❌ ห้ามการ์ดเงาฟุ้งเท่ากันหมด → เงาบาง เน้นเฉพาะการ์ดสำคัญ
7. ❌ ห้ามคำสวยลอยๆ ("ดีที่สุด/ครบวงจร") → เขียนเฉพาะเจาะจง มีตัวเลข

## โครงสร้างหน้าร้าน (ทำตามลำดับนี้)
Nav → Hero → สินค้า/จุดเด่น → ทำไมต้องเรา → รีวิว/Social Proof → ราคา/ข้อเสนอ → FAQ → ปุ่มปิดการขาย → Footer ติดต่อจริง

## ข้อกำหนดเทคนิค
- Mobile-first เสมอ (ลูกค้า 80% มาจากมือถือ) ปุ่มใหญ่กดง่าย
- โค้ดเป็น HTML/CSS ไฟล์เดียวจบ ถ้าทำได้ (ง่ายต่อการเอาไปใช้)
- รูปใส่ `loading="lazy"` ขนาดไม่เกินจำเป็น
- มีปุ่ม CTA หลักซ้ำอย่างน้อย 2 จุด

## เวลาเสร็จแล้ว
ให้วิจารณ์งานตัวเองด้วย "กฎห้าม AI Slop" 7 ข้อข้างบน แล้วแก้จุดที่ยังหลุด + ลดของที่ไม่จำเป็น + เพิ่ม white space