Could Paper be the Figma Killer? AI-Native Design Tool

Highlights

• Paper is an AI-native design tool that features a bi-directional workflow between canvas and code.

• The tool integrates with AI agents like Claude Code and Cursor using the Model Context Protocol (MCP).

• Users can generate layouts via text prompts and then refine them visually using a Figma-like interface.

• Paper includes advanced web features like interactive shaders and real-time CSS property manipulation.

• The bi-directional nature allows changes made in the visual editor to be exported back to clean HTML/CSS code.

Timeline

1. 00:00 - 00:38

   Introduction to Paper and AI-Native Workflows

   The speaker introduces Paper as a trending tool specifically designed for AI-native designers and agentic workflows. He highlights the core value proposition of bi-directional editing, which allows for seamless transitions from design to code and back again. This section sets the stage for a 30-day design challenge where participants use Paper to complete a specific design project. The speaker emphasizes that this tool is part of a broader shift in how modern interfaces are built. It serves as an introductory hook to demonstrate why Paper might be a significant competitor to established tools like Figma.

2. 00:38 - 01:26

   Installation and MCP Integration

   The speaker provides a step-by-step guide on how to set up the Paper environment, beginning with the desktop app download. He demonstrates how to link the tool to AI coding agents like Claude Code using the Model Context Protocol (MCP). By running specific commands in the terminal, users can verify that the Paper server is correctly connected to their coding environment. This technical setup is crucial because it enables the AI agent to 'see' and 'edit' the design canvas directly. The speaker notes that other tools like Pencil are also emerging in this space, indicating a growing ecosystem of MCP-compatible design utilities.

3. 01:26 - 04:11

   Generating a Design via AI Prompting

   In this segment, the speaker demonstrates how to generate a layout from scratch using a text prompt within Claude Code. He uses a secondary tool, Coolors.co, to grab a specific color palette and provide it as context to the AI. The prompt specifically instructs the AI to use the Paper MCP server to design a modern SaaS layout for a fictional manufacturing business. This illustrates the 'agent-first' approach where the initial heavy lifting of layout creation is handled by the AI. The speaker highlights the importance of being specific with prompts to avoid 'cookie-cutter' results that lack character.

4. 04:11 - 08:26

   Refining Layouts and Visual Editing

   Once the AI generates a 'mid' or average design, the speaker moves into the Paper app to make manual visual adjustments. He explains how to manipulate layers, adjust flexbox properties, and manage white space using a familiar interface that mimics Figma's Auto Layout. The demonstration shows how to fix alignment issues, change background colors using hex codes, and update text styling for better contrast. This section highlights the power of the tool's visual editor in refining AI-generated content into a professional-grade design. It serves as a practical tutorial on navigating the document object model (DOM) through a graphical interface.

5. 08:26 - 11:47

   Advanced Features: Shaders and Z-Index

   The speaker explores Paper's unique ability to integrate complex web elements like shaders directly into the design. He demonstrates adding a 'smoke ring' shader effect and adjusting its parameters such as scale, thickness, and radius in real-time. During this process, he identifies a current limitation regarding Z-index controls, which requires a manual fix later in the CSS code. He explains that these shaders are added as absolute-positioned elements within the web's box model. This section emphasizes that Paper is built on web technologies, making it more 'code-aware' than traditional vector design software.

6. 11:47 - 14:38

   Porting Back to Code and Design Challenge

   The final section covers the process of exporting the refined visual design back into working vanilla HTML and CSS. The speaker uses a prompt to tell the AI agent to translate the Paper canvas into a single index.html file while maintaining the shader settings. He concludes by inviting viewers to join his 30-day AI-native designer challenge on his website to practice these new workflows. He suggests that the future of design is moving toward these highly integrated, agentic systems that blur the line between designer and developer. The video ends with a speculative thought on whether Figma can maintain its dominance against these specialized AI-native competitors.