Тази статия е спонсорирана от Penpot Представете си, че вашият Penpot файл съдържа пълен набор от икони в допълнение към самия дизайн, който използва някои, но не всички от тези икони. Ако поискате от AI като Claude или Gemini да експортира само иконите, които се използват, той няма да може да направи това. Не може да взаимодейства с Penpot файлове. Penpot MCP сървър обаче може. Той може да изпълнява ръчно подбран брой операции при определени правила и разрешения, особено след като Penpot има обширен API и още повече, защото е с отворен код. Работата на AI е просто да разбере вашето намерение, да избере правилната операция, която MCP сървърът да изпълни (в този случай експорт) и да предаде всички параметри (т.е. икони, които се използват). След това MCP сървърът превежда това в структурирана заявка за API и я изпълнява. Може да ви помогне да мислите за AI като сървър в ресторант, който приема вашата поръчка, MCP сървърът е както менюто, така и готвачът, а API заявката като (надяваме се) горещ пай с пица върху топла чиния. Защо точно MCP сървъри? Е, Penpot не може да разбере вашето намерение, защото не е LLM, нито позволява на трети страни LLM да взаимодействат с вашите Penpot файлове за сигурността и поверителността на вашите Penpot данни. Въпреки че Penpot MCP сървърите наистина действат като защитен мост, превеждайки намеренията на AI в API заявки, използвайки вашите Penpot файлове и данни като контекст. Още по-добре е, че тъй като Penpot използва подход на дизайн, изразен като код, дизайните могат да бъдат програмно създавани, редактирани и анализирани на детайлно ниво. Той е по-контекстуален, по-конкретен и следователно по-мощен в сравнение с това, което предлагат други MCP сървъри, и далеч по-обмислен от подчинения „Описване → Генериране“ AI работен процес, който не мисля, че някой наистина иска. Бялата книга на Penpot за AI описва това като лош подход, а подходът „Преобразуване в код“ като грозен подход, докато MCP сървърите са по-прецизни и адаптивни. Характеристики и технически подробности Преди да преминем към случаите на използване, ето някои функции и технически подробности, които допълнително обясняват как работят Penpot MCP сървърите:
Съответства на MCP стандартите; Интегрира се с Penpot API за проектни данни в реално време; Включва Python SDK, REST API, плъгин система и CLI инструменти; Работи с всеки MCP-активиран AI асистент (Claude във VS Code, Claude в Cursor, Claude Desktop и др.); Поддържа споделяне на контекст на проектиране с AI модели и им позволява да виждат и разбират компонентите; Улеснява комуникацията с Penpot, използвайки естествен език.
Какво тогава биха могли да ни позволят MCP сървърите в Penpot и какво вече са постигнали съществуващите експерименти? Нека да разгледаме. Случаи на използване на Penpot MCP сървър Ако просто искате да преминете към това, което могат да правят сървърите на Penpot MCP, Penpot има няколко демонстрации на MCP, скрити в Google Диск, които си заслужават повече от гледане. Главният изпълнителен директор на Penpot Пабло Руис-Мускиз спомена, че видеоклипове 03, 04, 06, 08 и 12 са техните любими. Още по-бърз начин да обобщите MCP сървърите е да гледате разкриването от Penpot Fest 2025. В противен случай, нека да разгледаме някои от по-прецизните примери, които Penpot демонстрира в публичната си витрина. Проектиране към код и обратно (и още) Продължавайки от това, което казах по-рано за това как дизайните на Penpot се изразяват като код, това означава, че MCP сървърите могат да се използват за преобразуване на дизайн в код с помощта на AI, но също така код в дизайн, дизайн в документация, документация в елементи на системата за проектиране, дизайн в код отново въз основа на споменатата система за проектиране и след това напълно нови компоненти, базирани на споменатата система за проектиране. Звучи сюрреалистично, но демонстрацията по-долу показва тази трансмутируемост и не е от неясни инструкции, а по-скоро от предишни дизайнерски решения, независимо от това как са били изразени (дизайн, код или документация). Няма изненади — това са просто решенията, които така или иначе бихте взели въз основа на предишни решения, изпълнени бързо. В демонстрацията Хуан де ла Круз Гарсия, дизайнер в Penpot, безпроблемно преобразува някои прости компоненти в документация, елементи на дизайнерската система, код, нови компоненти и дори пълен проект на Storybook като част от Play-Doh: Проектиране към код, валидиране на дизайн/код и прости операции В подобна демонстрация по-долу Доминик Джейн, съосновател в Oraios AI, създава Node.js уеб приложение въз основа на дизайна, преди да актуализира стиловете на интерфейса, запазва имена и идентификатори в паметта, за да осигури плавен превод от дизайн към код, преди да го провери за последователност, добавякоментар до избраната форма в Penpot и след това заменя драсканица в Penpot с адаптиран компонент. Тук се случват много неща, но можете да видите точно какво въвежда Доминик в Claude Desktop, както и отговорите на Claude, и това е много стабилно: Между другото, предишната демонстрация използва 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 иска да види повече. За да се гарантира, че следващото поколение инструменти за проектиране отговарят на нуждите на дизайнерите, разработчиците и продуктовите екипи като цяло, те трябва да бъдат изградени колективно и съвместно, особено що се отнася до AI. Забележка: Penpot търси бета тестери, нетърпеливи да изследват, да експериментират и да помогнат за прецизиране на MCP сървъра на Penpot. За да се присъедините, пишете на support@penpot.app с темата „MCP beta test volunteer“. Има ли нещо, което смятате, че Penpot MCP сървърите биха могли да направят, което настоящите инструменти не могат да направят достатъчно добре, достатъчно бързо или изобщо не могат? Можете да научите как да настроите Penpot MCP сървър точно тук и да започнете да бърникате днес, или ако мозъкът ви вече е пълен с идеи, Penpot иска да се присъедините към дискусията, да споделите отзивите си и да говорите за вашите случаи на употреба. Като алтернатива секцията за коментари точно по-долу също не е лошо място да започнете!
