---
name: landing-page-craft
description: ทักษะการออกแบบและพัฒนา Landing Page ที่เน้น Conversion สูงสุด (High-Converting) โดยยึดหลัก Clarity, Speed, และ Reduced Friction (1:1 Attention Ratio, Benefit-Driven, Mobile-First) — รวม playbook เฉพาะทางสำหรับ Thai SaaS บน LINE (เพิ่มเพื่อน/ฟรีผ่าน LINE)
---

# 🚀 วิจิตรศิลป์แห่งแลนดิ้งเพจ (Landing Page Craft)

สกิลสำหรับการออกแบบ วางโครงสร้าง และพัฒนา Landing Page ให้มี Conversion Rate สูงสุด โดยเปลี่ยนจากแค่ "หน้าเว็บสวยงาม" ให้กลายเป็น "เครื่องมือสร้างรายได้และยอดขาย" ที่ทำงานได้อย่างมีประสิทธิภาพ

## 📌 กฎทองคำแห่ง Conversion (The Golden Rules)
1. **1:1 Attention Ratio:** 1 หน้า ต้องมีเพียง 1 เป้าหมาย 1 เส้นทาง และ 1 Call to Action (CTA) เท่านั้น ลบเมนู Navigation, Footer Links, และลิงก์ออกภายนอกทั้งหมดที่ทำให้ผู้ใช้หลุดโฟกัส
2. **Message Match:** พาดหัว (Headline) และคำอธิบาย (Sub-headline) ต้องตรงกับความคาดหวังหรือคำค้นหา (Ads/Search intent) ที่พาผู้ใช้มายังหน้านี้ 100%

## 🏗️ โครงสร้างที่ต้องมี (Structural Essentials)
1. **Hero Section (วินาทีชี้ชะตา):** ต้องตอบ 3 คำถามนี้ให้ได้ภายใน 3 วินาทีแรก:
   - *นี่คืออะไร?*
   - *ทำไมฉันต้องแคร์? (ประโยชน์ที่ฉันจะได้)*
   - *ฉันต้องทำอะไรต่อไป?*
2. **Benefit-Driven Copy (เน้นผลลัพธ์ ไม่ใช่แค่ฟีเจอร์):** 
   - อย่ามัวแต่ลิสต์ฟีเจอร์ ให้พูดถึงผลลัพธ์ (Outcomes) ที่ผู้ใช้จะได้รับ 
   - ใช้ประโยคสั้นกระชับ (ไม่เกิน 15-20 คำ) อ่านเข้าใจง่ายตั้งแต่ประโยคแรก
3. **Form UX (ฟอร์มยิ่งสั้น คอนเวอร์ชันยิ่งพุ่ง):**
   - ขอข้อมูลเท่าที่จำเป็นจริงๆ เท่านั้น (แนะนำให้ไม่เกิน 3 Fields)
   - การลดฟิลด์จาก 11 เหลือ 4 สามารถเพิ่ม Conversion ได้มากกว่า 100% 

## 🛡️ ความน่าเชื่อถือ (Trust & Social Proof)
- **ตำแหน่งต้องเป๊ะ:** วาง Social Proof (รีวิว, โลโก้ลูกค้า, ผลลัพธ์) ไว้ตรงจุดที่ผู้ใช้อาจเกิดความลังเล เช่น ใต้ Hero Section หรือใกล้ๆ ปุ่ม CTA
- **หลักฐานเชิงประจักษ์:** ใช้ UGC (User-Generated Content), รูปภาพ Before/After, หรือตัวเลขที่จับต้องได้ (เช่น "ธุรกิจกว่า 6,000+ แห่งเลือกใช้")

## ⚡ ประสิทธิภาพทางเทคนิค (Technical Performance)
- **Speed is Revenue:** ต้องโหลดเสร็จใน 2 วินาที! หน้าเว็บที่โหลดเร็ว 1 วินาที แปลงผู้เข้าชมได้มากกว่าเว็บที่โหลด 5 วินาทีถึง 3 เท่า
- **Mobile-First Design:** ทราฟฟิกกว่า 83% มาจากมือถือ ออกแบบให้ใช้นิ้วโป้งกดง่าย (Thumb-friendly) ตัวหนังสือต้องอ่านออกโดยไม่ต้องซูม ปุ่มต้องใหญ่พอให้แตะง่าย

