Šo rakstu sponsorē Penpot Iedomājieties, ka jūsu Penpot failā papildus pašam dizainam ir pilna ikonu kopa, kurā tiek izmantotas dažas, bet ne visas no šīm ikonām. Ja jūs lūgtu AI, piemēram, Claude vai Gemini, eksportēt tikai tās ikonas, kuras tiek izmantotas, tas to nevarētu izdarīt. Tas nevar mijiedarboties ar Penpot failiem. Tomēr Penpot MCP serveris var. Tas var veikt noteiktu skaitu darbību saskaņā ar noteiktiem noteikumiem un atļaujām, jo īpaši tāpēc, ka Penpot ir plaša API, un vēl jo vairāk tāpēc, ka tas ir atvērtā koda. AI uzdevums ir vienkārši izprast jūsu nodomu, izvēlēties pareizo darbību MCP serverim (šajā gadījumā eksportēt) un nodot visus parametrus (t.i., ikonas, kas tiek izmantotas). Pēc tam MCP serveris to pārvērš strukturētā API pieprasījumā un izpilda to. Varētu palīdzēt domāt par AI kā serveri restorānā, kas pieņem jūsu pasūtījumu, MCP serveri kā ēdienkarti un šefpavāru un API pieprasījumu kā (cerams) kā karstu picas pīrāgu uz silta šķīvja. Kāpēc tieši MCP serveri? Nu, Penpot nevar saprast jūsu nodomu, jo tas nav LLM, kā arī neļauj trešo pušu LLM mijiedarboties ar jūsu Penpot failiem, lai nodrošinātu jūsu Penpot datu drošību un privātumu. Lai gan Penpot MCP serveri darbojas kā drošs tilts, pārvēršot AI nolūku API pieprasījumos, izmantojot jūsu Penpot failus un datus kā kontekstu. Vēl labāk ir tas, ka, tā kā Penpot izmanto dizainu, kas izteikts kā kods, dizainus var programmatiski izveidot, rediģēt un analizēt detalizētā līmenī. Tas ir daudz kontekstuālāks, konkrētāks un līdz ar to jaudīgāks salīdzinājumā ar to, ko piedāvā citi MCP serveri, un daudz pārdomātāks nekā AI darbplūsmas apakšsadaļa “Aprakstiet → Ģenerēt”, ko, manuprāt, neviens īsti nevēlas. Penpot AI dokumentā tas aprakstīts kā slikta pieeja un pieeja “Konvertēt uz kodu” kā neglīta pieeja, turpretim MCP serveri ir rafinētāki un pielāgojamāki. Funkcijas un tehniskā informācija Pirms pārejam pie lietošanas gadījumiem, šeit ir dažas funkcijas un tehniskā informācija, kas sīkāk izskaidro, kā darbojas Penpot MCP serveri:
Atbilst MCP standartiem; Integrējas ar Penpot API reāllaika dizaina datiem; Ietver Python SDK, REST API, spraudņu sistēmu un CLI rīkus; Darbojas ar jebkuru MCP iespējotu AI palīgu (Claude in VS Code, Claude in Cursor, Claude Desktop utt.); Atbalsta dizaina konteksta kopīgošanu ar AI modeļiem un ļauj tiem redzēt un saprast komponentus; Atvieglo saziņu ar Penpot, izmantojot dabisko valodu.
Ko tad MCP serveri varētu ļaut mums darīt programmā Penpot, un ko jau ir sasnieguši esošie eksperimenti? Apskatīsim. Penpot MCP servera lietošanas gadījumi Ja vēlaties vienkārši pāriet uz to, ko var darīt Penpot MCP serveri, Penpot ir dažas MCP demonstrācijas, kas ir glabātas Google diskā, kuras ir vairāk nekā noskatīšanās vērtas. Penpot izpilddirektors Pablo Ruizs-Múzquiz minēja, ka videoklipi 03, 04, 06, 08 un 12 ir viņu iecienītākie. Vēl ātrāks veids, kā apkopot MCP serverus, ir skatīties Penpot Fest 2025 atklāšanu. Pretējā gadījumā apskatīsim dažus izsmalcinātākos piemērus, ko Penpot demonstrēja savā publiskajā vitrīnā. Dizains pēc kodēšanas un atpakaļ (un vairāk) Pamatojoties uz to, ko es teicu iepriekš par to, kā Penpot dizaini tiek izteikti kā kods, tas nozīmē, ka MCP serverus var izmantot, lai pārveidotu dizainu kodā, izmantojot AI, kā arī no koda projektēšanas, noformējuma uz dokumentāciju, dokumentāciju, lai izstrādātu sistēmas elementus, dizains uz kodu atkal, pamatojoties uz minēto dizaina sistēmu, un pēc tam pilnīgi jaunas sastāvdaļas, kuru pamatā ir minētā dizaina sistēma. Tas izklausās sirreāli, taču tālāk redzamajā demonstrācijā ir parādīta šī pārveidojamība, un tas nav saistīts ar neskaidriem norādījumiem, bet gan no iepriekšējām dizaina izvēlēm neatkarīgi no tā, kā tās tika izteiktas (dizains, kods vai dokumentācija). Nav nekādu pārsteigumu — tie ir vienkārši lēmumi, kurus jūs jebkurā gadījumā būtu pieņēmuši, pamatojoties uz iepriekšējiem lēmumiem, un tie tiktu ātri izpildīti. Demonstrācijā Huans de la Kruss Garsija, Penpot dizainers, bez problēmām pārveido dažus vienkāršus komponentus dokumentācijā, dizaina sistēmas elementos, kodā, jaunos komponentos un pat pilnā Storybook projektā, piemēram, Play-Doh gabalā: Dizains uz kodu, dizaina/koda apstiprināšana un vienkāršas darbības Līdzīgā demonstrācijā zemāk Dominiks Džeins, Oraios AI līdzdibinātājs, pirms priekšgala stilu atjaunināšanas izveido tīmekļa lietotni Node.js, pamatojoties uz dizainu, saglabā nosaukumus un identifikatorus atmiņā, lai nodrošinātu vienmērīgu noformējuma tulkojumu no koda pirms konsekvences pārbaudes, pievienokomentēt blakus atlasītajai formai programmā Penpot un pēc tam aizvietot skrecelējumu programmā Penpot ar pielāgotu komponentu. Šeit notiek daudz kas, taču jūs varat redzēt tieši to, ko Dominiks ieraksta Kloda darbvirsmā, kā arī Kloda atbildes, un tas ir ļoti spēcīgs: Starp citu, iepriekšējā demonstrācijā VS Code tika izmantots Claude, tāpēc man jāatzīmē, ka Penpot MCP serveri ir LLM agnostiķi. Jūsu tehnoloģiju komplekts ir pilnībā atkarīgs no jums. IvanTheGeek izdevās iestatīt savu MCP serveri ar JetBrains Rider IDE un Junie AI. Vairāk lietošanas gadījumu Tulkojiet Penpot paneli uz ražošanai gatavu semantisko HTML un modulāro CSS, vienlaikus izmantojot visus Penpot dizaina marķierus (atcerieties, ka Penpot dizaini jau ir izteikti kā kods, tāpēc tas nav tumsā): Ģenerējiet interaktīvu tīmekļa prototipu, nemainot esošo HTML: Kā parādīts iepriekš, pārveidojiet skribējumu par komponentu, izmantojot esošo dizainu un/vai dizaina sistēmas elementus: Izveidojiet projektēšanas sistēmas dokumentāciju no Penpot faila: Un šeit ir vēl daži Penpot un kopienas lietošanas gadījumi:
Uzlabots eksports, Meklējiet dizaina elementus, izmantojot dabisko valodu, Izvelciet datus no ārējām API, izmantojot dabisko valodu, Viegli savienojiet Penpot ar citiem ārējiem rīkiem, Atkārtotu uzdevumu saglabāšana atmiņā un izpilde, Vizuālās regresijas pārbaude, Dizaina konsekvences un atlaišanas pārbaude, pieejamības un lietojamības analīze un atsauksmes, Projektēšanas sistēmas atbilstības pārbaude, Vadlīniju atbilstības pārbaude (zīmols, saturs utt.), Pārraugiet pieņemšanu un lietošanu, izmantojot dizaina analīzi, Automātiski sinhronizējiet dokumentāciju ar dizainu, Dizaina failu organizēšana (piemēram, marķēšana/kategorizēšana).
Būtībā Penpot MCP serveri ir ceļš uz bezgalīgu skaitu darbplūsmu, pateicoties jūsu izvēlētā LLM/LLM klienta efektivitātei un vienkāršībai, taču nepakļaujot tam jūsu datus. Kādam nolūkam jūs izmantotu MCP serverus? Penpot MCP serveri pat nav beta stadijā, taču tas ir aktīvs eksperiments, kurā varat piedalīties. Penpot lietotāji jau ir sākuši izpētīt MCP serveru lietošanas gadījumus, taču Penpot vēlas redzēt vairāk. Lai nodrošinātu, ka nākamās paaudzes projektēšanas rīki atbilst dizaineru, izstrādātāju un produktu komandu vajadzībām kopumā, tie ir jāveido kolektīvi un sadarbojoties, jo īpaši attiecībā uz AI. Piezīme. Penpot meklē beta testētājus, kuri vēlas izpētīt, eksperimentēt un palīdzēt uzlabot Penpot MCP serveri. Lai pievienotos, rakstiet uz support@penpot.app ar tematu “MCP beta testēšanas brīvprātīgais”. Vai ir kaut kas tāds, ko, jūsuprāt, Penpot MCP serveri varētu paveikt, ko pašreizējie rīki nevar paveikt pietiekami labi, pietiekami ātri vai vispār nespēj? Jūs varat uzzināt, kā iestatīt Penpot MCP serveri tieši šeit, un sākt strādāt jau šodien, vai arī, ja jūsu smadzenes jau kūsā no idejām, Penpot vēlas, lai jūs pievienotos diskusijai, dalītos atsauksmēs un runātu par saviem lietošanas gadījumiem. Alternatīvi, arī komentāru sadaļa tieši zemāk nav slikta vieta, kur sākt!
