Frontend Design Loop MCP

Design-first MCP for coding agents that improves websites with screenshot-grounded iteration.

ray

Generate code screenshots via ray.tinte.dev API. Use when user asks for code screenshots, code images, code snippets as images, or says "ray". Calls POST https://ray.tinte.dev/api/v1/screenshot and saves the PNG result.

gamekit-cli

Capture game view screenshots for visual verification

Io.Github.Digital Defiance/Mcp Screenshot

Screenshot capture with PII masking and cross-platform support for AI agents

compose_driver

Drive the Compose Driver sample app to test UI logic. Use it whenever you need to verify that Composables work as expected or to capture screenshots of a composable.

ark-dashboard-testing

Test Ark Dashboard with Playwright and create PRs with screenshots. Use when testing dashboard UI, taking screenshots for PRs, or reviewing dashboard changes.

capture-usage4claude-screenshots

Automate Usage4Claude interface screenshots with CleanShot X on macOS. Use when Codex needs to capture localized Usage4Claude menu-bar popover screenshots, switch Usage4Claude display/language settings, save files such as detail.claude.en@2x.png, or troubleshoot CleanShot/window-capture automation that depends on macOS Accessibility, osascript, CoreGraphics mouse movement, and the Usage4Claude Debug app.

dev-browser

Browser automation with persistent page state. Use when users ask to navigate websites, fill forms, take screenshots, extract web data, test web apps, or automate browser workflows. Trigger phrases include "go to [url]", "click on", "fill out the form", "take a screenshot", "scrape", "automate", "test the website", "log into", or any browser interaction request.

launch

Launch and automate VS Code (Code OSS) using agent-browser via Chrome DevTools Protocol. Use when you need to interact with the VS Code UI, automate the chat panel, test UI features, or take screenshots of VS Code. Triggers include 'automate VS Code', 'interact with chat', 'test the UI', 'take a screenshot', 'launch Code OSS with debugging'.

Io.Github.Pedro Rivas/Android Puppeteer Mcp

MCP server for Android automation with UI interaction, screenshots, and device control

phoneagent

Control a connected iPhone, iOS simulator, Android emulator, or Android device from macOS through PhoneAgent's JSON-RPC bridge. Use when users ask to automate mobile UI actions, inspect accessibility trees, toggle Settings switches, navigate apps, or capture screenshots by sending RPC methods like get_tree, get_screen_image, get_context, tap_element, enter_text, scroll, swipe, and open_app.

Io.Github.User0856/Snaprender

Screenshot any website as PNG, JPEG, WebP, or PDF. Device emulation, dark mode, ad blocking.

flet-release-announcement

Create or update a Flet release announcement blog post from changelog notes, matching existing /blog style. Use when asked to draft, plan, or revise posts like "Flet X.Y.Z release announcement" with major feature sections, screenshots, code samples, upgrade instructions (pip and uv/pyproject.toml), and a compact "other changes" summary.

ShipScreens MCP Server

Deterministic App Store and Google Play screenshot pipeline with CLI and stdio MCP tools.

Screen Buffer Mcp

MCP server for fast Android screenshots via scrcpy frame buffer (~50ms latency).

design-compare

Compare Figma designs against implementation screenshots, identifying layout, typography, color, and sizing discrepancies. Generates a structured visual review table and an interactive HTML comparison page with swipe and side-by-side modes. Use when the user asks to compare design with preview, compare Figma with screenshot, check design implementation, or provides a Figma URL alongside a screenshot.

ab-test-store-listing

When the user wants to A/B test App Store product page elements to improve conversion rate. Also use when the user mentions "A/B test", "product page optimization", "test my screenshots", "test my icon", "conversion rate optimization", "CPP", or "custom product pages". For screenshot design, see screenshot-optimization. For metadata optimization, see metadata-optimization.

OpenGraph.io MCP Server

MCP server for OpenGraph.io API - fetch OG data, screenshots, scrape, and generate images

vibe-check

Browser automation for AI agents. Use when the user needs to navigate websites, read page content, fill forms, click elements, take screenshots, or manage browser pages.

