עיצוב ממותג עם Claude Design · מ-Design System ועד אתר חי [מפגש 25].

רוב כלי העיצוב עם AI מייצרים לכם תוצר אחד יפה, ואז כשתבקשו עוד אחד הוא ייצא בסגנון אחר לגמרי. צבעים שונים, פונט שונה, תחושה אחרת. בשביל מותג זה אסון, כי מותג חי על עקביות. במפגש 25 של AI Master Club עברנו על Claude Design, כלי העיצוב החדש של Anthropic (אותה חברה שמאחורי Claude Code). מה שמייחד אותו הוא בדיוק הנקודה הזאת: בונים פעם אחת Design System (לוגו, צבעים, טיפוגרפיה, כפתורים, שפת דיבור), וכל מה שמייצרים אחר כך · מצגת, דף נחיתה, קרוסלה לאינסטגרם, מוקאפ אפליקציה · יוצא ממותג ואחיד, כאילו אותו מעצב ישב על הכל. במפגש ראינו את זה בפעולה: שכפלנו שפה עיצובית של מותג ענק בדיוק מטריד, בנינו דף נחיתה למאפייה מאפס, הזרמנו עשרות תמונות מאתר אמיתי עם Firecrawl, ובסוף לקחנו מוקאפ והפכנו אותו לאתר חי ברשת. הכל בשפה טבעית, בלי לכתוב שורת קוד. המדריך הזה מרכז את כל מה שעברנו, צעד אחר צעד.

מה יהיה לכם בסוף המדריך

• מה זה Claude Design, איפה נכנסים אליו, ומה ההבדל בינו לכל כלי עיצוב אחר
• איך בונים Design System · הלב של כל התהליך · ב-3 דרכים לפי רמת הניסיון
• איך מייצרים מצגת, דף נחיתה וקרוסלה לאינסטגרם שכולם באותה שפה עיצובית
• ההדגמה החיה: בניית דף נחיתה למאפייה מאפס, כולל שאלות הדיוק ש-Claude שואל
• הזרמת תמונות אמיתיות מכל אתר עם Firecrawl, וההטמעה האוטומטית שלהן בעיצוב
• איך הופכים מוקאפ לאתר חי ברשת · Claude Code, Vercel ו-Supabase
• הטיפ הכי חשוב במפגש: איך לא לשרוף את מגבלת הטוקנים תוך חצי שעה

מה זה Claude Design ואיפה נכנסים אליו

שימו לב לשלוש נקודות לפני שמתחילים: Claude Design דורש מנוי בתשלום של Claude (אין גישה בחינם), הוא עובד כרגע רק בדפדפן, ויש לו מונה טוקנים נפרד ומוגבל מהשימוש הרגיל ב-Claude. המונה הזה מתאפס כל 5 שעות. בודקים אותו בעיגול שלמעלה, Settings ואז Usage. כל המדריך בנוי סביב הנקודה הזאת: איך להוציא מהכלי את המקסימום בלי לבזבז טוקנים.

Design System · הלב של כל התהליך

3 דרכים לבנות Design System

• דרך Claude Code (מומלץ, חוסך הכי הרבה טוקנים): מבקשים מ-Claude Code לבנות את ה-Design System מתוך אתר, תמונות, לוגו ופונטים שלכם. בסיום מריצים את ה-slash command בכתיבת /Design ובחירת Design Sync, וזה מושך את כל הקבצים ומעביר אותם אוטומטית ל-Claude Design. שם תופיע מערכת חדשה מתחת לתיבת הצ'אט, ונותנים לה שם.
• ישירות בתוך Claude Design: נכנסים ל-Projects, Design Systems, Create Design System ואז Create Here. מזינים אתר (אם יש), מעלים קובץ Figma (למעצבים), לוחצים Browse וזורקים פנימה את כל מה שעיצובי שיש לכם · לוגו, תמונות, פוסטים מהרשתות. בשדה Any other notes נותנים הנחיה מילולית (למשל אני אוהב כחול, רוצה שהכל יהיה בגוונים של כחול). נותנים שם ולוחצים Generate. העיבוד לוקח כ-5 דקות.
• הגרסה לעניים, עם כל מודל שפה: נותנים ל-ChatGPT אתר או רפרנס, מבקשים שינסח Design System כקובץ PDF, ומזינים אותו ל-Claude Design. פחות מדויק מהשתיים הקודמות, אבל עובד כשאין לכם codebase.

פרומפט לבניית Design System ב-Claude Code

אני רוצה שתבנה לי Design System מלא של המותג שלי. המקורות: [הדבק כאן לינק לאתר שלכם, או גררו לוגו, פונטים, צילומי מסך ופוסטים מהרשתות]. תחלץ ותגדיר: פלטת צבעים עם קודים מדויקים, טיפוגרפיה (פונטים, גדלים, עובי, היררכיה), צורת וגודל כפתורים, שפת דיבור וטון (כולל שימוש בעברית), קריאות לפעולה, ומדיניות אמוג'י. כשתסיים, הרץ /Design ובחר Design Sync כדי להעביר את הכל ל-Claude Design.

ההדגמה הראשונה · שכפול שפה עיצובית של מותג ענק

