מתנה מהרילס · יום 20 מתוך 30

Claude לא יודע לעצב, עד שמלמדים אותו

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

לסקילים לפרומפט של הטעם

אין מה להוריד מכאן. הסקילים הם של היוצרים שלהם, ואני מקשר אליהם ולא מפיץ אותם.

כלים של צד שלישי, על אחריות המשתמש

ורוצים ללמוד לבנות את הסקילים של עצמכם? ככה זה נראה בליווי

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

הוא לא חסר כישרון, הוא חסר דעה

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

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

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

איך בונים סקיל שמכיל את הטעם של העסק שלי?

הסקילים

חמישה, וכולם של אנשים אחרים

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

  • Impeccableשל pbakaus

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

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

    Apache-2.0למקור המקורי

  • UI UX Pro Maxשל nextlevelbuilder

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

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

    MITלמקור המקורי

  • Taste Skillשל Leonxlnx

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

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

    MITלמקור המקורי

  • Skills for Designers and Engineersשל emilkowalski

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

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

    MITלמקור המקורי

  • frontend-designשל Anthropic

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

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

    שימו לב להבדל בשמות, כי הוא מבלבל: Claude Design הוא מוצר נפרד של Anthropic שבו מתארים ויזואל והוא בונה גרסה ראשונה, ולא סקיל שמתקינים בקלוד קוד. הסקיל נקרא frontend-design, וזה מה שרץ אצלכם במחשב.

    רישיון במאגרלמקור המקורי

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

איזה מהם מתאים דווקא לי?

הדבר השני, ואולי החשוב

לתת לקלוד עיניים

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

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

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

מה צריך

לפני שמתקינים משהו של זר

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

עוד אין לכם Claude? אפשר להירשם דרך הקישור שלי.

להרשמה ל-Claude

קישור אפיליאציה.

מה צריך, ומה בעצם נכנס אליכם למחשב
  • Claude Codeהסקילים רצים בתוכו. המנוי נרכש בנפרד מ-Anthropic ולא דרכי.
  • Node, לחלק מהדרכיםכמה מההתקנות הן פקודה שמורידה חבילה, ולכן צריך סביבת Node מותקנת. ההתקנות שנעשות בתוך קלוד קוד עצמו לא דורשות כלום.
  • לא קובץ אחד, אלא תוסףבניגוד לסקיל שהוא קובץ טקסט בודד, חלק מאלה מותקנים כתוסף שלם או דרך פקודת התקנה שמביאה איתה יותר מקובץ. זה עובד טוב, וזה גם אומר שיש פה יותר מה לבדוק.
  • רישיון, לכל אחד שלוהרישיון של כל סקיל כתוב בכרטיס שלו למעלה, כמו שהוא מופיע במאגר. אני לא מפיץ אותם ואין ביני לבין היוצרים שום קשר.

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

ההתקנה

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

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

  1. Impeccable

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

    Terminal
    # מתוך תיקיית הפרויקט
      npx impeccable install
      # ואז, בתוך שיחה בקלוד קוד:
      # /impeccable init
  2. UI UX Pro Max

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

    Terminal
    /plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
      /plugin install ui-ux-pro-max@ui-ux-pro-max-skill
  3. Taste Skill

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

    Terminal
    /plugin marketplace add Leonxlnx/taste-skill
      /plugin install taste-skill@taste-skill
  4. Skills for Designers and Engineers

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

    Terminal
    npx skills@latest add emilkowalski/skills
  5. frontend-design של Anthropic

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

    Terminal
    /plugin marketplace add anthropics/skills
      /plugin install example-skills@anthropic-agent-skills
  6. Playwright, בתור שרת MCP

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

    Terminal
    claude mcp add playwright npx @playwright/mcp@latest

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

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

והדבר שבאמת שינה אצלי

הסקיל הטוב ביותר לעיצוב הוא זה שאתם כתבתם

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

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

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

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

הפרומפט שבונה לכם קובץ טעם

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

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

ובסוף, זה המסר של הסרטון: AI לא מחליף מעצבי אתרים. הוא מחליף את מי שלא לימד אותו לעצב.

שאלות

שאלות שחוזרות על עצמן

הסקילים האלה שלך?

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

בטוח להתקין סקיל של מישהו אחר?

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

צריך את כולם?

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

Playwright זה סקיל?

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

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

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

אם יש סקילים מוכנים, למה בכלל לבנות קובץ טעם משלי?

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

השאלה שלי לא מופיעה כאן

ומה הלאה

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

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

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

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

מה זה הליווי

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