מאמר זה הוא בחסות Penpot תארו לעצמכם שקובץ ה-Penpot שלכם מכיל ערכת אייקונים מלאה בנוסף לעיצוב עצמו, שמשתמש בחלק מהסמלים הללו אך לא בכל אלה. אם היית מבקש מבינה מלאכותית כמו קלוד או ג'מיני לייצא רק את הסמלים שנמצאים בשימוש, הוא לא היה יכול לעשות זאת. זה לא מסוגל לקיים אינטראקציה עם קבצי Penpot. עם זאת, שרת Penpot MCP יכול. הוא יכול לבצע מספר פעולות שנבחר תחת חוקים והרשאות מוגדרים, במיוחד מכיוון של-Penpot יש ממשק API נרחב ועוד יותר בגלל שהוא קוד פתוח. התפקיד של ה-AI הוא פשוט להבין את כוונתך, לבחור את הפעולה הנכונה לשרת ה-MCP לביצוע (ייצוא במקרה זה), ולהעביר את כל הפרמטרים (כלומר, אייקונים שנמצאים בשימוש). לאחר מכן שרת ה-MCP מתרגם זאת לבקשת API מובנית ומבצע אותה. זה עשוי לעזור לחשוב על AI כשרת במסעדה שמקבלת את ההזמנה שלך, על שרת ה-MCP כתפריט וגם על שף, ועל בקשת ה-API כעל (בתקווה) פשטידת פיצה חמה על צלחת חמה. למה דווקא שרתי MCP? ובכן, Penpot אינו מסוגל להבין את כוונתך מכיוון שהוא אינו LLM, ואינו מאפשר ל-LLM של צד שלישי לקיים אינטראקציה עם קבצי ה-Penpot שלך למען האבטחה והפרטיות של נתוני ה-Penpot שלך. למרות ששרתי Penpot MCP אכן פועלים כגשר מאובטח, מתרגמים את כוונת הבינה המלאכותית לבקשות API תוך שימוש בקבצים ובנתונים של Penpot כהקשר. מה שאפילו טוב יותר הוא שבגלל ש-Penpot נוקט בגישת עיצוב מבוטא כקוד, ניתן ליצור, לערוך ולנתח עיצובים באופן פרוגרמטי ברמה פרטנית. זה יותר קונטקסטואלי, יותר ספציפי, ולכן חזק יותר בהשוואה למה שמציעים שרתי MCP אחרים, והרבה יותר מתחשב מזרימת העבודה המשנה 'תאר → צור' AI שאני לא חושב שמישהו באמת רוצה. ספר ה-AI הלבן של Penpot מתאר זאת כגישה הרעה ואת גישת 'המר לקוד' כגישה המכוערת, בעוד שרתי MCP מעודנים יותר וניתנים להתאמה. תכונות ופרטים טכניים לפני שנעבור למקרי שימוש, הנה כמה תכונות ופרטים טכניים שמסבירים עוד יותר כיצד שרתי MCP של Penpot עובדים:
עומד בתקני MCP; משתלב עם Penpot API לנתוני עיצוב בזמן אמת; כולל Python SDK, REST API, מערכת פלאגין וכלי CLI; עובד עם כל עוזר AI התומך ב-MCP (קלוד בקוד VS, קלוד בסמן, קלוד שולחן עבודה וכו'); תומך בשיתוף הקשר עיצובי עם מודלים של AI, ומאפשר להם לראות ולהבין רכיבים; מקל על תקשורת עם Penpot באמצעות שפה טבעית.
מה, אם כן, שרתי MCP יכולים לאפשר לנו לעשות ב-Penpot, ומה כבר השיגו ניסויים קיימים? בואו נסתכל. מקרי שימוש בשרת Penpot MCP אם אתה רק רוצה לדלג למה ששרתי Penpot MCP יכולים לעשות, ל-Penpot יש כמה הדגמות של MCP שמור ב-Google Drive ששווה יותר לצפות בהן. מנכ"ל Penpot Pablo Ruiz-Múzquiz הזכיר שהסרטונים 03, 04, 06, 08 ו-12 הם המועדפים עליהם. דרך מהירה עוד יותר לסכם שרתי MCP היא לצפות בחשיפה מ-Penpot Fest 2025. אחרת, בואו נסתכל על כמה מהדוגמאות היותר מעודנות ש-Penpot הדגימו בתצוגה הפומבית שלהם. עיצוב לקוד ובחזרה (ועוד) בהתבסס על מה שאמרתי קודם על האופן שבו עיצובים של Penpot באים לידי ביטוי כקוד, זה אומר שניתן להשתמש בשרתי MCP כדי להמיר עיצוב לקוד באמצעות AI, אבל גם קוד לעיצוב, עיצוב לתיעוד, תיעוד לעיצוב רכיבי מערכת, עיצוב לקוד שוב על סמך מערכת העיצוב האמורה, ולאחר מכן רכיבים חדשים לחלוטין המבוססים על מערכת העיצוב האמורה. זה נשמע סוריאליסטי, אבל ההדגמה שלהלן מציגה את יכולת ההמרה הזו, והיא לא מהדרכה מעורפלת אלא מבחירות עיצוב קודמות, ללא קשר לאופן שבו הן באו לידי ביטוי (עיצוב, קוד או תיעוד). אין הפתעות - אלו פשוט ההחלטות שהייתם מקבלים בכל מקרה על סמך החלטות קודמות, המבוצעות במהירות. בהדגמה, חואן דה לה קרוז גרסיה, מעצב ב-Penpot, ממיר ללא חיכוך כמה רכיבים פשוטים לתיעוד, רכיבי מערכת עיצוב, קוד, רכיבים חדשים ואפילו פרויקט Storybook שלם כמו חתיכת Play-Doh: עיצוב לקוד, עיצוב/אימות קוד ופעולות פשוטות בהדגמה דומה להלן, דומיניק ג'יין, מייסד שותף ב-Oraios AI, יוצר אפליקציית אינטרנט של Node.js המבוססת על העיצוב לפני עדכון סגנונות החזית, שומר שמות ומזהים בזיכרון כדי להבטיח תרגום חלק של עיצוב לקוד לפני בדיקת עקביות.הערה ליד הצורה שנבחרה ב- Penpot, ולאחר מכן מחליף שרבוט ב- Penpot ברכיב מותאם. יש כאן הרבה דברים, אבל אתה יכול לראות בדיוק מה דומיניק מקליד בקלוד שולחן העבודה כמו גם את התגובות של קלוד, וזה חזק מאוד: אגב, ההדגמה הקודמת השתמשה ב-Claude ב-VS Code, אז אני צריך לשים לב ששרתי Penpot MCP הם LLM-agnostic. ערימת הטכנולוגיה שלך תלויה לחלוטין בך. IvanTheGeek הצליח להגדיר את שרת ה-MCP שלהם עם JetBrains Rider IDE ו-June AI. מקרי שימוש נוספים תרגם לוח של Penpot ל-HTML סמנטי מוכן לייצור ו-CSS מודולרי תוך מינוף כל אסימוני עיצוב של Penpot (זכור שעיצובי Penpot כבר באים לידי ביטוי כקוד, אז זה לא ירייה בחושך): צור אב טיפוס אינטרנט אינטראקטיבי מבלי לשנות את ה-HTML הקיים: כפי שהוצג קודם לכן, המר שרבוט לרכיב, תוך מינוף עיצוב ו/או רכיבי מערכת עיצוב קיימים: צור תיעוד מערכת עיצוב מקובץ Penpot: והנה עוד כמה מקרי שימוש מ-Penpot והקהילה:
יצוא מתקדם, חפש אלמנטים עיצוביים בשפה טבעית, משוך נתונים מממשקי API חיצוניים באמצעות שפה טבעית, חבר בקלות את Penpot לכלים חיצוניים אחרים, שמירת משימות שחוזרות על עצמן בזיכרון וביצוען, בדיקת רגרסיה חזותית, עקביות עיצוב ובדיקת יתירות, ניתוח ומשוב של נגישות ושימושיות, בדיקת תאימות מערכת לתכנון, בדיקת תאימות להנחיות (מותג, תוכן וכו'), עקוב אחר אימוץ ושימוש עם ניתוחי עיצוב, שמור באופן אוטומטי את התיעוד מסונכרן עם העיצוב, עיצוב ארגון קבצים (למשל, תיוג/סיווג).
בעיקרו של דבר, שרתי Penpot MCP מובילים את הדרך למספר אינסופי של זרימות עבודה הודות ליעילות ולקלות של לקוח LLM/LLM שבחרת, אך מבלי לחשוף את הנתונים שלך אליו. בשביל מה הייתם משתמשים בשרתי MCP? שרתי Penpot MCP אפילו לא בשלב הבטא, אבל זה ניסוי פעיל שאתה יכול להיות חלק ממנו. משתמשי Penpot כבר החלו לחקור מקרי שימוש עבור שרתי MCP, אך Penpot רוצה לראות עוד. כדי להבטיח שהדור הבא של כלי העיצוב יענה על הצרכים של מעצבים, מפתחים וצוותי מוצר באופן כללי, עליהם להיבנות באופן קולקטיבי ובשיתוף פעולה, במיוחד כשמדובר בבינה מלאכותית. הערה: Penpot מחפשת בודקי בטא להוטים לחקור, להתנסות ולעזור לשכלל את שרת ה-MCP של Penpot. כדי להצטרף, כתוב ל-support@penpot.app עם שורת הנושא "מתנדב למבחן בטא של MCP." האם יש משהו שאתה מרגיש ששרתי Penpot MCP יכולים לעשות שהכלים הנוכחיים לא מסוגלים לעשות מספיק טוב, מספיק מהר או לא מסוגלים לעשות בכלל? אתה יכול ללמוד איך להגדיר שרת Penpot MCP ממש כאן ולהתחיל להתעסק היום, או אם המוח שלך מזמזם מרעיונות כבר, Penpot רוצה שתצטרף לדיון, שתף את המשוב שלך ותדבר על מקרי השימוש שלך. לחלופין, גם קטע התגובות ממש למטה הוא לא מקום רע להתחיל בו!
