Stop guessing which one. Put them side by side.

The grid says what these tools are. This says what builders did about it — one decision per person, changeable whenever you change your mind.

# Tool comparison — Spline vs Pencil (pen.dev) vs Superdesign

Source: Kbaise, a directory of tools that work with Lovable projects.
Pick one and tell me why before writing any integration code.

## Spline (spline)
- URL: https://app.spline.design/community
- Category: AI design builders
- Cost: paid — Free (watermarked) · $12–$120/mo
- What it is: Real-time collaborative 3D in the browser with materials, timeline animation, physics, particles and event interactivity. Publishes a hosted .splinecode file consumed by a first-party React runtime. The Community gallery lets you remix existing scenes rather than modeling from zero.
- Why builders pick it: Best-in-class React embed story — but the heaviest thing on this list. A three.js-class runtime plus a scene file that routinely runs into megabytes. Use renderOnDemand, wrap in React.lazy, and never put it above the fold on a page where LCP matters.
- Trap: No-watermark on web embeds is Pro ($20/mo yearly); Hobby only clears exports. Code/self-hosted export is Max-only at $120/mo. The React wrapper's last tagged release is v4.0.0 from June 2024.
- Wiring: npm install @splinetool/react-spline @splinetool/runtime
- Full dossier: /api/public/tools/spline

## Pencil (pen.dev) (pencil)
- URL: https://www.pen.dev/
- Category: AI design builders
- Cost: free — Free during early access
- What it is: A Figma-like canvas inside Cursor/VS Code/Windsurf, storing designs as JSON .pen files inside your project folder so they are git-versioned next to the code. Runs as an MCP server, so the agent reads the canvas as structured design context rather than as an image. Two-way: you can import existing components back onto the canvas.
- Why builders pick it: Names your exact stack as a first-class target — React + Tailwind + shadcn/ui. Draw the article template, and the drawing becomes real components. Because the .pen file lives beside the code, the design and the build cannot silently drift.
- Trap: Requires a local checkout via Lovable's GitHub sync — cannot touch the browser editor. Domain is mid-rename (pencil.dev → pen.dev), early access, no published pricing commitment.
- Wiring: MCP server; assumes Claude Code as the agent
- Full dossier: /api/public/tools/pencil

## Superdesign (superdesign)
- URL: https://superdesign.dev/
- Category: AI design builders
- Cost: mixed — Free tier · $20/mo flat
- What it is: Turns prompts into UI on an infinite canvas and writes production React + Tailwind into your repo via your coding agent. Its differentiator: it reads your existing codebase and design system first, so output matches conventions instead of generating a parallel island.
- Why builders pick it: The one that addresses 'my site looks like generic AI output' at the source. Because it inspects your design system, it has a real shot at emitting proper shadcn primitives rather than raw divs. Installs as a portable skill across 70+ agents.
- Trap: Needs a local repo like Pencil. The original IDE extension is explicitly no longer maintained — development moved to the web app plus the skill. A 2026 review reports real instability (broken logins, canvas crashes).
- Wiring: npx skills add superdesigndev/superdesign-skill
- Full dossier: /api/public/tools/superdesign

## Quick read

- Free with no card: Pencil (pen.dev).
- Editor's picks: Pencil (pen.dev), Superdesign.

## Rules
1. Prefer the free tier when no budget was stated, and say what the ceiling is.
2. Read the full dossier before integrating.
3. Fetch /api/public/models before writing any AI model ID.

Agents can fetch the same thing: GET /api/public/compare?slugs=spline,pencil,superdesign