## 🛠️ ขั้นตอนการทำงานของสกิลนี้
เมื่อผู้ใช้ขอให้ "สร้าง Landing Page" ให้ทำตามขั้นตอนนี้:
1. **ซักไซ้ (Grill):** สอบถามผู้ใช้สั้นๆ 3 ข้อ: 
   - *เป้าหมายหลักคืออะไร? (เก็บ Lead, ขายของ, สมัครสมาชิก)*
   - *ใครคือกลุ่มเป้าหมาย?*
   - *จุดเด่นที่ชนะคู่แข่งคืออะไร?*
2. **วางโครงร่าง (Wireframing / Copywriting):** ร่าง Copy และโครงสร้างทีละ Section (Hero, Benefits, Social Proof, CTA) เสนอให้ผู้ใช้อ่านก่อน
3. **ลงมือโค้ด:** เขียนหน้า Landing Page โดยเน้น Responsive, โหลดเร็ว, และนำแนวทาง 1:1 Attention Ratio มาใช้อย่างเคร่งครัด

---

## 🎨 Workflow หลัก: Claude Design First (เมื่อต้อง "สวยพรีเมียม")
> Hand-code Tailwind เองมักสู้ความสวยของ generative design ไม่ได้ → ใช้ Claude Design ลงสีให้ แล้วเราคุมแกน
> **แบ่งงาน:** สกิลนี้คุม *โครง + copy + conversion + brand + honesty* · Claude Design คุม *ความสวย*
> (วิธี hand-code ข้างบน = fallback สำหรับงานเร็ว/เรียบ)

**ขั้นตอน:**
1. **ร่างด้วย playbook** — grill เป้า/กลุ่ม/จุดเด่น → ฟิกซ์โครง section + copy ทุกคำ + brand constraints
2. **ประกอบ design prompt** (template ล่าง) — หลัก **"ล็อกแกน ปล่อยภาพ"**: ล็อก section order, copy ทุกคำ, สีแบรนด์, 1 CTA, honesty · ปล่อยอิสระ layout/effects/spacing/typography
3. **ส่งให้ Claude Design** — ผู้ใช้วาง prompt บน **claude.ai (artifacts)** → ได้ HTML/React → ส่งกลับ
4. **Integrate เข้า stack จริง** (อย่าใช้ as-is) — แปลงเป็น `app/page.tsx` (หรือ framework ที่ใช้), map สีเป็น brand token, เสียบ asset จริง (โลโก้/แบนเนอร์), ลิงก์/ENV จริง, ตัด dependency แปลกปลอม (shadcn/CDN/ลิงก์นอก)
5. **Verify** — responsive จริงทุกจอ (375 / 768 / 1280, ใช้ preview ถ่ายดู) + เช็คว่า 1:1 CTA และ honesty guard ไม่หลุดหลัง Claude Design ตกแต่ง

### 📋 Template prompt (เติมช่อง `[…]` แล้วส่ง)
```
สร้าง Landing Page (artifact: React + Tailwind, mobile-first, responsive) สำหรับ [PRODUCT/หนึ่งบรรทัดว่าทำอะไร]

[LOCK — ห้ามเปลี่ยน]
• กลุ่มเป้าหมาย: [ใคร]
• โครง section เรียงเป๊ะตามนี้: hero → [urgency banner ถ้าจริง] → ปัญหา(pain) → ฟีเจอร์→ประโยชน์ → [สกรีนช็อตจอจริง] → 3 ขั้นเริ่มใช้ → [ราคา] → CTA ปิดท้าย → footer
• copy ทุกคำ ใช้ตามนี้ ห้ามแต่งเพิ่ม:
  - พาดหัว: [..]   - sub: [..]
  - CTA: [label]
  - ปัญหา: [..]   - ประโยชน์: [..]   - FAQ: [..]
• แบรนด์: สีหลัก [#hex], พื้น [#hex/ครีม], ฟอนต์ [..]
• CTA เดียว ทุกปุ่มชี้ปลายทางเดียวกัน (1:1 Attention Ratio)
• รูปภาพ: ใช้ placeholder [อธิบายมาสคอต/แบนเนอร์ บนพื้นสีแบรนด์] — จะสลับเป็นรูปจริงตอน integrate
• ห้าม: ปั้น social proof/รีวิว/ตัวเลขลูกค้าที่ไม่มีจริง, urgency/scarcity/ส่วนลดปลอม, ลิงก์ออกนอกเกินจำเป็น

[FREE — ออกแบบให้สวยพรีเมียมเต็มที่]
• layout, การจัดวางในแต่ละ section, spacing/whitespace
• effects: gradient / glassmorphism / soft shadow / micro-interactions (hover)
• typography hierarchy + visual treatment
• อิงหลักสกิล `tigr-ui-craft`: กฎสี 60-30-10, เงานุ่ม, กระจกฝ้า, ระยะหายใจ
```

