Video summary

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

Main summary

Key takeaways

Technology

Overview

The paper is presented as an “AI-native” design tool with a bidirectional workflow between design and code. The speaker claims it can:

  • Design on a canvas and export/port to code
  • Perform the opposite flow as well—translate code/design back into the tool, enabling a continuous loop between design and implementation

Installation / Setup (Tutorial)

  1. Go to paper.design → Docs
  2. Download and install the Paper desktop app
  3. Connect Paper to a coding workflow using MCP (Model Context Protocol)
  4. The example workflow is described around using Claude Code (also mentions Cursor / Claude Code / Codex / Copilot equivalents)
  5. Verification:
    • Type /mcp
    • Confirm Paper appears
  6. Requirements:
    • Paper app open
    • Coding editor running
    • MCP connected

Main Workflow (AI → Design → Code)

  1. Start in Paper using layout tools (frame/layout concepts similar to Figma’s auto layout).
  2. Use Claude Code + Paper MCP server to generate a layout from a prompt.
  3. Edit and refine visually in Paper, including manual adjustments such as:
    • spacing
    • centering
    • typography
    • contrast
  4. Use Paper MCP again to translate the selected Paper design into working code:
    • Converts the selection into vanilla HTML/CSS/JavaScript
    • Outputs an index.html file

Experiment and Prompt Details (What the AI Generated)

The speaker uses the Coolers.co theme generator to choose a color scheme and extract hex color values.

The prompt instructs generation of a modern SaaS layout for a fictional AI/QA manufacturing business, including:

  • Desktop layout
  • Navbar
  • Hero section
  • Use the specified hex colors with proper contrast

Design Editing Capabilities (Inside Paper)

The demo shows Paper supporting layout and structure editing, including:

  • Layout properties, such as:
    • Width modes (auto / fit-content / fill container)
    • Flexbox-like container behavior
    • Gap adjustments
  • Layers/frame selection (similar to Figma concepts) to restructure elements quickly
  • Fast styling iteration, such as:
    • changing header/background colors
    • fixing text color contrast after background changes
    • adjusting gradient preferences (dislikes certain gradients)

Shader Feature (Advanced Visual Effects)

Paper supports shaders as configurable UI elements.

  • Example shader: “smoke ring”
  • Positioning is discussed using DOM/CSS concepts:
    • the shader is added into the DOM
    • it can be set to position absolute
    • set x/y = 0, width/height = 100% to cover the hero section

Known limitation / caveat

  • The speaker mentions they can’t find/adjust z-index inside Paper for layering control.
  • Expected workaround: adjust layering after translation into code.

Shader parameter tuning

The demo iteratively adjusts:

  • speed
  • thickness
  • radius
  • opacity

…to balance visibility against background content.

Code Translation / Export (Including Shader Caveats)

The speaker runs an MCP command to generate code, described as:

“Translate the selected design in paper to working vanilla HTML CSS and JavaScript in an index.html file.”

Important caveat

  • Shader translation is not perfect yet (founders interaction mentioned).
  • The speaker suggests improving iteratively by capturing gradient/mesh settings and rerunning translations.
  • Expectation: shader/MCP translation integration will improve soon.

30-Day AI-Native Design Challenge (Call to Action / Guide)

This tutorial is part of a 30-day “AI native design series.” Viewers are instructed to:

  • Join via designcourse.com
  • Create a free account
  • Download an index.html asset from the challenge page
  • Use Paper to complete the design in the empty “design” area (from a previously built earlier challenge)
  • Optionally add animation and interactivity
  • Submit via video capture if animation/interactivity is used (system supports video uploads)

The speaker plans to review ~8–10 submissions with video-based reviews.

Main Speakers / Sources

  • Speaker: Primary presenter demonstrating Paper, MCP, Claude Code, and shader workflow
  • Referenced tools/sources:
    • paper.design / Paper
    • Claude Code
    • MCP
    • Coolors.co
    • designcourse.com
    • Figma (as comparison)

Original video