penpot-uiux-design
Projektuj interfejsy w Penpot z pomocą AI — od layoutów po systemy designu
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność do tworzenia profesjonalnych projektów UI/UX w Penpot. Projektuj interfejsy dla aplikacji webowych, mobilnych i desktopowych, buduj systemy designu z komponentami, twórz dashboardy i formularze, a także stosuj standardy dostępności. Skill integruje się z narzędziami MCP Penpota — możesz uruchamiać kod JavaScript, eksportować kształty jako PNG/SVG, importować grafiki i przeglądać dokumentację API. Idealny do projektowania landing pages, nawigacji, oraz recenzji i ulepszania istniejących projektów pod kątem użyteczności.
Jak używać
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.
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.
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.
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.
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.
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).