---

## 🇹🇭 Thai LINE-SaaS Landing Playbook
> Playbook เฉพาะทางสำหรับ SaaS ไทยที่ onboard ผ่าน LINE (โมเดล "เพิ่มเพื่อน → ใช้ฟรี") เช่น บอทในกลุ่ม/OA
> สกัดจากเคสจริง: **coachkito.com** (ผู้ช่วยเทรนเนอร์) + **LALALA** (ลางานในกลุ่ม LINE)
> **ภาพ/สไตล์/สี → ใช้คู่กับสกิล `tigr-ui-craft` เสมอ** (playbook นี้คุม copy/โครง/conversion, tigr คุมความสวย)

### (a) Template โครงหน้า (เรียงบนลงล่าง)
1. **Hero** — แบนเนอร์/มาสคอต + พาดหัว + sub + **CTA หลัก** (3 วิตอบ: นี่คืออะไร/ได้อะไร/ทำอะไรต่อ)
2. **[Urgency banner]** — *ใส่เฉพาะถ้ามีจริง* (early-access/รุ่นแรก/เส้นตายจริง)
3. **Problem / Pain** — ชี้ปัญหาวิธีเดิมที่กลุ่มเป้าหมายเจอ ("ทำไมต้องเสียเวลากับ…")
4. **Features → Benefits** — แปลงฟีเจอร์เป็นผลลัพธ์ (3–4 ข้อพอ)
5. **สกรีนช็อตจอจริง** — หลักฐานว่าใช้ได้จริง (แทน social proof ที่ยังไม่มี)
6. **3 ขั้นเริ่มใช้** — ดักจุด friction ของ LINE (เพิ่มเพื่อน ≠ เข้ากลุ่ม → บอกขั้น "เชิญเข้ากลุ่ม" ให้ชัด)
7. **[ราคา]** — *ถ้ามี* tier ladder (Free → Pro), anchor ด้วยราคาขีดฆ่า *เฉพาะส่วนลดจริง*
8. **CTA ปิดท้าย + QR** — ปุ่มเดิมซ้ำ (funnel เดียว) + QR เพิ่มเพื่อน
9. **Footer** — แบรนด์ + ติดต่อ + ลิงก์นโยบาย (จางๆ ตาม PDPA)

### (b) Conversion checklist (เทคนิคซื่อสัตย์)
- [ ] **Funnel เดียว** — ทุก CTA ชี้ปลายทางเดียว (เพิ่มเพื่อน LINE) แม้ปุ่มซ้ำหลายจุด = ยังนับ 1:1
- [ ] **Friction ต่ำ** — ชูจุด "ไม่ต้องโหลดแอป / อยู่ใน LINE ที่ใช้อยู่แล้ว / ไม่ต้องสมัคร"
- [ ] **ตัวเลขเจาะจง** — "ฟรี 60 วัน", "20 คนแรก" (ต้องเป็นเลขจริง)
- [ ] **Risk reversal** — "ฟรี ไม่ผูกมัด / ไม่ต้องผูกบัตร"
- [ ] **Trust เชิงฟังก์ชัน** — เมื่อยังไม่มีรีวิว: ใช้สกรีนช็อตจริง + niche positioning ("ออกแบบเพื่อ[กลุ่ม]ไทยโดยเฉพาะ") + จุดความปลอดภัย (เช่น "ระบบไม่ถือเงิน", "ตาม PDPA")
- [ ] **Niche > กว้าง** — ระบุกลุ่มเป้าหมายให้แคบ message ถึงจะกระแทก

> ⚠️ **Honesty guard (กฎเหล็ก):** urgency, scarcity ("รุ่นแรก N คน"), anchor pricing (ขีดราคา) — **ใช้ได้เฉพาะเมื่อเป็นจริงเท่านั้น** ห้ามปั้นเส้นตาย/ความขาดแคลน/ส่วนลดปลอม (dark pattern) เด็ดขาด · social proof ห้ามแต่งรีวิว/ตัวเลขลูกค้าที่ไม่มีจริง

### (c) สูตรพาดหัว
- **"บอกลา [pain เดิม] — ให้ [เครื่องมือ] ช่วย [ผลลัพธ์]"** (coachkito: "บอกลา Excel… ให้ AI ช่วยจัดการลูกค้า")
- หรือ **"[ทำสิ่งที่อยากได้] โดยไม่ต้อง [pain]"** (LALALA: "ลางานในกลุ่ม LINE ไม่ต้องพิมพ์มือ ไม่หาย")
- ≤ 15–20 คำ · benefit-driven · message match กับสิ่งที่พาเขามา