Layout Detector

关于

This MCP server empowers AI assistants to understand webpage layouts from screenshots. It solves the problem of AI's inability to extract precise pixel measurements from images by employing computer vision techniques (OpenCV template matching). By identifying where each image asset appears, calculating spatial relationships, and detecting common layout patterns like radial, grid, stacked, or sidebar, the tool provides structured data essential for accurately recreating web pages using modern CSS.

主要功能

• Detect common layout patterns (Radial, Grid, Stacked, Sidebar, Freeform)
• Analyze spatial relationships (angles, distances, relative positions) between elements
• 7 GitHub stars
• Locate known image assets within a screenshot with pixel-perfect coordinates
• Retrieve basic screenshot dimensions (width, height)
• Enable semantic webpage rebuilds by providing structured layout data

使用案例

• AI assistants rebuilding webpages from screenshots with accurate layouts
• Automating the process of extracting element positions for design analysis
• Converting static webpage screenshots into structured data for CSS implementation