VibeRPGSimulator

Landing page from Figma

Quest: Turn a Figma design into a polished landing page

Proposed, not tested

Equipment

Illusionist Claude Code
Quest
Turn a Figma design into a polished landing page
Hero
Claude CodeThe agent that runs the quest
Class
Illusionist · Frontend design
Weapon
Claude Opus 5.5Greatsword: Anthropic's flagship for hard coding workMana rate 21 per 1k tokens Mana per run without spells: 2,919 mana (77 runs, 21 quests).
Charge
HighReasoning effort
Author
The curator

Figma MCP reads the design, the frontend scroll and shadcn build it, and Playwright plus the web design guidelines catch layout and accessibility slips before you ship.

Can't be appraised: Proving Grounds can't equip orbs (MCP servers).

Skill tree

  1. ScoutGather context

  2. CraftMake the thing

  3. TestCheck the work

  4. ShipDeliver it

    Nothing equipped here

Quest replay

Quest: "Turn a Figma design into a polished landing page". Four waves, then the Backlog Dragon.

Foes

  • Fog Wraith

Party · Context

  • Claude CodeIllusionist100/100

  1. Wave 1 of 4 · Scout

    The Fog Wraith steps up.

    What really happensGather context

    Claude Code: Context 100/100.

  2. Explore

    Claude Code sends Explore, a fox scout, into the fog.

    What really happensClaude Code can hand a codebase search to its built-in Explore subagent, which works in its own context window.

    Explore: Context 40/40.

  3. Explore

    Explore sniffs out the right files.

    What really happensThe subagent reads and searches. None of that output lands in the main context.

    Fog Wraith takes 26.

  4. Haze

    The Fog Wraith breathes haze. Swings start to miss.

    What really happensWithout current docs, the agent guesses at APIs that may have changed.

    Explore takes 3. Explore: Context 37/40. Explore: Haze.

  5. Figma MCP Server

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

    What really happensPaste a frame link. The server returns components, variables, layout, FigJam or Make content, and Code Connect mappings.

    Fog Wraith takes 34. Fog Wraith falls.

  6. Haze cleared

    Fresh pages burn the haze away.

    What really happensCurrent docs replace guesses with facts.

  7. Explore

    Explore returns with a short report.

    What really happensOnly the subagent's final summary comes back to the main agent.

    Claude Code takes 2. Claude Code: Context 98/100. Claude Code: Insight. Explore returns.

  8. Wave 2 of 4 · Craft

    The Blank Mimic steps up.

    What really happensMake the thing

  9. Blank stare

    The blank page stares back and drains the hero.

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

    Claude Code takes 5. Claude Code: Context 93/100.

  10. Anthropic Frontend Design

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

    What really happensIt writes a short plan: 4 to 6 named hex colors, typefaces and roles, a layout with an ASCII wireframe, and what should make this page specific.

    Blank Mimic takes 77 (critical hit).

  11. Blank stare

    The Blank Mimic uses Blank stare.

    Claude Code takes 5. Claude Code: Context 88/100.

  12. shadcn MCP Server

    An orb that fetches registry components and drops them in the project.

    What really happensThe agent can list and search components, blocks, and templates from the shadcn registry or any configured registry.

    Blank Mimic takes 23 (critical hit). Blank Mimic falls.

  13. Wave 3 of 4 · Test

    The Bug Slime and the Flaky Wisp step up.

    What really happensCheck the work

    Flaky Wisp: Flicker.

  14. Flicker

    The Flaky Wisp uses Flicker.

    Claude Code takes 3. Claude Code: Context 85/100.

  15. Microsoft Playwright MCP

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

    What really happensEach step returns an accessibility snapshot, a structured list of page elements, so the agent works without reading pixels.

    Flaky Wisp avoids the hit.

  16. Pinned

    Pinned in place, it cannot slip away.

    What really happensA test that runs the same way each time shows the real failure.

    Bug Slime: Pinned. Flaky Wisp: Pinned.

  17. Regress

    The Bug Slime uses Regress.

    Claude Code takes 3. Claude Code: Context 82/100.

  18. Flicker

    The Flaky Wisp uses Flicker.

    Claude Code takes 3. Claude Code: Context 79/100.

  19. Vercel Web Design Guidelines

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

    What really happensBefore each review it fetches command.md from vercel-labs/web-interface-guidelines. If you name no files, it asks which to read.

    Flaky Wisp takes 40. Flaky Wisp falls.

  20. Regress

    The Bug Slime uses Regress.

    Claude Code takes 3. Claude Code: Context 76/100.

  21. Greatsword

    Claude Code swings the Greatsword.

    Bug Slime takes 45. Bug Slime falls.

  22. Wave 4 of 4 · Ship

    The Gate Warden steps up.

    What really happensDeliver it

    Gate Warden: Barrier.

  23. Boss · Backlog Dragon

    The Backlog Dragon guards the quest: "Turn a Figma design into a polished landing page".

    What really happensIt stands for the whole quest, every task on the list.

  24. Scope creep

    The dragon breathes scope creep across the party.

    What really happensNew asks pile onto a task while it is underway.

    Claude Code takes 5. Claude Code: Context 71/100.

  25. Greatsword

    Claude Code swings the Greatsword.

    Gate Warden is behind a barrier.

  26. Bar the gate

    The warden raises the gate. Nothing passes until the checks are green.

    What really happensA release waits until tests, builds and reviews pass.

  27. Claw

    The Backlog Dragon uses Claw.

    Claude Code takes 6. Claude Code: Context 65/100.

  28. Greatsword

    Claude Code swings the Greatsword.

    Gate Warden is behind a barrier.

  29. Bar the gate

    The Gate Warden swings the gate shut.

    Claude Code takes 5. Claude Code: Context 60/100.

  30. Scope creep

    The Backlog Dragon uses Scope creep.

    Claude Code takes 5. Claude Code: Context 55/100.

  31. Greatsword

    Claude Code swings the Greatsword.

    Gate Warden takes 44.

  32. Gate open

    The checks turn green and the gate opens.

    What really happensTests, build and review pass, so the release can go.

  33. Claw

    The Backlog Dragon uses Claw.

    Claude Code takes 6. Claude Code: Context 49/100.

  34. Bar the gate

    The Gate Warden swings the gate shut.

    Claude Code takes 5. Claude Code: Context 44/100.

  35. Greatsword

    Claude Code swings the Greatsword.

    Gate Warden takes 16. Gate Warden falls.

  36. Scope creep

    The Backlog Dragon uses Scope creep.

    Claude Code takes 5. Claude Code: Context 39/100.

  37. Greatsword

    Claude Code swings the Greatsword.

    Backlog Dragon takes 46.

  38. Claw

    The Backlog Dragon uses Claw.

    Claude Code takes 6. Claude Code: Context 33/100.

  39. Greatsword

    Claude Code swings the Greatsword.

    Backlog Dragon takes 78 (critical hit).

  40. Call the backlog

    The dragon roars, and another task crawls out of the backlog.

    What really happensFinishing one task often surfaces the next one on the list.

  41. Claw

    The Backlog Dragon uses Claw.

    Claude Code takes 6. Claude Code: Context 27/100.

  42. Greatsword

    Claude Code swings the Greatsword.

    Bug Slime takes 25. Bug Slime falls.

  43. Scope creep

    The Backlog Dragon uses Scope creep.

    Claude Code takes 5. Claude Code: Context 22/100.

  44. Compact

    The hero rolls the scroll of memory tight and fights on.

    What really happensWhen context runs low, the agent summarizes the session so far and keeps going. Small details can get lost.

    Claude Code recovers 28. Claude Code: Context 50/100.

  45. Greatsword

    Claude Code swings the Greatsword.

    Backlog Dragon takes 46.

  46. Enraged

    Wounded, the dragon rages.

    What really happensThe last stretch of a big job is often the hardest.

    Backlog Dragon: Enraged.

  47. Claw

    The Backlog Dragon uses Claw.

    Claude Code takes 8. Claude Code: Context 42/100.

  48. Greatsword

    Claude Code swings the Greatsword.

    Backlog Dragon takes 50. Backlog Dragon falls.

  49. Quest clear

    The Backlog Dragon falls. Quest complete.

    What really happensEvery equipped spell did its part of "Turn a Figma design into a polished landing page".

