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.