Prompt สำหรับ LLM: สร้าง Theme & Design Settings JSON สำหรับระบบ E-Commerce

ไฟล์นี้ใช้สำหรับ Copy & Paste ส่งให้ LLM (ChatGPT / Claude / Gemini) เพื่อสร้างชุด Color Tokens, Typography, Animation, และ Layout Settings ให้กับเว็บไซต์ apps/website และ apps/spa เพื่อนำไป Import หรือวาง (Paste JSON) ในหน้า Admin -> Theme & Design

📋 Prompt ส่งให้ LLM (Copy ข้อความด้านล่างนี้ทั้งหมด)

คุณคือ Senior UI/UX Designer และ Design System Architect ระดับมืออาชีพ เชี่ยวชาญการออกแบบ Color Palette, Dark/Light Theme System, และ Visual Identity ให้กับร้านค้าออนไลน์ระดับ Luxury, Minimalist, Cyberpunk, หรือ Modern Lifestyle

[ภารกิจของคุณ]:
สร้าง Theme & Design Settings JSON ที่สมบูรณ์แบบ มีความกลมกลืนของสี (Color Harmony), Contrast Ratio ผ่านเกณฑ์ WCAG AA/AAA เพื่อนำเข้าสู่ระบบ E-commerce ในรูปแบบ Valid JSON Object ตาม Schema ที่กำหนดอย่างเคร่งครัด

[กฎและข้อกำหนดทางเทคนิค]:
1. ผลลัพธ์ต้องเป็น Valid JSON Object ล้วนๆ เริ่มต้นด้วย { และจบด้วย } เท่านั้น (ห้ามมี Markdown Backticks หรือคำเกริ่นนำ)
2. ค่าสีทั้งหมดต้องอยู่ในรูปแบบ HEX Color Code 6 หลัก (เช่น "#A100FF", "#0A0D14")
3. โครงสร้าง JSON ต้องประกอบด้วย 5 ส่วนหลัก:
   - "version": "1.0"
   - "themeTokens": Object เก็บค่าสีและสไตล์ทั้งหมด
   - "scrollRevealEnabled": boolean (true/false)
   - "scrollRevealStyle": "fade-up" | "fade-in" | "slide-left" | "zoom-in" | "none"
   - "scrollRevealDuration": number (เช่น 600, 700, 800)
   - "headerStyle": "single_line" | "two_tier"

[รายละเอียดของ themeTokens แต่ละฟิลด์]:
• กลุ่มสีแบรนด์และไฮไลต์ (Brand & Accents):
  - "brandPrimary": สีหลักของแบรนด์ (Primary CTA Button, Active Links)
  - "brandPrimaryHover": สีเมื่อชี้เมาส์ที่ปุ่มหลัก
  - "brandAccent": สีไฮไลต์สะดุดตา (Badge, Tag, Sale Discount)
  - "brandWarm": สีโทนอุ่น (Rating Star, Warm Glow)
  - "brandCool": สีโทนเย็น / Light contrast
  - "brandSuccess": สีแจ้งเตือนความสำเร็จ (In Stock, Completed)
  - "brandSoft": สีรองโทนอ่อน / Pastel highlight

• กลุ่มพื้นผิวและเลเยอร์ (Surfaces & Backgrounds):
  - "surfacePage": สีพื้นหลังหลักของหน้าเว็บ (เช่น "#0A0D14" สำหรับ Dark Mode หรือ "#F8FAFC" สำหรับ Light Mode)
  - "surfaceNavRest": สีพื้นหลังของ Header / Navbar
  - "surfaceCard": สีพื้นหลังของการ์ดสินค้า / Container Block
  - "surfaceMuted": สีพื้นหลังของ Section สลับลาย / Footer

• กลุ่มข้อความและการอ่าน (Typography Colors):
  - "textMain": สีข้อความหัวข้อและเนื้อหาหลัก (ต้อง Contrast ชัดเจนกับ surfacePage)
  - "mutedText": สีข้อความรอง / รายละเอียดปลีกย่อย
  - "captionText": สีข้อความกำกับ / ตัวเลขสถิติ / วันที่

