skills.rest
penpot
penpotOFFICIAL
Explore all skills by this author →
Website𝕏@penpotappGitHub

penpot-build-screen

Automates screen-by-screen design in apps using your own code and data.

33|3|Updated Jun 18, 2026
Search Tags:#design automation#ui/ux design#penpot#screen design#brief-to-screen
One-click install
npx skills add https://github.com/penpot/penpot-ai-kit --skill penpot-build-screen
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: penpot-build-screen
Source: https://github.com/penpot/penpot-ai-kit/tree/main/skills/penpot-build-screen
Command: npx skills add https://github.com/penpot/penpot-ai-kit --skill penpot-build-screen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires penpot-mcp-tool-reference, plugin-api-gotchas, tokens-schema, naming-conventions, state-management, modes-and-policies, visual-self-review, and includes scripts (resource) and references (resource) and assets (resource) components.

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."

Frequently Asked Questions about penpot-build-screen

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I automate screen design in Penpot from a brief?▼

Automating screen design in Penpot requires providing a text brief, which the Skill uses to incrementally build production-grade screens section by section, applying your existing design system tokens.

Can I build UI screens in Penpot using my existing design tokens?▼

Yes, building UI screens with existing design tokens is supported. The Skill requires specific token schemas to map design system properties accurately during the automated layout generation process.

Does automated UI design in Penpot support incremental adjustments?▼

Automated UI design in Penpot supports incremental adjustments by building screens section by section. This mechanism allows for iterative design validation and targeted modifications without rebuilding the entire layout.

Do I need Penpot MCP tooling to generate screens from a brief?▼

Generating screens from a brief requires Penpot MCP tooling. The Skill depends on specific MCP tool references and token schemas to execute automated layout generation and maintain design system compliance.

What are the limitations of brief-to-screen design automation in Penpot?▼

A key limitation of brief-to-screen design automation is its strict dependency on predefined token schemas and existing design systems. It cannot generate production-grade layouts without these foundational components properly configured.

Related Skills

Explore More Design & Creative Skills→
penpotpenpot
33

penpot-design-to-code-review

Compare Penpot designs with implemented code and generate DRIFT reports.

Official
Advanced
KYRIE66nbKYRIE66nb

visual-verdict

Compare UI screenshots against reference images and return a JSON verdict.

Community
Advanced
BrunoAMSilvaBrunoAMSilva

penpot-uiux-design

Design accessible user interfaces and component systems in Penpot via MCP tools.

Community
Intermediate
githubgithub
37.6k

penpot-uiux-design

Create Penpot interfaces with MCP tools for design systems and layouts.

Official
Advanced