בניית אתרים עם Claude Code: האם שלושה סקילים ושני שרתי MCP יכולים להחליף מעצב אתרים?

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

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

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

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

מה זה Claude Code ואיך הוא בונה אתרים?

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

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

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

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

Claude Code יכול לייצר את הקוד ואת מבנה העמודים, ובהתאם לסביבת העבודה גם להריץ ולבדוק את התוצאה.

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

למה אתרים שנוצרים באמצעות AI נראים לעיתים כל כך דומים?

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

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

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

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

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

מהם Skills וכיצד הם משפרים את התוצאה?

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

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

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

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

1. Emil Kowalski Design – הפרטים הקטנים שעושים את ההבדל

הסקיל emil-design-eng מבוסס על גישת ה-Design Engineering של Emil Kowalski, המדגישה את הפרטים שהופכים ממשק תקין לממשק שמרגיש איכותי.

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

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

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

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

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

קישור לסקיל: Emil Kowalski Design ב-GitHub

איך מתקינים את Emil Kowalski Design?

ניתן להתקין את הסקיל באמצעות הפקודה הבאה בסביבת העבודה המתאימה:

npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng

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

2. Impeccable – להיפטר מהמראה הגנרי של AI

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

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

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

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

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

פקודות שימושיות של Impeccable

• /impeccable polish – מעבר ליטוש סופי ושיפור פרטים בעיצוב הקיים.
• /impeccable distill – זיקוק הממשק לעיקר והסרת עומס מיותר.
• /impeccable clarify – איתור מה שמרגיש לא מדויק בממשק.

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

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

קישור לכלי: Impeccable – האתר הרשמי

איך מתקינים את Impeccable?

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

npx impeccable install

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

/impeccable init

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

3. Taste Skill – לתת לבינה המלאכותית כיוון עיצובי

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

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

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

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

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

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

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

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

קישור לסקיל: Taste Skill ב-GitHub

איך מתקינים את Taste Skill?

פקודת ההתקנה של הסקיל הראשי היא:

npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend

יש לבדוק את שם הסקיל ואת הפקודה מול הוראות המאגר לפני התקנה. הפרויקט כולל גם סקילים נוספים לסגנונות מוגדרים, כגון minimalist-skill, brutalist-skill ו-redesign-skill.

רוצים אתר ברמה הזאת, בלי ללמוד את כל הכלים?

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

בואו נדבר על האתר שלכם

מה זה MCP ולמה הוא חשוב?

MCP, ראשי תיבות של Model Context Protocol, הוא פרוטוקול לחיבור סוכני בינה מלאכותית לכלים ולמקורות מידע. סקיל נותן לסוכן הנחיות עבודה; שרת MCP מאפשר לו להשתמש בכלי חיצוני, בהתאם להרשאות. שני שרתי ה-MCP המוצגים בסרטון הם Figma ו-Playwright.

4. Figma MCP – החיבור בין עיצוב לפיתוח

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

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

קישור: תיעוד Figma MCP.

איך מחברים Figma MCP?

claude mcp add --transport http figma https://mcp.figma.com/mcp

לאחר מכן מריצים ב-Claude Code את הפקודה /mcp כדי לבדוק את מצב החיבור ולהשלים אימות לפי הצורך. יש לוודא שהתיעוד הרשמי עדיין תומך בדרך החיבור הזאת.

5. Playwright MCP – לבדוק מה באמת נבנה

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

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

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

קישור: Playwright MCP ב-GitHub.

איך מתקינים Playwright MCP?

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

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

כל פקודות ההתקנה במקום אחד

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

Emil Kowalski Design

npx skills add https://github.com/emilkowalski/skills --skill emil-design-eng

Impeccable

npx impeccable install

/impeccable init

Taste Skill

npx skills add https://github.com/Leonxlnx/taste-skill --skill design-taste-frontend

Figma MCP

claude mcp add --transport http figma https://mcp.figma.com/mcp

Playwright MCP

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

לבדיקת חיבורי MCP בתוך Claude Code: /mcp.

איך נראה תהליך בניית אתר עם Claude Code?

שלב ראשון: אפיון עסקי

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

שלב שני: שפה עיצובית

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

שלב שלישי: בנייה ראשונית

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

שלב רביעי: בדיקה ושיפור

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

שלב חמישי: הכנה לפרסום

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

אתר יפה הוא לא בהכרח אתר שמביא לקוחות

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

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

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

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

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

רוצים אתר שגם נראה מצוין וגם מביא פניות?

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

בואו נדבר על האתר שלכם

האם AI יחליף מעצבי ומפתחי אתרים?

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

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

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

האם האתרים שמוצגים בסרטון באמת נבנו עם Claude?

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

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

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

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

גם חיבורי MCP דורשים בדיקת הרשאות. מומלץ לעבוד עם גיבוי, להגביל גישה למידע רגיש ולא לחשוף סיסמאות, מפתחות API או מידע של לקוחות ללא צורך.

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

שאלות נפוצות

האם אפשר לבנות אתר עם Claude Code בלי לדעת לתכנת?

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

האם חייבים להתקין את שלושת הסקילים?

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

האם Figma MCP יוצר עיצוב אוטומטית?

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

מה היתרון של Playwright MCP?

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

האם אתר שנבנה באמצעות AI מתאים ל-SEO?

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

האם האתר מתאים לקמפיינים ממומנים?

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

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

שלושת הסקילים ושני שרתי ה-MCP מדגימים כיצד אפשר להרחיב את היכולות של Claude Code: לשפר הנחיות עיצוב, לעבוד עם מידע מ-Figma ולבדוק את האתר בדפדפן באמצעות Playwright.

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

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

אתר לא צריך רק להיראות טוב. הוא צריך לעבוד עבור העסק.

בניית אתרים ושיווק דיגיטלי עם קובי חי דיגיטל

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

למידע נוסף וליצירת קשר: קובי חי דיגיטל.