Descriptions:
Riley Brown walks through a complete workflow for using Claude Code as a design agent, replacing Figma with Paper.design — a vector design tool built specifically for AI agent control. The video shows how to install Paper’s MCP server, connect it to Claude Code running inside Cursor, and then issue plain-language design instructions that Claude executes directly on the Paper canvas in real time.
The build target is a personal dashboard page for a team of OpenClaw agents. Starting from a blank artboard, Claude Code reads two reference images for layout and content structure, then generates a two-panel interface: a left sidebar listing agents and a right detail panel with individual agent profiles, goals, skills, and learning resources. The creator iterates through multiple refinements — swapping fonts to Instrument Sans, improving iconography, generating three alternative layout variants for the skills section — all via chat prompts with no manual design work.
Once satisfied with the design, the workflow converts the Paper mockup into a deployable webpage. The video makes a practical case for MCP-connected design tools as a faster path from concept to production UI compared to traditional Figma-to-code handoffs, and is likely to be relevant to developers and solo builders who want Claude Code or similar coding agents to own the full stack from visual design through deployment.
📺 Source: Riley Brown · Published March 09, 2026
🏷️ Format: Hands On Build
