AI לעסקים
בניית אתרים עם Claude Desktop: מדריך פשוט בלי טרמינל
10 min de lectureAmichai Shekel
מדריך מצולם לבניית אתר דרך Claude Desktop: הורדה, פתיחת Code, סקילים לעיצוב, חיבור Figma ובדיקה בדפדפן המובנה. הכול דרך הממשק והוראות בעברית.
רוצים לבנות אתר עם Claude Desktop בלי להקליד פקודות? במדריך הזה מתחילים מהאפליקציה: בוחרים תיקייה, נותנים לקלוד הוראות בעברית ומוסיפים כלים לעיצוב. קלוד מטפל בקבצים ובפעולות הטכניות, ואתם בודקים את התוצאה דרך הממשק.
המסלול מיועד ללשונית Code בתוך Claude Desktop. אין כאן פתיחת טרמינל, העתקת קוד התקנה או עריכת קובצי הגדרות ידנית. קלוד עשוי לבצע פעולות טכניות ברקע ולבקש אישור בתוך האפליקציה. לא צריך להפעיל אותן בעצמכם.
שלב 1 · מורידים את האפליקציה למחשב
- פתחו את הקישור. באזור Desktop מצאו את מערכת ההפעלה שלכם.
- לחצו Download ליד macOS במק, או ליד Windows במחשב Windows. Windows (arm 64) מיועד רק למחשבים מהסוג הזה.
- פתחו את הקובץ שירד לתיקיית ההורדות והשלימו את הוראות ההתקנה שמופיעות במסך.
- פתחו את Claude והתחברו לחשבון שלכם. כדי לעבוד ב־Code נדרשת גישה מתאימה בחשבון; בדקו זאת באפליקציה לפני רכישה.
בחרו את מערכת ההפעלה שלכם ולחצו Download.
בחרו הסבר כדי לראות לאן הוא מצביע בצילום:
סימן שהצלחתם: האפליקציה פתוחה ואתם מחוברים. אם היא כבר מותקנת, ממשיכים לשלב הבא.
שלב 2 · נכנסים ל־Code ובוחרים תיקייה
- בסרגל הצד לחצו Code. בגרסאות אחרות הוא מופיע כלשונית בראש האפליקציה.
- לחצו New כדי לפתוח משימה חדשה.
- באזור שמעל תיבת הכתיבה בחרו Local. לחצו על בחירת התיקייה ובחרו תיקייה חדשה וריקה לאתר, למשל ״האתר שלי״. אפשר ליצור אותה מראש דרך Finder במק או סייר הקבצים ב־Windows.
- בדקו שמופיע שם התיקייה שבחרתם. כשמופיעה בחירת הרשאות, בחרו מצב שמבקש את אישורכם לפעולות, כגון Manual. אין צורך לבחור Bypass permissions.
לחצו Code, ואז New לפתיחת משימה חדשה.
בחרו הסבר כדי לראות לאן הוא מצביע בצילום:
בחרו Local ואת התיקייה שבה יישמר האתר.
בחרו הסבר כדי לראות לאן הוא מצביע בצילום:
Vous voulez aller plus loin avec Claude Code ?
Vous voulez maîtriser Claude Code depuis zéro ?
Construisez étape par étape avec quatre sessions enregistrées, des Skills et prompts prêts à l’emploi, et un accès à vie.
שלב 3 · מבקשים מקלוד להכין את סקילי העיצוב
סקיל הוא אוסף הנחיות שקלוד קורא. Emil עוזר ללטש פרטים בממשק, Impeccable עוזר בביקורת עיצוב, ו־Taste נותן כיוון לטיפוגרפיה ולפריסה. במקום להוריד ולסדר תיקיות בעצמכם, תנו לקלוד לטפל בזה בתוך פרויקט האתר.
- לחצו על כפתור ההעתקה בתיבה הבאה.
- חזרו ל־Code והדביקו בתיבת ההודעה הרגילה.
- שלחו את ההודעה. אם קלוד מבקש הרשאה לקרוא מקור או לשמור קובצי סקיל בפרויקט, קראו את הבקשה ואשרו את הפעולה המתאימה.
- בסיום בקשו שיציג מה הותקן ומה הוא באמת יכול לקרוא. אם נדרש שלב שלא ניתן לבצע בממשק, בקשו הסבר קצר ולא רשימת פקודות.
עזור לי להכין את פרויקט האתר באמצעות Claude Desktop בלבד. אני מתחיל ולא רוצה לפתוח טרמינל או להקליד פקודות.
קרא את הוראות ההתקנה במקורות האלה:
Emil Kowalski: https://github.com/emilkowalski/skills
Impeccable: https://github.com/pbakaus/impeccable
Taste Skill: https://github.com/Leonxlnx/taste-skill
הכן בפרויקט את emil-design-eng, את סקילי העיצוב הרלוונטיים של Impeccable ואת design-taste-frontend. אל תתקין אוספים לא קשורים. בדוק תחילה מה כבר מותקן, קרא את הקבצים לפני שימוש ושמור על קבצים קיימים. שמור על הרישיונות והייחוס.
בצע בעצמך את פעולות ההכנה שהכלים שלך מאפשרים, ובקש ממני רק אישורים או לחיצות בתוך האפליקציה כשצריך. אל תיתן לי פקודות לביצוע ידני. אל תריץ סקריפט חיצוני לפני שהסברת מה הוא עושה וקיבלת אישור.
בסיום, הצג לכל סקיל: מה נוסף, איפה הוא נשמר והאם הצלחת לקרוא את ההנחיות שלו. אם לא הצלחת, ציין מה חסר ואל תדווח שהותקן.העתיקו, השלימו את הפרטים ובדקו את התוצאה.
ממשיכים אחרי שקלוד מאשר שקרא את קובצי ההנחיות. אם הוא מבקש לפתוח שיחה חדשה כדי לטעון את הסקילים, פתחו אותה באותה תיקיית פרויקט.
אם כבר יש לכם קובץ ZIP מוכן של סקיל, אפשר להעלות אותו דרך Customize, אחר כך Skills, ואז Add ו־Upload skill. זה מסלול חלופי, לא שלב שחייבים לעשות בנוסף. קובץ ZIP של מאגר GitHub שלם אינו בהכרח סקיל תקין להעלאה.
להעלאת סקיל מוכן: Customize ← Skills ← Add ← Upload skill.
בחרו הסבר כדי לראות לאן הוא מצביע בצילום:
שלב 4 · מחברים Figma בלחיצה, אם יש לכם עיצוב
Vous voulez aller plus loin avec Claude Code ?
Atelier Claude Code de zéro à un site en ligne
- 01Installer Claude Code depuis zéro avec un CLAUDE.md personnalisé
- 02Créer des Skills pour les tâches récurrentes
- 03Construire des agents, automatisations et sites
- 04Quatre sessions enregistrées et accès à vie
Atelier enregistré · paiement unique
297 ₪
Accès à vie · garantie de remboursement de 14 jours
אין לכם קובץ Figma? דלגו לשלב הבא. אפשר לבנות אתר מתיאור ותמונות גם בלי Figma.
- בסרגל הצד לחצו Customize, ואז Connectors.
- חפשו Figma ופתחו את הפריט הרשמי של Figma.
- לחצו Connect to Claude.
- בדפדפן שייפתח, התחברו לחשבון Figma שלכם, קראו את ההרשאות ואשרו בעצמכם אם הן מתאימות לכם.
- חזרו ל־Code, פתחו שיחה חדשה באותה תיקייה והדביקו קישור לקובץ עיצוב שיש לכם הרשאה אליו. בקשו מקלוד לאשר שהוא מצליח לקרוא אותו. אם החיבור לא מופיע, בדקו את תפריט + ואז Connectors ואת החשבון שאליו התחברתם.
בעמוד Figma לחצו Connect to Claude.
בחרו הסבר כדי לראות לאן הוא מצביע בצילום:
זה קישור לעיצוב שלי: [הדביקו את הקישור]. בדוק אם חיבור Figma זמין ואם אתה מצליח לקרוא את הקובץ. אם כן, תאר שלושה פרטים אמיתיים מהעיצוב. אם אין לך גישה, אמור בדיוק מה חסר ואל תנחש.העתיקו, השלימו את הפרטים ובדקו את התוצאה.
שלב 5 · מתארים את האתר בעברית
לא צריך לבחור כלי חדש בכל משפט. נותנים לקלוד מטרה ברורה, תוכן אמיתי ורפרנסים, ומבקשים שישתמש בהנחיות שהותקנו. Taste לא מוצא בהכרח אתרי השראה לבד; אפשר לצרף תמונות של שני אתרים שאהבתם.
בנה אתר בעברית מימין לשמאל עבור [שם העסק].
הלקוחות שלי: [למי האתר מיועד].
אני מציע: [השירות או המוצר].
המטרה: [השארת פרטים / קביעת שיחה / הצגת העסק].
הכפתור הראשי צריך להוביל אל: [הקישור המדויק].
הנה החומרים שלי: [לוגו, צבעים, טקסטים ותמונות].
הנה רפרנסים שאהבתי: [קישורים או צילומי מסך].
קודם ודא אילו סקילים זמינים. השתמש ב־Taste לכיוון העיצובי, ב־Impeccable להיררכיה ולביקורת וב־Emil לפרטי הממשק, רק אם אכן הצלחת לקרוא אותם. אם יש קישור Figma נגיש, התבסס גם עליו.
התחל מדף אחד פשוט ויפה שמתאים למובייל. אל תמציא לקוחות, המלצות או נתונים. בצע את הפעולות הטכניות בעצמך דרך הכלים שלך, בלי לבקש ממני לפתוח טרמינל. אם צריך אישור, הסבר בעברית מה הפעולה.
בסיום פתח תצוגה מקדימה באפליקציה. אל תפרסם את האתר ואל תחבר תשלום בלי שאבקש.העתיקו, השלימו את הפרטים ובדקו את התוצאה.
שלב 6 · רואים ובודקים את האתר באפליקציה
ב־Code יש דפדפן מובנה להצגת האתר ולבדיקתו. אין צורך להתקין Playwright בנפרד. למי שרוצה להעמיק בכלי הבדיקות, מצורף בהמשך קישור למאגר Playwright.
Vous voulez aller plus loin avec Claude Code ?
Vous voulez maîtriser Claude Code depuis zéro ?
Construisez étape par étape avec quatre sessions enregistrées, des Skills et prompts prêts à l’emploi, et un accès à vie.
- בקשו מקלוד לפתוח את האתר בתצוגה המקדימה.
- לחצו Browser אם חלונית האתר אינה פתוחה.
- בקשו את הבדיקה שבתיבה הבאה, והמתינו לדיווח ולצילומים.
- עברו גם בעצמכם על האתר: קראו את הטקסט, לחצו על הכפתור הראשי ובדקו שהיעד מתאים. אל תשלחו טופס אמיתי רק לצורך בדיקה.
פתח את האתר בדפדפן המובנה של Claude Desktop. בדוק תצוגת מחשב ומובייל, טעינת תמונות, קריאות, כפתורים וגלילה אופקית. אל תשלח טופס אמיתי ואל תבצע רכישה. צלם צילומי מסך אמיתיים של התוצאה, תקן בעיות ובדוק שוב. הצג לי מה עבר ומה עוד לא עובד. אם כלי הדפדפן אינו זמין, אמור זאת ואל תטען שבדקת.העתיקו, השלימו את הפרטים ובדקו את התוצאה.
נתקעתם? כתבו לקלוד מה אתם רואים
אני עובד באפליקציית Claude Desktop ולא רוצה להשתמש בטרמינל. נתקעתי בשלב [שם השלב]. זה מה שמופיע אצלי: [תיאור או צילום מסך ללא פרטים רגישים]. תן לי רק את הפעולה הבאה, עם השם המדויק של הכפתור. אל תיתן לי כמה מסלולים במקביל. אם חסר מידע, בקש צילום של האזור הרלוונטי.העתיקו, השלימו את הפרטים ובדקו את התוצאה.
צריך לפתוח טרמינל או להתקין Node.js בעצמי?
המדריך אינו דורש זאת. עובדים בממשק Code ומבקשים מקלוד לבצע את ההכנה. אם חסרה תלות במחשב, מבקשים ממנו להסביר ולהציע התקנה דרך הממשק או לבצע את הפעולה באישורכם.
אפשר להוריד את כל הסקילים מחנות Claude בלחיצה אחת?
לא לכל מאגר יש פריט רשמי בחנות. תנו לקלוד את קישורי המקור ובקשו שיכין את הסקילים בפרויקט.
חייבים Figma ו־Playwright?
לא. Figma מיועד למי שיש לו עיצוב קיים. לבדיקת האתר משתמשים כאן בדפדפן המובנה, בלי התקנת Playwright נפרדת.
למה המסך שלי נראה מעט שונה?
הגרסה, מערכת ההפעלה והרשאות החשבון משפיעות על הממשק. אם כפתור חסר, עדכנו את האפליקציה ובדקו את הגישה ל־Code.
רוצים להמשיך לבנות עם ליווי?
ב־AI Master Club לומדים ליישם כלי AI בעסק. הביאו את הבריף ואת צילום האתר שבניתם: כך אפשר לעבוד על שיפור ממוקד, ולא להתחיל בכל פעם מחדש.
