# 485Tech Visual Audit Baseline

วันที่ตรวจ: 2026-08-26

## สิ่งที่เห็นจากหน้าแรกและ tools hub

หน้าแรกและ tools hub ใช้โครงสร้างเดียวกันและแสดงการ์ดเครื่องมือจำนวนมากแบบ 3 คอลัมน์บน desktop ตัวระบบมี search, category tabs, theme toggle และ language toggle อยู่แล้ว แต่ลำดับภาพยังแน่นมาก โดย hero/search/tabs/การ์ดต่อกันโดยมีช่องว่างน้อย ทำให้จุดโฟกัสไม่ชัดเมื่อมีเครื่องมือ 158 รายการ

การ์ดเครื่องมือมีข้อมูลหลักครบ แต่ visual hierarchy ระหว่างชื่อ คำอธิบาย สถานะ และ CTA ยังไม่เด่นพอเมื่อมองเป็นชุดใหญ่ ปุ่ม/แท็บจำนวนมากกินพื้นที่หลายบรรทัดและมีทั้งชื่อหมวดภาษาไทยกับภาษาอังกฤษ เช่น Photo, Audio, PDF, Office ปะปนกัน ทำให้ประสบการณ์ภาษาไม่สม่ำเสมอ

มี floating beta/feedback notice ที่มุมขวาล่างทับบริเวณการ์ดและบังเนื้อหาบางส่วน ควรเปลี่ยนเป็นกล่องที่ไม่บังเนื้อหา มีปุ่มปิดและจำสถานะการปิดได้

บน viewport ที่ตรวจพบ top bar มีโลโก้ด้านซ้ายและเมนูอยู่กลาง แต่พื้นที่ว่างมากและปุ่มควบคุมขวาค่อนข้างเล็ก ควรเพิ่มความชัดเจนของ active state, focus state, ขนาดพื้นที่คลิก และ responsive collapse บนมือถือ

## Baseline เชิงระบบ

- Repository: `485Tech/485Tech.com`, branch `main`
- Build: ผ่าน; สร้าง 7 หน้าและ standalone tool pages 158 รายการ
- Catalog: 158 รายการ, live 158 รายการ, ไม่พบรายการ placeholder ใน catalog
- Smoke test: ผ่าน 158/158 หน้าโหลดได้และไม่พบ page/console error จากชุด smoke
- Existing functional extra: ยังสรุปไม่ได้ เพราะ fixture files ที่สคริปต์อ้างถึง (`fixture-two-pages.pdf`, `test-image.png`, `fixture.docx`, `fixture.xlsx`, `fixture-a.pdf`) ไม่มีใน sandbox reference directory ไม่ใช่หลักฐานว่าแอปทำงานไม่ได้
- Build ทำให้ `public/scripts/tools/vendor/README.txt` เปลี่ยนแปลงจาก generated output

## เกณฑ์ปรับปรุงที่ควรใช้

1. ทุกเครื่องมือที่ประกาศว่า live ต้อง mount ได้ ไม่มี runtime error และมี empty/loading/success/error state ที่อ่านเข้าใจได้
2. ทุก output ที่ดาวน์โหลดต้องเป็นไฟล์ที่มีชนิดและเนื้อหาถูกต้อง ไม่ใช่เพียงแสดงข้อความสำเร็จ
3. หน้า hub ต้องค้นหา กรอง ปักหมุด และเปิดเครื่องมือได้ชัดเจนบน desktop/mobile
4. ห้ามใช้คำโฆษณาหรือคำอธิบายที่เกินความสามารถจริง เช่น AI/automatic หากไม่มี implementation รองรับ
5. UI ต้องมี focus/keyboard state, accessible labels, readable contrast, responsive spacing และไม่ให้ floating notice บังเนื้อหา

## ตัวอย่าง studio tools

QR tool มีฟีเจอร์จริงจำนวนมาก เช่น payload presets, error correction, theme/colors, gradient, dot/corner styles, logo, PNG/SVG/copy แต่หน้า control ยาวและหนาแน่นมาก ผลลัพธ์ด้านขวาเริ่มจากพื้นที่ว่างที่ไม่อธิบายชัด และ floating beta notice ทับพื้นที่ใช้งานใน viewport แรก ข้อความแสดงความเป็นส่วนตัวชัดเจนและควรรักษาไว้

JSON tool มี editor แบบสองคอลัมน์และ empty state ที่ดีในเชิงข้อความ แต่ toolbar มี control หลายกลุ่มวางต่อกันแน่นบน desktop และสถานะใต้ editor ยังเล็กเกินไปเมื่อเกิด error ความแตกต่างของ visual style ระหว่าง hub กับ studio ยังเห็นได้จากการใช้ปุ่มแบบ pill หลายชิ้นโดยไม่มีลำดับชัด

ข้อสรุปจากตัวอย่าง: ควรทำ shared studio header/control patterns, เพิ่ม output preview ที่มี empty/loading/success/error state เด่นชัด, ย้าย beta notice ออกจากพื้นที่ทับเนื้อหา, ทำ responsive stack ที่อ่านง่าย และใช้ design tokens เดียวกันทั้ง hub กับ tool pages

## ผลหลัง UI polish รอบแรก

Tools hub รุ่นใหม่แสดงจำนวนผลลัพธ์บนแถบข้อมูล, count ในแต่ละ category, sort selector และ clear filters อย่างชัดเจน การ์ดมี metadata หมวดหมู่และสถานะพร้อมใช้งาน ทำให้สแกนรายการ 158 รายการได้ง่ายขึ้น เอฟเฟกต์เคลื่อนไหว/gradient border ที่เคยเยอะถูกลดลง ทำให้พื้นผิวเรียบและมีลำดับสายตาดีขึ้น

Standalone JSON shell มี topbar และ editor ที่สะอาดขึ้น การ์ดไม่ลอย/หมุนเมื่อ hover และ background มีความนิ่งกว่าเดิม อย่างไรก็ตาม beta notice ยังแสดงอยู่จนกว่าจะกดปิด (ตาม design ที่ตั้งใจให้ผู้ใช้ปิดได้) และควรตรวจ behavior ของ localStorage, keyboard shortcut, language toggle และ mobile width ใน automated checks ต่อไป

## Interactive validation

เปิด Tools Hub ผ่าน preview แล้วพบว่า recent history แสดงรายการ JSON ที่เปิดก่อนหน้าได้จริง การค้นหา `QR` อัปเดตผลลัพธ์ทันทีเป็น `แสดง 1 จาก 158` และแสดงเฉพาะ QR Code card พร้อมปุ่มล้างตัวกรอง การ์ดและ metadata อ่านง่ายขึ้นใน viewport จริง

การทดสอบต่อเนื่องยืนยันว่า sort เปลี่ยนเป็น `ชื่อ A–Z` ได้จริง และปุ่ม `ล้างตัวกรอง` คืนค่า search เป็นค่าว่าง, sort เป็น `แนะนำ` และแสดงเครื่องมือทั้งหมดอีกครั้งโดยไม่ต้อง reload หน้า

การเปิด recent JSON จาก Hub ไปยัง `/tools/json` ทำงานจริง และ studio topbar มีปุ่มแชร์ใหม่ เมื่อกดแชร์ใน browser ที่ไม่มี Web Share API ระบบ fallback คัดลอก URL และแสดง toast `คัดลอกลิงก์แล้ว` สำเร็จ