Các công cụ Vibe Code

UI Testing & Refinement: Đánh Bóng Cuối Cùng

Design không bao giờ hoàn hảo lần đầu. Bài này dạy cách prompt AI để test và refine UI của bạn.

Visual QA Checklist

Prompt Cho QA:

Review UI cho visual issues:

Alignment:
- Text align consistently (left, center)?
- Elements trong grid align correctly?
- Spacing đều đặn giữa items?

Typography:
- Font sizes logical hierarchy?
- Line heights readable?
- Truncation handled (ellipsis)?

Colors:
- Contrast đủ cho accessibility?
- Consistent across components?
- Dark mode looks correct?

Spacing:
- Padding consistent trong cards?
- Margins between sections equal?
- No content touching edges?

Cross-Browser Testing

Check cross-browser compatibility:

Browsers:
- Chrome (primary)
- Safari (especially iOS)
- Firefox
- Edge

Issues to watch:
- Flexbox gaps (Safari older)
- Backdrop blur support
- Scroll behavior
- Font rendering differences

Prompt: "Có fallback nào cần cho Safari iOS 15?"

Accessibility Review

Accessibility checklist:

Color contrast:
- Text: minimum 4.5:1 ratio
- Large text: minimum 3:1
- UI elements: minimum 3:1

Keyboard:
- All interactive focusable
- Focus ring visible
- Logical tab order
- Skip links available

Screen readers:
- Alt text cho images
- ARIA labels cho icons
- Semantic HTML

Prompt: "Audit component này cho WCAG 2.1 AA compliance"

Responsive Testing

Test trên các breakpoints:

Device sizes:
- iPhone SE (375px)
- iPhone 14 (390px)
- iPad (768px)
- iPad Pro (1024px)
- Laptop (1280px)
- Desktop (1440px)
- Large (1920px)

Check mỗi size:
- Layout không break?
- Text readable?
- Buttons tappable?
- No horizontal scroll?

Performance Review

UI performance check:

Images:
- Proper sizing (không larger than display)
- WebP format với fallback
- Lazy loading cho below-fold

Animations:
- Only transform và opacity animated
- No layout thrashing
- Respects prefers-reduced-motion

CSS:
- No unused styles
- Critical CSS inlined
- Fonts preloaded

Refinement Prompts

Polish Details:

Tinh chỉnh card component:

1. Tăng padding từ p-4 → p-6
2. Border color nhạt hơn: slate-200 → slate-100
3. Shadow subtle hơn: shadow-md → shadow-sm
4. Hover transition smoother: duration-200 → duration-300
5. Title font-weight: semibold → medium

Fix Issues:

Component có issues:

Issue: Button text bị cut off trên mobile
Fix: min-width removed, padding flexible

Issue: Card corners không align trong grid
Fix: overflow-hidden on grid container

Issue: Modal backdrop không cover full screen
Fix: fixed inset-0 z-50

Final Polish Checklist

🔥 Final Step: Sau khi nghĩ là done, zoom out 50% và nhìn overall. Có gì feel không balanced không?