VibeRPGSimulator

Figma design to a tested interface

Illusionist · Frontend design4 spells in orderProposed, not testedUnrated

Play the combo

Foe: Blank Mimic, an empty screen or canvas that needs a design.

Foes

  • Blank Mimic

Party · Context

  • IllusionistYour agent100/100

  1. Blank Mimic

    The Blank Mimic blocks the way.

    What really happensIt stands for an empty screen or canvas that needs a design.

    Illusionist: Context 100/100.

  2. Blank stare

    The blank page stares back and drains the hero.

    What really happensStarting a screen from nothing costs time and context.

    Illusionist takes 9. Illusionist: Context 91/100.

  3. Figma MCP Server

    An orb that reads a Figma frame and can write back to the canvas.

    What really happensReads the source design from Figma, including its variables and components.

    Blank Mimic takes 25.

  4. Blank stare

    The Blank Mimic uses Blank stare.

    Illusionist takes 9. Illusionist: Context 82/100.

  5. Anthropic Frontend Design

    A scroll that plans a look for this brief, then builds the page.

    What really happensGuides the visual build: typography, layout and a deliberate look.

    Blank Mimic takes 25.

  6. Blank stare

    The Blank Mimic uses Blank stare.

    Illusionist takes 9. Illusionist: Context 73/100.

  7. Vercel Web Design Guidelines

    A scroll that audits UI code and marks each miss by file and line.

    What really happensReviews the UI code against Vercel's interface guidelines and reports findings by file and line.

    Blank Mimic takes 25.

  8. Blank stare

    The Blank Mimic uses Blank stare.

    Illusionist takes 9. Illusionist: Context 64/100.

  9. Microsoft Playwright MCP

    An orb that opens a live browser so the hero can click through your app.

    What really happensDrives a real browser to test the interactions, using accessibility snapshots.

    Blank Mimic takes 25. Blank Mimic falls.

  10. Victory

    The Blank Mimic falls.

    What really happensRead the source design, build the visuals on purpose, and check the UI against interface rules. Finish by testing the real interactions so you aren't judging the result from screenshots alone.

Cast order

  1. Figma MCP Server

    Reads the source design from Figma, including its variables and components.

  2. Anthropic Frontend Design

    Guides the visual build: typography, layout and a deliberate look.

  3. Vercel Web Design Guidelines

    Reviews the UI code against Vercel's interface guidelines and reports findings by file and line.

  4. Microsoft Playwright MCP

    Drives a real browser to test the interactions, using accessibility snapshots.

Why it works

Read the source design, build the visuals on purpose, and check the UI against interface rules. Finish by testing the real interactions so you aren't judging the result from screenshots alone.

Records

Seen together0sessions containing every step
In this order0sessions with matching first-use order
Test recoveries0 of 0sessions with a failing test

Curator's machine: macOS 27.0.1 · Apple Silicon (arm64), read when these stats were published. Harness versions installed then: Codex 0.154.0, Claude Code 2.1.282, OMP 18.8.3. Session logs do not record the OS.

Co-occurrence and order describe the logs; they do not show that this combo caused an outcome.

Learn the spells

  1. 1. Figma MCP Server

    Claude Code

    claude mcp add --transport http figma https://mcp.figma.com/mcp

    Codex

    codex mcp add figma --url https://mcp.figma.com/mcp

  2. 2. Anthropic Frontend Design

    Claude Code

    /plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

  3. 3. Vercel Web Design Guidelines

    Claude Code and Codex

    npx skills add vercel-labs/agent-skills

  4. 4. Microsoft Playwright MCP

    Claude Code

    claude mcp add playwright npx @playwright/mcp@latest

    Codex

    codex mcp add playwright npx "@playwright/mcp@latest"