Словами самого skill
Руководство по проектированию реальных интерфейсов в Penpot через сервер penpot/penpot-mcp, написанное для дизайнеров и разработчиков, чей агент управляет API плагина Penpot. Вместо общих советов оно задаёт рабочую последовательность: проверить, не запущен ли уже сервер MCP, определить существующие в файле цвета, текстовые стили и компоненты, изучить иерархию с помощью penpotUtils.shapeStructure, затем создать борды, прямоугольники и текст и применить контейнеры addFlexLayout.
Оно предоставляет запасные шкалы отступов 8px и типографики, мобильный макет 375x812 и дашборд-макет 1440x900, чек-листы для кнопок, форм и навигации, ограничения по контрасту WCAG и размеру области нажатия, отступы для размещения на бордах, подводные камни API Penpot, такие как read-only width и height, и валидацию через analyzeDescendants, фильтрацию fontSize и export_shape.
Что он выдаёт
- Новые или изменённые дизайны Penpot, созданные с помощью JavaScript, выполняемого в контексте плагина.
- Рендеры выбранных фигур в PNG или SVG, используемые для того, чтобы посмотреть на дизайн, а не угадывать его.
- CSS, извлечённый из выделения, включая дочерние элементы, для передачи в разработку.
Как это работает
- 01Подтвердите, что сервер запущен
Первый шаг — пробный вызов penpot_api_info, чтобы никого не заставляли проходить установку, если соединение уже работает.
- 02Найдите существующую дизайн-систему
Перед тем как рисовать, он спрашивает о брендбуке и читает текущий файл на предмет уже используемых компонентов, цветов и паттернов.
- 03Изучите структуру страницы
shapeStructure возвращает существующую иерархию, чтобы новые элементы можно было размещать относительно того, что уже есть на холсте.
- 04Создайте элементы
Борды, прямоугольники и текст создаются с помощью вызовов плагина в контексте плагина Penpot, а не описываются словами.
- 05Проверьте результат экспортом
Каждое изменение завершается экспортом, чтобы результат оценивался как изображение, а не принимался на веру из кода.