penpot-uiux-designpor GitHub

Penpot UI/UX Design Skill.

Un skill de Claude Code y Codex para diseño UI: diseño UI/UX profesional, componentes y sistemas de diseño en Penpot mediante herramientas MCP.

Web y UI
Archivo de diseño

Descargar OpenDesign Ver guía de uso

github/awesome-copilot · skills/penpot-uiux-design/SKILL.mdSKILL.md

--- name: penpot-uiux-design description: Comprehensive guide for creating professional UI/UX designs in Penpot using MCP tools. Use this skill when: (1) Creating new UI/UX designs for web, mobile, or desktop applications, (2) Building design systems with components and tokens, (3) Designing dashboards, forms, navigation, or landing pages, (4) Applying accessibility standards and best practices, (5) Following platform guidelines (iOS, Android, Material … --- ## Available MCP Tools ## MCP Server Setup ## Core Design Principles ## Design Workflow ## Design System Handling ## Key Penpot API Gotchas

Encabezados y materia preliminar leídos del archivo original el 14-09-2026 · 12.103 caracteres en total

01 Qué hace

Qué hace la skill penpot-uiux-design en Claude Code y Codex

Resumen, flujo de trabajo y resultados, todo leído del SKILL.md del skill.

Del SKILL.mdLeído 2026-09-14 · no es una ejecución registrada

En los propios términos del Skill

Una guía para diseñar interfaces reales en Penpot a través del servidor penpot/penpot-mcp, escrita para diseñadores y desarrolladores cuyo agente maneja la API del plugin de Penpot. En lugar de dar consejos genéricos, especifica una secuencia de trabajo: comprobar si el servidor MCP ya está en ejecución, descubrir los colores, estilos de texto y componentes existentes del archivo, inspeccionar la jerarquía con penpotUtils.shapeStructure, y luego crear boards, rectángulos y texto, y aplicar contenedores addFlexLayout.

Proporciona escalas de espaciado de 8px y de tipografía de respaldo, un layout móvil de 375x812 y de dashboard de 1440x900, listas de verificación para botones, formularios y navegación, límites de contraste WCAG y de área táctil, espaciado de colocación en el board, problemas conocidos de la API de Penpot como width y height de solo lectura, y validación mediante analyzeDescendants, filtrado por fontSize y export_shape.

Qué produce

Diseños de Penpot nuevos o modificados, creados mediante JavaScript ejecutado en el contexto del plugin.
Renders PNG o SVG de las formas seleccionadas, usados para ver el diseño en lugar de adivinarlo.
CSS extraído de una selección, incluidos los elementos hijos, para el handoff.

Ver el ejemplo de prompt ↗

Cómo funciona

01
Confirmar que el Servidor Está en Ejecución
El primer paso es una llamada de prueba a penpot_api_info, de modo que nadie pase por el proceso de instalación cuando la conexión ya funciona.
02
Encontrar el Sistema de Diseño Existente
Antes de dibujar, pregunta por las brand guidelines y lee el archivo actual en busca de componentes, colores y patrones ya en uso.
03
Inspeccionar la Estructura de la Página
shapeStructure devuelve la jerarquía existente para que los nuevos elementos puedan colocarse en relación con lo que ya hay en el lienzo.
04
Crear los Elementos
Los boards, rectángulos y texto se crean mediante llamadas del plugin en el contexto del plugin de Penpot, en lugar de describirse en prosa.
05
Validar Mediante Exportación
Cada cambio termina con una exportación, de modo que el resultado se observa como una imagen, en lugar de confiar únicamente en el código.

02 Encuentra tu caso de uso

Cuándo usar el skill penpot-uiux-design

Use el skill penpot-uiux-design en Claude Code o Codex cuando el trabajo sea diseño UI de este tipo. El ajuste y límites a continuación se toman del archivo propio del skill.

Buen caso de uso

Alguien que empieza una interfaz web, móvil o de escritorio desde cero y quiere que se construya como un archivo real de Penpot.
Configurar una biblioteca de componentes y tokens de diseño que todo el producto reutilizará.
Producir pantallas de producto habituales, como dashboards, formularios, navegación y landing pages.
Auditar o mejorar un archivo de Penpot que ya existe, en lugar de empezar en blanco.
Trabajo que debe seguir las convenciones de iOS, Android o Material Design.

Conozca los límites

No puede funcionar por sí solo: el servidor MCP local debe estar en ejecución y la interfaz del plugin de Penpot debe mostrarse como conectada, o las llamadas fallarán o agotarán el tiempo de espera.
Se limita a diseños de Penpot creados a través del servidor penpot-mcp, no a otras herramientas de diseño.
Superar sus listas de verificación no es lo mismo que demostrar que el diseño funciona; el archivo sigue pidiéndole que pruebe las suposiciones con usuarios reales.

Qué proporcionar

Sistema de diseño existente o guías de marca, si las tieneIndique al agente sus tokens y especificaciones, o deje que los descubra a partir del archivo actual antes de empezar a dibujar.
Iconos, fotos o logotiposLos recursos visuales se incorporan al diseño mediante la herramienta de importación de imágenes.

03 Dentro del skill

Reglas que el skill penpot-uiux-design le da a Claude Code y Codex

8 instrucciones concretas, valores por defecto y límites que SKILL.md fija para el agente: la parte del archivo que cambia el resultado.

Comprobar el servidor antes de instalar nada
Intentar primero una llamada de herramienta y solo pasar por la configuración una vez que el usuario confirme que el servidor no está instalado.
Nunca dibujar un tablero encima de otro
Enumerar los tableros existentes antes de crear uno y colocar el nuevo tablero más allá de su borde derecho más un espacio, usando 100px entre pantallas del mismo flujo y 200px+ entre secciones distintas.
Redimensionar mediante métodos, no propiedades
width y height son de solo lectura, por lo que los cambios de geometría pasan por shape.resize(w, h) en lugar de una asignación directa.
Apilar capas con insertChild
El orden en Z usa insertChild(index, shape); se indica explícitamente que appendChild no es la forma de ordenar capas.
Los tokens predeterminados son solo un respaldo
Cuando el usuario tiene un sistema de diseño, sus colores, espaciado y tipografía prevalecen; las escalas integradas solo se aplican cuando no existe ninguno.
Mantener el mínimo de accesibilidad
El contraste de texto se mantiene en 4.5:1 para el cuerpo de texto y 3:1 para texto grande, y los objetivos táctiles nunca bajan de 44x44px.
Limitar la paleta y las tipografías
Usar 1 color primario más 1 secundario más neutros, y no más de 1-2 tipografías en todo el diseño.
Restablecer el tipo de crecimiento de texto tras redimensionar
Penpot restablece el comportamiento de tamaño de texto al redimensionar, por lo que growType debe volver a fijarse en auto-width o auto-height.

04 Ponlo a trabajar

Instalar penpot-uiux-design en Claude Code o Codex

Un comando npx skills add, luego una primera tarea en tu agente y una lista de verificación para el resultado.

Añadir penpot-uiux-design a Claude Code, Codex o Tu Agente

Ejecútelo en su proyecto; el instalador pregunta a qué agente añadirlo.

Terminal

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

Forma genérica de la CLI skills para skills/penpot-uiux-design/SKILL.md; el repositorio puede documentar su propia ruta.

Dale al skill una primera tarea de diseño de interfaz

Redactado en los términos del propio skill; sustituya las partes entre corchetes por su material.

Starter prompt

Design a settings screen for [app name] in Penpot on a 375x812 board. Follow the Material Design guidelines and use our existing tokens if the file already has them, otherwise use the 8px spacing scale. It needs a header, a form with labels above the inputs plus error states, and a bottom CTA. Export the screen when you are done so I can check the contrast.

Fuente: redactado a partir del SKILL.md en los términos del propio skill.

Revisa el primer resultado

Lo que el propio SKILL.md indica que debe ser un resultado correcto:

Cada elemento se encuentra dentro de su contenedor, verificado con analyzeDescendants combinado con isContainedIn.
Ningún texto queda por debajo de 12px, detectado filtrando formas por fontSize.
El contraste de color alcanza WCAG AA antes de considerar el diseño como final.
La anidación y la jerarquía se revisan con shapeStructure.
La tipografía del cuerpo se mantiene en 16px o más.
Se contemplan los estados de carga, vacío y error, no solo el camino ideal.

En OpenDesign importe penpot-uiux-design desde su enlace SKILL.md: Plugins → Add → Skill → Import from link, y luego selecciónelo en la barra superior.

Descargar OpenDesign Leer la guía de inicio rápido

05 Código abierto, rastreable

Fuente, Licencia y Verificación

De dónde provienen los datos de esta página y cuándo se verificaron por última vez.

Author: GitHub
Repository: github.com/github/awesome-copilot Rama main
Archivo de skill: skills/penpot-uiux-design/SKILL.md Checksum del contenido registrado en la verificación; commit 1899b18
License: MIT De LICENSE.
Estrellas del repositorio: 38.981 Instantánea de GitHub tomada el 14/09/2026 para todo el repositorio github/awesome-copilot, que contiene 6 skills en este catálogo. No es una valoración ni un recuento de uso de penpot-uiux-design.
Verificado por OpenDesign: 14/09/2026 Se verificaron el archivo fuente, la ruta, el texto de licencia y el recuento de estrellas. No incluido en OpenDesign principal (verificado el 28/08/2026); no se ha registrado una ejecución en vivo en esta página.

Dentro del SKILL.md

Herramientas MCP disponiblesCuatro herramientas con propósitos específicos: ejecutar código, exportar formas, importar imágenes, consultar la documentación de la API de Penpot.
Configuración del servidor MCPCompruebe primero si está en ejecución, luego clone, compile, cargue la URL del plugin, configure VS Code y solucione problemas.
Principios fundamentales de diseñoReglas de oro para la claridad y la coherencia, además del orden de prioridad en cinco pasos de la jerarquía visual.
Flujo de trabajo de diseñoPasos ordenados desde la verificación del sistema de diseño hasta la inspección, la creación, el diseño flex y la validación visual.
Gestión del sistema de diseñoPregunte o descubra tokens, colores, estilos de texto y componentes, y luego actúe según la respuesta.
Trampas clave de la API de PenpotGeometría de solo lectura, insertChild para el orden z, orden flex invertido, growType que se reinicia tras cambiar el tamaño del texto.
Posicionamiento de nuevos tablerosEncuentre los tableros existentes, calcule la siguiente x a partir del borde más a la derecha y mantenga los flujos agrupados visualmente.
Tokens de diseño predeterminadosEscala de espaciado de 8px, escala tipográfica y roles de color semánticos de reserva para diseños sin sistema.
Lista de comprobación de componentesRequisitos en forma de casillas para botones, formularios y navegación, cubriendo estados, tamaños y etiquetas.
Comprobaciones rápidas de accesibilidadSeis verificaciones: contraste, objetivos táctiles, foco, texto alternativo, jerarquía de encabezados, independencia del color.
Lista de revisión de diseñoComprobaciones previas al cierre sobre jerarquía, espaciado, tipografía, WCAG AA, estados y coherencia del sistema.
Validación de diseñosTabla de métodos de validación además de exportar CSS de una selección con generateStyle.

La descripción propia del Skill

"Guía completa para crear diseños UI/UX profesionales en Penpot usando herramientas MCP. Use este skill cuando: (1) Cree nuevos diseños UI/UX para aplicaciones web, móviles o de escritorio, (2) Construya sistemas de diseño con componentes y tokens, (3) Diseñe dashboards, formularios, navegación o landing pages, (4) Aplique estándares de accesibilidad y mejores prácticas, (5) Siga lineamientos de plataforma (iOS, Android, Material Design), (6) Revise o mejore diseños existentes en Penpot para usabilidad. Activadores: "diseñar una UI", "crear interfaz", "construir layout", "diseñar dashboard", "crear formulario", "diseñar landing page", "hacerlo accesible", "sistema de diseño", "biblioteca de componentes"."

Descripción del front-matter de SKILL.md. El archivo completo tiene unos 12.103 caracteres. Lee el archivo completo en GitHub.

06 Antes de instalar

Preguntas sobre la skill penpot-uiux-design

Las respuestas provienen del SKILL.md tal como se leyó el 2026-09-14, no de una ejecución registrada.

¿Tengo que instalar el servidor MCP de Penpot antes de usar esto?

No, y la skill comprueba esto deliberadamente primero llamando a penpot_api_info. Solo le da los pasos de instalación una vez que confirma que el servidor no está instalado, tras lo cual la configuración clona penpot-mcp, ejecuta npm install y npm run bootstrap, y luego carga el plugin desde http://localhost:4400/manifest.json en Penpot.

¿Qué cliente configura?

La sección de configuración muestra un fragmento de settings.json de VS Code que registra un servidor penpot en http://localhost:4401/sse. También advierte que las herramientas pueden no aparecer hasta que reinicie VS Code o Claude por completo después de cambiar la configuración.

Penpot UI/UX Design

Ejecuta penpot-uiux-design en una tarea de diseño UI real.

Descargue OpenDesign, importe penpot-uiux-design desde su enlace SKILL.md, pegue el prompt anterior y lea el plan antes del resultado.

Descargar OpenDesign Ver todas las skills

Terminal

npx skills add https://github.com/github/awesome-copilot --skill penpot-uiux-design

Qué hace la skill penpot-uiux-design en Claude Code y Codex

En los propios términos del Skill

Cómo funciona

Cuándo usar el skill penpot-uiux-design

Buen caso de uso

Conozca los límites

Qué proporcionar

Reglas que el skill penpot-uiux-design le da a Claude Code y Codex

Comprobar el servidor antes de instalar nada

Nunca dibujar un tablero encima de otro

Redimensionar mediante métodos, no propiedades

Apilar capas con insertChild

Los tokens predeterminados son solo un respaldo

Mantener el mínimo de accesibilidad

Limitar la paleta y las tipografías

Restablecer el tipo de crecimiento de texto tras redimensionar