Ky artikull është sponsorizuar nga Penpot Imagjinoni që skedari juaj Penpot përmban një grup të plotë ikonash përveç vetë dizajnit, i cili përdor disa, por jo të gjitha ato ikona. Nëse do t'i kërkoni një AI si Claude ose Gemini të eksportojë vetëm ikonat që përdoren, nuk do të mund ta bënte këtë. Nuk është në gjendje të ndërveprojë me skedarët Penpot. Megjithatë, një server Penpot MCP mundet. Ai mund të kryejë një numër operacionesh të zgjedhura sipas rregullave dhe lejeve të përcaktuara, veçanërisht pasi Penpot ka një API të gjerë dhe aq më tepër sepse është me burim të hapur. Detyra e AI është thjesht të kuptojë qëllimin tuaj, të zgjedhë operacionin e duhur për të kryer serverin MCP (një eksport në këtë rast) dhe të përcjellë çdo parametër (d.m.th., ikonat që përdoren). Serveri MCP më pas e përkthen këtë në një kërkesë të strukturuar API dhe e ekzekuton atë. Mund të ndihmojë të mendosh për AI si një server në një restorant që merr porosinë tënde, serverin MCP si menu dhe kuzhinier dhe kërkesën API si (shpresojmë) një byrek i nxehtë pice në një pjatë të ngrohtë. Pse pikërisht serverët MCP? Epo, Penpot nuk është në gjendje të kuptojë qëllimin tuaj sepse nuk është një LLM dhe as nuk i lejon LLM-të e palëve të treta të ndërveprojnë me skedarët tuaj Penpot për sigurinë dhe privatësinë e të dhënave tuaja Penpot. Megjithëse serverët Penpot MCP veprojnë si një urë e sigurt, duke përkthyer qëllimin e AI në kërkesat API duke përdorur skedarët dhe të dhënat tuaja Penpot si kontekst. Ajo që është edhe më e mirë është se për shkak se Penpot merr një qasje të shprehur në dizajn si kod, dizajnet mund të krijohen, modifikohen dhe analizohen në mënyrë programore në një nivel të grimcuar. Është më kontekstual, më i veçantë dhe për këtë arsye më i fuqishëm në krahasim me atë që ofrojnë serverët e tjerë MCP, dhe shumë më i zhytur në mendime se rrjedha e punës "Përshkruani → Gjeneroni" AI që nuk mendoj se dikush e dëshiron vërtet. Letra e bardhë e AI-së Penpot e përshkruan këtë si qasje të keqe dhe qasjen "Konverto në kod" si qasje të shëmtuar, ndërsa serverët MCP janë më të rafinuar dhe më të adaptueshëm. Karakteristikat dhe Detajet Teknike Përpara se të kalojmë te rastet e përdorimit, këtu janë disa veçori dhe detaje teknike që shpjegojnë më tej se si funksionojnë serverët Penpot MCP:
Përputhet me standardet MCP; Integrohet me Penpot API për të dhënat e dizajnit në kohë reale; Përfshin një Python SDK, REST API, sistem shtojcash dhe mjete CLI; Punon me çdo asistent të AI të aktivizuar me MCP (Claude në Kodin VS, Claude në Kursorin, Claude Desktop, etj.); Mbështet ndarjen e kontekstit të dizajnit me modelet e AI, dhe duke i lënë ata të shohin dhe kuptojnë komponentët; Lehtëson komunikimin me Penpot duke përdorur gjuhën natyrore.
Atëherë, çfarë mund të na mundësojnë serverët MCP të bëjmë në Penpot dhe çfarë kanë arritur tashmë eksperimentet ekzistuese? Le të hedhim një vështrim. Rastet e përdorimit të serverit Penpot MCP Nëse thjesht dëshironi të kaloni tek ajo që mund të bëjnë serverët Penpot MCP, Penpot ka disa demonstrime MCP të fshehura në një Google Drive që ia vlen të shikohen më shumë. CEO i Penpot Pablo Ruiz-Múzquiz përmendi se videot 03, 04, 06, 08 dhe 12 janë të preferuarat e tyre. Një mënyrë edhe më e shpejtë për të përmbledhur serverët MCP është të shikoni zbulimin nga Penpot Fest 2025. Përndryshe, le të hedhim një vështrim në disa nga shembujt më të rafinuar që Penpot demonstroi në vitrinën e tyre publike. Design-to-code dhe Kthehu përsëri (dhe më shumë) Duke u nisur nga ajo që thashë më herët për mënyrën sesi dizajnet Penpot shprehen si kod, kjo do të thotë se serverët MCP mund të përdoren për të kthyer dizajnin në kod duke përdorur AI, por gjithashtu kodin në dizajn, dizajn në dokumentacion, dokumentacion për dizajnimin e elementeve të sistemit, dizajn në kod përsëri bazuar në sistemin e përmendur të projektimit dhe më pas komponentë krejtësisht të rinj bazuar në sistemin e përmendur të projektimit. Tingëllon surreale, por demonstrimi më poshtë tregon këtë transmetim dhe nuk është nga udhëzimet e paqarta, por nga zgjedhjet e mëparshme të dizajnit, pavarësisht se si janë shprehur ato (dizajni, kodi ose dokumentacioni). Nuk ka surpriza - këto janë thjesht vendimet që do të kishit marrë gjithsesi bazuar në vendimet e mëparshme, të ekzekutuara me shpejtësi. Në demonstrim, Juan de la Cruz García, Dizenjues në Penpot, shndërron pa fërkime disa komponentë të thjeshtë në dokumentacion, elementë të sistemit të projektimit, kod, komponentë të rinj dhe madje edhe një projekt të plotë të Storybook si një pjesë e Play-Doh: Design-to-Code, Dizajn/Verifikimi i kodit dhe operacione të thjeshta Në një demonstrim të ngjashëm më poshtë, Dominik Jain, Bashkëthemelues në Oraios AI, krijon një aplikacion ueb Node.js bazuar në dizajnin përpara se të përditësojë stilet e faqes së përparme, ruan emrat dhe identifikuesit në memorie për të siguruar përkthim të qetë nga dizajni në kod përpara se ta kontrollojë atë për konsistencë, shton njëkomentoni pranë formës së zgjedhur në Penpot dhe më pas zëvendëson një shkarravitje në Penpot me një komponent të përshtatur. Ka shumë që ndodhin këtu, por ju mund të shihni saktësisht se çfarë po shkruan Dominik në Claude Desktop, si dhe përgjigjet e Claude, dhe është shumë e fortë: Nga rruga, demonstrimi i mëparshëm përdori Claude në VS Code, kështu që duhet të vërej se serverët Penpot MCP janë LLM-agnostikë. Stafi juaj i teknologjisë varet plotësisht nga ju. IvanTheGeek arriti të konfigurojë serverin e tij MCP me JetBrains Rider IDE dhe Junie AI. Më shumë raste përdorimi Përkthejeni një tabelë Penpot në HTML semantike të gatshme për prodhim dhe CSS modulare duke përdorur çdo shenjë të dizajnit të Penpot (mos harroni se modelet e Penpot janë shprehur tashmë si kod, kështu që kjo nuk është një shkrepje në errësirë): Gjeneroni një prototip interaktiv të uebit pa ndryshuar HTML-në ekzistuese: Siç u tregua më herët, konvertoni një shkarravitje në një komponent, duke shfrytëzuar elementet ekzistuese të dizajnit dhe/ose të sistemit të projektimit: Krijoni dokumentacionin e sistemit të projektimit nga një skedar Penpot: Dhe këtu janë disa raste të tjera përdorimi nga Penpot dhe komuniteti:
Eksportet e avancuara, Kërkoni elemente të dizajnit duke përdorur gjuhën natyrore, Tërhiq të dhëna nga API-të e jashtme duke përdorur gjuhën natyrore, Lidhni lehtësisht Penpot me mjete të tjera të jashtme, Ruajtja e detyrave të përsëritura në kujtesë dhe ekzekutimi i tyre, Testimi i regresionit vizual, Konsistenca e dizajnit dhe kontrolli i tepricës, Analiza dhe komentet e aksesueshmërisë dhe përdorshmërisë, Kontrolli i pajtueshmërisë së sistemit të projektimit, Kontrolli i pajtueshmërisë me udhëzimet (marka, përmbajtja, etj.), Monitoroni miratimin dhe përdorimin me analitikën e dizajnit, Mbani automatikisht dokumentacionin në sinkron me dizajnin, Organizimi i skedarëve të projektimit (p.sh., etiketimi/kategorizimi).
Në thelb, serverët Penpot MCP udhëheqin rrugën drejt një numri të pafund fluksesh pune falë efikasitetit dhe lehtësisë së klientit tuaj të zgjedhur LLM/LLM, por pa ekspozuar të dhënat tuaja ndaj tij. Për çfarë do të përdorni serverët MCP? Serverët Penpot MCP nuk janë as në fazën beta, por është një eksperiment aktiv në të cilin mund të jeni pjesë. Përdoruesit e Penpot kanë filluar tashmë të eksplorojnë rastet e përdorimit për serverët MCP, por Penpot dëshiron të shohë më shumë. Për të siguruar që gjenerata e ardhshme e mjeteve të projektimit plotëson nevojat e projektuesve, zhvilluesve dhe ekipeve të produkteve në përgjithësi, ato duhet të ndërtohen kolektivisht dhe në bashkëpunim, veçanërisht kur bëhet fjalë për AI. Shënim: Penpot po kërkon testues beta të etur për të eksploruar, eksperimentuar dhe ndihmuar në rafinimin e serverit MCP të Penpot. Për t'u bashkuar, shkruani në support@penpot.app me rreshtin e temës "Vullnetar i testit beta të MCP". A ka ndonjë gjë që mendoni se serverët Penpot MCP mund të bëjnë që mjetet aktuale nuk janë në gjendje ta bëjnë mjaft mirë, mjaftueshëm shpejt ose nuk janë në gjendje ta bëjnë fare? Mund të mësoni se si të konfiguroni një server Penpot MCP pikërisht këtu dhe të filloni të ndërhyni sot, ose nëse truri juaj tashmë po gumëzhin me ide, Penpot dëshiron që ju të bashkoheni në diskutim, të ndani komentet tuaja dhe të flisni për rastet tuaja të përdorimit. Përndryshe, seksioni i komenteve më poshtë nuk është as një vend i keq për të filluar!
