Automating Multi-Modal Design Workflows: Leveraging Claude Code, MCP Servers, and the Paper Agent-Native Canvas

The paradigm of digital design is shifting from manual manipulation in pixel-based editors to agentic orchestration within canvas-native environments. While traditional tools like Figma remain industry standards for human-driven UI/UX, a new frontier is emerging: agent-native design. This workflow leverages Claude Code running the Fable 5 agent to interact with Paper, an agent-native version of Figma built specifically for programmatic canvas manipulation via the Model Context Protocol (MCP).

The Architecture: MCP and Agentic Canvas Control

The core of this new workflow is not just generative AI, but the integration of an LLM-based agent with a design environment through a standardized interface. By utilizing the Paper MCP server, developers can bridge the gap between Claude Desktop (or IDEs like Cursor and Codex) and the Paper desktop application.

When you configure the connection using the paper.design/doc/mcp endpoint, you are essentially providing Claude Code with a set of tools to read from and write to the Paper canvas. This is not merely generating code; it is an agentic loop where:

1. Claude Code receives high-level design instructions.
2. The agent executes commands via the MCP server.
3. The Paper canvas (built on a high-performance, HTML-based architecture) renders updates in real-time.

This setup allows for "agentic designing," where the LLM can manipulate layers, create frames, and manage assets as if it were an active user of the software.

Workflow 1: Automated Asset Acquisition and Thumbnail Iteration

One of the most powerful use cases is the automation of asset gathering for YouTube thumbnails. By implementing custom skills—specifically a YouTube scraper skill—Claude Code can bypass the manual process of downloading and importing assets. Using an underlying integration with the Firecrawl API, the agent can scrape high-performing metadata and image assets directly from YouTube URLs and inject them into specific frames within Paper.

The true power, however, lies in iterative generative editing. Within Paper, you can utilize built-in AI image models to perform complex operations:

• Character Replacement: By selecting a reference subject and an existing thumbnail frame, the agent can replace a person in an image with a new subject while maintaining the original composition. /
• Contextual Text Modification: The agent can modify text overlays (e.g., changing "Fable vs GPT 5.6") while preserving the aesthetic integrity of the graphic.
• Multi-Reference Prompting: By using Shift+Click to select multiple reference images and icons, you can instruct the agent to synthesize a new graphic that adheres to the visual language of all selected assets.

Workflow 2: Programmatic Graphic Manipulation for Social Media

Beyond simple image generation, the workflow extends to complex layer manipulation for Instagram graphics. This involves programmatic control over CSS-like properties within the canvas, such as black gradient overlays, text weight, and color hex codes.

A sophisticated agentic loop allows you to take an existing graphic and instruct Claude Code to:

1. Analyze the visual style: The agent identifies gradients and typography patterns in a reference image.
2. Apply transformations: You can command the agent to "add a black gradient effect behind the text" or "change the font color to white."
3. Asset Swapping via Command-Shift-R: Using specific hotkeys, you can replace existing canvas elements with newly generated assets (e.g., replacing an old character with a new one generated in the same style) without breaking the layout structure.

This level of control allows for rapid A/B testing of social media creatives, where dozens of variations can be produced by simply iterating on the text overlay and background lighting parameters through natural language prompts.

Workflow 3: Full-Stack Deployment—From Pitch Decks to Vercel

The most advanced application of this workflow is the transition from a design canvas to a live, production-ready web deployment. This involves three distinct technical stages: Scraping, Presentation Construction, and Deployment.

1. Style Extraction via Scraper Skill

Using the scraper skill, Claude Code can visit a URL (such as perplexity.ai), analyze its design language—including color palettes, typography, and whitespace utilization—and extract these parameters to use as a blueprint for a new creation.

2. Programmatic Presentation Building

By referencing an entire Frame in Paper (a grouping of assets), you can provide the agent with a "contextual container" of images. You can then prompt the agent to:

• Create a multi-slide pitch deck.
• Apply the extracted Perplexity design language across all slides.
• Distribute specific assets from the referenced frame onto individual slides, ensuring one image per slide and maintaining high whitespace ratios.

3. Automated Deployment via Vercel

The workflow culminates in full-stack automation. Once the presentation is finalized on the Paper canvas, you can instruct Claude Code to generate a responsive, mobile-optimized landing page that embeds the slide deck. Using its ability to interface with deployment platforms, the agent can:

1. Generate the necessary HTML/CSS/JS code for a single-page application (SPA).
2. Configure the site to be responsive across web and mobile viewports.
3. Deploy the site directly to Vercel, providing you with a live vercel.app URL in a single prompt execution.

Conclusion: The Future of Design Engineering

The integration of Claude Code, MCP-enabled design tools like Paper, and deployment engines like Vercel represents a fundamental shift toward Design Engineering. We are moving away from "drawing" and toward "instructing." As the capabilities of agents like Fable 5 continue to evolve—specifically in their ability to handle complex multi-modal inputs and external API integrations—the boundary between design, development, and deployment will continue to dissolve.