222 lines
11 KiB
Markdown
222 lines
11 KiB
Markdown
# 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 ข้อความด้านล่างนี้ทั้งหมด)
|
|
|
|
```text
|
|
คุณคือ 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)
|
|
```json
|
|
{
|
|
"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)
|
|
```json
|
|
{
|
|
"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)
|
|
```json
|
|
{
|
|
"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"
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 🚀 วิธีนำไปใช้งานในระบบ
|
|
|
|
1. **ขอให้ LLM สร้าง:** Copy ข้อความ Prompt ด้านบน แล้วส่งให้ LLM โดยสามารถระบุ Concept เพิ่มเติมได้ เช่น:
|
|
- *"สร้างธีมโทน Rose Gold สำหรับร้านน้ำหอมผู้หญิง"*
|
|
- *"สร้างธีม Minimalist Dark Mode สำหรับแบรนด์แฟชั่นญี่ปุ่น"*
|
|
2. **คัดลอก JSON:** Copy ผลลัพธ์ JSON ที่ LLM สร้างขึ้น
|
|
3. **นำเข้าใน Admin:**
|
|
- ไปที่หน้า **Admin Panel -> Theme & Design**
|
|
- คลิกปุ่ม **"Paste JSON"** (หรือ **"Import JSON"**)
|
|
- วางโค้ด JSON ลงในกล่องข้อความ แล้วกด **"Apply to Form"**
|
|
- กดปุ่ม **"Save Theme Settings"** เพื่อบันทึกใช้งานจริงทันที
|