ეს სტატია დაფინანსებულია Penpot-ის მიერ წარმოიდგინეთ, რომ თქვენი Penpot ფაილი თავად დიზაინის გარდა შეიცავს ხატულების სრულ კომპლექტს, რომელიც იყენებს ზოგიერთ, მაგრამ არა ყველა ამ ხატს. თუ თქვენ სთხოვთ AI-ს, როგორიცაა კლოდი ან ტყუპები, ექსპორტი გაუკეთოს მხოლოდ იმ ხატებს, რომლებიც გამოიყენება, ის ამას ვერ გააკეთებს. მას არ შეუძლია Penpot ფაილებთან ურთიერთობა. თუმცა, Penpot MCP სერვერს შეუძლია. მას შეუძლია შეასრულოს ოპერაციების შერჩეული რაოდენობა დადგენილი წესებისა და ნებართვების შესაბამისად, განსაკუთრებით იმის გამო, რომ Penpot-ს აქვს ვრცელი API და მით უმეტეს, რომ ის ღია წყაროა. AI-ს ამოცანაა უბრალოდ გაიგოს თქვენი განზრახვა, აირჩიოს სწორი ოპერაცია MCP სერვერისთვის (ამ შემთხვევაში ექსპორტი) და გადასცეს ნებისმიერი პარამეტრი (მაგ., ხატები, რომლებიც გამოიყენება). შემდეგ MCP სერვერი თარგმნის ამას სტრუქტურირებულ API მოთხოვნად და ახორციელებს მას. შეიძლება დაგვეხმაროს, ვიფიქროთ AI-ზე, როგორც სერვერზე რესტორანში, რომელიც იღებს თქვენს შეკვეთას, MCP სერვერს, როგორც მენიუს და მზარეულს, და API მოთხოვნას, როგორც (იმედია) ცხელი პიცის ღვეზელს თბილ თეფშზე. რატომ MCP სერვერები, ზუსტად? კარგად, Penpot-ს არ შეუძლია გაიგოს თქვენი განზრახვა, რადგან ის არ არის LLM და არც მესამე მხარის LLM-ებს საშუალებას აძლევს ურთიერთქმედონ თქვენს Penpot ფაილებთან თქვენი Penpot-ის მონაცემების უსაფრთხოებისა და კონფიდენციალურობისთვის. მიუხედავად იმისა, რომ Penpot MCP სერვერები მოქმედებენ როგორც უსაფრთხო ხიდი, AI განზრახვას API მოთხოვნებში თარგმნიან თქვენი Penpot ფაილებისა და მონაცემების კონტექსტში. კიდევ უკეთესი ის არის, რომ იმის გამო, რომ Penpot იყენებს დიზაინით გამოხატულ კოდის მიდგომას, დიზაინები შეიძლება შეიქმნას პროგრამულად, რედაქტირდეს და გაანალიზდეს მარცვლოვან დონეზე. ის უფრო კონტექსტურია, უფრო კონკრეტული და, შესაბამისად, უფრო ძლიერი, ვიდრე სხვა MCP სერვერები გვთავაზობენ, და ბევრად უფრო გააზრებული, ვიდრე ქვეპარატის „აღწერე → გენერირება“ AI სამუშაო ნაკადი, რომელიც არავის ნამდვილად არ სურს. Penpot-ის AI whitepaper აღწერს ამას, როგორც ცუდ მიდგომას და „Convert to Code“ მიდგომას, როგორც მახინჯ მიდგომას, ხოლო MCP სერვერები უფრო დახვეწილი და ადაპტირებადია. მახასიათებლები და ტექნიკური დეტალები სანამ საქმეების გამოყენებაზე გადავიდოდეთ, აქ მოცემულია რამდენიმე მახასიათებელი და ტექნიკური დეტალი, რომლებიც შემდგომში განმარტავს, თუ როგორ მუშაობს Penpot MCP სერვერები:
შეესაბამება MCP სტანდარტებს; ინტეგრირდება Penpot API-სთან რეალურ დროში დიზაინის მონაცემებისთვის; მოყვება Python SDK, REST API, დანამატის სისტემა და CLI ინსტრუმენტები; მუშაობს ნებისმიერ MCP-ზე ჩართული AI ასისტენტთან (Claude in VS Code, Claude in Cursor, Claude Desktop და ა.შ.); მხარს უჭერს დიზაინის კონტექსტის გაზიარებას AI მოდელებთან და საშუალებას აძლევს მათ დაინახონ და გაიგონ კომპონენტები; ხელს უწყობს Penpot-თან კომუნიკაციას ბუნებრივი ენის გამოყენებით.
მაშ, რის საშუალებას მოგვცემს MCP სერვერები Penpot-ში და რა მიღწეულია უკვე არსებულმა ექსპერიმენტებმა? მოდით შევხედოთ. Penpot MCP სერვერის გამოყენების შემთხვევები თუ უბრალოდ გსურთ გადახვიდეთ იმაზე, რისი გაკეთებაც Penpot MCP სერვერებს შეუძლიათ, Penpot-ს აქვს რამდენიმე MCP დემო ვერსია, რომელიც ინახება Google Drive-ში, რომელთა ყურებაც ღირს. Penpot-ის აღმასრულებელმა დირექტორმა პაბლო რუის-მუზკუიზმა აღნიშნა, რომ ვიდეოები 03, 04, 06, 08 და 12 მათი ფავორიტია. MCP სერვერების შეჯამების კიდევ უფრო სწრაფი გზაა 2025 Penpot Fest-ის გახსნის ყურება. წინააღმდეგ შემთხვევაში, მოდით გადავხედოთ რამდენიმე უფრო დახვეწილ მაგალითს, რომელიც პენპოტმა აჩვენა თავის საჯარო გამოფენაზე. Design-to-Code და Back Again (და მეტი) იმის გათვალისწინებით, რაც ადრე ვთქვი იმის შესახებ, თუ როგორ გამოიხატება Penpot-ის დიზაინები კოდად, ეს ნიშნავს, რომ MCP სერვერები შეიძლება გამოყენებულ იქნას დიზაინის კოდში გადასაყვანად AI-ს გამოყენებით, მაგრამ ასევე კოდის დიზაინში, დიზაინი დოკუმენტაციაში, დოკუმენტაცია სისტემის ელემენტების დიზაინისთვის, დიზაინი ისევ კოდირებაზე დაფუძნებული დიზაინის სისტემაზე და შემდეგ სრულიად ახალი კომპონენტების საფუძველზე აღნიშნული დიზაინის სისტემაზე. ეს სიურეალისტურად ჟღერს, მაგრამ ქვემოთ მოყვანილი დემო გვიჩვენებს ამ გარდამავალობას და ეს არ არის ბუნდოვანი ინსტრუქციებიდან, არამედ დიზაინის წინა არჩევანიდან, მიუხედავად იმისა, თუ როგორ იყო ისინი გამოხატული (დიზაინი, კოდი ან დოკუმენტაცია). სიურპრიზები არ არის - ეს არის უბრალოდ გადაწყვეტილებები, რომლებსაც თქვენ მაინც მიიღებდით წინა გადაწყვეტილებების საფუძველზე, სწრაფად შესრულებული. დემოში, ხუან დე ლა კრუზ გარსია, დიზაინერი Penpot-ში, ხახუნის გარეშე გარდაქმნის რამდენიმე მარტივ კომპონენტს დოკუმენტაციად, დიზაინის სისტემის ელემენტებად, კოდად, ახალ კომპონენტებად და თუნდაც სრულ Storybook პროექტად, როგორც Play-Doh-ის ნაწილი: Design-to-Code, Design/Code Validation და მარტივი ოპერაციები ქვემოთ მოცემულ მსგავს დემო ვერსიაში, Dominik Jain, Oraios AI-ის თანადამფუძნებელი, ქმნის Node.js ვებ აპს დიზაინის საფუძველზე, სანამ განახლდება წინა სტილები, ინახავს სახელებს და იდენტიფიკატორებს მეხსიერებაში, რათა უზრუნველყოს გლუვი დიზაინი-კოდზე თარგმნა, სანამ შეამოწმებს მის თანმიმდევრულობას.კომენტარი არჩეული ფორმის გვერდით Penpot-ში და შემდეგ ცვლის სკრიბლს Penpot-ში ადაპტირებული კომპონენტით. აქ ბევრი რამ ხდება, მაგრამ თქვენ ხედავთ ზუსტად რას წერს Dominik 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 ეძებს ბეტა ტესტერებს, რომლებსაც სურთ გამოიკვლიონ, ექსპერიმენტი გაუკეთონ და დაეხმარონ Penpot-ის MCP სერვერის დახვეწას. გასაწევრიანებლად, მოგვწერეთ support@penpot.app სათაურით „MCP beta ტესტის მოხალისე“. არის თუ არა რაიმე ისეთი, რისი გაკეთებაც Penpot MCP სერვერებს შეუძლიათ, რისი გაკეთებაც ახლანდელ ხელსაწყოებს არ შეუძლიათ საკმარისად კარგად, საკმარისად სწრაფად ან საერთოდ არ შეუძლიათ? შეგიძლიათ გაიგოთ, როგორ დააყენოთ Penpot MCP სერვერი სწორედ აქ და დაიწყოთ მუშაობა დღესვე, ან თუ თქვენი ტვინი უკვე აზრები აქვს, Penpot-ს სურს, რომ შეუერთდეთ დისკუსიას, გააზიაროთ თქვენი გამოხმაურება და ისაუბროთ თქვენს გამოყენების შემთხვევებზე. ალტერნატიულად, კომენტარების განყოფილება არ არის ცუდი დასაწყებად!
