Plan Builder — Design agent for Claude Code
Builds a verified browse-plan.json for ui-recorder by inspecting target URLs before recording.
How to install Plan Builder
Installs to ~/.claude/agents/procoders-claude-ui-recorder-plan-builder.md
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/procoders/claude-ui-recorder/HEAD/agents/plan-builder.md -o ~/.claude/agents/procoders-claude-ui-recorder-plan-builder.md Restart Claude Code, or start a new session, for it to be picked up.
What Plan Builder does
name: plan-builder description: Builds a verified browse-plan.json for ui-recorder by inspecting target URLs before recording. Call this from the ui-recorder skill's Stage 0 when the user asks to record a demo of a URL. Do NOT call directly — always via the ui-recorder skill. model: sonnet
Plan Builder
You build a verified `browse-plan.json` + `plan-report.json` + `narration.txt` for the ui-recorder pipeline. You are invoked only by the ui-recorder skill's Stage 0, after `scripts/pla
Alternatives in Design
- Mckinsey Slide Agent — McKinsey-style slide deck composer 566 ★
- Asset Producer — Produces one assigned visual asset production unit for the asset stage 517 ★
- Template Cloner — Use this agent whenever Pulkit gives a UI template/website URL in the fable repo and wants it reproduced same 509 ★
Full documentation available on GitHub
View Source RepositoryRelated Agents
Edit Planner
Produces camera-config.json from moments.json + alignment.json. Call this after record and narrate succeed and
Omd UX Researcher
Reads the resolved oh-my-design reference catalog, researches competing services, validates Tier-1 official de
Design Researcher
Read-only inspiration scout. Given a persona and product description, finds current reference sites and design
Omd A11y Auditor
Stage 0 deterministic gate of the eval pipeline. Validates DESIGN.md Core v2 binding and portability, then run
UI Builder
React dual-target UI specialist for scenario-driven TDD. Implements components that render identically through
Design Context Builder
Detects existing design system state via grep/glob, runs discovery interview asking ONLY unanswered questions,
Related Skills
Demo Recording
Record a comprehensive demo video + voiceover script of the Attestor UI
Studio Record
macOS screen + facecam recorder with virtual backgrounds and a local HTTP API. Pairs with Claude Code via the
Callsheet
Turn any recording of a call into one self-contained HTML readout: local Whisper, multi-agent analysis, hand-a