Guide: AI-Native Design with Paper

I've been designing software since 2016. I first started with Sketch. Then came the wave of web-based multiplayer tools like Figma and InVision, prototyping tools to bring designs to life with Origami and Framer, collaboration tools like Pixelcloud, Wake, and Abstract, dev handoff with Zeplin, and a long list of custom plugins. 10 years later, I experienced a fundamentally different way of designing and building: using AI agents to design in @Paper and roundtrip back to code (see their product launch here). AI agents can now generate HTML/CSS and directly modify your canvas in Paper using MCP. Output is editable frames in Paper that you can override and update elements. And yes, most of the frames have flex (Paper's version of auto layout) which is incredible if you're ocd like me. After you edit and make changes in Paper, you can push the designs back to your AI agent to write code and push to prod. Wild. Welcome to the new era of AI-native design. My prediction is that designers will be working more with AI agents than other humans in the near future. Paper is the default canvas for this new era of human <> agent collaboration. In this post, I'll share how I'm using Paper + AI agents to design and build my company I founded in 2026. Set up Claude Code + Paper I primarily use Claude Code (Opus 4.6) for designing in Paper and implementing UI. I've found Opus to be the most reliable for UI tasks. I like using Codex app for most frontend tasks and quick fixes. For this guide, you need to set up Claude Code and the Paper MCP. Paper has docs here. Assuming you have CC set up, download the Paper desktop app. Open your terminal and run the following below. Then restart CC and then type /mcp inside Claude to see your connected servers. Great, now you're set up with Claude + Paper and can start cooking. Designing with agents Starting from scratch If you're working on a new project, Claude + Paper is great for early exploration. Quick tips: Be descriptive, don't just write short generic prompts Break down the task into specific pages or components instead of entire complex user journeys for the best output Give it additional context like a product spec or screenshots My favorite hack for building from scratch is Paper Snapshot, their chrome plugin that allows you to copy and paste sites directly into Paper as editable layers. No need for screenshots. My new workflow is to start with 1) Paper Snapshot to drop in UI patterns and then 2) prompt Claude to remix the references with my spec to design in Paper. This has saved me many hours from setting up basic components and frames. Working with existing designs Claude + Paper is also great for exploring with existing designs. I like to create a new page in my file to have focused sessions with agents. Quick tips: Use Paper Snapshot on QA or deploy branches to bring in your real app into canvas Claude knows which frame you've selected so you can type: "look at the frame I've selected in Paper and do..." Again, be specific for the explorations: "look at the references in {pageName} and build an onboarding flow that follows the requirements of the spec below..." If you're presenting mocks to look more legit, you can ask Claude to "fill in the frame I've selected with information for X persona or Y industry" - incredible for quick previews with customers Feel the "aha" magic moment Once you see this building state animation, you'll start to feel the magic of Claude + Paper. Remember, this is an iterative process of human <> agent collaboration. Opus can sometimes one-shot but most often, you're going back and forth with agents. Claude designs some initial frames, you edit and update styles, change layouts on canvas, and then ask Claude again to explore other variants. Once your designs are ready for code, prompt Claude to implement specific pages and components instead of asking it to implement the entire page. The more specific you are and bite-sized (just like you would when building manually), the better the agent can implement your designs. Why Paper over other AI design tools I've been raving about my new workflow with Claude + Paper to my friends and a common question is how does Paper compare to X design tool. Paper is a human-first design tool vs. a "design for me" tool. I am in charge of the agents as the commander. Paper gives me time back from the busy repetitive work Paper is built with native react vs. complex data structures in a webgl canvas. Agents just write vanilla html/css and drop them into the canvas Paper feels faster and more of a smooth experience designed specifically for UI work Paper has more than just agent tools. They were the first tool to make Shaders accessible and build a better canvas for designers There's no better team to think about the future of human <> agent collaboration. @stephenhaney (Paper founder) created Radix UI and have been obsessed with this problem of design-dev workflows for years Few gotchas Models are crushing benchmarks but they still aren't that great at UI. That's why it's an iterative process. I'm excited to try out new tools / harnesses and if anyone has tips on how to get models to design UI better, please let me know. Paper still has some gaps compared to Figma in terms of shortcuts and features. I've been swarming the team with requests like "k" shortcut for scale on desktop. It's time to become AI-native There's a new way to design and build software. Don't just take my word for it. Paper was a breakout vendor on @tryramp's reports in Feb and March back to back. Don't get left behind. It's incredible how many tools are here to help us move faster and build more. During the early days of Ramp, we were shipping with some insane velocity. But today with Paper, Claude, and Codex - it's fundamentally different. Follow along as I share learnings from building an AI-native company I founded in 2026.