• กลุ่มเส้นขอบและช่องทางติดต่อ (Borders & Social):
  - "borderColor": สีเส้นขอบการ์ดและเส้นแบ่ง Divider
  - "linePrimary": สีเขียว LINE Official หรือโทนสีไอคอนแชท
  - "linePrimaryHover": สีเมื่อ Hover ไอคอน LINE

• กลุ่มมิติและสเปซ (Elevations & Geometry):
  - "fontBody": ฟอนต์เนื้อหา (ปล่อยว่าง "" เพื่อใช้ค่าเริ่มต้นของระบบ หรือใส่ฟอนต์ Google Fonts)
  - "fontDisplay": ฟอนต์หัวข้อ (ปล่อยว่าง "" หรือใส่ฟอนต์ Serif/Display เช่น "Playfair Display")
  - "shadowCard": เงาของการ์ดปกติ (เช่น "0 2px 8px rgba(0,0,0,0.30)")
  - "shadowCardHover": เงาเมื่อ Hover การ์ด (เช่น "0 8px 24px rgba(0,0,0,0.40)")
  - "radiusBase": ความโค้งมนของปุ่ม/อินพุต (เช่น "8px", "12px", "9999px")
  - "radiusCard": ความโค้งมนของการ์ด (เช่น "16px", "20px", "24px")

---

[ตัวอย่าง JSON Template ที่ถูกต้อง]:
{
  "version": "1.0",
  "themeTokens": {
    "brandPrimary": "#A100FF",
    "brandPrimaryHover": "#C23BFF",
    "brandAccent": "#FF7A1A",
    "brandWarm": "#FF8F45",
    "brandCool": "#E7EBF5",
    "brandSuccess": "#46D36A",
    "brandSoft": "#D16BFF",
    "surfacePage": "#0A0D14",
    "surfaceNavRest": "#0D1018",
    "surfaceCard": "#151A24",
    "textMain": "#F5F7FF",
    "mutedText": "#A7AFBF",
    "linePrimary": "#00B900",
    "linePrimaryHover": "#009900",
    "captionText": "#7D8598",
    "borderColor": "#242A38",
    "surfaceMuted": "#111622",
    "fontBody": "",
    "fontDisplay": "",
    "shadowCard": "0 2px 8px rgba(0,0,0,0.30)",
    "shadowCardHover": "0 8px 24px rgba(0,0,0,0.40)",
    "radiusBase": "8px",
    "radiusCard": "16px"
  },
  "scrollRevealEnabled": true,
  "scrollRevealStyle": "fade-up",
  "scrollRevealDuration": 700,
  "headerStyle": "single_line"
}

🎨 ตัวอย่าง Preset สำเร็จรูปสำหรับใช้งานได้ทันที

1. Cyberpunk Dark Neon (สไตล์ Gaming, Gadget, Streetwear)

{
  "version": "1.0",
  "themeTokens": {
    "brandPrimary": "#A100FF",
    "brandPrimaryHover": "#C23BFF",
    "brandAccent": "#FF7A1A",
    "brandWarm": "#FF8F45",
    "brandCool": "#E7EBF5",
    "brandSuccess": "#46D36A",
    "brandSoft": "#D16BFF",
    "surfacePage": "#0A0D14",
    "surfaceNavRest": "#0D1018",
    "surfaceCard": "#151A24",
    "textMain": "#F5F7FF",
    "mutedText": "#A7AFBF",
    "linePrimary": "#00B900",
    "linePrimaryHover": "#009900",
    "captionText": "#7D8598",
    "borderColor": "#242A38",
    "surfaceMuted": "#111622",
    "fontBody": "",
    "fontDisplay": "",
    "shadowCard": "0 2px 8px rgba(0,0,0,0.30)",
    "shadowCardHover": "0 8px 24px rgba(0,0,0,0.40)",
    "radiusBase": "8px",
    "radiusCard": "16px"
  },
  "scrollRevealEnabled": true,
  "scrollRevealStyle": "fade-up",
  "scrollRevealDuration": 700,
  "headerStyle": "single_line"
}

