Šį straipsnį remia „Penpot“. Įsivaizduokite, kad jūsų Penpot faile yra visas piktogramų rinkinys, be paties dizaino, kuriame naudojamos kai kurios, bet ne visos tos piktogramos. Jei paprašytumėte dirbtinio intelekto, pvz., Claude'o ar Gemini, eksportuoti tik naudojamas piktogramas, jis negalėtų to padaryti. Jis negali sąveikauti su „Penpot“ failais. Tačiau Penpot MCP serveris gali. Jis gali atlikti pasirinktą skaičių operacijų pagal nustatytas taisykles ir leidimus, ypač dėl to, kad „Penpot“ turi didelę API ir juo labiau, kad ji yra atvirojo kodo. AI užduotis yra tiesiog suprasti jūsų ketinimą, pasirinkti tinkamą MCP serverio operaciją (šiuo atveju eksportas) ir perduoti visus parametrus (t. y. naudojamas piktogramas). Tada MCP serveris paverčia tai struktūrine API užklausa ir ją vykdo. Gali būti naudinga įsivaizduoti AI kaip serverį restorane, kuris priima jūsų užsakymą, MCP serverį ir meniu, ir šefą, o API užklausą (tikiuosi) kaip karštą picos pyragą šiltoje lėkštėje. Kodėl būtent MCP serveriai? Na, „Penpot“ negali suprasti jūsų ketinimų, nes tai nėra LLM, taip pat neleidžia trečiųjų šalių LLM sąveikauti su jūsų „Penpot“ failais, kad būtų užtikrintas jūsų „Penpot“ duomenų saugumas ir privatumas. Nors „Penpot“ MCP serveriai veikia kaip saugus tiltas, AI tikslas paverčiamas API užklausomis naudojant „Penpot“ failus ir duomenis kaip kontekstą. Dar geriau yra tai, kad kadangi „Penpot“ taiko dizaino išreikšto kodo metodą, dizainus galima programiškai kurti, redaguoti ir analizuoti detaliu lygiu. Ji yra labiau kontekstinė, konkretesnė ir todėl galingesnė, palyginti su tuo, ką siūlo kiti MCP serveriai, ir daug labiau apgalvota nei poskyris „Apibūdinti → Generuoti“ AI darbo eigą, kurios, manau, niekas tikrai nenori. „Penpot“ AI dokumente tai apibūdinama kaip blogą metodą, o „konvertuoti į kodą“ – kaip bjaurų metodą, o MCP serveriai yra tobulesni ir labiau pritaikomi. Savybės ir techninės detalės Prieš pereinant prie naudojimo atvejų, čia yra keletas funkcijų ir techninių detalių, kurios toliau paaiškina, kaip veikia Penpot MCP serveriai:
Atitinka MCP standartus; Integruojasi su Penpot API realiuoju laiku projektavimo duomenims; Apima Python SDK, REST API, papildinių sistemą ir CLI įrankius; Veikia su bet kuriuo MCP įgalintu AI asistentu (Claude in VS Code, Claude in Cursor, Claude Desktop ir kt.); Palaiko dalijimąsi dizaino kontekstu su AI modeliais ir leidžia jiems matyti bei suprasti komponentus; Palengvina bendravimą su Penpot naudojant natūralią kalbą.
Taigi, ką MCP serveriai gali leisti mums padaryti „Penpot“ ir ką jau pavyko pasiekti atlikus esamus eksperimentus? Pažiūrėkime. Penpot MCP serverio naudojimo atvejai Jei norite tiesiog pereiti prie to, ką gali padaryti „Penpot“ MCP serveriai, „Penpot“ turi keletą MCP demonstracinių versijų, saugomų „Google“ diske, kurias verta žiūrėti. „Penpot“ generalinis direktorius Pablo Ruiz-Múzquiz paminėjo, kad vaizdo įrašai 03, 04, 06, 08 ir 12 yra jų mėgstamiausi. Dar greitesnis būdas apibendrinti MCP serverius yra stebėti „Penpot Fest 2025“ pristatymą. Kitu atveju pažvelkime į kai kuriuos rafinuotus pavyzdžius, kuriuos „Penpot“ pademonstravo savo viešoje demonstracijoje. Dizainas pagal kodą ir atgal (ir daugiau) Remiantis tuo, ką sakiau anksčiau apie tai, kaip Penpot dizainas išreiškiamas kaip kodas, tai reiškia, kad MCP serveriai gali būti naudojami konvertuoti dizainą į kodą naudojant AI, taip pat kodą į dizainą, dizainą į dokumentaciją, dokumentaciją sistemos elementų projektavimui, dizainą į kodą, pagrįstą minėta projektavimo sistema, ir tada visiškai naujus komponentus, pagrįstus minėta projektavimo sistema. Tai skamba siurrealistiškai, tačiau toliau pateikta demonstracinė versija parodo šį keičiamumą ir tai ne iš neaiškių nurodymų, o iš ankstesnių dizaino pasirinkimų, neatsižvelgiant į tai, kaip jie buvo išreikšti (dizainas, kodas ar dokumentacija). Nėra jokių staigmenų – tai tiesiog sprendimai, kuriuos vis tiek būtumėte priėmę remdamiesi ankstesniais sprendimais, kurie būtų įvykdyti greitai. Demonstracinėje versijoje Juanas de la Cruzas García, „Penpot“ dizaineris, be trinties paverčia kai kuriuos paprastus komponentus į dokumentus, projektavimo sistemos elementus, kodą, naujus komponentus ir net visą Storybook projektą, pavyzdžiui, „Play-Doh“ gabalėlį: Projektavimas pagal kodą, dizaino / kodo patvirtinimas ir paprastos operacijos Toliau pateiktoje panašioje demonstracijoje Dominik Jain, vienas iš Oraios AI įkūrėjų, prieš atnaujindamas sąsajos stilius sukuria Node.js žiniatinklio programą, pagrįstą dizainu, išsaugo vardus ir identifikatorius atmintyje, kad užtikrintų sklandų dizaino vertimą į kodą, prieš patikrindamas, ar jis nuoseklus, pridedakomentarą šalia pasirinktos formos programoje „Penpot“, o tada „Penpot“ raštą pakeis pritaikytu komponentu. Čia vyksta daug, bet galite tiksliai pamatyti, ką Dominikas įveda į Claude Desktop, taip pat Claude'o atsakymus, ir tai labai tvirta: Beje, ankstesnėje demonstracijoje buvo naudojamas Claude VS Code, todėl turėčiau pažymėti, kad Penpot MCP serveriai yra LLM agnostikai. Jūsų technikos rinkinys visiškai priklauso nuo jūsų. IvanTheGeek sugebėjo nustatyti savo MCP serverį su JetBrains Rider IDE ir Junie AI. Daugiau naudojimo atvejų Išverskite „Penpot“ plokštę į gamybai paruoštą semantinį HTML ir modulinį CSS, naudodami bet kokius „Penpot“ dizaino žetonus (atminkite, kad „Penpot“ dizainas jau išreiškiamas kaip kodas, todėl tai nėra pavyzdinė dalis): Sugeneruokite interaktyvų žiniatinklio prototipą nekeisdami esamo HTML: Kaip parodyta anksčiau, konvertuokite raštą į komponentą, panaudodami esamą dizainą ir (arba) projektavimo sistemos elementus: Sukurkite projektavimo sistemos dokumentaciją iš „Penpot“ failo: Ir čia yra dar keletas „Penpot“ ir bendruomenės naudojimo atvejų:
Išplėstinis eksportas, Ieškokite dizaino elementų natūralia kalba, Ištraukite duomenis iš išorinių API naudodami natūralią kalbą, Lengvai prijunkite Penpot prie kitų išorinių įrankių, Pasikartojančių užduočių išsaugojimas atmintyje ir jų vykdymas, vizualinės regresijos testas, Projekto nuoseklumo ir atleidimo patikrinimas, Prieinamumo ir tinkamumo naudoti analizė ir atsiliepimai, projektavimo sistemos atitikties patikra, Gairių atitikties patikra (prekės ženklas, turinys ir kt.), Stebėkite pritaikymą ir naudojimą naudodami dizaino analizę, Automatiškai sinchronizuoti dokumentus su dizainu, Kurti failų organizavimą (pvz., žymėjimas / kategorizavimas).
Iš esmės „Penpot“ MCP serveriai veda į begalinį darbo eigų skaičių dėl jūsų pasirinkto LLM / LLM kliento efektyvumo ir lengvumo, tačiau neatskleidžiant jūsų duomenų. Kam naudotumėte MCP serverius? „Penpot MCP“ serveriai dar nėra beta versijos stadijoje, tačiau tai yra aktyvus eksperimentas, kurio dalimi galite dalyvauti ir jūs. „Penpot“ vartotojai jau pradėjo tyrinėti MCP serverių naudojimo atvejus, tačiau „Penpot“ nori pamatyti daugiau. Siekiant užtikrinti, kad naujos kartos projektavimo įrankiai atitiktų dizainerių, kūrėjų ir apskritai produktų komandų poreikius, jie turi būti kuriami kartu ir bendradarbiaujant, ypač kai tai susiję su AI. Pastaba: „Penpot“ ieško beta versijos bandytojų, norinčių tyrinėti, eksperimentuoti ir padėti tobulinti „Penpot“ MCP serverį. Norėdami prisijungti, rašykite adresu support@penpot.app su temos eilute „MCP beta testavimo savanoris“. Ar yra kažkas, ką, jūsų manymu, gali padaryti „Penpot“ MCP serveriai, kurių dabartiniai įrankiai negali atlikti pakankamai gerai, pakankamai greitai arba iš viso negali padaryti? Čia galite sužinoti, kaip nustatyti „Penpot“ MCP serverį ir pradėti dirbti jau šiandien, arba, jei jūsų smegenys jau šnibžda nuo idėjų, „Penpot“ nori, kad prisijungtumėte prie diskusijos, pasidalintumėte atsiliepimais ir pasikalbėtumėte apie naudojimo atvejus. Arba žemiau esantis komentarų skyrius taip pat nėra bloga vieta pradėti!
