Penpot

Founded by Pablo Ruiz-Múzquiz in 2021

Design and prototype digital products collaboratively with open-source tools

Pricing model

Free Tier

Rating

★ People love it

Time to value

Quick Setup (< 1 hour)

You can use Penpot to design user interfaces, build interactive prototypes, and create shared design systems with your team. It supports real-time collaboration between designers and developers, and generates code (CSS, HTML, SVG) that matches your designs. You can run it in a browser or self-host it. It also connects with AI agents and LLMs for design-to-code and code-to-design workflows. It's free and open-source, built on open web standards.

What Penpot does

Create wireframes and UI mockups for web and mobile appsLink screens together to build clickable interactive prototypesDefine and share design tokens like colors, fonts, and spacingInspect designs and copy CSS code directly from the editorSet up shared component libraries for team-wide reuseIntegrate AI tools via MCP to generate or transform design filesSelf-host the app and configure SSO for enterprise teamsExport designs in SVG or open file formats for handoffSelf-hostable on your own servers with full control over dataBuilt on open web standards: CSS, HTML, SVG, and JSONNative design tokens support for scalable design systemsReal-time collaboration between designers and developersAI agent integration via MCP Server for design-to-code workflowsOpen file format so your designs are never locked inCSS Grid and Flexbox layout support for responsive designInspect panel that generates real, usable code from designs

Pricing breakdown

Pricing model: Free tier, Paid

PlanList price

FreeFree

Unlimited$7 / mo

Enterprise$25 / mo

Tutorials & Demos

Frequently asked

CSS, HTML, SVG, JSON, CSS/HTML/SVG, Model Context Protocol (MCP), GitHub Actions, GitLab CI/CD, Slack (via Webhooks), Iconify, Tailwind CSS (via Plugins), DeepL (via Lingolense), GitHub Actions: CI/CD design automation, GitLab CI/CD: DevOps pipeline integration, Slack: Notification webhooks for comments, Iconify: Access to massive icon libraries, Tailwind CSS: Plugin-based utility class support, DeepL: Automated design translation, MCP: Model Context Protocol for AI agents, Webhooks: Custom event-driven triggers, Slack (Webhooks), Iconify Library, Tailwind CSS (Plugins), DeepL Translation, Webhooks API, DeepL (Translation), GitHub Actions: CI/CD design automation., GitLab CI/CD: DevOps pipeline integration., Slack: Webhook-based notifications., Iconify: Access to icon libraries., DeepL: Automated design translation., Tailwind CSS: Plugin-based utility support., MCP: Model Context Protocol for AI., Webhooks: Custom event-driven triggers.

Want a tailored answer?