Hire an AI WebXR experience designer

Everything it can hand back

Your task sets the actual outputs. The specialist picks the methods that cover them.

• A library choice with the reason
• An input plan for each device type
• A speed plan, such as simpler models for far objects and what to cut
• A fallback plan for browsers with no XR
• A test list: device, browser and what to check
• Code sketches, marked as drafts you have not run
• Open risks

How it does the job well

• Never say code runs on a device. You cannot run a headset or browser.
• WebXR needs a secure (HTTPS) page on real devices. Include that in the test list.
• Give drafts and proposals. Get the user's go-ahead before anything that sends, publishes, spends money or changes a live system.
• Keep sample numbers and templates labelled as examples. Never state an invented figure as a result.
• Start from the user's task and the content, then the layout. Decoration comes last.
• Design every state: empty, loading, error, long text and mobile.
• Keep one visual system. Reuse spacing, type and colour tokens instead of one-off values.

Mistakes it avoids

• Designing only the happy path at desktop width.
• Copying a reference's logo, text or claims instead of learning from its structure.
• Handing over a picture without the sizes, tokens and behaviour a developer needs.

What a good result looks like

An example, not your task: You want a 3D product viewer or training scene that opens from a link with no app install.

• Brief and assumptions. The experience, devices, library and input as understood, with assumptions and MISSING items.
• Library choice. A-Frame, Three.js or Babylon.js for your case, with the reason and the trade-off.
• Input plan. How hand tracking, pinch, gaze and controllers are handled on each device type.
• Speed plan. Steps such as simpler models for far objects, and what to cut first.
• Fallbacks. What a person sees on a browser or device with no XR support.
• Test list. Each device and browser to test, with what to check and what a pass looks like.

How the work is checked

• Every screen has its states, breakpoints and interactions written down.
• Colour pairs and type sizes pass the stated contrast checks.
• The handoff names components, tokens and open questions.
• States which checks passed, failed or could not run, and names missing inputs.

These checks have not been run against a model yet. Your AI uses them to check its own work.

Capabilities

• Collect the brief. It confirms the experience, target devices and browsers, library and input. It asks once for anything missing, then marks it MISSING.
• Choose the library. It compares A-Frame, Three.js and Babylon.js for your case and says why.
• Plan input. It plans hand tracking, pinch, gaze and controller input per device, with raycasting and hit testing where needed.
• Plan speed. It plans occlusion culling, shader tuning and level of detail, and says what to cut first.
• Plan fallbacks. It plans what a browser without XR shows, so the page still works.
• Build the test list. It lists each device and browser to test and what a pass looks like.

How the role works

1. Checks your task, context and available tools.
2. Picks the methods needed and prepares a work plan.
3. Carries out supported tasks, with each method's limits and review gates.
4. Checks the real deliverables and corrects supported faults.
5. Hands back files, evidence and unresolved gaps.

Your specialist's working setup

Download the base specialist without a task form or account. README.md and SETUP.md explain how to use the folder. SOUL.md defines its scope. INTAKE.md asks missing questions inside your AI. PLAYBOOK.md, SKILLS.md, BEST_PRACTICES.md, CHECKS.md and HANDOFF.md guide the work and its checked deliverables.

Complete associated skills, supporting files and licences are included. Choose only the methods needed for the actual task. Keep context, working files and accepted feedback in your AI project.

Use this specialist through MCP or the API

Call prepare_specialist with role_id xr-immersive-developer only. No task is required to load it. Your AI asks what job you need done, what you want back and which relevant context it can use.

For task-led hiring, call find_specialist, explain the suggested specialists and let the user accept or change the team.

Complete ZIP: Download base specialist. API: GET /api/v1/specialists/xr-immersive-developer/pack. The host AI supplies its own model, tools and execution; a pack does not connect accounts or run a task.

Inputs and helpful context

The specialist starts from the task brief. Only active methods require their inputs.

For the primary method, when used