After the battle

  • Claude Code took 15 turns to clear four waves.
  • Context ran low once, so the agent compacted it.
  • No Ship spell, so that wave ran on basic attacks.
  • Summons took 3 damage in their own context and brought back 1 report.

Copy this loadout

Prompt for Claude Code

Paste this into Claude Code. It installs each spell, leaves API keys and sign-ins to you, and ends with the command that restarts it with this weapon and charge.

Set up these tools for me in Claude Code.
Loadout: https://vibe-rpg-simulator.vercel.app/loadouts/figma-landing-page/

1. Figma MCP Server
   Source: https://help.figma.com/hc/en-us/articles/39216419318551-Get-started-with-the-Figma-MCP-server
   Run:
     claude mcp add --transport http figma https://mcp.figma.com/mcp

2. Anthropic Frontend Design
   Source: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
   I type in Claude Code:
     /plugin marketplace add anthropics/skills
     /plugin install example-skills@anthropic-agent-skills

3. shadcn MCP Server
   Source: https://ui.shadcn.com/docs/mcp
   Run:
     npx shadcn@latest mcp init --client claude

4. Microsoft Playwright MCP
   Source: https://github.com/microsoft/playwright-mcp
   Run:
     claude mcp add playwright npx @playwright/mcp@latest

5. Vercel Web Design Guidelines
   Source: https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md
   Run:
     npx skills add vercel-labs/agent-skills

