Paper vs Pencil: Agentic Design Tools with MCP to Iterate Designs (Figma Alternatives)

Brendan, an independent creator, compares Paper.design and Pencil.dev—two new agentic design tools that leverage MCP to function as AI-driven Figma alternatives. He demonstrates how these tools shift design workflows from manual canvas work to prompt-driven, code-native creation.

🛠️ What They Are

• Agentic design tools that turn text prompts into editable designs, components, and design systems.
• Unlike Figma's proprietary format, the output is actual code: HTML, CSS, and JavaScript.
• Can import external sources (e.g., scrape websites) to recreate designs.

🎨 Demo Prompts

Brendan tested both tools with two prompts:

• "Netflix for Cats": A landing page with hero section, live stream grid, featured cat profile, and dark mode.
• "Haunted Smart Toaster": An app interface featuring ghost flame sliders, ectoplasm mode, and spirit message inboxes.

⚡ Output & Style Comparison

• Pencil: Quickly generated a vivid, visually rich landing page with images and color tokens; multi-screen app design matched the prompt well but felt "louder" and more in-your-face.
• Paper: Took slightly longer but delivered a cleaner, more refined aesthetic. It also performed a self-review pass, tweaking spacing and often creating original images.

🔌 MCP Integration

• Both tools offer desktop apps with straightforward MCP setup.
• Brendan demonstrated connecting them to Claude Code, with mentions of Cursor and Codex compatibility.
• MCP allows AI agents to directly interact with the design file, requesting edits and iterations.

💬 Chat, Systems & Export

• Iteration is chat-driven: users can prompt for "two new versions of the home screen."
• Supports building robust design systems and component libraries from brand guidelines.
• Designs can be exported as code and pulled into environments like WordPress or any IDE for further development.

🚀 Future Workflows

Brendan believes this "prompt in, design out" approach will unlock significant efficiency for agencies and freelancers. The design process can handle ~60% of the work, allowing professionals to refine and finalize. It redefines inputs and outputs, promising a more seamless transition from design to development.

Final Takeaway: The design-to-code pipeline is becoming conversational, turning static files into interactive, code-native assets that promise a seismic shift in how agencies and freelancers build for the web.