Find production-ready solutions for your business

10 Ways to Vibe-Code Penpot on Your Server

October 4, 2026 ·

Penpot on your server is a complete design and prototyping tool: SVG-native files, shared libraries, interactive prototypes, and a developer handoff mode. You type plain-language requests to the vibe-code agent in the Open WebUI chat, and it works directly on the Penpot files, the database behind them, and the app configuration. Here are ten everyday jobs you can stop doing by hand.

1. Tidy up a messy design file

Design files rot. Frames pile up on one page, layers end up named “Rectangle 42”, and nobody dares delete anything. The agent can read a file through the Penpot API and do the janitorial work: rename layers to match what they actually show, group frames by user flow, and move outdated screens to an archive page. Ask it to show a before-and-after list of renames before committing, so you keep veto power over anything ambiguous. Try: “Clean up our Mobile App file — rename layers with sensible names, group frames by user flow, and move anything older than six months to an archive page.”

2. Turn your brand into a shared library

Colors pasted by hex and fonts set by feel are how design drift starts. Give the agent your brand values — the hex codes, the type scale, the corner radii — and it can create a dedicated Brand library file with color and typography styles, plus your standard buttons, inputs, and badges as components. Everything becomes an asset the whole team reuses instead of recreating. Try: “Create a Brand library with these hex codes, three heading styles, two body styles, and standard primary and secondary buttons as components.”

3. Convert repeated UI into components

If your screens grew organically, the same card or navbar probably exists in ten near-identical copies. The agent can scan a file, find shapes that repeat across pages, and consolidate them into main components with the copies swapped to instances. One fix then propagates everywhere instead of being hunted down screen by screen. Large variant matrices are worth your own judgment; straightforward one-to-one consolidation is safe to delegate. Try: “Scan the dashboard file and turn every repeated card, button, and navbar into a component, keeping one instance per page.”

4. Wire a clickable prototype

Penpot prototyping is honest, tedious work: every tap target, overlay, and transition is a manual link between frames. Describe the intended flow in plain language and the agent creates the interactions — tap to advance, mouse-over for a menu, an overlay for the modal, and easing that matches the motion you describe. It can also define separate flows with their own start points, so a reviewer can jump straight to the settings screen instead of clicking through ten frames. Try: “Connect the onboarding frames into a prototype: tap advances to the next screen, the hamburger opens an overlay menu, and add a second flow that starts on the settings screen.”

5. Prepare a file for developer handoff

Developers live in Penpot’s inspect mode: layer names, measurements, CSS and SVG code, and export marks. Before a handoff, the agent can rename layers to dev-friendly names, group related icons into clearly named containers, and mark exactly the assets that should be exportable — so nobody resorts to screenshots. It can also flag unnamed groups and text layers that will confuse the inspect panel. Try: “Get the checkout file ready for handoff — dev-friendly layer names, mark all icons and illustrations for SVG export, and flag anything still unnamed.”

6. Batch-export assets in every format at once

Exporting forty icons one by one, three formats each, is work nobody should do. The agent can export frames or elements in bulk — SVG for code, 1x and 2x PNG for decks and docs, PDF for a whole page — and place the results in a folder or zip them by screen. A job that eats an afternoon of clicking becomes a two-minute request, and it reruns identically the next time. Try: “Export every icon on the Icon Library page as SVG plus 1x and 2x PNG, zipped by section.”

7. Import a Figma file without the tears

Switching from Figma means facing a folder of old design files. The agent can run the whole import path for you: export from Figma with Penpot’s exporter, import the result, then audit what actually landed — broken fonts, unlinked components, interactions that didn’t survive the trip. It fixes what it can and hands you a short list of what needs a human eye. Try: “Import our Figma dashboard file into Penpot, fix whatever breaks, and list anything you couldn’t fix.”

8. Set up a client review link

Sharing work with a client takes one share link, but the options matter: view or prototype mode, comments on or off, inspection allowed or not. Tell the agent the audience and it creates the right link — and tells you exactly what that setting exposes, because a client should comment, not edit or inspect. When the review ends, it can revoke the link just as easily. Try: “Create a view-only share link for the homepage prototype with comments on and inspection off, and tell me exactly what the client can see.”

9. Clone a template for the next project

Most studios reuse the same skeletons: pitch decks, wireframe starters, app shells. Keep these as template files and let the agent duplicate one into a new project, then reskin it — swap the logo frames, replace the brand colors with the client’s palette, update the cover page. What took a morning of copy-paste becomes a two-minute request your PM can send directly. Try: “Duplicate the pitch deck template into the Acme project and swap in their logo, colors, and fonts.”

10. Sweep comments before a review

Stale comment threads make review meetings miserable. The agent can pull all comments on a file, resolve the ones that were clearly addressed, summarize the open ones grouped by screen, and draft replies where the fix already shipped. You approve the sweep rather than clicking through every thread yourself, and the meeting starts from a clean list. Try: “Sweep comments on the Marketing Site file: resolve anything that’s done, summarize the rest by screen, and draft a reply where we’ve already shipped the fix.”

See it in action

Official walkthroughs from the Penpot team:

Worth a watch next:

None of this takes Penpot away from your designers — everything the agent creates shows up as ordinary files, layers, and components they can keep editing. If you want the server with the agent already wired in, get Penpot on OpenSysLab.

More articles