Оваа статија е спонзорирана од Penpot Замислете дека вашата датотека Penpot содржи целосен сет на икони покрај самиот дизајн, кој користи некои, но не сите од тие икони. Ако побарате од вештачка интелигенција како што се Клод или Близнаци да ги извезат само иконите што се користат, тоа нема да може да го направи. Не може да комуницира со датотеките Penpot. Сепак, серверот Penpot MCP може. Може да изврши рачно избран број операции според поставените правила и дозволи, особено затоа што Penpot има обемно API и уште повеќе затоа што е со отворен код. Работата на вештачката интелигенција е едноставно да ја разбере вашата намера, да ја избере вистинската операција за MCP серверот (во овој случај извоз) и да ги пренесе сите параметри (т.е. иконите што се користат). Потоа, серверот MCP го преведува ова во структурирано барање за API и го извршува. Можеби ќе ви помогне да ја замислите вештачката интелигенција како сервер во ресторан кој ја прима вашата нарачка, серверот MCP како мени и готвач, а барањето API како (се надеваме) топла пита со пица на топла чинија. Зошто точно MCP сервери? Па, Penpot не може да ја разбере вашата намера бидејќи не е LLM, ниту пак дозволува LLM од трети страни да комуницираат со вашите датотеки Penpot за безбедност и приватност на вашите податоци од Penpot. Иако серверите Penpot MCP навистина делуваат како безбеден мост, преведувајќи ја намерата на вештачката интелигенција во барања за API користејќи ги вашите датотеки и податоци на Penpot како контекст. Она што е уште подобро е тоа што бидејќи Penpot користи пристап со дизајн изразен како код, дизајните можат програмски да се креираат, уредуваат и анализираат на грануларно ниво. Тој е поконтекстуален, поконкретен и затоа е помоќен во споредба со она што го нудат другите MCP сервери и многу повнимателен од подпарот „Опишете → Создадете“ работен тек на вештачка интелигенција што мислам дека никој навистина не го сака. Белата книга за вештачка интелигенција на Penpot го опишува ова како лош пристап и пристапот „Конвертирај во код“ како грд пристап, додека MCP серверите се попрефинети и поприлагодливи. Карактеристики и технички детали Пред да продолжиме со случаите за употреба, еве неколку карактеристики и технички детали кои дополнително објаснуваат како функционираат серверите Penpot MCP:
Во согласност со MCP стандардите; Се интегрира со Penpot API за податоци за дизајн во реално време; Вклучува Python SDK, REST API, приклучок систем и алатки CLI; Работи со кој било асистент за вештачка интелигенција со вклучен MCP (Клод во кодот VS, Клод во курсорот, работната површина Клод итн.); Поддржува споделување дизајн контекст со модели со вештачка интелигенција и дозволувајќи им да ги видат и разберат компонентите; Ја олеснува комуникацијата со Penpot користејќи природен јазик.
Тогаш, што би можеле да ни овозможат MCP серверите во Penpot, и што веќе постигнале постоечките експерименти? Ајде да погледнеме. Случаи за употреба на серверот Penpot MCP Ако само сакате да прескокнете што можат да прават серверите Penpot MCP, Penpot има неколку демо снимки за MCP зачувани во Google Drive што вреди да се гледаат. Извршниот директор на 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 во VS Code, па затоа треба да забележам дека серверите Penpot MCP се LLM-agnostic. Вашиот технолошки куп зависи целосно од вас. 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 со наслов „МЦП бета тест волонтер“. Дали има нешто што сметате дека серверите на Penpot MCP би можеле да го направат, а сегашните алатки не можат да го направат доволно добро, доволно брзо или воопшто не можат да го направат? Можете да научите како да поставите сервер Penpot MCP токму овде и да започнете да се занимавате денес, или ако вашиот мозок веќе зуи со идеи, Penpot сака да се вклучите во дискусијата, да ги споделите вашите повратни информации и да разговарате за вашите случаи на употреба. Алтернативно, делот за коментари веднаш подолу не е ниту лошо место за почеток!
