
Landing page from Figma
Quest Turn a Figma design into a polished landing page
- Hero
- Claude Code
- Weapon
Claude Opus 5.5- Charge
Figma MCP Server
Anthropic Frontend Design
shadcn MCP Server
Microsoft Playwright MCP
Vercel Web Design Guidelines
Browser automation and inspection through Playwright and structured accessibility snapshots.
Foe: Bug Slime, a defect in your code.
Foes
Party · Context
The Bug Slime blocks the way.
What really happensIt stands for a defect in your code.
Paladin: Context 100/100.
The Bug Slime uses Regress.
What really happensA fix in one place breaks something that used to work.
Paladin takes 8. Paladin: Context 92/100.
The Playwright Orb opens a portal into a live browser.
What really happensClaude Code or Codex starts a real browser through the Playwright MCP server.
Bug Slime takes 29.
The orb shows the page as a map of buttons, links and fields.
What really happensEach step returns an accessibility snapshot, a structured list of page elements, so the agent works without reading pixels.
Bug Slime takes 13.
The Bug Slime uses Regress.
Paladin takes 8. Paladin: Context 84/100.
The hero clicks, types and submits like a real visitor.
What really happensTools such as browser_navigate, browser_click and browser_type drive the page one action at a time.
Bug Slime takes 32.
The Bug Slime is cornered and its weak spot is written down.
What really happensThe agent reports what broke, using console messages and screenshots it took, then fixes the code.
Bug Slime takes 26. Bug Slime falls.
The Bug Slime falls.
Claude Code
claude mcp add playwright npx @playwright/mcp@latestCodex
codex mcp add playwright npx "@playwright/mcp@latest"Needs Node.js 18 or newer. Works from accessibility snapshots, not screenshots; coordinate clicks need --caps=vision. For coding agents the README suggests the playwright-cli with skills as a more token-efficient option. Separate from Anthropic's webapp-testing skill.
This spell has no recorded sessions in the curator's logs. Tried it? Send a spell report.