Playwright MCP-Powered Web Analysis
An AI-driven web page inspection toolkit that uses the Playwright Model Context Protocol (MCP) to visually analyze, deconstruct, and document live websites. Built to let AI agents see, understand, and report on web interfaces the way a senior frontend developer would.
AI Visual Web Inspector 是一套以 Playwright MCP 驅動的網頁檢測工具，讓 AI 代理能以「看見」頁面的方式進行理解與分析。適合用於 UI/UX 檢查、回歸測試輔助、可用性問題盤點與前端除錯，將人工巡檢流程工具化。
AI Visual Web Inspector is a Playwright MCP-based toolkit that lets AI agents inspect rendered web pages with visual and DOM context. It is built for UI/UX audits, regression support, frontend debugging, and feature decomposition.
🔍 AI Visual Web Inspector 是一套以 AI 驅動的網頁視覺分析工具包，利用 🎭 Playwright Model Context Protocol (MCP) 讓 AI 代理能像資深前端工程師一樣「看見」並理解網頁。不同於傳統爬蟲只抓取原始 HTML，本系統透過 Playwright 啟動 🌐 Chromium 瀏覽器實際渲染頁面，擷取全頁截圖 📸、解析即時 DOM 結構、觀察動畫行為與互動模式，提供超越原始碼層級的深度分析。核心工作流程包含四大階段：視覺擷取 👁️、DOM 檢查 🔧、功能拆解 📦、教學生成 📚。系統會將複雜的前端功能（CSS 動畫、GSAP 滾動特效、Three.js 3D 渲染等）自動拆解為獨立可複用模組，並產出含核心程式碼與實作教學的完整文件。專案內含 🏢 Gamania 遊戲橘子企業官網的完整分析案例，展示從載入動畫到時間軸到 3D 地球儀的全方位功能提取成果。適合前端技術研究、競品分析與 AI 輔助開發場景 🚀。
Traditional web scraping captures raw HTML. Code review reads static files. Neither approach truly understands what a web page looks and feels like at runtime. This project uses Playwright MCP to give AI models actual visual context -- rendered screenshots, live DOM structure, animation behavior, and interaction patterns -- enabling deep analysis that goes beyond source code alone.
AI Agent (Claude / LLM)
|
v
Playwright MCP Server
|
v
Live Website (Chromium rendering)
|
v
Structured Analysis Output
- Full-page screenshots and visual captures
- Feature decomposition into standalone modules
- Animation and interaction documentation
- Reusable code extraction with tutorials
- Visual Capture -- Playwright MCP navigates to target pages, captures full-page screenshots, and provides the AI with actual visual representations of the rendered site.
- DOM Inspection -- The AI agent queries DOM elements, CSS properties, and JavaScript behavior through MCP tool calls, inspecting the page as a developer would in DevTools.
- Feature Decomposition -- Complex web features (CSS animations, GSAP scroll effects, Three.js 3D renders) are identified, isolated, and documented as standalone, reproducible modules.
- Tutorial Generation -- Each extracted feature is accompanied by implementation tutorials with core HTML/CSS/JS structure, technical explanations, and runnable examples.
This project includes a complete analysis of the Gamania Group (gamania.com) corporate website, demonstrating the full inspection workflow:
gamania_site/ -- Captured site assets: HTML pages, CSS stylesheets, JavaScript modules, and 44+ image assets from the live production site.
gamania_features/ -- Extracted and documented individual UI features:
| Feature | Status | Description |
|---|---|---|
| Loading Animation | Complete | Full-screen loader with marquee text and pulsing logo |
| Timeline/Milestones | Complete | GSAP ScrollTrigger-driven year timeline (1995-2025) |
| 3D Globe | Documented | Three.js globe with 4K texture and Draco-compressed GLB |
| Awards Cards | Documented | Interactive award showcase gallery |
gamania_tutorial/ -- Implementation tutorials covering six major techniques:
- Loading animation (CSS keyframes + GSAP exit transitions)
- SVG animation production
- Scroll-driven mask-to-black transitions
- Historical timeline with ScrollTrigger
- Three.js 3D object loading and rendering
- Interactive 3D territory map
Each tutorial includes core code, visual references, and runnable examples in the examples/ directory.
- AI Integration: Playwright Model Context Protocol (MCP)
- Browser Engine: Playwright (Chromium)
- Analysis Targets: Nuxt.js, Vue SSR, GSAP, Three.js, TailwindCSS
- Output Formats: Markdown documentation, standalone HTML/CSS/JS modules, tutorial pages
ai-visual-web-inspector/
gamania_site/ # Captured production site assets
www.gamania.com/ # Mirrored site structure (HTML, CSS, JS)
images/ # 44+ visual asset captures
gamania_features/ # Decomposed feature modules
01-loading/ # Loading animation (extracted + standalone)
02-milestones/ # Timeline feature (extracted + standalone)
README.md # Feature catalog with status
gamania_tutorial/ # Implementation tutorials
README.md # Tutorial index (6 techniques)
examples/ # Runnable example implementations
index.html # Interactive tutorial browser
This toolkit is designed to work with an AI agent that has access to Playwright MCP tools. The AI navigates to any target website, captures visual and structural data, and produces decomposed feature modules and documentation.
The Gamania analysis serves as the reference implementation. The same methodology applies to any website -- point the AI at a URL and request visual inspection, feature extraction, or implementation documentation.
Built by Huang Akai (Kai) -- Founder @ Universal FAW Labs | Creative Technologist | Ex-Ogilvy