Skip to content
don’t make it ugly
All resources

MCP serverAgent Resources, Tools

Playwright MCP

Give your agent a browser so it can see and test what it built.

Staff pickUsed by meOpen sourceFree
Visit website (opens in a new tab)View GitHub (opens in a new tab)
Preview of Playwright MCP

What it is

Microsoft's Playwright MCP server lets a coding agent open pages, click, type, take screenshots and read the accessibility tree of a running site. For design work this means the agent can look at its own output, check responsive layouts, and iterate on what it sees rather than what it guesses.

Why it’s here

The most underused design tool for agents. "Take a screenshot at 375px wide and fix anything that overflows" is a prompt that only works if the agent can actually look.

Best for

  • visual QA by the agent
  • responsive checks
  • accessibility tree inspection
  • iterating on design

Can my agent use this?

Agent excellent agent friendliness

Yes, this is built for agents. Add it to your client, then ask the agent to open your dev server, screenshot pages at several widths, and fix what it sees.

Excellent: Public docs, public source or an installable package. An agent can read, install and implement this directly.

Access methods

  • MCP
  • GitHub
  • npm
  • Docs

Install

claude mcp add playwright -- npx @playwright/mcp@latest

Related resources

  • Chrome DevTools MCP
    Preview of Chrome DevTools MCP

    Chrome DevTools MCP

    Let your agent inspect, debug and profile a live Chrome tab.

    excellent agent friendlinessMCP serverFreeOpen source
  • Checklist Design
    Preview of Checklist Design

    Checklist Design

    Checklists of what every common screen and component should include.

    good agent friendlinessGuideFreeStaff pick
  • DesignMD
    Preview of DesignMD

    DesignMD

    Point it at a URL and it extracts that site's design system as a DESIGN.md.

    excellent agent friendlinessTool
  • DESIGNMD by Hyperbrowser
    Preview of DESIGNMD by Hyperbrowser

    DESIGNMD by Hyperbrowser

    A single-purpose tool that extracts a DESIGN.md from any URL you give it.

    good agent friendlinessToolFree