קלוד קוד מעצב
כמו מעצב.

• לתת לו לעצב לבד

  יוצא עוד אתר גנרי. בלי עיצוב לעבוד ממנו, הוא בוחר כל פעם את אותן הבחירות, ולכן כל האתרים שנבנו ב-AI נראים אותו דבר.

• ללכת למעצב

  יוצא יפה, אבל זה לוקח שבועות. וכל שינוי קטן חוזר לסבב של עוד כמה ימים.

• לכתוב פרומפט ארוך יותר

  הוא יקשיב לכל מילה, ועדיין יעצב לפי הטעם שלו. מילים לא מחליפות עיצוב שאפשר להסתכל עליו ולתקן.

הסוד הוא לא הפרומפט. הסוד הוא פיגמה: קודם עיצוב שאתם רואים ומאשרים, ורק אחר כך קוד שבנוי ממנו אחד לאחד.

• Claude Code

  הסוכן שעושה את כל העבודה: כותב את הבריף, מעצב בפיגמה, ובונה את הקוד.

  עלות: צריך מנוי Claude בתשלום (Pro ומעלה), או חשבון API.

  • התקנה
  claude.com/claude-codeל-Claude Code ←

• Figma

  המקום שבו העיצוב נבנה, ושבו אתם רואים אותו ומתקנים לפני שיש שורת קוד אחת.

  עלות: תוכנית Professional עם מושב Full. ההסבר המלא ממש כאן למטה.

  • ה-MCP של פיגמה
  • ציור בקובץ (write to canvas)
  www.figma.com/pricingלמחירים של פיגמה ←

• Dribbble

  משם בוחרים רפרנסים: עיצובים אמיתיים של מעצבים, שהוא מעצב לפיהם.

  עלות: חינם. מספיק לחפש ולשמור.

  dribbble.comל-Dribbble ←

• מושב Full אחד בתוכנית Professional מספיק. לא צריך Organization ולא Enterprise.
• המכסה נקבעת לפי הצוות שהקובץ יושב בו, לא לפי החשבון שלכם. שמים את קובץ העיצוב בצוות שבתשלום. קובץ שנשאר בטיוטות של צוות חינמי מקבל את המכסה החינמית.
• אצלנו, כשעבדנו על התוכנית החינמית, ה-MCP נחסם מהר, והיינו צריכים לקצוב כל קריאה.
• חלק מהכלים שכותבים לקובץ לא נספרים במכסה של ה-MCP. מה שנספר הוא כל קריאה שקוראת מפיגמה: צילום של frame, המידות שלו, הקוד שלו.
• הציור בקובץ עדיין בבטא, וחינם בזמן הבטא. פיגמה כתבה שבהמשך הוא יהיה בתשלום לפי שימוש.

המספרים של פיגמה, כמו שהם מופיעים אצלה ב-22.10.2026. פיגמה משנה אותם מדי פעם: מחירים · מכסות ה-MCP · מכסות ה-API · ציור בקובץ

1. 1שלב 1 · חיבור

   מחברים את Claude Code לפיגמה, גם ב-MCP וגם ב-API

   ה-MCP הוא הערוץ שבו הוא רואה את העיצוב ומצייר בו: צילום של כל frame, המידות, הצבעים, והכלים לבנות בתוך הקובץ. ה-API נותן לו גישה ישירה לקובץ עצמו: לקרוא את כל העץ ולייצא תמונות, במכסה נפרדת מזו של ה-MCP.

   • MCP: מריצים את הפקודה בטרמינל, נכנסים ל-Claude Code, כותבים /mcp, בוחרים figma ומאשרים בדפדפן.
   • API: בפיגמה נכנסים ל-Settings, ואז Security, ושם Personal access tokens. יוצרים טוקן עם הרשאת קריאה לקבצים.
   • את הטוקן שומרים בקובץ .env בתיקיית הפרויקט, ולא מדביקים אותו בצ׳אט.

   MCP · מריצים בטרמינל

   claude mcp add --transport http figma https://mcp.figma.com/mcpהעתקה

   API · שורה בקובץ .envהעתקה

   FIGMA_TOKEN=[הטוקן שיצרתם]

   פרומפט · בודקים שהחיבור עובדהעתקה

   בדוק שאתה מחובר לפיגמה בשתי הדרכים:
   1. דרך ה-MCP: תגיד לי מי המשתמש המחובר ובאיזו תוכנית הוא.
   2. דרך ה-API: הטוקן נמצא בקובץ .env תחת FIGMA_TOKEN. תקרא את השם של הקובץ הזה: [קישור לקובץ פיגמה].
   אל תדפיס את הטוקן ואל תעתיק אותו לשום קובץ אחר.

2. 2שלב 2 · בריף

   נותנים לו בריף. אבל לא נותנים לו לעצב ישר

   כאן רוב האנשים נופלים: הם כותבים "תעצב לי אתר" ומקבלים את הגנרי. קודם מסדרים איתו מה בונים, בשביל מי, ומה הפעולה האחת שהעמוד צריך להביא. הוא שואל, אתם עונים, ויוצא בריף של עמוד אחד שמאשרים.

   פרומפט · בריףהעתקה

   אני בונה [מה בונים: דף נחיתה, אתר, מסך באפליקציה] בשביל [העסק או המוצר].
   הקהל: [מי נכנס לעמוד].
   הפעולה האחת שהעמוד צריך להביא: [השארת פרטים, קנייה, הרשמה].
   
   אל תעצב עדיין, ואל תכתוב קוד.
   קודם תשאל אותי את כל מה שחסר לך כדי לכתוב בריף טוב. אחר כך תכתוב בריף של עמוד אחד: המטרה, הקהל, המסר, הסקשנים לפי הסדר, והטון. תעצור ותחכה לאישור שלי.