How to do it:
- Skip anything that is already installed. Run the rest in order and check that each step worked.
- Commands under "I type in Claude Code" are mine to enter. List them for me at the end, in order.
- Never ask me to paste an API key or token into this chat. When a command needs one, such as YOUR_API_KEY, give me the full command to run in my own terminal.
- Ask me for any other value you can't work out, such as a project path.
- If a command asks a question or needs a browser sign-in or an open app, tell me what to do and wait.
- If a command fails, follow the install steps in the tool's source for Claude Code instead. Show me any command that is not on this list before you run it, and install nothing else.

When you're done, tell me what is ready and what still needs me. New tools load in a new session, so finish by telling me to restart Claude Code with Claude Opus 5.5 and reasoning effort high:
claude --model opus --effort high

Terminal commands

Or paste these lines into a terminal. The first part installs every spell for Claude Code; the last line starts it with the same weapon and charge. Lines starting with # are notes or commands you type inside the agent.

# Loadout: Landing page from Figma
# Quest: Turn a Figma design into a polished landing page
# Hero: Claude Code · Weapon: Claude Opus 5.5 · Charge: High
# From https://vibe-rpg-simulator.vercel.app/loadouts/figma-landing-page/

# 1. Learn the spells
# Scout: Figma MCP Server
claude mcp add --transport http figma https://mcp.figma.com/mcp
# Craft: Anthropic Frontend Design
# in Claude Code: /plugin marketplace add anthropics/skills
# in Claude Code: /plugin install example-skills@anthropic-agent-skills
# Craft: shadcn MCP Server
npx shadcn@latest mcp init --client claude
# Test: Microsoft Playwright MCP
claude mcp add playwright npx @playwright/mcp@latest
# Test: Vercel Web Design Guidelines
npx skills add vercel-labs/agent-skills

# 2. Start the hero with this weapon and charge
claude --model opus --effort high

Edit a copy