המדריך המלא לפקודה ⁨/design⁩ של ⁨Claude Code⁩

מה הפקודה הזאת עושה

הפקודה ⁨/design⁩ היא סקיל מובנה בתוך ⁨Claude Code⁩. סקיל זה פשוט אוסף הוראות מוכן שיושב בתוך הכלי, ואתם מפעילים אותו בכתיבת לוכסן והשם שלו בתחילת ההודעה.

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

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

הלוח עצמו בנוי על ארטיפקט. ארטיפקט הוא דף אינטרנט חי ואינטראקטיבי ש⁨Claude Code⁩ מפרסם מתוך השיחה שלכם לכתובת פרטית ב⁨claude.ai⁩, והוא מתעדכן במקום בזמן שהשיחה ממשיכה.

הפקודה זמינה גם בטרמינל וגם באפליקציית שולחן העבודה של ⁨Claude Code⁩.

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

שני כלים על אותו קו: ⁨Claude Design⁩ והפקודה

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

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

הפקודה ⁨/design⁩ לוקחת את שיטת העבודה של הלוחות מ⁨Claude Design⁩ ומכניסה אותה לתוך שיחת הקוד עצמה. אתם כבר יושבים בפרויקט, אתם כבר בטרמינל, ואתם לא עוזבים אותו. זה היתרון היחיד שלה, וזה יתרון גדול.

הכלל הפשוט: אם אתם הולכים לבנות את התוצאה בקוד בעצמכם בדקות הקרובות, ⁨/design⁩ היא המקום. אם אתם צריכים ייצוא, מצגת, או מישהו אחר שיסתכל ויאשר, ⁨Claude Design⁩ בדפדפן הוא עדיין המקום המלא יותר.

יש גם גשר ביניהם. הפקודה ⁨/design-sync⁩ לוקחת את מערכת העיצוב שכתובה בקוד ⁨React⁩ של הפרויקט שלכם ומעלה אותה ל⁨Claude Design⁩, כדי שהעיצובים שייצאו משם ישתמשו ברכיבים האמיתיים שלכם. סנכרון ראשון על פרויקט גדול יכול לקחת כמה שעות.

אם אתם רוצים את החצי השני לעומק, כתבתי מדריך מלא ל⁨Claude Design⁩ שעובר על הכלי בדפדפן מקצה לקצה.

מה צריך לפני שמתחילים

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

הגרסה. צריך ⁨Claude Code⁩ בגרסה ⁨2.1.233⁩ ומעלה. אם הפקודה לא מזוהה אצלכם, זו הסיבה הראשונה לבדוק.

המסלול. הפקודה קיימת במסלולים ⁨Pro⁩, ⁨Max⁩, ⁨Team⁩ ו⁨Enterprise⁩. אין גישה בחינם. שמות המסלולים והזמינות נכונים לזמן כתיבת המדריך ויכולים להשתנות.

החיבור לחשבון. הלוח מתפרסם כארטיפקט לחשבון ⁨claude.ai⁩ שלכם, ולכן השיחה חייבת להיות מחוברת לחשבון. אם אתם מריצים ⁨Claude Code⁩ מול מפתח ⁨API⁩ או מול טוקן של שער ארגוני, הפרסום לא יעבוד.

ספק המודל. הפרסום עובד מול ה⁨API⁩ של אנתרופיק בלבד. הוא לא זמין דרך ⁨Amazon Bedrock⁩, דרך ⁨Google Cloud Agent Platform⁩ או דרך ⁨Microsoft Foundry⁩.

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

לעדכון הגרסה, אם התקנתם דרך ⁨npm⁩:

npm install -g @anthropic-ai/claude-code@latest

אפליקציית שולחן העבודה מתעדכנת לבד.

הפקודה הראשונה שלכם

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

הפקודה נכתבת בתחילת ההודעה, ואחריה מגיע התיאור:

/design כמה אפשרויות למסך ההגדרות של האפליקציה

