Build a Head-of-Design Sub-Agent — From Vanilla HTML to a Composing Designer in One Session

Paste this into Claude Code, Cursor, or Aider and it interviews you about the agent you already run — where its memories live, whether it stores embeddings, what sub-agents and tools it has, and how its frontend hears about activity — then does a strictly read-only pass over your project to see what's actually there before it draws a single node. Only then does it build the visualization: a full-screen three.js scene where your agent is a breathing star at the center, its long-term memories hang in a force-directed web wired by real cosine similarity, sub-agents arc off to one side with their tools as moons, and its whole tool inventory clusters into a capability ball. Custom GLSL gives every node a reverse-fresnel glow that brightens with freshness, instanced meshes keep hundreds of nodes at one draw call, UnrealBloom makes the light bleed, and a read-only observer WebSocket makes the thing actually fire — pulses travel real edges when a memory is recalled, new memories bloom into existence, agents halo when dispatched. Plus hover tooltips, a click-to-fly inspector, search, region toggles, deep links, and an FPS governor that degrades gracefully instead of stuttering. Interview first, map second, then build tier by tier — each tier renders something on screen and is verified before the next begins.