Do I need a Penpot account to use this?

Yes, you need a Penpot account and the Penpot MCP Plugin connected to your specific project for Claude to interact with the design canvas.

Can I use it to manage design systems?

Absolutely. The skill can access and create library assets like components, colors, and typography to ensure consistency across your entire project.

How does it handle complex layouts?

It includes advanced logic for handling Penpot's Flex layout system, including specific rules for child ordering, relative positioning, and auto-sizing.

What is the Penpot Design skill?

It is a specialized capability for Claude Code that allows the AI to create, edit, and export designs in Penpot using the Model Context Protocol (MCP).

Can this skill generate CSS from my designs?

Yes, it can generate production-grade CSS, HTML, and SVG markup directly from the shapes and boards selected in your Penpot workspace.

Penpot Design & UI Kit

Name: Penpot Design & UI Kit
Author: soyasis

bysoyasis

•

Herramientas de Diseño

Design, manipulate, and export Penpot UI components and layouts directly within Claude Code.

This skill empowers developers to bridge the gap between design and code by enabling Claude to interact directly with Penpot projects via the Penpot MCP Plugin. It facilitates the creation of complex UI components, management of design tokens, and the generation of production-ready HTML and CSS from existing Penpot shapes. Whether you are building a design system from scratch or converting existing artboards into functional code, this skill provides the precision and automation needed for modern design-to-development workflows.

Características Principales

01Visually verify design changes by exporting shapes as PNG or SVG for immediate inspection.

02Implement advanced Flex layouts with automated child ordering and padding management.

03Generate production-ready CSS, HTML, and SVG code directly from Penpot design selections.

04Create and manipulate Penpot shapes, boards, and text elements with precise programmatic control.

05Manage design libraries including shared components, typography, and color palettes.

061 GitHub stars

Casos de Uso

01Converting Penpot design mockups into clean, styled frontend code components.

02Automating the creation of responsive UI kits and scalable design systems in Penpot.

03Performing bulk updates to styles, colors, or typography across multiple Penpot artboards.

Características Principales

01Visually verify design changes by exporting shapes as PNG or SVG for immediate inspection.

02Implement advanced Flex layouts with automated child ordering and padding management.

03Generate production-ready CSS, HTML, and SVG code directly from Penpot design selections.

04Create and manipulate Penpot shapes, boards, and text elements with precise programmatic control.

05Manage design libraries including shared components, typography, and color palettes.

061 GitHub stars

Casos de Uso

01Converting Penpot design mockups into clean, styled frontend code components.

02Automating the creation of responsive UI kits and scalable design systems in Penpot.

03Performing bulk updates to styles, colors, or typography across multiple Penpot artboards.