Iphone Mirroir Mcp

Control a real iPhone through macOS iPhone Mirroring: screenshot, tap, swipe, type.

/social-captions — Algorithm-Optimized Social Media Captions (v2)

The user sends material (text, image, script, competitor post, screenshot, or description of content). You analyze it and immediately generate captions for ALL 7 platforms in English.

axe

Provides agent-ready AXe CLI usage guidance for iOS Simulator automation. Use when asked to "use AXe", "automate a simulator", "tap/swipe/type on simulator", "describe UI", "take a screenshot", "record video", "batch steps", or "interact with an iOS app". Covers all commands including touch, gestures, text input, keyboard, buttons, accessibility, screenshots, video, and batch workflows.

rename-with-dates

Rename documents and files (PDFs, images, screenshots, etc.) by reading their content to extract the effective/publication date, then renaming them with a "YYYY-MM-DD - Clear descriptive title.ext" format. Use when the user wants to organize files with date prefixes based on document content.

Io.Github.Serkan Ozal/Browser Devtools Mcp

Playwright browser & Node.js MCP. ARIA refs, screenshots, ref-based interactions.

browser-automation

Local Python-based browser automation toolkit using Playwright. Provides command-line tools for navigating, interacting with, and testing web applications without using MCP protocols. Supports clicking, typing, hovering, screenshots, content extraction, and JavaScript execution.

PageShot MCP

Capture webpage screenshots with format, viewport, and dark mode options

excalidraw-skill

