df375c83c0
Agents: - ui-scout: Playwright MCP + Variant(variant.com/community) visual capture - design-system-architect: unified design tokens (CSS vars / RN StyleSheet) - component-refactor-engineer: per-system component refactoring - visual-qa-tester: before/after screenshot comparison Skills: - ui-overhaul-orchestrator: E2E pipeline (capture->tokens->refactor->QA) - playwright-visual-capture: Playwright MCP + Variant workflow - design-token-system: tokens.css with Pretendard, 4px grid, brand colors - component-refactor: Button/Card/Badge patterns for 4 systems Bot: /design capture|variant|tokens|homepage|itsm|manager|app|qa|ab Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
141 lines
4.1 KiB
Markdown
141 lines
4.1 KiB
Markdown
---
|
|
name: playwright-visual-capture
|
|
description: "Playwright MCP + Variant(variant.com/community) 활용 시각적 캡처 스킬. 현재 UI Before 스크린샷, Variant 디자인 레퍼런스, 개편 후 After 스크린샷, A/B 컴포넌트 비교를 Playwright MCP 도구로 자동화한다. 다음 상황에서 반드시 사용: (1) 'UI 스크린샷 찍어줘', 'before/after 비교', 'Variant에서 디자인 찾아줘'; (2) 'UI 개편 전 현황 캡처', '반응형 검증 스크린샷'; (3) 시각적 QA, A/B 테스트 캡처; (4) 다시 실행, 업데이트, 보완."
|
|
---
|
|
|
|
# Playwright MCP + Variant 시각적 캡처 스킬
|
|
|
|
## Playwright MCP 기본 도구
|
|
|
|
```
|
|
playwright_navigate → URL 이동
|
|
playwright_screenshot → 현재 페이지 캡처 (path 지정 가능)
|
|
playwright_click → 요소 클릭
|
|
playwright_type → 텍스트 입력
|
|
playwright_scroll → 페이지 스크롤
|
|
playwright_wait → 로딩 대기
|
|
playwright_hover → 호버 상태
|
|
playwright_select → 드롭다운 선택
|
|
playwright_resize → 뷰포트 크기 변경
|
|
playwright_evaluate → JavaScript 실행
|
|
```
|
|
|
|
---
|
|
|
|
## Before 캡처 (현재 UI)
|
|
|
|
```
|
|
저장 경로: C:\GUARDiA\design-overhaul\before\
|
|
|
|
홈페이지:
|
|
→ navigate: https://zioinfo.co.kr
|
|
→ screenshot: before/home_main.png
|
|
→ navigate: https://zioinfo.co.kr/company/history
|
|
→ screenshot: before/home_history.png
|
|
→ navigate: https://zioinfo.co.kr/company/ci
|
|
→ screenshot: before/home_ci.png
|
|
→ navigate: https://zioinfo.co.kr/solution/guardia
|
|
→ screenshot: before/home_guardia.png
|
|
|
|
ITSM:
|
|
→ navigate: https://zioinfo.co.kr:8443
|
|
→ screenshot: before/itsm_login.png
|
|
→ [로그인: admin / Admin@2026!]
|
|
→ screenshot: before/itsm_dashboard.png
|
|
→ [SR 목록 클릭]
|
|
→ screenshot: before/itsm_sr_list.png
|
|
|
|
Manager:
|
|
→ navigate: https://zioinfo.co.kr:8090
|
|
→ [로그인]
|
|
→ screenshot: before/manager_dashboard.png
|
|
→ navigate: /scraping
|
|
→ screenshot: before/manager_scraping.png
|
|
```
|
|
|
|
---
|
|
|
|
## Variant 디자인 탐색 (variant.com/community)
|
|
|
|
이미 로그인 상태 → https://variant.com/community
|
|
|
|
```
|
|
# 대시보드 UI 레퍼런스
|
|
→ navigate: https://variant.com/community
|
|
→ screenshot: variant/community_main.png
|
|
→ [검색창에 입력]
|
|
→ type: "enterprise dashboard modern blue"
|
|
→ wait: 2000ms
|
|
→ screenshot: variant/dashboard_results.png
|
|
→ [첫 번째 결과 클릭 / 마음에 드는 것 선택]
|
|
→ screenshot: variant/dashboard_selected.png
|
|
|
|
# 홈페이지 레퍼런스
|
|
→ type: "corporate IT company landing page"
|
|
→ screenshot: variant/homepage_results.png
|
|
|
|
# 모바일 앱 레퍼런스
|
|
→ type: "mobile ITSM monitoring dark"
|
|
→ screenshot: variant/mobile_results.png
|
|
|
|
# 관리자 콘솔 레퍼런스
|
|
→ type: "admin console sidebar ncloud"
|
|
→ screenshot: variant/admin_results.png
|
|
```
|
|
|
|
---
|
|
|
|
## After 캡처 (개편 후)
|
|
|
|
```
|
|
저장 경로: C:\GUARDiA\design-overhaul\after\
|
|
|
|
반응형 3단계 캡처:
|
|
→ resize: {width: 1440, height: 900}
|
|
→ screenshot: after/home_1440.png
|
|
→ resize: {width: 768, height: 1024}
|
|
→ screenshot: after/home_768.png
|
|
→ resize: {width: 375, height: 812}
|
|
→ screenshot: after/home_375.png
|
|
```
|
|
|
|
---
|
|
|
|
## Before/After 비교 리포트 생성
|
|
|
|
```python
|
|
# Python으로 나란히 비교 이미지 생성
|
|
from PIL import Image
|
|
|
|
def side_by_side(before_path, after_path, out_path):
|
|
before = Image.open(before_path)
|
|
after = Image.open(after_path)
|
|
w = before.width + after.width + 20
|
|
h = max(before.height, after.height)
|
|
canvas = Image.new('RGB', (w, h), '#f1f5f9')
|
|
canvas.paste(before, (0, 0))
|
|
canvas.paste(after, (before.width + 20, 0))
|
|
canvas.save(out_path)
|
|
```
|
|
|
|
---
|
|
|
|
## 저장 구조
|
|
|
|
```
|
|
C:\GUARDiA\design-overhaul\
|
|
├── before/ ← 개편 전 스크린샷
|
|
│ ├── home_main.png
|
|
│ ├── itsm_dashboard.png
|
|
│ └── ...
|
|
├── variant/ ← Variant 레퍼런스
|
|
│ ├── dashboard_results.png
|
|
│ └── ...
|
|
├── after/ ← 개편 후 스크린샷
|
|
│ ├── home_1440.png
|
|
│ ├── home_768.png
|
|
│ └── ...
|
|
├── compare/ ← Before/After 비교
|
|
└── tokens/ ← 디자인 토큰 문서
|
|
```
|