# Penpot — Open Source Design & Prototyping Platform

> Penpot is an open-source Figma alternative for UI/UX design and prototyping. Web-based, real-time collaboration, SVG-native, and fully self-hostable.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

```bash
curl -o docker-compose.yaml https://raw.githubusercontent.com/penpot/penpot/main/docker/images/docker-compose.yaml
docker compose -p penpot up -d
```

Open `http://localhost:9001` — register and start designing.

## Intro

**Penpot** is an open-source design and prototyping platform built for cross-domain collaboration between designers and developers. Unlike Figma which uses proprietary formats, Penpot is SVG-native — meaning every design is a standard SVG file that developers can directly inspect, export, and use in code.

With 45.3K+ GitHub stars and MPL-2.0 license, Penpot is the leading open-source alternative to Figma and Sketch, backed by a strong community and used by design teams worldwide who value data ownership and open standards.

## What Penpot Does

Penpot provides a complete design workflow:

- **Vector Design**: Full vector editing with pen tool, boolean operations, gradients, and effects
- **Components**: Reusable design components with variants, overrides, and auto-layout
- **Prototyping**: Interactive prototypes with transitions, animations, and user flows
- **Real-time Collaboration**: Multiple designers working simultaneously with live cursors
- **Design Tokens**: Centralized color, typography, and spacing tokens synced across designs
- **Developer Handoff**: Inspect mode with CSS code generation, measurements, and SVG export
- **Grid & Layout**: CSS Grid and Flexbox-based auto-layout for responsive designs

## Architecture

```
┌──────────────┐     ┌──────────────┐     ┌──────────────┐
│  Frontend    │────▶│  Backend     │────▶│  PostgreSQL  │
│  (ClojureScript)│  │  (Clojure)   │     │  (Data)      │
└──────────────┘     └──────┬───────┘     └──────────────┘
                            │
                  ┌─────────┼─────────┐
                  │         │         │
           ┌──────┴──┐ ┌───┴───┐ ┌───┴───┐
           │  Redis   │ │ MinIO │ │Exporter│
           │  (Cache) │ │(Files)│ │ (PDF)  │
           └──────────┘ └───────┘ └────────┘
```

## Self-Hosting

### Docker Compose

```yaml
services:
  penpot-frontend:
    image: penpotapp/frontend:latest
    ports:
      - "9001:80"
    depends_on:
      - penpot-backend
      - penpot-exporter

  penpot-backend:
    image: penpotapp/backend:latest
    environment:
      PENPOT_FLAGS: enable-registration enable-login-with-password
      PENPOT_DATABASE_URI: postgresql://penpot-postgres/penpot
      PENPOT_DATABASE_USERNAME: penpot
      PENPOT_DATABASE_PASSWORD: penpot
      PENPOT_REDIS_URI: redis://penpot-redis/0
      PENPOT_ASSETS_STORAGE_BACKEND: assets-fs
      PENPOT_STORAGE_ASSETS_FS_DIRECTORY: /opt/data/assets
    depends_on:
      - penpot-postgres
      - penpot-redis

  penpot-exporter:
    image: penpotapp/exporter:latest
    environment:
      PENPOT_PUBLIC_URI: http://penpot-frontend

  penpot-postgres:
    image: postgres:16
    environment:
      POSTGRES_DB: penpot
      POSTGRES_USER: penpot
      POSTGRES_PASSWORD: penpot
    volumes:
      - pg-data:/var/lib/postgresql/data

  penpot-redis:
    image: redis:7-alpine

volumes:
  pg-data:
```

## Key Features

### SVG-Native Design

Every element in Penpot is an SVG node. This means:
- Pixel-perfect export to SVG format
- Developers can directly use design output in web projects
- No format conversion or proprietary file handling
- CSS properties map 1:1 to design properties

### Component System

```
Main Component
├── Variant: Primary
│   ├── Size: Small
│   ├── Size: Medium
│   └── Size: Large
├── Variant: Secondary
└── Variant: Ghost
```

Components support:
- Multi-level variants
- Slot overrides (text, color, icon)
- Auto-layout (Flexbox-based)
- Responsive constraints

### Design Tokens

Define tokens once, use everywhere:
- **Colors**: Brand palette, semantic colors, surface colors
- **Typography**: Font families, sizes, weights, line heights
- **Spacing**: Consistent spacing scale
- **Shadows & Effects**: Reusable shadow and blur definitions

### Inspect Mode

Developers can inspect any element to get:
- Exact CSS code (position, size, colors, fonts)
- Measurements between elements
- SVG markup for icons and shapes
- Asset downloads in multiple formats

## Penpot vs Alternatives

| Feature | Penpot | Figma | Sketch | Adobe XD |
|---------|--------|-------|--------|----------|
| Open Source | Yes (MPL-2.0) | No | No | No |
| Self-hosted | Yes | No | No | No |
| SVG-native | Yes | No | No | No |
| Real-time collab | Yes | Yes | Limited | Yes |
| Prototyping | Yes | Yes | Yes | Yes |
| Components | Yes | Yes | Yes | Yes |
| Platform | Web | Web | macOS | Discontinued |
| Pricing | Free | Free + Paid | $12/mo | Discontinued |

## FAQ

**Q: Can Penpot fully replace Figma?**
A: For most UI design and prototyping needs, Penpot is already powerful enough. But Figma still has the edge in plugin ecosystem, Dev Mode, and FigJam whiteboards. Penpot's core advantages are SVG-native output, data ownership, and no vendor lock-in.

**Q: Can design files be imported from Figma?**
A: Yes. Penpot supports importing Figma design files (.fig format), including layer structure, components, and styles. Some advanced Figma features may need manual adjustment.

**Q: Self-hosting requirements?**
A: Minimum 4GB RAM + 2-core CPU. 8GB+ RAM is recommended for collaborative use. Requires PostgreSQL, Redis, and file storage (local or MinIO/S3).

## Source & Thanks

- GitHub: [penpot/penpot](https://github.com/penpot/penpot) — 45.3K+ ⭐ | MPL-2.0
- Website: [penpot.app](https://penpot.app)

---
Source: https://tokrepo.com/en/workflows/penpot-open-source-design-prototyping-platform-609d5e22
Author: AI Open Source