pen.dev vs Relume

pen.dev is a canvas for building software and a vector design tool integrated with development environments. Its editor works with components, variables, themes, scripts and shaders, and can import Figma files and HTML. It can export to HTML, CSS and Tailwind, as well as PNG, JPEG, WEBP and PDF. Users can work with its integrated agent or connect external agents through MCP; the available plans specify how many agents can run in parallel. Documented integrations include Claude Code, Codex, Gemini CLI, Antigravity, OpenCode, Kiro and Claude Desktop. Integrated provider options include OpenAI, Anthropic, Google Gemini, Cursor, GitHub Copilot, xAI, OpenRouter and other API-key providers. Its.pen design file is open JSON with an open schema. Tools include a Chrome extension for importing webpages, IDE extensions and an npm-installed CLI requiring Node.js 22.19 or later. The pricing page says pen.dev stays free until plans launch. The Free plan is free; Pro is $16 a month; Ultra is $48 a month.

Relume uses AI to turn a brief into a website sitemap, wireframes, and a marketing site. It runs on the web and as an extension, and projects can be exported to Figma, Webflow, or React; React output uses Tailwind CSS and shadcn/ui components. Its component library contains more than 1,000 responsive components, which Relume describes as human-built and assembled by AI. The Library MCP connects the library to Cursor, Claude, and other AI editors. Relume also offers hosting, one-click publishing, and custom domains with SSL. The Chrome extension provides components inside Webflow, saved components, an SVG icon converter, and class syncing, which requires a paid plan. The free Site Builder plan allows one project and one page, while sitemap imports allow up to 50 pages. Relume lists free plans and paid plans from $18/mo, plus a 7-day trial for Starter. Signing up for Free removes eligibility for that trial.