penpot-uiux-design

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 Design), (6) Reviewing or improving existing Penpot designs for usability. Triggers: \

1. Sprawdź, czy serwer MCP Penpota jest już uruchomiony — spróbuj użyć narzędzia penpot_api_info. Jeśli się powiedzie, serwer jest gotowy i możesz przejść do kroku 3. Jeśli nie, przejdź do kroku 2.

2. Zainstaluj i uruchom serwer penpot/penpot-mcp lokalnie. Szczegółowe instrukcje znajdują się w dokumentacji setup-troubleshooting.md dołączonej do skill'a. Upewnij się, że serwer działa i jest dostępny przed kontynuowaniem.

3. Opisz projekt, który chcesz stworzyć — na przykład "zaprojektuj dashboard do monitorowania sprzedaży", "utwórz formularz rejestracji" lub "zbuduj system designu z komponentami". Skill obsługuje projekty dla web, mobilnych i desktopowych aplikacji.

4. Skill będzie używać narzędzia execute_code do tworzenia i modyfikowania projektów bezpośrednio w Penpot poprzez kod JavaScript. Możesz prosić o konkretne elementy — layouty, komponenty, ikony czy zdjęcia.

5. Jeśli chcesz zaimportować grafiki (ikony, loga, zdjęcia), skill użyje narzędzia import_image. Jeśli chcesz sprawdzić, jak wygląda projekt, narzędzie export_shape wyeksportuje elementy jako PNG lub SVG.

6. Prosty przepływ: opisz potrzebę ("zaprojektuj landing page"), skill tworzy projekt w Penpot, eksportuje podgląd, a Ty możesz prosić o zmiany — dostosowanie kolorów, dodanie elementów, zmianę layoutu czy stosowanie wytycznych dostępności (WCAG) i standardów platformy (iOS, Android, Material Design).