penpot-uiux-design

Penpot UI/UX Design Guide — официальный skill из репозитория GitHub для проектирования интерфейсов в Penpot с помощью Penpot MCP. Его назначение — поддержать создание web, mobile и desktop UI, дизайн-систем, dashboards, forms, navigation и landing pages, а также review существующего дизайна по критериям usability и accessibility. Источник перечисляет MCP-инструменты для выполнения кода в контексте плагина, экспорта shape в PNG или SVG, импорта изображений и получения справки по API. Для подключения требуется запущенный penpot/penpot-mcp; до установки рекомендуется сначала проверить, доступен ли MCP-сервер, и не начинать setup вслепую. Инструкция описывает локальный bootstrap через репозиторий, npm install и npm run bootstrap, затем загрузку plugin manifest в Penpot и подключение к SSE-серверу. Отдельно приведены настройки для VS Code и troubleshooting для соединения plugin, firewall и WebSocket. Workflow начинается с проверки design system. Нужно выяснить, есть ли у проекта существующие tokens или brand guidelines, а при наличии файла Penpot — обнаружить действующие компоненты, цвета, text styles и локальную библиотеку. Для изучения структуры источник предлагает shapeStructure(), для поиска элементов — findShapes(), для создания — createBoard(), createRectangle() и createText(), для responsive layout — addFlexLayout(), а перед завершением — экспортировать результат и визуально его проверить. Это не обещает автоматическую оценку всей композиции: инструменты помогают собрать evidence, а решение о соответствии дизайну остаётся частью review. В руководстве зафиксированы базовые принципы: ясность важнее cleverness, каждый элемент должен иметь цель, дизайн строится вокруг пользовательской задачи, accessibility обязательна, а предположения желательно проверять на реальных пользователях. Иерархия строится через размер, контраст, положение, whitespace и насыщенность шрифта. Рекомендации по spacing используют 8px scale с шагами 4, 8, 16, 24, 32 и 48px. Для typography приведены уровни от display 48–64px до caption 12px. Цветовая схема разделяет primary, secondary, success, warning, error и neutral, но не требует конкретного бренда. Для layout source даёт два ориентировочных каркаса: mobile screen 375×812 с status bar 44px, header 56px, горизонтальным padding 16px и нижним CTA 84px, а также desktop dashboard 1440×900 с боковой панелью 240px и header 64px. Для новых boards следует сначала найти существующие boards и вычислить свободную позицию, чтобы не перекрыть текущие экраны; в примере используется gap 100px. Среди API-ограничений отдельно указано, что width, height, parentX и parentY нельзя менять напрямую: нужно применять resize() и penpotUtils.setParentXY(), а для z-order — insertChild(index, shape). Также важны обратный порядок flex children для column или row и возврат growType после text.resize(). Checklist компонентов включает понятные action labels на 2–3 слова, touch target не меньше 44×44px, состояния default, hover, active, disabled и loading, контраст от 3:1, labels над полями, required indicators, соседние сообщения об ошибках, logical tab order и подходящие input types. Для navigation рекомендуется явно показывать текущий раздел, сохранять положение навигации и ограничивать верхний уровень примерно 7±2 пунктами. Accessibility-проверки включают контраст текста 4.5:1, large text 3:1, видимый keyboard focus, meaningful alt text, последовательную H1→H2→H3 и запрет передавать смысл только цветом. Перед финализацией проверяются hierarchy, spacing, readable body text 16px+, loading, empty и error states, mobile touch targets и соответствие design system. Skill не создаёт готовый продукт сам по себе и не заменяет пользовательское тестирование, visual inspection или проверку конкретного Penpot-файла.