Design System Audit
Screenshot UI components, compare with design specs, and list inconsistencies
Example Prompt
Audit our web app's UI components against the design system and list any visual inconsistencies
About
This skill audits your application's UI against the design system by navigating to key pages, capturing screenshots of components, and comparing them with the documented design specifications. It produces a detailed list of visual inconsistencies, helping design and frontend teams maintain a cohesive look and feel.
Workflow Steps
Navigate to the application pages containing the UI components to audit
🎯 Navigate PageCapture screenshots of each target component for comparison
📷 Take ScreenshotRead the design specifications and component guidelines from Google Drive
📄 Read Drive FileCompare screenshots against design specs to identify color, spacing, and typography inconsistencies
🧠 Structured ReasoningWrite the audit report listing all inconsistencies with severity ratings
✏️ Write FileTools Used
Write File
Write or overwrite a file at a specified path with the given content
Read Drive File
Read the contents of a file from Google Drive by file ID
Navigate Page
Navigate to a URL and extract the page content as text or HTML
Take Screenshot
Navigate to a URL and capture a screenshot of the rendered page
Structured Reasoning
Break down a complex problem into sequential reasoning steps with explicit chain-of-thought
Required MCP Servers
Filesystem
Read, search, and manage files on the local filesystem
Google Drive
Search, read, and manage files in Google Drive including Docs, Sheets, and Slides
Puppeteer
Browser automation for web scraping, screenshots, and UI testing via headless Chrome
Sequential Thinking
Dynamic problem-solving through structured thought sequences with branching and revision