Programmatic canvas toolkit for creating, editing, and refining Excalidraw diagrams via MCP tools with real-time canvas sync. Use when an agent needs to (1) draw or lay out diagrams on a live canvas, (2) iteratively refine diagrams using describe_scene and get_canvas_screenshot to see its own work, (3) export/import .excalidraw files or PNG/SVG images, (4) save/restore canvas snapshots, (5) convert Mermaid to Excalidraw, or (6) perform element-level CRUD, alignment, distribution, grouping, duplication, and locking. Requires a running canvas server (EXPRESS_SERVER_URL, default http://localhost:3000).

Context management plugin for Claude Code. Your AI remembers your projects, people, and decisions across every session. Plain files on your machine.

Use when external content arrives in the session — emails, transcripts, screenshots, documents, files, or in-session research worth keeping. Also use when there's nothing obvious to capture — the skill checks 03_Inputs/ for unrouted files and enters inbox scan mode. Stores raw content, routes to capsules, extracts tasks and insights into the stash.

Native DevTools

MCP server for desktop, browser (CDP), and Android automation. Screenshot, OCR, click, type.

Kane CLI — Browser Automation Skill

Use `kane-cli` for **any task that requires a real browser**: navigating websites, clicking elements, filling forms, searching, testing web UI, taking screenshots, or verifying deployments.

laravel-screenshot

Take screenshots of web pages in Laravel using spatie/laravel-screenshot. Covers taking screenshots of URLs and HTML, customizing viewport and format, saving to disks, queued generation, testing, and configuring drivers (Browsershot, Cloudflare).

maui-ai-debugging

End-to-end workflow for building, deploying, inspecting, and debugging .NET MAUI and MAUI Blazor Hybrid apps as an AI agent. Use when: (1) Building or running a MAUI app on iOS simulator, Android emulator, Mac Catalyst, macOS (AppKit), or Linux/GTK, (2) Inspecting or interacting with a running app's UI (visual tree, tapping, filling text, screenshots, property queries), (3) Debugging Blazor WebView content via CDP, (4) Managing simulators or emulators, (5) Setting up MauiDevFlow in a MAUI project, (6) Completing a build-deploy-inspect-fix feedback loop, (7) Handling permission dialogs and system alerts, (8) Managing multiple simultaneous apps via the broker daemon. Covers: maui-devflow CLI, androidsdk.tool, appledev.tools, adb, xcrun simctl, xdotool, and dotnet build/run for all MAUI target platforms including macOS (AppKit) and Linux/GTK.

abx-dl

Use this when you need to scrape websites, extract page content, download media, or run the ArchiveBox extractors without a full ArchiveBox install. abx-dl can save many kinds of web content including txt, md, html, json, pdf, png, jpg, mp4, mp3, srt, screenshots, favicons, headers, DOM snapshots, mirrored sites, and more using the same plugin ecosystem that powers ArchiveBox.

HTML/CSS to Image

An MCP server for generating images from HTML & CSS or screenshots of URLs using htmlcsstoimage.com.

Screenshot Debugging Skill

surf

Control Chrome browser via CLI for testing, automation, and debugging. Use when the user needs browser automation, screenshots, form filling, page inspection, network/CPU emulation, DevTools streaming, or AI queries via ChatGPT/Gemini/Perplexity/Grok/AI Studio.

koubou

Generate App Store screenshots using HTML/CSS templates with real device frames. Creates professional, localized screenshots for iPhone, iPad, Mac, and Watch. Use when user wants to create, design, or update App Store screenshots.

balatrobot

Run and debug BalatroBot locally. Use when you need to start Balatro with the BalatroBot Lua mod, manually test or reproduce issues via the JSON-RPC HTTP API, inspect the newest session logs under logs/, and capture screenshots into logs/<session>/artifacts/ using only the balatrobot CLI (no curl, no uvx).

contribute

After successfully performing a browser action using a method not found in Hive (or discovered via screenshot), contribute that method back to the collective.

Mobile Device Mcp

AI control of Android/iOS devices. Screenshots, UI tree, AI vision, Flutter, video. 49 tools.

cloudflare-browser

Control headless Chrome via Cloudflare Browser Rendering CDP WebSocket. Use for screenshots, page navigation, scraping, and video capture when browser automation is needed in a Cloudflare Workers environment. Requires CDP_SECRET env var and cdpUrl configured in browser.profiles.

preview-build

Build and capture SwiftUI previews for visual analysis. Use when the user asks to preview a SwiftUI view, capture a simulator screenshot, or visually inspect iOS UI components. Supports Xcode projects, SPM packages, and standalone Swift files.

Android

Control Android devices and emulators via ADB — screenshots, UI automation, and logcat.

browse

Fast headless browser for QA testing and site dogfooding. Navigate any URL, interact with elements, verify page state, diff before/after actions, take annotated screenshots, check responsive layouts, test forms and uploads, handle dialogs, and assert element states. ~100ms per command. Use when you need to test a feature, verify a deployment, dogfood a user flow, or file a bug with evidence. Use when asked to "open in browser", "test the site", "take a screenshot", or "dogfood this".

Bazaar Mcp

x402 micropayment-powered developer tools: screenshots, AI analysis, PDFs, code scanning

unity-cli-command

Interact with the Unity Editor through structured framework commands. Use when the user wants to: create/find/modify/destroy GameObjects, add/remove/inspect components, move/rotate/scale transforms, manage scenes (open/save/list), take screenshots, control play mode, manage materials and prefabs, profile performance, query the scene hierarchy, trigger asset refresh/recompile after writing C# files, or perform any structured Unity Editor operation. This skill should be preferred over raw C# code execution. Also triggers on: "list commands", "what commands are available", "session", "selection", "project command", "refresh", "recompile".

Io.Github.Doc API LLC/Docapi

Generate PDFs, screenshots, and documents via any MCP-compatible AI agent.

Presenter Reference

Generate self-contained HTML files for technical diagrams, visualizations, and data tables. Use `spel open` to preview and `spel screenshot` to capture evidence.

Io.Github.Custodia Admin/Pagebolt

Screenshots, PDFs, OG images, page inspection, and narrated video recording for Claude and Cursor.

design-dna

Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides images, screenshots, or URLs of reference designs and wants them analyzed into a structured JSON profile covering all three dimensions, (3) a user has a Design DNA JSON and content and wants a design generated from it, or (4) any combination of these phases. Triggers on "design DNA", "extract design style", "analyze design", "design tokens from reference", "generate design from JSON", "design system from screenshot", "design profile", "style guide JSON", "visual effects analysis", "design with effects", "3d design analysis".