פרומפטים ליצירת תוצרים ממותגים

מצגת: צור מצגת על [הנושא, למשל הקולקציה החדשה של 2026], על בסיס ה-Design System שצירפתי והתמונות המצורפות. דף נחיתה למוצר: צור דף נחיתה שמסביר על המוצר הזה [צרפו תמונות מוצר], על בסיס ה-Design System. קרוסלה לאינסטגרם: צור לי קרוסלה לאינסטגרם על [הנושא], על בסיס ה-Design System. סדרה של שקופיות באותה שפה עיצובית.

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

עריכה ידנית · הסוד לחיסכון בטוקנים

ההדגמה השנייה · דף נחיתה למאפייה מאפס

פרומפט דף נחיתה מאפס (עם שאלות דיוק)

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

הזרמת תמונות אמיתיות עם Firecrawl

מועדון AI Master פותח לכם את הדלת: מפגש חי כל שבוע, הקלטות וקהילה. ₪47 לחודש, ביטול בכל רגע.

פרומפטים של Firecrawl + שיבוץ תמונות

הורדת התמונות (ב-Claude Code): תשתמש ב-Firecrawl כדי להוריד מהאתר הזה את כל התמונות: [הדבק לינק לאתר]. שמור אותן בתת-תיקייה בפרויקט. שיבוץ בעיצוב (ב-Claude Design, אחרי Browse Files): שים את התמונות הרלוונטיות באתר, בכל מקום שחסר בו תמונה. בחר לכל מקום את התמונה המתאימה ביותר.

אנימציה, Tweaks ואפקטים

מהמוקאפ לאתר חי · Claude Code, Vercel ו-Supabase

פרומפט בנייה ופריסה (ל-Claude Code / Codex)

I want you to build this website from the attached HTML / project files. Match the design exactly. First run it locally so I can review it. Once I approve, upload it to Vercel and give me the live link. If the site needs to store data (emails, reviews), connect Supabase as the database.

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

כל הכלים מהמפגש

הבית של Claude Design ו-Claude Code. דורש מנוי בתשלום. הפאנל Design קיים כרגע רק בדפדפן

סוכן שזוחל על כל אתר ומוריד תמונות ומלל. מתחבר ל-Claude כ-Skill וחוסך טוקנים. יש מסלול חינמי

פריסת האתר לרשת ולינק לשיתוף. Claude Code מתחבר אליו בקליק. מסלול חינמי נדיב

מסד נתונים לאתר · שמירת מיילים, טפסים וחוות דעת. מתחבר ל-Claude Code. מסלול חינמי נדיב

הכלי של גוגל לעיצוב מוקאפים, שהשווינו אליו במפגש. תוצאות גנריות יותר מ-Claude Design

המדריך המקיף לכל היכולות של Claude Design, מעבר למה שכוסה במפגש הזה

שאלות שעלו במפגש

לא. צריך מנוי בתשלום של Claude. גם הטוקנים שלו נפרדים ומוגבלים מהשימוש הרגיל, והם מתאפסים כל 5 שעות. לעומת זאת Vercel ו-Supabase, שצריך כדי להעלות אתר חי, מציעים מסלול חינמי נדיב.

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

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

לגמרי. לוחצים Edit וכל הטקסט הופך ללחיץ לעריכה ידנית. אפשר גם לייצא ל-PDF, וידאו, PowerPoint או HTML. ההמלצה היא לערוך ידנית בתוך Claude Design במקום לבקש כל שינוי קטן מהסוכן, כי עריכה ידנית חוסכת המון טוקנים.

מייצאים את העיצוב כ-HTML או ZIP, לוקחים ל-Claude Code או Codex, והוא בונה את הקוד ומעלה אותו ל-Vercel שנותן לינק חי. אם צריך לשמור מידע מהאתר, מחברים Supabase כמסד נתונים. אפשר גם לחבר דומיין משלכם.

אפשר, יש קונקטור ו-MCP לוורדפרס. אבל ההעדפה במפגש הייתה לבנות ב-Claude ולפרוס ל-Vercel, כי העבודה מול וורדפרס מסורבלת יותר מול הזרימה החלקה של Claude Code ו-Vercel.

מ-Firecrawl עצמם. הם מספקים snippet קוד שמתקינים פעם אחת ב-Claude Code, ומאז ה-Skill זמין בכל סשן. יש להם גם מסלול חינמי שמספיק לרוב הצרכים.

כן, Claude Design הוא כלי קולאברטיבי. אם לכל אחד בצוות יש חשבון Anthropic, כולם יכולים לעבוד על אותו פרויקט. אפשר להגדיר Design System ברירת מחדל לארגון, וגם Design System נפרד לכל לקוח.

ומה במפגש הבא

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

שאלות נפוצות

Claude Design בחינם?

לא. צריך מנוי בתשלום של Claude. גם הטוקנים שלו נפרדים ומוגבלים מהשימוש הרגיל, והם מתאפסים כל 5 שעות. לעומת זאת Vercel ו-Supabase, שצריך כדי להעלות אתר חי, מציעים מסלול חינמי נדיב.

מה זה Design System וזה כמו Brand Book?

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

איך מוציאים Design System מאתר שלא שלי, כמו מותג גדול?