feat: update website-creator to Plan-First + Creative Design workflow

- Add Phase 1: Context Gathering with creative brief questions - Add Phase 2: Creative Design (mandatory - multiple directions) - Add Phase 3: Master Plan before execution - Add APPROVAL GATE - wait for user approve before executing - Update questions.md with emotional/target audience questions - Remove Astro DB references from welcome.mdx and index.astro - Focus on unique design, not generic templates
2026-04-22 09:31:54 +07:00
parent 5033281eab
commit a29b7af4b8
39 changed files with 312 additions and 10040 deletions
--- a/skills/website-creator/SKILL.md
+++ b/skills/website-creator/SKILL.md
@@ -167,56 +167,247 @@ export const schema = defineSchema({

 ## Workflow A: สร้างเว็บใหม่

-### Step 1: Pre-Project Questions
+> ⚠️ **สำคัญ: ต้องวางแผนก่อน + รอ approve ก่อนทำงานเสมอ**
+>
+> ขั้นตอน: Context → Design → Plan → Approve → Execute

-ใช้ `references/questions.md` เป็นแนวทาง:
+---

+### Phase 1: Context Gathering (ถามให้ครบ)
+
+**ใช้ `references/questions.md` เป็นแนวทาง แต่ต้องถามให้ลึกกว่า surface level:**
+
+#### 1.1 ข้อมูลพื้นฐาน
 ```
 1. ชื่อเว็บไซต์/บริษัท?
 2. ทำอะไร? (ขายอะไร/ให้บริการอะไร)
 3. กลุ่มเป้าหมายคือใคร?
 4. มีเว็บอยู่แล้วหรือยัง?
-5. ชอบสี/ดีไซน์แบบไหน?
-6. มี logo file ไหม?
-7. ต้องการหน้าอะไรบ้าง?
-8. มี SMTP/email สำหรับส่งเมลไหม?
-9. มี GA4/Marketing tools ไหม?
-10. มี DPO หรือยัง?
+```
+
+#### 1.2 Brand Context (ทำให้ต่างจากคนอื่น)
+```
+5. ทำไมลูกค้าควรเลือกคุณ ไม่ใช่คู่แข่ง?
+6. มี brand story หรือ positioning อะไรที่ต้องสื่อสาร?
+7. มี tone of voice หรือ personality อย่างไร? (เช่น: friendly, professional, bold, playful)
+```
+
+#### 1.3 Design Context
+```
+8. มี brand guidelines/logo file ไหม?
+9. มี reference sites ที่ชอบ/ไม่ชอบบ้างไหม? (ส่งลิงก์มาได้)
+10. มีสีที่ต้องใช้/ห้ามใช้บ้างไหม?
+```
+
+#### 1.4 Technical Context
+```
+11. ต้องการหน้าอะไรบ้าง? (sitemap)
+12. มี SMTP/email สำหรับส่งเมลไหม?
+13. มี tracking tools ต้องติดตั้งไหม? (GA4, Facebook Pixel, etc.)
+14. มี DPO หรือยัง? (สำหรับ PDPA)
 ```

 ---

-### Step 2: Plan Sitemap + Content Structure
+### Phase 2: Creative Design (บังคับต้องทำ)

-**เรียก skill: `spec-driven-development`** — เขียน SPEC.md ก่อนลงมือทุกครั้ง
+**เรียก skills: `ckm:design` + `ui-ux-pro-max` + `frontend-ui-engineering`**

-แสดง sitemap ให้ user ดูก่อนเสมอ รอ approve ก่อนลงมือ:
+#### 2.1 สร้าง Creative Brief
+
+ก่อนสร้าง design ต้องมี creative brief ที่ชัดเจน:

 ```
-/                           # Home
-/about                      # About Us
-/services                   # Services overview
-/contact                    # Contact + Form
-/blog                       # Blog listing (ถ้ามี)
-/blog/[slug]               # Individual blog post
-/privacy-policy            # PDPA Privacy Policy
-/terms-of-service          # PDPA Terms of Service
+# Creative Brief
+
+## Brand Essence
+- ชื่อ/บริษัท: [ชื่อ]
+- สิ่งที่ทำ: [บริการ/สินค้า]
+- ทำไมต่าง: [unique selling point]
+
+## Target Emotion
+- ต้องการให้คนเข้าเว็บแล้วรู้สึก: [เช่น มั่นใจ, สบายใจ, ตื่นเต้น, ไว้วางใจ]
+
+## Design Direction
+- ห้ามใช้: [สี/รูปแบบที่ไม่ชอบ]
+- อาจใช้: [สี/รูปแบบที่ชอบ]
+- References: [ลิงก์ที่ชอบ/ไม่ชอบ]
+```
+
+#### 2.2 สร้าง 2-3 Creative Directions ที่ต่างกันจริงๆ
+
+**ใช้ `ckm:design` + `ui-ux-pro-max` สร้าง options ที่แตกต่างกัน:**
+
+```
+Direction A: "[Name]"
+- Concept: [แนวคิดหลัก]
+- Visual Style: [ลักษณะ visuals]
+- Color Palette: [โทนสี]
+- Typography: [แบบอักษร]
+- Layout Character: [โครงสร้าง layout ที่เป็นเอกลักษณ์]
+
+Direction B: "[Name]"
+- Concept: [แนวคิดหลัก - ต่างจาก A]
+- Visual Style: [ลักษณะ visuals - ต่างจาก A]
+- Color Palette: [โทนสี - ต่างจาก A]
+- Typography: [แบบอักษร - ต่างจาก A]
+- Layout Character: [โครงสร้าง layout - ต่างจาก A]
+```
+
+#### 2.3 Present + Wait for Selection
+
+**นำเสนอ directions ทั้งหมด แล้วรอ user เลือก**
+
+---
+
+### Phase 3: Master Plan (วางแผนทั้งหมด)
+
+**เรียก skill: `spec-driven-development`**
+
+สร้าง master plan ที่รวมทุกอย่าง:
+
+```
+# Master Plan: [ชื่อเว็บ]
+
+## Selected Design Direction
+[Direction ที่ user เลือกพร้อม rationale]
+
+## Sitemap
+/
+├── home
+├── about
+├── services
+├── contact
+└── ...
+
+## Design System
+- Colors: [hex codes]
+- Typography: [fonts + weights]
+- Components: [list]
+- Layout Patterns: [descriptions]
+
+## Content Structure (Tina CMS)
+- Collections: [posts, pages, etc.]
+- Fields: [schema]
+
+## Technical Stack
+- Framework: Astro 6
+- CMS: Tina CMS
+- Styling: Tailwind CSS v4
+- Consent: ConsentOS
+
+## Tracking Scripts
+- Analytics: [tools]
+- Marketing: [tools]
+
+## PDPA Compliance
+- Privacy Policy
+- Terms of Service
+- ConsentOS Integration
+
+## Development Phases
+1. [Phase 1: Setup + Design Foundation]
+2. [Phase 2: Build Pages]
+3. [Phase 3: Content + QA]
+4. [Phase 4: Deploy]
+
+## Timeline
+- Phase 1: X days
+- Phase 2: X days
+- Phase 3: X days
 ```

 ---

-### Step 3: Design Framework
+### ⏸️ APPROVAL GATE

-**เรียก skills: `ckm:design` + `frontend-ui-engineering` + `ckm:ui-styling` + `ui-ux-pro-max`**
+**หยุดที่นี่ - รอ APPROVE ก่อนทำงาน**

-ขั้นตอน:
-1. ถามว่ามี brand guidelines หรือ reference ไหม
-2. ถ้าไม่มี → ถาม 2 คำถาม:
-   - ชอบ dark mode ไหม หรือ light mode อย่างเดียว?
-   - ชอบ style แบบไหน: minimal, bold, creative?
-3. ใช้ `ckm:design` เพื่อสร้าง design system
-4. ใช้ `ui-ux-pro-max` เพื่อออกแบบ wireframes
-5. ใช้ `ckm:ui-styling` เพื่อสร้าง components
+แสดง:
+1. Design direction ที่เลือก (screenshot/mockup)
+2. Sitemap ที่จะสร้าง
+3. Tech stack summary
+4. Timeline estimate
+
+**รอ user พิมพ์ "approve" หรือ "เริ่มได้" ก่อนไปต่อ**
+
+---
+
+### Phase 4: Execution (เริ่มทำหลัง APPROVE)
+
+**หลังได้รับ approve แล้ว ทำตามแผนที่ approve โดยไม่ต้องถามต่อ**
+
+#### Phase 4.1: Setup + Design Foundation
+
+```bash
+bash skills/website-creator/scripts/new-project.sh my-website
+```
+
+จากนั้น implement design system ที่ approve:
+- Colors ใน Tailwind theme
+- Typography
+- Base components
+- Layout patterns
+
+#### Phase 4.2: Build Pages
+
+Implement ทุก pages ตาม sitemap ที่ approve แล้ว
+
+#### Phase 4.3: Content + Integration
+
+- Tina CMS setup + content schema
+- Legal pages (Privacy Policy, ToS)
+- ConsentOS integration
+- Tracking scripts
+
+#### Phase 4.4: QA + Deploy
+
+ตาม Step 9-10 ด้านล่าง
+
+---
+
+### Step 9: Preview + QA
+
+```bash
+npm run dev
+```
+
+**ก่อน QA — เรียก skills ตามลำดับ:**
+
+1. **`code-review-and-quality`** — Full multi-axis code review ก่อน delivery
+2. **`performance-optimization`** — Performance audit + fixes
+3. **`browser-testing-with-devtools`** — ทดสอบใน real browser
+
+**จากนั้นเรียก `dogfood` สำหรับ exploratory QA:**
+
+```bash
+/skill dogfood
+"ทดสอบ user journey:
+ 1. ดู home page → คลิก services
+ 2. ดู about us
+ 3. กรอก contact form
+ 4. ทดสอบ consent popup (ConsentOS)
+ 5. ตรวจ PDPA compliance (privacy policy, terms)
+ 6. ตรวจ mobile responsive
+ 7. ตรวจ SEO meta tags ทุกหน้า"
+```
+
+ให้ user ตรวจสอบ → รอ feedback → แก้ไข → รอ approve
+
+---
+
+### Step 10: Deploy
+
+**เรียก skill: `easypanel-deploy` เมื่อ user ขอ**
+
+```bash
+/skill easypanel-deploy
+"deploy ไปยัง easypanel server
+ server: openclaw-vps
+ project: my-website
+ domain: example.com
+ git repo: https://github.com/user/my-website"
+```

 ---

@@ -625,7 +816,7 @@ npm run dev
 1. ดู home page → คลิก services
 2. ดู about us
 3. กรอก contact form
- 4. ทดสอบ cookie consent popup
+ 4. ทดสอบ consent popup (ConsentOS)
 5. ตรวจ PDPA compliance (privacy policy, terms)
 6. ตรวจ mobile responsive
 7. ตรวจ SEO meta tags ทุกหน้า"
@@ -715,7 +906,7 @@ bash skills/website-creator/scripts/migrate-tina.sh /path/to/existing-site /path
 | `payload.find()` | Astro content collections |
 | `RichText` component | MDX files |
 | `payload.config.ts` collections | `.tina/schema.ts` collections |
-| MongoDB/PostgreSQL | Astro DB (built-in) |
+| MongoDB/PostgreSQL | ConsentOS (external) |
 | `/admin` | `/admin` (Tina visual editor) |
 | Payload Auth | Tina Auth (optional) |