Head to head
Stop guessing which one. Put them side by side.
Up to 4 tools, same rows for each: what it is, what it really costs, the trap, and how to wire it up. The URL carries your picks — send it to anyone.
Pencil (pen.dev)Spline
Quick read
- Free with no card: Pencil (pen.dev).
- Editor's pick: Pencil (pen.dev).
| Field | Pencil (pen.dev)pen.dev | Splineapp.spline.design |
|---|---|---|
| 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. | 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. |
| Category | AI design builders | AI design builders |
| Cost tier | free | paid |
| Pricing | Free during early access | Free (watermarked) · $12–$120/mo |
| 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. | 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. |
| Watch out for | 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. | 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. |
| How to wire it up | MCP server; assumes Claude Code as the agent | npm install @splinetool/react-spline @splinetool/runtime |
| Editor's pick | Yes | No |
Which one did you ship?
The grid says what these tools are. This says what builders did about it — one decision per person, changeable whenever you change your mind.
0/280Sign in to add yours.
Or try
Hand this to your Lovable agent
# Tool comparison — Pencil (pen.dev) vs Spline Source: Kbaise, a directory of tools that work with Lovable projects. Pick one and tell me why before writing any integration code. ## 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 ## 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 ## Quick read - Free with no card: Pencil (pen.dev). - Editor's pick: Pencil (pen.dev). ## 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=pencil,spline