From 014f60b4af14c02b6cfd9cfc27382fe23bd4e090 Mon Sep 17 00:00:00 2001 From: Kunthawat Greethong Date: Wed, 22 Apr 2026 11:46:09 +0700 Subject: [PATCH] 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 --- skills/website-creator/SKILL.md | 117 +++++++++++++++++++++++++------- 1 file changed, 94 insertions(+), 23 deletions(-) diff --git a/skills/website-creator/SKILL.md b/skills/website-creator/SKILL.md index 615023d..5441760 100644 --- a/skills/website-creator/SKILL.md +++ b/skills/website-creator/SKILL.md @@ -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