feat: collaborative design + visual QA screenshot workflow
Section 2.2 Design Direction: - Use 2-3 skills TOGETHER to create hybrid design (not separate proposals) - Combine strengths from ckm:design + ui-ux-pro-max + brand - Migration: different layout but preserve content + images Step 9 Visual QA: - Add screenshot review BEFORE code review - Use dev-browser/playwright to capture real screenshots - Visual checklist: layout, typography, color, spacing, images, responsive, interactive, consent popup - 9.1: Screenshot every page - 9.2: Visual review from screenshots (not code) - 9.3: Code review AFTER visual passes - 9.4: Exploratory QA with dogfood Sub-skill Routing: - Updated to reflect collaborative design approach - Added dev-browser for visual QA
This commit is contained in:
@@ -234,24 +234,50 @@ export const schema = defineSchema({
|
||||
- References: [ลิงก์ที่ชอบ/ไม่ชอบ]
|
||||
```
|
||||
|
||||
#### 2.2 สร้าง 2-3 Creative Directions ที่ต่างกันจริงๆ
|
||||
#### 2.2 สร้าง 2-3 Creative Directions โดยรวม Strengths จากหลาย Skills
|
||||
|
||||
**ใช้ `ckm:design` + `ui-ux-pro-max` สร้าง options ที่แตกต่างกัน:**
|
||||
**หลักการ:** ใช้ 2-3 skills ร่วมกัน ไม่ใช่ให้แต่ละ skill เสนอตัวเลือกแยกกัน
|
||||
**เป้าหมาย:** รวมข้อดีและไอเดียจากหลาย skills เพื่อสร้าง design ที่ unique และดูดีที่สุด
|
||||
|
||||
**Skills ที่ใช้ร่วมกัน (เลือก 2-3 ตาม brief):**
|
||||
- `ckm:design` — Brand identity, color psychology, typography
|
||||
- `ui-ux-pro-max` — 50+ design patterns, wireframes, layout strategies
|
||||
- `brand` — Logo, visual identity, brand guidelines
|
||||
- `design-system` — Design tokens, component specs, systematic approach
|
||||
|
||||
**วิธีรวม (COLLABORATIVE DESIGN):**
|
||||
|
||||
```
|
||||
Direction A: "[Name]"
|
||||
- Concept: [แนวคิดหลัก]
|
||||
- Visual Style: [ลักษณะ visuals]
|
||||
- Color Palette: [โทนสี]
|
||||
- Typography: [แบบอักษร]
|
||||
- Layout Character: [โครงสร้าง layout ที่เป็นเอกลักษณ์]
|
||||
1. รวบรวม Inspirations จากทุก Skill:
|
||||
- จาก ckm:design: [ไอเดีย 3-5 ข้อ]
|
||||
- จาก ui-ux-pro-max: [ไอเดีย 3-5 ข้อ]
|
||||
- จาก brand (ถ้ามี): [ไอเดีย 2-3 ข้อ]
|
||||
|
||||
Direction B: "[Name]"
|
||||
- Concept: [แนวคิดหลัก - ต่างจาก A]
|
||||
- Visual Style: [ลักษณะ visuals - ต่างจาก A]
|
||||
- Color Palette: [โทนสี - ต่างจาก A]
|
||||
- Typography: [แบบอักษร - ต่างจาก A]
|
||||
- Layout Character: [โครงสร้าง layout - ต่างจาก A]
|
||||
2. ผสมผสานเป็น Hybrid Concepts:
|
||||
- Concept A: [ชื่อ] — เป็นการรวม [จุดเด่นจาก X] + [จุดเด่นจาก Y]
|
||||
- Concept B: [ชื่อ] — เป็นการรวม [จุดเด่นจาก A] + [จุดเด่นจาก B]
|
||||
- Concept C: [ชื่อ] — เป็นการรวม [จุดเด่นจาก X] + [จุดเด่นจาก Z]
|
||||
|
||||
3. แต่ละ Concept มี:
|
||||
- Concept: [แนวคิดหลักที่เป็นเอกลักษณ์]
|
||||
- Visual Style: [ลักษณะ visuals - ไม่ซ้ำใคร]
|
||||
- Color Palette: [โทนสี - พร้อม hex codes]
|
||||
- Typography: [แบบอักษร - font pairing]
|
||||
- Layout Character: [โครงสร้าง layout ที่แตกต่าง]
|
||||
- Unique Strength: [จุดแข็งที่เกิดจากการรวม skills]
|
||||
```
|
||||
|
||||
**สำหรับ MIGRATION:**
|
||||
- Design layout ต้องต่างจากต้นฉบับ (ไม่ใช่แค่เปลี่ยนสี)
|
||||
- แต่ KEEP: content ทั้งหมด + รูปภาพต้นฉบับ
|
||||
- Focus: ปรับ layout structure, typography, visual hierarchy ให้ดีขึ้น
|
||||
|
||||
```
|
||||
Migration Design Approach:
|
||||
- Original: [layout ของเว็บเดิม]
|
||||
- New Design: [layout ใหม่ที่ต่างกันมาก]
|
||||
- Preserved: [content + images ที่เอามาจากเว็บเดิม]
|
||||
- Improved: [typography, spacing, visual hierarchy, responsiveness]
|
||||
```
|
||||
|
||||
#### 2.3 Present + Wait for Selection
|
||||
@@ -366,19 +392,58 @@ Implement ทุก pages ตาม sitemap ที่ approve แล้ว
|
||||
|
||||
---
|
||||
|
||||
### Step 9: Preview + QA
|
||||
### Step 9: Preview + Visual QA (SCREENSHOT REVIEW)
|
||||
|
||||
**เริ่ม local dev server:**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
**ก่อน QA — เรียก skills ตามลำดับ:**
|
||||
**⚠️ สำคัญ: ดูจาก SCREENSHOT ไม่ใช่ดูจากโค้ด**
|
||||
หลายครั้งโค้ดดูดี แต่สิ่งที่เห็นบนจอไม่ตรงกับที่ตั้งใจ
|
||||
ดังนั้นต้อง **browse หน้าเว็บจริงๆ แล้วถ่าย screenshot** มาดู
|
||||
|
||||
1. **`code-review-and-quality`** — Full multi-axis code review ก่อน delivery
|
||||
**Step 9.1: Launch Browser แล้วถ่าย Screenshot ทุกหน้า**
|
||||
|
||||
ใช้ `dev-browser` หรือ `playwright` ถ่าย screenshot:
|
||||
|
||||
```bash
|
||||
/skill dev-browser
|
||||
"เปิด http://localhost:4321 แล้วถ่าย screenshot ของทุกหน้า:
|
||||
- Home page
|
||||
- Navigation menu (desktop + mobile)
|
||||
- Services/Products page
|
||||
- About page
|
||||
- Contact page
|
||||
- Blog/News page (ถ้ามี)
|
||||
- Footer
|
||||
- Mobile responsive (iPhone size)
|
||||
|
||||
แต่ละหน้าต้องดูดีบนจริง ไม่ใช่ดูแค่โค้ด"
|
||||
```
|
||||
|
||||
**Step 9.2: Visual Review Checklist**
|
||||
|
||||
ตรวจจาก screenshot ไม่ใช่โค้ด:
|
||||
|
||||
| หัวข้อ | สิ่งที่ดู | ปัญหาที่พบ |
|
||||
|--------|----------|------------|
|
||||
| **Layout** | จัดวางตรงตาม design หรือเปล่า? | ขยับ, ชิดขอบ, บรรทัดหลุด |
|
||||
| **Typography** | font size, line-height อ่านง่ายไหม? | บรรทัดชิดกัน, ตัวหนังสือเล็กเกิน |
|
||||
| **Color** | สีตรงตาม design system หรือเปล่า? | สีผิด, contrast ไม่ดี |
|
||||
| **Spacing** | margin/padding สม่ำเสมอหรือเปล่า? | ช่องห่างไม่เท่ากัน |
|
||||
| **Images** | รูปภาพแสดงถูกต้องหรือเปล่า? | รูปขาด, stretch, ขนาดผิด |
|
||||
| **Responsive** | mobile view ดูดีหรือเปล่า? | layout พัง, text ล้น |
|
||||
| **Interactive** | hover, click ทำงานถูกต้องหรือเปล่า? | button ไม่ทำงาน, menu ไม่ลง |
|
||||
| **Consent Popup** | popup แสดงถูกต้องหรือเปล่า? | popup ซ่อน, ปุ่มไม่ทำงาน |
|
||||
|
||||
**Step 9.3: เรียก Code Review Skills (หลังจาก visual ผ่านแล้ว)**
|
||||
|
||||
1. **`code-review-and-quality`** — Full multi-axis code review
|
||||
2. **`performance-optimization`** — Performance audit + fixes
|
||||
3. **`browser-testing-with-devtools`** — ทดสอบใน real browser
|
||||
3. **`browser-testing-with-devtools`** — Real browser testing
|
||||
|
||||
**จากนั้นเรียก `dogfood` สำหรับ exploratory QA:**
|
||||
**Step 9.4: Exploratory QA ด้วย `dogfood`:**
|
||||
|
||||
```bash
|
||||
/skill dogfood
|
||||
@@ -392,7 +457,10 @@ npm run dev
|
||||
7. ตรวจ SEO meta tags ทุกหน้า"
|
||||
```
|
||||
|
||||
ให้ user ตรวจสอบ → รอ feedback → แก้ไข → รอ approve
|
||||
**⚠️ สำคัญ:** ขั้นตอน 9.1-9.2 ต้องทำก่อน 9.3-9.4 เสมอ
|
||||
เพราะ **visual bug ที่ user เห็นจริงๆ สำคัญกว่า code quality**
|
||||
|
||||
ให้ user ตรวจสอบ screenshot → รอ feedback → แก้ไข → รอ approve
|
||||
|
||||
---
|
||||
|
||||
@@ -1122,13 +1190,14 @@ npm run build
|
||||
| ขั้นตอน | Sub-skill | รายละเอียด |
|
||||
|---------|-----------|-------------|
|
||||
| **ตลอด workflow** | `spec-driven-development` | เขียน spec ก่อน implement ทุกครั้ง |
|
||||
| Design Framework | `ckm:design` | Brand, tokens, design system |
|
||||
| Design Framework | `frontend-ui-engineering` | UI component architecture, patterns |
|
||||
| **Design Direction** | `ckm:design` + `ui-ux-pro-max` + `brand` | **รวม 2-3 skills** สร้าง hybrid design (ไม่ใช่แยกกันเสนอ) |
|
||||
| Design Framework | `design-system` | Design tokens, component specs |
|
||||
| UI Components | `ckm:ui-styling` | shadcn/ui, Tailwind CSS |
|
||||
| UI/UX Design | `ui-ux-pro-max` | Wireframes, mockups, 50+ design patterns |
|
||||
| UI Components | `frontend-ui-engineering` | UI component architecture, patterns |
|
||||
| Brand Identity | `brand` | Logo, colors, typography, voice |
|
||||
| Banner/Hero Images | `banner-design` | Social, ads, web heroes |
|
||||
| Develop Components + Pages | `api-and-interface-design` | API design, component interfaces |
|
||||
| **Visual QA** | `dev-browser` หรือ `playwright` | ถ่าย screenshot ทุกหน้า ดูจริงๆ ไม่ใช่ดูโค้ด |
|
||||
| Before QA | `code-review-and-quality` | Full multi-axis code review |
|
||||
| Before QA | `performance-optimization` | Performance audit + fixes |
|
||||
| QA Testing | `browser-testing-with-devtools` | Real browser testing |
|
||||
@@ -1140,6 +1209,8 @@ npm run build
|
||||
| Deploy | `easypanel-deploy` | Easypanel hosting |
|
||||
| Design + Tina Integration | `frontend-ui-engineering` | แยก design layer กับ content layer |
|
||||
|
||||
**หมายเหตุ Design Direction:** ใช้ 2-3 skills ร่วมกัน เพื่อรวมข้อดีของแต่ละ skill ไม่ใช่ให้แต่ละ skill เสนอตัวเลือกแยกกัน
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
Reference in New Issue
Block a user