Спонсором цієї статті є Penpot Уявіть, що ваш файл Penpot містить повний набір піктограм на додаток до самого дизайну, який використовує деякі, але не всі з цих піктограм. Якби ви попросили AI, наприклад Claude або Gemini, експортувати лише ті значки, які використовуються, він би не зміг цього зробити. Він не може взаємодіяти з файлами Penpot. Однак сервер Penpot MCP може. Він може виконувати ручно підібрану кількість операцій за встановленими правилами та дозволами, особливо тому, що Penpot має розширений API і навіть більше, тому що він є відкритим кодом. Робота штучного інтелекту полягає в тому, щоб просто зрозуміти ваші наміри, вибрати правильну операцію для виконання сервером MCP (у цьому випадку експорт) і передати будь-які параметри (тобто піктограми, які використовуються). Потім сервер MCP перетворює це на структурований запит API і виконує його. Це може допомогти уявити ШІ як сервер у ресторані, який приймає ваше замовлення, сервер MCP як меню та шеф-кухаря, а запит API як (сподіваємося) гарячий пиріг з піцою на теплій тарілці. Чому саме сервери MCP? Що ж, Penpot не може зрозуміти ваш намір, оскільки він не є LLM, а також не дозволяє стороннім LLM взаємодіяти з вашими файлами Penpot для безпеки та конфіденційності ваших даних Penpot. Хоча сервери Penpot MCP діють як безпечний міст, перетворюючи намір AI у запити API, використовуючи ваші файли та дані Penpot як контекст. Ще краще те, що, оскільки Penpot використовує підхід дизайну, вираженого як код, проекти можна програмно створювати, редагувати та аналізувати на детальному рівні. Це більш контекстний, більш конкретний і, отже, потужніший порівняно з тим, що пропонують інші сервери MCP, і набагато продуманіший, ніж підрядний робочий процес штучного інтелекту «Описати → Створити», який, я думаю, нікому не потрібен. У технічній документації Penpot щодо штучного інтелекту це описується як поганий підхід, а підхід «Перетворити на код» — як потворний підхід, тоді як сервери MCP є більш досконалими та адаптованими. Характеристики та технічні деталі Перш ніж перейти до випадків використання, ось деякі функції та технічні деталі, які додатково пояснюють, як працюють сервери Penpot MCP:
Відповідає стандартам MCP; Інтегрується з Penpot API для проектних даних у реальному часі; Включає Python SDK, REST API, систему плагінів та інструменти CLI; Працює з будь-яким помічником AI з підтримкою MCP (Claude у VS Code, Claude у Cursor, Claude Desktop тощо); Підтримує спільний доступ до контексту дизайну з моделями штучного інтелекту та дозволяє їм бачити та розуміти компоненти; Полегшує спілкування з Penpot за допомогою природної мови.
Що тоді сервери MCP можуть дозволити нам робити в Penpot і чого вже досягли існуючі експерименти? Давайте подивимось. Варіанти використання сервера Penpot MCP Якщо ви просто хочете перейти до того, що можуть робити сервери Penpot MCP, у Penpot є кілька демонстраційних роликів MCP, збережених на Диску Google, які більш ніж варті перегляду. Генеральний директор Penpot Пабло Руїс-Мускіз зазначив, що відео 03, 04, 06, 08 і 12 є їхніми улюбленими. Ще швидший спосіб узагальнити MCP-сервери — переглянути презентацію з Penpot Fest 2025. В іншому випадку давайте подивимося на деякі з більш витончених прикладів, які Penpot продемонструвала на своїй публічній вітрині. Design-to-Code і назад (і багато іншого) Продовжуючи те, що я говорив раніше про те, як проекти Penpot виражаються у вигляді коду, це означає, що сервери MCP можна використовувати для перетворення дизайну в код за допомогою ШІ, а також коду в дизайн, дизайну в документацію, документації в елементи системи проектування, дизайну в код знову на основі зазначеної системи проектування, а потім повністю нових компонентів на основі зазначеної системи проектування. Це звучить сюрреалістично, але наведена нижче демонстрація демонструє цю здатність змінюватись, і це не з розпливчастих інструкцій, а радше з попередніх варіантів дизайну, незалежно від того, як вони були виражені (дизайн, код чи документація). Немає жодних сюрпризів — це просто ті рішення, які ви б у будь-якому випадку прийняли на основі попередніх рішень, виконаних швидко. У демонстрації Хуан де ла Крус Гарсія, дизайнер Penpot, без зусиль перетворює деякі прості компоненти в документацію, елементи системи дизайну, код, нові компоненти та навіть повний проект Storybook, як шматок Play-Doh: Проектування до коду, перевірка дизайну/коду та прості операції У схожій демонстрації нижче Домінік Джейн, співзасновник Oraios AI, створює веб-програму Node.js на основі дизайну перед оновленням стилів зовнішнього інтерфейсу, зберігає імена та ідентифікатори в пам’яті, щоб забезпечити плавну трансляцію дизайну в код перед перевіркою узгодженості, додаєкоментар поряд із вибраною фігурою в Penpot, а потім замінює каракулі в Penpot на адаптований компонент. Тут багато чого відбувається, але ви можете точно бачити, що Домінік вводить у Claude Desktop, а також відповіді Клода, і це дуже надійно: До речі, у попередній демонстрації використовувався Claude у VS Code, тому я повинен зауважити, що сервери Penpot MCP не залежать від LLM. Ваш набір технологій повністю залежить від вас. IvanTheGeek вдалося налаштувати свій сервер MCP за допомогою JetBrains Rider IDE та Junie AI. Більше випадків використання Переведіть дошку Penpot у готовий до виробництва семантичний HTML і модульний CSS, використовуючи будь-які маркери дизайну Penpot (пам’ятайте, що проекти Penpot уже виражені у вигляді коду, тому це не постріл у темне): Створіть інтерактивний веб-прототип без зміни існуючого HTML: Як було показано раніше, перетворите каракулі на компонент, використовуючи існуючий дизайн та/або елементи системи дизайну: Створіть системну документацію проектування з файлу Penpot: А ось ще кілька прикладів використання від Penpot і спільноти:
Розширений експорт, Пошук елементів дизайну за допомогою природної мови, Отримувати дані із зовнішніх API за допомогою природної мови, Легко підключайте Penpot до інших зовнішніх інструментів, Збереження повторюваних завдань у пам’яті та їх виконання, Візуальне регресійне тестування, Перевірка узгодженості дизайну та надмірності, Аналіз доступності та зручності використання та відгуки, Перевірка відповідності проектної системи, Перевірка відповідності інструкціям (бренд, контент тощо), Відстежуйте впровадження та використання за допомогою аналітики дизайну, Автоматично синхронізуйте документацію з дизайном, Організація файлів дизайну (наприклад, теги/категоризація).
По суті, сервери Penpot MCP ведуть шлях до нескінченної кількості робочих процесів завдяки ефективності та простоті обраного вами клієнта LLM/LLM, але без надання йому доступу до ваших даних. Для чого б ви використовували сервери MCP? Сервери Penpot MCP навіть не знаходяться на стадії бета-тестування, але це активний експеримент, у якому ви можете взяти участь. Користувачі Penpot вже почали вивчати варіанти використання серверів MCP, але Penpot хоче бачити більше. Щоб гарантувати, що наступне покоління інструментів проектування задовольняє потреби дизайнерів, розробників і груп продуктів загалом, вони повинні створюватися колективно та спільно, особливо коли йдеться про ШІ. Примітка: Penpot шукає бета-тестерів, які прагнуть досліджувати, експериментувати та допомагати вдосконалювати сервер MCP Penpot. Щоб приєднатися, напишіть на support@penpot.app із темою «MCP beta test volunteer». Чи є, на вашу думку, можливості серверів Penpot MCP, які поточні інструменти не можуть робити достатньо добре, достатньо швидко або взагалі не можуть робити? Ви можете дізнатися, як налаштувати сервер Penpot MCP прямо тут, і почати працювати вже сьогодні, або, якщо ваш мозок уже вирує ідеями, Penpot захоче, щоб ви приєдналися до обговорення, поділилися своїми відгуками та поговорили про свої варіанти використання. Крім того, розділ коментарів прямо внизу теж непогане місце для початку!