2. Luxury Emerald & Gold (สไตล์ High-End Jewelry, Luxury Perfume)

{
  "version": "1.0",
  "themeTokens": {
    "brandPrimary": "#D4AF37",
    "brandPrimaryHover": "#E6C655",
    "brandAccent": "#0F52BA",
    "brandWarm": "#E5B94E",
    "brandCool": "#E8ECEF",
    "brandSuccess": "#2E8B57",
    "brandSoft": "#F5E6BE",
    "surfacePage": "#0B1512",
    "surfaceNavRest": "#0E1A16",
    "surfaceCard": "#14241F",
    "textMain": "#F8F9FA",
    "mutedText": "#A2B3AC",
    "linePrimary": "#00B900",
    "linePrimaryHover": "#009900",
    "captionText": "#6F857D",
    "borderColor": "#243A32",
    "surfaceMuted": "#0F1E19",
    "fontBody": "",
    "fontDisplay": "\"Playfair Display\", ui-serif, Georgia, serif",
    "shadowCard": "0 4px 12px rgba(0,0,0,0.35)",
    "shadowCardHover": "0 12px 32px rgba(212,175,55,0.15)",
    "radiusBase": "6px",
    "radiusCard": "14px"
  },
  "scrollRevealEnabled": true,
  "scrollRevealStyle": "fade-up",
  "scrollRevealDuration": 800,
  "headerStyle": "two_tier"
}

3. Clean Pastel Aesthetic (สไตล์ Organic Skincare, Bakery, Baby Care)

{
  "version": "1.0",
  "themeTokens": {
    "brandPrimary": "#E07A5F",
    "brandPrimaryHover": "#D06346",
    "brandAccent": "#F4A261",
    "brandWarm": "#F6BD60",
    "brandCool": "#E9ECEF",
    "brandSuccess": "#588157",
    "brandSoft": "#F2CC8F",
    "surfacePage": "#FAF8F5",
    "surfaceNavRest": "#FFFFFF",
    "surfaceCard": "#FFFFFF",
    "textMain": "#2B2D42",
    "mutedText": "#6C757D",
    "linePrimary": "#00B900",
    "linePrimaryHover": "#009900",
    "captionText": "#8D99AE",
    "borderColor": "#EAE5DF",
    "surfaceMuted": "#F3EFEA",
    "fontBody": "",
    "fontDisplay": "",
    "shadowCard": "0 4px 16px rgba(0,0,0,0.04)",
    "shadowCardHover": "0 10px 28px rgba(0,0,0,0.08)",
    "radiusBase": "12px",
    "radiusCard": "24px"
  },
  "scrollRevealEnabled": true,
  "scrollRevealStyle": "fade-in",
  "scrollRevealDuration": 600,
  "headerStyle": "single_line"
}

🚀 วิธีนำไปใช้งานในระบบ

ขอให้ LLM สร้าง: Copy ข้อความ Prompt ด้านบน แล้วส่งให้ LLM โดยสามารถระบุ Concept เพิ่มเติมได้ เช่น:
- "สร้างธีมโทน Rose Gold สำหรับร้านน้ำหอมผู้หญิง"
- "สร้างธีม Minimalist Dark Mode สำหรับแบรนด์แฟชั่นญี่ปุ่น"
คัดลอก JSON: Copy ผลลัพธ์ JSON ที่ LLM สร้างขึ้น
นำเข้าใน Admin:
- ไปที่หน้า Admin Panel -> Theme & Design
- คลิกปุ่ม "Paste JSON" (หรือ "Import JSON")
- วางโค้ด JSON ลงในกล่องข้อความ แล้วกด "Apply to Form"
- กดปุ่ม "Save Theme Settings" เพื่อบันทึกใช้งานจริงทันที

11 KiB Raw Blame History