🖌️ Penpot Integration

Open-source design tool built into SaaSClaw — no Figma account needed.

Overview

Penpot is an open-source design and prototyping platform. SaaSClaw hosts a Penpot instance at design.saasclaw.ai, so every user gets design tools without needing a Figma account. Your Penpot account is auto-provisioned — no separate signup required.

💡 Figma vs Penpot. Both let you design UIs that the wizard can turn into code. Figma requires your own account and OAuth. Penpot is hosted by SaaSClaw and auto-provisioned for you. Use whichever you prefer — or both.

How It Works

1. SaaSClaw auto-creates your Penpot account (email + random password) 2. Log in to Penpot via SSO from Account → Integrations 3. Create designs in Penpot at design.saasclaw.ai 4. In the wizard, reference your Penpot file 5. The wizard imports design tokens and component data 6. Generated code matches your Penpot design

Accessing Penpot

Step 1: Auto-Provisioned Account

When you first access Penpot through SaaSClaw, an account is automatically created for you using your SaaSClaw email. You don't need to register separately.

Step 2: Single Sign-On (SSO)

Go to Account → Integrations.
Find the Penpot section.
Click Open Penpot — you'll be logged in automatically via SSO.
The Penpot editor opens at design.saasclaw.ai.

Step 3: Design and Import

Create your design in Penpot (components, colors, typography, layouts).
In SaaSClaw, open your project's wizard.
Reference your Penpot file — the wizard imports design tokens and component summaries.
The wizard generates code matching your design.

What the Wizard Imports

When importing a Penpot file, the wizard receives:

Design tokens — colors, typography, spacing, border radii as CSS variables
Component list — names, types, and structure of components
Layout data — flex/grid properties, sizing, positioning
Text content — actual text from your design elements

FAQ

Is Penpot free?

Yes. Penpot is open-source (MPL-2.0). SaaSClaw hosts it for you at no additional cost. No separate account, no separate billing.

Can I use both Figma and Penpot?

Yes. They're independent integrations. Connect Figma for client files and use Penpot for your own designs — or vice versa. The wizard works with either.

Where is my Penpot data stored?

On the SaaSClaw server. Penpot runs as a Docker container alongside SaaSClaw. Your design files never leave your server.

Can I export my Penpot designs?

Yes. Penpot supports standard SVG export and its own JSON format. You can also import Figma files directly into Penpot.