3. 3שלב 3 · רפרנסים

   בוחרים איתו רפרנסים בדריבל, והוא מעצב לפיהם בפיגמה

   מחפשים בדריבל עיצובים שאתם אוהבים, בתחום שלכם או בסגנון שלכם, ושומרים שניים או שלושה. הוא מפרק כל אחד: צבע, טיפוגרפיה, רווחים, עומק. אתם מחליטים מה לוקחים מכל אחד, ורק אז הוא מעצב, בתוך קובץ הפיגמה.

   • הכי בטוח: צילום מסך של כל רפרנס, וגוררים אותו לתוך Claude Code. דריבל לא תמיד נותן לסוכן להיכנס לקישור.
   • בפעם הראשונה זה עוד ייראה AI. מתקנים בפיגמה, בהערות או במילים, וכל סבב מתקרב.
   • רוצים קיצור דרך? הסקילים של Neo Soft ו-Bunny למטה הם שני סגנונות מוכנים, וכל אחד מהם נלמד מעשרות עיצובים אמיתיים של מעצב אחד.

   פרומפט · רפרנסים ועיצוב בפיגמההעתקה

   צירפתי [מספר] רפרנסים מדריבל.
   תפרק כל אחד: הצבעים, הטיפוגרפיה, הרווחים, איך נבנה העומק, ומה ה"רגע" של המסך.
   תגיד לי מה אתה מציע לקחת מכל אחד בשביל הבריף שלנו, ותעצור.
   
   אחרי שאני מאשר: תעצב את העמוד בקובץ הזה [קישור לקובץ פיגמה], בעמוד חדש, frame של 1440 לדסקטופ ו-390 למובייל. בעברית, מימין לשמאל מהבסיס, לא הפוך בסוף. בלי אימוג׳י, ותוכן אמיתי ולא Lorem ipsum.
   בסוף תצלם את ה-frames ותראה לי.

4. 4שלב 4 · קוד

   ואז הוא בונה את זה בקוד, אחד לאחד

   רק כשהעיצוב בפיגמה מאושר, מבקשים ממנו לבנות. הוא מושך מפיגמה את המידות, הצבעים והטקסטים, במקום לנחש אותם מתמונה. בסוף הוא מצלם את מה שבנה ומשווה לפיגמה, עד שאין הבדל.

   • קישור ל-frame: קליק ימני עליו בפיגמה, Copy link to selection.

   פרומפט · מפיגמה לקודהעתקה

   תבנה בקוד את ה-frame הזה, אחד לאחד: [קישור ל-frame].
   תמשוך מפיגמה את המידות, הצבעים, הפונטים והטקסטים, ואל תנחש מהצילום.
   כשסיימת: תפתח את העמוד בדפדפן ברוחב של ה-frame, תצלם, ותשווה לצילום של ה-frame. כל הבדל, תתקן ותצלם שוב, עד שאין הבדל.

• Neo Soft UI

  נלמד מ-@siren.uix

  גוון אחד, סולם של גוונים בהירים ממנו, עומק רך בלי צללים כבדים, ובר צף מזכוכית. נקי, מסודר, מרגיש כמו מוצר גדול.

  • גוון מותג אחד
  • עומק משכבות, לא מצללים
  • בר תחתון צף
  • רגע גיבור אחד במסך
  • גריד של 4 עמודות

  עיצובים שלי עם הסקיל

  • 
  • 

  הכי מתאים ל

  מערכות, דשבורדים ואפליקציות עם הרבה מידע.

  מפעילים אותו כשכותבים

  neo softתעצב מחדש ברמה של siren

  הורדת הסקיל

  neosoft-ui.zip · SKILL.md

• Bunny UI

  נלמד מ-@bunny.design10

  כל מסך נבנה סביב צילום אחד אמיתי, וצבע ההדגשה נלקח מתוך הצילום. שכבות לבנות שקופות, כותרת בשני משקלים, ובר תחתון בצורת קפסולה.

  • צילום במרכז
  • צבע הדגשה מתוך התמונה
  • כותרת אפורה ואז מודגשת
  • קפסולה צפה עם כפתור עגול

  הכי מתאים ל

  דפי נחיתה, אפליקציות צרכניות ומותגים עם צילום חזק.

  מפעילים אותו כשכותבים

  bunnyבסגנון של באני

  הורדת הסקיל

  bunny-ui.zip · SKILL.md

הורדתי את הקובץ [שם הקובץ].zip לתיקיית ההורדות. תפתח אותו לתוך תיקיית הסקילים שלי: ~/.claude/skills (ב-Windows זו התיקייה .claude\skills בתוך תיקיית המשתמש). אחר כך תבדוק שיש שם תיקייה עם SKILL.md בפנים, ותגיד לי שצריך להתחיל סשן חדש.