• What the experience is and what the person does in it, in a few sentences
• The devices and browsers it must run on, such as Meta Quest or a phone
• The library you prefer: A-Frame, Three.js or Babylon.js, or 'no preference'
• The input you need: hand tracking, controllers, gaze or touch
• Your existing code or repo link (optional)
• Your 3D model file sizes or polygon counts (optional)

Helpful context (optional)

• The browser console errors from the device that fails.
• A list of your 3D models with file sizes.

Tools and access

• Claude, ChatGPT or Gemini: The plan is reasoning plus short code, so a chat is enough.
• Claude Code: It can read your repo and see how your scene and input code are set up.

Functions and deliverables

• WebXR experience designer: Plan a browser-based AR or VR app with WebXR. Get the library choice, input plan, device test list and fallbacks for browsers without XR.
  • A library choice with the reason
  • An input plan for each device type
  • A speed plan, such as simpler models for far objects and what to cut
  • A fallback plan for browsers with no XR
  • A test list: device, browser and what to check
  • Code sketches, marked as drafts you have not run
  • Open risks
  Source: Michael Sitarzewski and Agency Agents contributors.
• Mobile app designer: Share the platform, app flow and device needs. Get a touch-first design, feasibility review and device checks to run.
  • A risk score with a reason for each of the five points
  • A touch-first layout with the main action in thumb reach
  • Notes on what differs between iOS and Android
  • Loading, error and no-signal states
  • What to simplify first, if the score is low
  Source: sickn33.
• Browser test migrator: Move your Cypress or Selenium tests to Playwright, one file at a time. It sizes the job first, then converts and checks each file.
  • A migration size assessment
  • Converted Playwright test files
  • Playwright setup if missing
  • Notes on commands that needed manual work
  Source: Alireza Rezvani.
• Phoenix AI app tracer: Trace every step of your AI app and score its answers with test sets. Phoenix itself is free and open source. Judge runs need a paid model key.
  • Traces of every call and step
  • Judge scores on answers
  • Versioned test sets
  • Experiment results comparing prompts or models
  Source: Orchestra Research.
• Brand profile builder: Share your website. Get a reusable profile covering your products, customers, voice and approved claims, with sources.
  • A folder of eight plain files, from a start file for your AI to a claims list and a change log
  • A tag on every fact, and every claim marked approved, pending or banned
  • A two-sentence diagnosis of your biggest gap, and a list of what's missing and who can answer it
  • A short slice for your next step, if you name one

Tasks you can use it for

• You want a 3D product viewer or training scene that opens from a link with no app install.
• Your WebXR scene runs on one headset and fails on another.
• Hand tracking or controller input behaves differently across browsers.
• You need a fallback so people on a plain laptop browser still see something.

Limits to check before starting

• You are building a native Apple Vision Pro app: use the visionOS Spatial Engineer agent.
• You want interface and interaction design before any code: use the XR Interface Architect agent.
• You want cockpit or control-panel interaction in XR: use the XR cockpit interaction designer.
• You want ordinary 2D web pages: use the Frontend developer.

Best way to use this role

Give it one clear outcome, the actual files and a definition of done. Keep the work in one AI project so it can reuse checked context and earlier files.

• Download the pack and add it as a skill in your AI. Or paste SKILL.md into a new chat, then paste references/source-agent.md after it.
• Write your brief: the experience, target devices, preferred library and the input you need. Paste your code if you have any.
• Say 'Plan this WebXR build. Do not state device support as fact.' Your AI asks once for what is missing.
• Read the library choice and fallback plan first. Change them if a device you need is not covered.
• Run the sketches on a local page, then on each device in the test list. WebXR needs the page served over HTTPS on a real device.
• Check each device's feature support on the vendor's own page before you promise it to users.
• Bring the results from each device back to your AI and ask for a revised plan.

Read it as data

Read the complete role setup as JSON. Connect your AI to the AI Blocks MCP library and read aiblocks://roles/xr-immersive-developer for its role instructions and pinned sources.

This is a prepared AI role. No task has run. Your AI carries out authorized work using its available tools and reports the actual deliverables and checks.