Vibe Coding Nights: Design & Interaction

Your coding agent is sensory-deprived. It can't see what it built, can't hear the console, can't feel whether the timing lands. It writes interfaces without ever experiencing them.

This night, we fix that.

Three Tracks

1. Generation → Expression into material. You already know what you want to build — the question is how to get it out of your head. Language, references, or structured design tools: three modes of expression, one outcome. The models can see now. The gap is the fidelity of your translation.

2. Perception → The matter people experience. Your agent needs to perceive its output wherever it lands — browser, phone, headset, GPU. Four substrates, one principle: the feedback loop must reach the hardware. Chrome DevTools for web, Mobile MCP for handhelds, WebXR for the Pico in the room, Metal for the silicon under your fingers.

3. Refinement → The return channel. You see the output, you perceive the delta between what's there and what should be. The question is how to carry that perception back into the agent — through parameters, annotations, language, iteration. This is where taste becomes tractable and the loop crystallizes.

Philosophy

This is a vibe coding night. You learn by building, not by reading. Each track is a workflow you can complete in a session. Start wherever grabs you.

You already have an internal model of what you want to build. The models now have perception. The gap between those two things is shrinking to the fidelity of your expression — how clearly you can project what's in your head into a medium the model can perceive and act on. The agency you build tonight comes from the project itself.

Beauty isn't decoration applied to function. It's function made visible.

Quick Setup

Browser (everyone):

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Visual feedback loop (recommended):

npx @anthropic/mcp-playwright

Design (if you have a Figma file):

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

Mobile (if building for handhelds):

{
  "mcpServers": {
    "mobile-mcp": {
      "command": "npx",
      "args": ["@mobilenext/mobile-mcp@latest"]
    }
  }
}

• iOS: Xcode + Simulator running
• Android: SDK + emulator or USB device

XR (if reaching for the Pico):

npm create vite@latest my-xr-app -- --template react-ts
npm install three @react-three/fiber @react-three/xr

• Immersive Web Emulator browser extension for desktop preview
• Pico: connect to same Wi-Fi, open dev server URL in Pico browser

GPU (if writing shaders):

• Xcode for Metal debugging
• Chrome for WebGPU: chrome://flags → enable WebGPU

Bring

• A Figma file you want to bring to life
• A screenshot of something you want to recreate
• A mobile app you want to build or debug
• An idea for something spatial — the Pico is in the room
• Nothing but curiosity

Leave With

Work that holds up — across substrates, across scrutiny. And the loop internalized: express, perceive, refine.