Acest articol este sponsorizat de Penpot Imaginați-vă că fișierul dvs. Penpot conține un set complet de pictograme în plus față de designul în sine, care utilizează unele, dar nu toate aceste pictograme. Dacă ar fi să ceri unui AI precum Claude sau Gemini să exporte doar pictogramele care sunt folosite, nu ar putea face asta. Nu poate interacționa cu fișierele Penpot. Cu toate acestea, un server Penpot MCP poate. Poate efectua un număr selectat de operațiuni în conformitate cu reguli și permisiuni stabilite, mai ales că Penpot are un API extins și cu atât mai mult pentru că este open-source. Sarcina AI este pur și simplu să vă înțeleagă intenția, să alegeți operația potrivită pe care să o efectueze serverul MCP (un export în acest caz) și să transmiteți orice parametri (adică pictogramele care sunt utilizate). Serverul MCP traduce apoi acest lucru într-o solicitare API structurată și o execută. Ar putea ajuta să vă gândiți la AI ca la un server dintr-un restaurant care preia comanda dvs., serverul MCP ca atât meniu, cât și bucătar și solicitarea API ca (sperăm) o plăcintă cu pizza fierbinte pe o farfurie caldă. De ce servere MCP, mai exact? Ei bine, Penpot nu vă poate înțelege intenția deoarece nu este un LLM și nici nu permite LLM terților să interacționeze cu fișierele dvs. Penpot pentru securitatea și confidențialitatea datelor dvs. Penpot. Deși serverele Penpot MCP acționează ca o punte securizată, traducând intenția AI în solicitări API folosind fișierele și datele Penpot ca context. Ceea ce este și mai bun este că, deoarece Penpot adoptă o abordare prin design-exprimat ca cod, desenele pot fi create, editate și analizate la nivel granular. Este mai contextuală, mai particulară și, prin urmare, mai puternică în comparație cu ceea ce oferă alte servere MCP și mult mai atent decât fluxul de lucru AI subal „Descrie → Generați” pe care nu cred că și-l dorește cineva cu adevărat. Cartea albă AI a lui Penpot descrie aceasta ca fiind o abordare proastă, iar abordarea „Convertire în cod” ca fiind o abordare urâtă, în timp ce serverele MCP sunt mai rafinate și mai adaptabile. Caracteristici și detalii tehnice Înainte de a trece la cazurile de utilizare, iată câteva caracteristici și detalii tehnice care explică în continuare cum funcționează serverele Penpot MCP:
Respectă standardele MCP; Se integrează cu API-ul Penpot pentru date de design în timp real; Include un SDK Python, API REST, sistem de pluginuri și instrumente CLI; Funcționează cu orice asistent AI compatibil MCP (Claude în VS Code, Claude în Cursor, Claude Desktop etc.); Acceptă partajarea contextului de proiectare cu modelele AI și le permite să vadă și să înțeleagă componentele; Facilitează comunicarea cu Penpot folosind limbajul natural.
Deci, ce ne-ar putea permite serverele MCP să facem în Penpot și ce au realizat deja experimentele existente? Să aruncăm o privire. Cazuri de utilizare a serverului Penpot MCP Dacă doriți doar să treceți la ceea ce pot face serverele Penpot MCP, Penpot are câteva demonstrații MCP ascunse într-un Google Drive care merită mai mult decât vizionate. CEO-ul Penpot, Pablo Ruiz-Múzquiz, a menționat că videoclipurile 03, 04, 06, 08 și 12 sunt preferatele lor. O modalitate și mai rapidă de a rezuma serverele MCP este să urmăriți dezvăluirea de la Penpot Fest 2025. În caz contrar, să aruncăm o privire la câteva dintre exemplele mai rafinate pe care Penpot le-a demonstrat în vitrina lor publică. Design-to-Code și înapoi din nou (și mai mult) Pornind de la ceea ce spuneam mai devreme despre modul în care desenele Penpot sunt exprimate ca cod, aceasta înseamnă că serverele MCP pot fi folosite pentru a converti designul în cod folosind AI, dar și codul în proiect, proiectarea în documentație, documentația pentru proiectarea elementelor sistemului, proiectarea în cod din nou bazat pe sistemul de proiectare menționat și apoi componente complet noi bazate pe sistemul de proiectare menționat. Sună suprarealist, dar demonstrația de mai jos arată această transmutabilitate și nu este din instrucțiuni vagi, ci mai degrabă din alegerile anterioare de design, indiferent de modul în care au fost exprimate (design, cod sau documentație). Nu există surprize - acestea sunt pur și simplu deciziile pe care le-ați fi luat oricum pe baza deciziilor anterioare, executate rapid. În demonstrație, Juan de la Cruz García, designer la Penpot, transformă fără frecare unele componente simple în documentație, elemente de sistem de proiectare, cod, componente noi și chiar un proiect complet de Storybook, ca o bucată de Play-Doh: Design-to-Code, Design/Code Validare și operații simple Într-o demonstrație similară de mai jos, Dominik Jain, co-fondator la Oraios AI, creează o aplicație web Node.js bazată pe design înainte de a actualiza stilurile de interfață, salvează numele și identificatorii în memorie pentru a asigura o traducere ușoară din design în cod înainte de a verifica consistența acesteia, adaugă uncomentați lângă forma selectată în Penpot și apoi înlocuiește o mâzgălire în Penpot cu o componentă adaptată. Se întâmplă multe aici, dar puteți vedea exact ce scrie Dominik în Claude Desktop, precum și răspunsurile lui Claude și este foarte robust: Apropo, demonstrația anterioară a folosit Claude în VS Code, așa că ar trebui să rețin că serverele Penpot MCP sunt agnostice LLM. Stack-ul tău de tehnologie depinde în totalitate de tine. IvanTheGeek a reușit să-și configureze serverul MCP cu JetBrains Rider IDE și Junie AI. Mai multe cazuri de utilizare Traduceți o placă Penpot în HTML semantic pregătit pentru producție și CSS modular, utilizând în același timp orice simboluri de design Penpot (rețineți că modelele Penpot sunt deja exprimate ca cod, deci aceasta nu este o lovitură în întuneric): Generați un prototip web interactiv fără a modifica codul HTML existent: După cum s-a arătat mai devreme, convertiți o mâzgălire într-o componentă, valorificând elementele existente de proiectare și/sau sistem de proiectare: Creați documentația sistemului de proiectare dintr-un fișier Penpot: Și iată mai multe cazuri de utilizare de la Penpot și comunitate:
Exporturi avansate, Căutați elemente de design folosind limbajul natural, Extrageți date din API-uri externe folosind limbaj natural, Conectați cu ușurință Penpot la alte instrumente externe, Salvarea sarcinilor repetitive în memorie și executarea lor, Testarea regresiei vizuale, Consecvența proiectării și verificarea redundanței, Analiza și feedback de accesibilitate și utilizare, Verificarea conformității sistemului de proiectare, Verificarea conformității cu ghidul (brand, conținut etc.), Monitorizați adoptarea și utilizarea cu ajutorul analizei de proiectare, Păstrează automat documentația sincronizată cu designul, Organizarea fișierelor de proiectare (de exemplu, etichetare/categorizare).
În esență, serverele Penpot MCP deschid calea către un număr infinit de fluxuri de lucru datorită eficienței și ușurinței clientului LLM/LLM ales, dar fără a vă expune datele acestuia. Pentru ce ați folosi serverele MCP? Serverele Penpot MCP nu sunt nici măcar în stadiul beta, dar este un experiment activ la care puteți face parte. Utilizatorii Penpot au început deja să exploreze cazuri de utilizare pentru serverele MCP, dar Penpot vrea să vadă mai multe. Pentru a ne asigura că următoarea generație de instrumente de proiectare răspunde nevoilor designerilor, dezvoltatorilor și echipelor de produse în general, acestea trebuie să fie construite colectiv și în colaborare, în special în ceea ce privește AI. Notă: Penpot caută testeri beta dornici să exploreze, să experimenteze și să ajute la îmbunătățirea serverului MCP al Penpot. Pentru a vă alătura, scrieți la support@penpot.app cu subiectul „MCP beta test volunteer”. Credeți că există ceva ce ar putea face serverele Penpot MCP pe care instrumentele actuale nu sunt capabile să o facă suficient de bine, suficient de rapid sau nu pot face deloc? Puteți afla cum să configurați un server Penpot MCP chiar aici și să începeți să lucrați astăzi sau, dacă creierul dvs. este deja plin de idei, Penpot vrea să vă alăturați discuției, să vă împărtășiți feedbackul și să vorbiți despre cazurile dvs. de utilizare. Alternativ, nici secțiunea de comentarii de mai jos nu este un loc rău pentru a începe!