אחרי רגע ⁨Claude⁩ יפרסם את הלוח וידפיס לכם קישור. תפתחו אותו בדפדפן.

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

איך לנסח בקשה שמחזירה גרסאות שונות באמת

זה החלק שאף אחד לא מלמד, וזה החלק שקובע אם הפקודה שווה משהו.

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

הנה מה שעובד.

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

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

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

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

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

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

דוגמא לבקשה שמנוסחת נכון:

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

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

/design שלוש גרסאות לדף נחיתה לקורס. אחת שהעיקר בה הוא הטקסט, אחת שהעיקר בה הוא תמונה גדולה בפתיחה, ואחת שטופס ההרשמה בה מופיע מיד למעלה. אל תחזרו על אותו מבנה בשלושתן

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

מה עושים בלוח

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

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

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

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

אם סגרתם את הלשונית ואיבדתם את הקישור, יש שתי דרכים לחזור אליו. הראשונה היא ⁨Ctrl+]⁩ בטרמינל, שפותח מחדש את הארטיפקט האחרון. השנייה היא הפקודה ⁨/artifacts⁩, שמציגה רשימה של כל הארטיפקטים שלכם. שם ⁨o⁩ פותח בדפדפן, ⁨c⁩ מעתיק קישור, ו⁨Enter⁩ מצרף את הארטיפקט לשיחה הנוכחית. הרשימה נקראת מהחשבון שלכם, אז היא עובדת גם בשיחה חדשה.

לגבי שיתוף: הלוח פרטי לכם עד שאתם משתפים אותו. במסלולי ⁨Pro⁩ ו⁨Max⁩, קישור ציבורי הוא דרך השיתוף היחידה. במסלולי ⁨Team⁩ ו⁨Enterprise⁩ אפשר לשתף פנימה בארגון עם אנשים מסוימים.

מהלוח לקוד שרץ

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

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

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

יש דרך אחת לשפר את התוצאה עוד לפני שהיא נוצרת, והיא לכתוב את מערכת העיצוב שלכם לקובץ ההוראות של הפרויקט, ⁨CLAUDE.md⁩. ⁨Claude⁩ מחפש מערכת עיצוב קיימת בפרויקט לפני שהוא בוחר אחת משלו, ומעדיף אותה על פני הבחירות שלו. הבקשה שאתם כותבים גוברת על שתיהן.

מוסיפים לקובץ קטע כזה:

- צבעים: ראשי #1a4d8f, משני #f59e0b, רקע #f8fafc
- טיפוגרפיה: Inter לגוף הטקסט, JetBrains Mono לקוד
- ריווח: סקאלה של 8 פיקסלים, פינות מעוגלות ב-6 פיקסלים

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

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

מה הפקודה לא עושה

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

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

היא לא מבטיחה התאמה אוטומטית לרכיבים שלכם. תתייחסו לגרסה הראשונה כטיוטה שצריך להשוות מול המוצר האמיתי.

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

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

תקלות נפוצות ומה עושים איתן

הפקודה לא מזוהה. הגרסה שלכם ישנה מדי. תעדכנו ל⁨2.1.233⁩ ומעלה ותפתחו שיחה חדשה.

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

איבדתם את הקישור ללוח. ⁨Ctrl+]⁩ מחזיר את האחרון, ⁨/artifacts⁩ מציגה את כולם.

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

התוצאה יפה אבל לא נראית כמו המוצר שלכם. אין לכם מערכת עיצוב שהמודל יכול למצוא. תכתבו אותה ב⁨CLAUDE.md⁩.

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

סיכום

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

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

תתחילו ממסך אחד קטן היום. ואם אתם רוצים גם את הצד של הדפדפן, המדריך המלא ל⁨Claude Design⁩ מחכה לכם.

אהבתם את המדריך? מוזמנים לעקוב אחריי באינסטגרם @moshe.elkrief לעוד תכנים.