קורן בן עזרא
Anthropicמה זה frontend-design?
frontend-design הוא סקיל רשמי של Anthropic שמכוון את Claude לעבוד כמו מעצב ראשי בסטודיו: להבין את הנושא, לכתוב תכנית עיצוב קצרה ולבדוק אותה מול הבריף לפני שנכתבת שורת קוד. התוצאה היא דפי נחיתה, רכיבים וממשקים שנראים כמו החלטה עיצובית מכוונת, ולא כמו עוד תבנית שיצאה אוטומטית.
כשמבקשים ממודל שפה לבנות דף נחיתה בלי הנחיות, הוא חוזר שוב ושוב לאותן בחירות בטוחות: רקע קרם עם כותרת סריפית ואקסנט בגוון טרקוטה, רקע כמעט שחור עם צבע ניאון אחד, או ערימה של כרטיסים מעוגלים זהים עם אותו צל אפור. הסקיל frontend-design נכתב כדי לשבור את ההרגל הזה. הוא מתאר ל-Claude את הדפוסים שחוזרים בעיצובים שנוצרו ב-AI, ומבקש ממנו לא לבזבז עליהם את החופש שהבריף משאיר לו.
העבודה מתחלקת לשני שלבים. קודם Claude כותב תכנית עיצוב קומפקטית: ארבעה עד שישה צבעים עם שמות וקודי hex, בחירת גופנים ותפקיד לכל אחד, רעיון פריסה עם שרטוט ASCII ועקרונות מנחים. אחר כך הוא בודק את התכנית מול הבריף, מזהה חלקים שהיו יוצאים זהים גם בפרויקט אחר ומחליף אותם, ורק אז כותב את הקוד. בזמן הבנייה הוא מתבקש לבקר את עצמו, לצלם מסך כשהסביבה מאפשרת, ולהוריד קישוט מיותר אחד לפני שהוא מסיים.
גרסאות קודמות של הסקיל אסרו במפורש על הגופן Inter ועל גרדיאנטים סגולים על רקע לבן. בעדכון מספטמבר 2026 Anthropic החליפה את הרשימה הקצרה הזו בגישה רחבה יותר: היכרות עם עולם התוכן של הלקוח, טיפוגרפיה לפי The Elements of Typographic Style, תנועה מעטה ומכוונת, וטקסטים לממשק שנכתבים מנקודת המבט של המשתמש. לבעלי עסקים זה אומר דף שנראה שייך לעסק שלהם, ולא לעוד אלף אתרים שנבנו באותו שבוע עם אותו כלי.
למי זה מתאים
- בעלי עסקים שבונים דף נחיתה או אתר תדמית בעזרת Claude Code ורוצים תוצאה שלא נראית כמו תבנית
- סוכנויות ופרילנסרים שמייצרים הרבה דפים ללקוחות שונים וצריכים שכל אחד ייראה אחרת
- מפתחים שחזקים בקוד ופחות בעיצוב, ורוצים שיקול דעת עיצובי מובנה בתוך התהליך
- מי שבונה רכיבי React, דשבורדים או עמודי HTML ורוצה רף איכות קבוע בכל פעם
מה הוא עושה
תכנית עיצוב לפני קוד
Claude מתחיל ממערכת טוקנים קטנה: 4 עד 6 צבעים עם שמות וקודי hex, גופנים ותפקידיהם, פריסה עם שרטוט ASCII ועקרונות. רואים את הכיוון לפני שנכתב קוד ואפשר לתקן אותו בזול.
בדיקה עצמית מול הבריף
אחרי התכנית Claude בודק אם כל חלק בה היה יוצא זהה גם בבריף דומה אחר. חלק כזה מוחלף, והוא מסביר מה שינה ולמה, לפני שהוא ממשיך לבנייה.
רשימת הדפוסים הגנריים
הסקיל מונה חמש משפחות של עיצוב שחוזר ב-AI: קרם עם טרקוטה, שחור עם אקסנט חומצי, פריסת עיתון צפופה, ערכת כרטיסי SaaS, וקישוטי תבנית כמו תוויות באותיות גדולות וחץ אחרי כל כפתור. מותר להשתמש בהם רק כשהבריף באמת מבקש.
טיפוגרפיה עם אופי
משפחת גופנים אחת או שתיים שנבחרו בכוונה, סולם טיפוגרפי ברור, שורות של פחות מ-80 תווים וכותרות שמשמשות חלק פעיל מהעיצוב ולא רק מעבירות טקסט.
תנועה במינון נכון
רגע אנימציה אחד מתוזמר עדיף על אפקט הופעה בכל סקשן. תנועה שמגיבה לפעולה של המשתמש, כמו פתיחה או אישור, מתקבלת בברכה כשהיא מראה מה השתנה.
רף איכות שקט
כל תוצר צריך להיות רספונסיבי עד מובייל, עם פוקוס מקלדת נראה, כיבוד העדפת reduced motion ופלטה נגישה. הסקיל מבקש לעמוד ברף הזה בלי להכריז עליו.
טקסטים שעוזרים למשתמש
כפתור אומר בדיוק מה יקרה, כמו "שמירת שינויים" במקום "שליחה", הודעת שגיאה מסבירה מה לתקן, ומסך ריק מזמין לפעולה במקום להתנצל.
דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
דף נחיתה לקונדיטוריה
תבנה דף נחיתה לקונדיטוריה משפחתית בחיפה שמתמחה בעוגות שמרים. קהל היעד הוא משפחות שמזמינות לשבת. אני צריך כפתור הזמנה בוואטסאפ ושעות פתיחה. קודם תראה לי את תכנית העיצוב ורק אחרי שאאשר תכתוב קוד.מה מקבלים: תכנית עיצוב עם פלטה, גופנים ושרטוט פריסה שנגזרים מעולם האפייה, ואחרי האישור קובץ HTML רספונסיבי עם כפתור וואטסאפ ושעות פתיחה.
עמוד שירותים לקליניקה
אני פיזיותרפיסטית עם קליניקה ברמת גן. תעצב לי עמוד שירותים בעברית, מימין לשמאל, שמרגיש רגוע ומקצועי ולא נראה כמו עוד אתר רפואי גנרי. יש שלושה טיפולים ומחירון.מה מקבלים: עמוד RTL עם שפה ויזואלית משלו, היררכיה ברורה של טיפולים ומחירים, וטקסטים לכפתורים שאומרים מה יקרה בלחיצה.
רענון Hero בחנות שופיפיי
תעצב מחדש את סקשן ה-Hero בחנות השופיפיי שלי לנרות בעבודת יד. הנה הקוד הקיים של הסקשן: [להדביק כאן]. תשמור על המבנה ועל המשתנים של Liquid ותשנה רק את השפה הוויזואלית.מה מקבלים: גרסה חדשה של הסקשן עם בחירת גופנים, צבעים ורגע תנועה אחד, בלי לשבור את הלוגיקה הקיימת של התבנית.
שלושה לקוחות, שלושה כיוונים
יש לי שלושה לקוחות: מוסך בפתח תקווה, סטודיו ליוגה ומשרד רואי חשבון. תכין לכל אחד תכנית עיצוב קצרה לדף הבית, ותסביר במה הן שונות זו מזו ולמה.מה מקבלים: שלוש תכניות עיצוב נפרדות, כל אחת נשענת על עולם התוכן של העסק, עם הסבר קצר על ההבדלים ביניהן.
דשבורד מכירות פנימי
תבנה דשבורד מכירות ב-React לחנות אונליין: הכנסות יומיות, חמשת המוצרים המובילים והזמנות פתוחות. הוא צריך להיות קריא במבט אחד ולא להיראות כמו ערכת כרטיסים סטנדרטית.מה מקבלים: רכיב React עם היררכיה ויזואלית ברורה, מבנה שנגזר מהנתונים עצמם ולא מתבנית, ותמיכה במסכים קטנים.
מה צריך לפני שמתחילים
- Claude Code במחשב, או מנוי בתשלום ל-Claude.ai שבו הסקילים של Anthropic כבר זמינים
- Git מותקן, כדי שפקודת ההתקנה תוכל להוריד את המאגר
- אין צורך במפתח API ואין שירות נוסף בתשלום
- ההנחיות בסקיל כתובות באנגלית. אפשר לבקש ממנו דף בעברית, ורצוי לציין במפורש כיוון RTL וגופן שתומך בעברית
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את frontend-design.
יש 4 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה, בלי קוד בכלל.
הכי פשוט: באפליקציה של Claude, בלי שום קוד
מתאים ל-Claude במחשב ובדפדפן. לוקח דקה, ועושים את זה פעם אחת.
- מורידים את הסקילהורדת frontend-design.zip (8 KB)לא פותחים את הקובץ, מעלים אותו כמו שהוא.
- מדליקים פעם אחת את היכולתב-Claude נכנסים ל-Settings, ואז Capabilities, ומדליקים את
Code execution and file creation. - מעלים את הקובץנכנסים ל-Customize, ואז Skills, לוחצים על הפלוס, בוחרים
Create skillואזUpload a skill, ובוחרים את הקובץ שהורדתם. - זהו, עובדיםמבקשים מ-Claude את המשימה במילים רגילות, והוא משתמש בסקיל לבד כשהוא רלוונטי.
ב-Claude Code: מדביקים הודעה אחת
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
תתקין לי את הסקיל frontend-design של Anthropic מ-GitHub. תריץ את הפקודה הבאה ותגיד לי כשהיא מסתיימת: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/anthropics/skills "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/skills/frontend-design" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓"
דרך הפלאגינים של Claude Code
מקלידים בצ'אט של Claude Code את שתי הפקודות, אחת אחרי השנייה. את שתי הפקודות מקלידים בעצמכם בחלון של Claude Code, הוא לא מריץ אותן בשבילכם. אם המרקטפלייס הרשמי claude-plugins-official כבר מוגדר אצלכם, Claude Code יודיע על כך ואפשר לעבור ישר לפקודה השנייה. חלופה מתוך המאגר anthropics/skills: /plugin marketplace add anthropics/skills ואחריה /plugin install example-skills@anthropic-agent-skills, שמתקינה את frontend-design יחד עם 11 סקילים נוספים של Anthropic. בוחרים דרך אחת בלבד, כדי שלא יהיו שתי גרסאות של אותו סקיל.
/plugin marketplace add anthropics/claude-plugins-official
/plugin install frontend-design@claude-plugins-official
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
D="$(mktemp -d)" git clone --depth 1 -q https://github.com/anthropics/skills "$D/repo" mkdir -p ~/.claude/skills cp -R "$D/repo/skills/frontend-design" ~/.claude/skills/ rm -rf "$D"
אין הגדרות נוספות, מפתחות או חיבורים, ואם הסקיל לא מופיע מיד, פותחים סשן חדש של Claude Code. אחרי התקנה כפלאגין צריך להפעיל מחדש את Claude Code.
- פותחים סשן חדש של Claude Code, מקלידים / ובודקים ש-frontend-design מופיע ברשימה
- שואלים את Claude "אילו סקילים יש לך?" והשם frontend-design צריך להופיע בתשובה
- בטרמינל מריצים ls ~/.claude/skills/frontend-design ומוודאים שיש שם קובץ SKILL.md
מוחקים את התיקייה הישנה עם rm -rf ~/.claude/skills/frontend-design ומריצים שוב את פקודת ההתקנה, כך שתגיע הגרסה העדכנית מ-GitHub. מי שהתקין כפלאגין מעדכן בטרמינל עם claude plugin update frontend-design@claude-plugins-official ואחר כך מפעיל מחדש את Claude Code.
rm -rf ~/.claude/skills/frontend-design
איך משתמשים ביום יום
- ברוב המקרים לא צריך לקרוא לסקיל בשם. כשמבקשים מ-Claude לבנות דף, רכיב או ממשק, הוא טוען את frontend-design לבד לפי התיאור שלו.
- כדי להפעיל אותו בכוונה כותבים /frontend-design ואחריו את הבריף, או פשוט מוסיפים לבקשה "תשתמש בסקיל frontend-design".
- בריף טוב כולל נושא, קהל ומטרה אחת ברורה. אם אחד מהם חסר, הסקיל מורה ל-Claude להציע אותו בעצמו ולבקש אישור.
- מבקשים לראות קודם את תכנית העיצוב, מאשרים או מתקנים, ורק אחר כך נותנים לו לכתוב את הקוד.
- אם יש מיתוג קיים (צבעים, גופנים, לוגו), כותבים אותו בבריף. לפי הסקיל המילים של הבריף גוברות תמיד, גם כשהן מבקשות סגנון שמופיע ברשימת הדפוסים הגנריים.
טיפים שימושיים
- תנו לו חומרים אמיתיים: שם העסק, תפריט, מחירים ותמונות. הסקיל בונה סביב תוכן אמיתי, וטקסט placeholder מוריד את איכות התוצאה.
- בקשו תכנית אחת ואחריה "עכשיו תציע כיוון שני שונה לגמרי". ההשוואה בין שני כיוונים עוזרת להבין מה באמת מתאים לעסק.
- אם Claude יכול לצלם מסך, למשל דרך דפדפן מחובר, בקשו ממנו לבדוק את הדף בעצמו ולתקן לפני שהוא מציג לכם.
- בדף בעברית כתבו במפורש dir="rtl" ושמות של גופנים עבריים, כי ההנחיות של הסקיל לא מתייחסות לעברית באופן מיוחד.
- אם יש לכם סקיל מיתוג משלכם, שלבו ביניהם: frontend-design נותן את שיטת העבודה, והמותג שלכם נותן את הצבעים והגופנים.
תקלות נפוצות
הסקיל לא מופיע אחרי ההתקנה
הפקודה נכשלת עם git: command not found
העיצוב עדיין יוצא גנרי
נראה שיש לי שתי גרסאות של הסקיל
שאלות ותשובות
האם הסקיל חינמי?
האם הוא עדיין אוסר על הגופן Inter ועל גרדיאנט סגול?
אפשר להשתמש בו ב-Claude.ai ולא רק ב-Claude Code?
הוא מתאים לאתר בוורדפרס או בשופיפיי?
מה ההבדל בינו לבין canvas-design?
כמה אנשים משתמשים בו?
קרדיט ומקור. frontend-design נכתב על ידי Anthropic ונמצא ב-anthropics/skills ברישיון Apache-2.0. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (29.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
leonxlnx