penpot-build-screen

Official

Automate the creation of production-grade screens in Penpot

Authorpenpot
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill automates the design of production-grade screens in Penpot, enabling users to create screens from a brief without manual layout, leveraging the existing design system.

Core Features & Use Cases

  • Screen Design Automation: Automates the creation of screens based on user briefs.
  • Incremental Design: Builds screens section by section, allowing for incremental adjustments and validation.
  • Design System Integration: Integrates with existing design systems, including tokens and components.
  • Use Case: For a visual designer who needs to create a dashboard from a description, this Skill automates the process, ensuring consistency with the design system.

Quick Start

Use the penpot-build-screen skill to design a dashboard based on the following brief: "Create a dashboard with a top navigation bar, a hero section with a large image and call-to-action, a featured products section, and a footer with contact information."

Dependency Matrix

Required Modules

penpot-mcp-tool-referenceplugin-api-gotchastokens-schemanaming-conventionsstate-managementmodes-and-policiesvisual-self-review

Components

scriptsreferencesassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: penpot-build-screen
Download link: https://github.com/penpot/penpot-ai-kit/archive/main.zip#penpot-build-screen

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.