playwright is a programmable browser that you can plug into your coding agents. You can use this to make sure that your design is right, or to have it look at websites that try to prevent bot traffic.
Add the playwrite-mcp to your claude environment.
claude mcp add --scope project playwright npx @playwright/mcp@latest
Lets look at how to code a design: Take a screen shot, for example of a claude instance inside of cursor, why not?
And then prompt claude:
recreate this screenshot found in this directory in a html. pay close to the design and and take screenshots using the playwright tool to compare to make sure its recreated exactly
Anytime you can give the LLM a way to measure its progress it does so much better.
Subscribe to our newsletter
What we offer
2024
01.
AGENTIC TOOLING
02.
(JIT) JUST IN TIME SOFTWARE
03.
CONVERTING LEGACY SOFTWARE TO MCP / AGENTIC
04.
UNDERSTANDING UI DESIGN AND PRODUCT IN THE AI WORLD
05.
MODIFY LEGACY WORKFLOW AND UI