AI לעסקים

בניית אתרים עם Claude Desktop: מדריך פשוט בלי טרמינל

October 11, 202610 min readAmichai Shekel

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

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

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

שלב 1 · מורידים את האפליקציה למחשב

הורדת Claude Desktop מהאתר הרשמי

פתחו את הקישור. באזור Desktop מצאו את מערכת ההפעלה שלכם.
לחצו Download ליד macOS במק, או ליד Windows במחשב Windows. Windows (arm 64) מיועד רק למחשבים מהסוג הזה.
פתחו את הקובץ שירד לתיקיית ההורדות והשלימו את הוראות ההתקנה שמופיעות במסך.
פתחו את Claude והתחברו לחשבון שלכם. כדי לעבוד ב־Code נדרשת גישה מתאימה בחשבון; בדקו זאת באפליקציה לפני רכישה.

בחרו את מערכת ההפעלה שלכם ולחצו Download.
בחרו הסבר כדי לראות לאן הוא מצביע בצילום:

פתיחת הצילום בגודל מלא

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

שלב 2 · נכנסים ל־Code ובוחרים תיקייה

בסרגל הצד לחצו Code. בגרסאות אחרות הוא מופיע כלשונית בראש האפליקציה.
לחצו New כדי לפתוח משימה חדשה.
באזור שמעל תיבת הכתיבה בחרו Local. לחצו על בחירת התיקייה ובחרו תיקייה חדשה וריקה לאתר, למשל ״האתר שלי״. אפשר ליצור אותה מראש דרך Finder במק או סייר הקבצים ב־Windows.
בדקו שמופיע שם התיקייה שבחרתם. כשמופיעה בחירת הרשאות, בחרו מצב שמבקש את אישורכם לפעולות, כגון Manual. אין צורך לבחור Bypass permissions.

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

פתיחת הצילום בגודל מלא

בחרו Local ואת התיקייה שבה יישמר האתר.
בחרו הסבר כדי לראות לאן הוא מצביע בצילום:

פתיחת הצילום בגודל מלא

Serious about Claude Code?

Want to master Claude Code from scratch?

Build step by step through four recorded sessions, ready-made skills and prompts, with lifetime access.

View the workshop

הסבר רשמי על Code בתוך אפליקציית Desktop

שלב 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. אל תתקין אוספים לא קשורים. בדוק תחילה מה כבר מותקן, קרא את הקבצים לפני שימוש ושמור על קבצים קיימים. שמור על הרישיונות והייחוס.
בצע בעצמך את פעולות ההכנה שהכלים שלך מאפשרים, ובקש ממני רק אישורים או לחיצות בתוך האפליקציה כשצריך. אל תיתן לי פקודות לביצוע ידני. אל תריץ סקריפט חיצוני לפני שהסברת מה הוא עושה וקיבלת אישור.
בסיום, הצג לכל סקיל: מה נוסף, איפה הוא נשמר והאם הצלחת לקרוא את ההנחיות שלו. אם לא הצלחת, ציין מה חסר ואל תדווח שהותקן.

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

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

Emil Kowalski · המקור הרשמי

Impeccable · המקור הרשמי

Taste Skill · המקור הרשמי

אם כבר יש לכם קובץ ZIP מוכן של סקיל, אפשר להעלות אותו דרך Customize, אחר כך Skills, ואז Add ו־Upload skill. זה מסלול חלופי, לא שלב שחייבים לעשות בנוסף. קובץ ZIP של מאגר GitHub שלם אינו בהכרח סקיל תקין להעלאה.

להעלאת סקיל מוכן: Customize ← Skills ← Add ← Upload skill.
בחרו הסבר כדי לראות לאן הוא מצביע בצילום:

פתיחת הצילום בגודל מלא

העלאת סקילים דרך ממשק Claude · ההסבר הרשמי

שלב 4 · מחברים Figma בלחיצה, אם יש לכם עיצוב

Serious about Claude Code?

Claude Code workshop from zero to a live website

This guide gave you the foundation. The workshop brings everything together: setup, CLAUDE.md, skills, agents, and website building.

Setup and CLAUDE.md01

Ready-made Skills02

Agents and automation03

A live website04

01Install Claude Code from scratch with a tailored CLAUDE.md
02Build Skills for recurring business tasks
03Create agents, automations, and websites
04Four recorded sessions with lifetime access

Recorded workshop · one-time payment

₪297

Lifetime access · 14-day money-back guarantee

View the workshop

אין לכם קובץ Figma? דלגו לשלב הבא. אפשר לבנות אתר מתיאור ותמונות גם בלי Figma.

בסרגל הצד לחצו Customize, ואז Connectors.
חפשו Figma ופתחו את הפריט הרשמי של Figma.
לחצו Connect to Claude.
בדפדפן שייפתח, התחברו לחשבון Figma שלכם, קראו את ההרשאות ואשרו בעצמכם אם הן מתאימות לכם.
חזרו ל־Code, פתחו שיחה חדשה באותה תיקייה והדביקו קישור לקובץ עיצוב שיש לכם הרשאה אליו. בקשו מקלוד לאשר שהוא מצליח לקרוא אותו. אם החיבור לא מופיע, בדקו את תפריט + ואז Connectors ואת החשבון שאליו התחברתם.

בעמוד Figma לחצו Connect to Claude.
בחרו הסבר כדי לראות לאן הוא מצביע בצילום:

פתיחת הצילום בגודל מלא

Figma בספריית החיבורים של Claude

⌘ פרומפט להעתקה

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

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

שלב 5 · מתארים את האתר בעברית

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

⌘ פרומפט להעתקה

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

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

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

שלב 6 · רואים ובודקים את האתר באפליקציה

ב־Code יש דפדפן מובנה להצגת האתר ולבדיקתו. אין צורך להתקין Playwright בנפרד. למי שרוצה להעמיק בכלי הבדיקות, מצורף בהמשך קישור למאגר Playwright.

Serious about Claude Code?

Want to master Claude Code from scratch?

Build step by step through four recorded sessions, ready-made skills and prompts, with lifetime access.

View the workshop

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

⌘ פרומפט להעתקה

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

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

Playwright MCP · מאגר Microsoft, להעמקה בלבד

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

⌘ פרומפט להעתקה

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

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

צריך לפתוח טרמינל או להתקין Node.js בעצמי?

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

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

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

חייבים Figma ו־Playwright?

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

למה המסך שלי נראה מעט שונה?

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

רוצים להמשיך לבנות עם ליווי?

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

פרטים והצטרפות ל־AI Master Club

Share this article

עזור לי להכין את פרויקט האתר באמצעות 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. אל תתקין אוספים לא קשורים. בדוק תחילה מה כבר מותקן, קרא את הקבצים לפני שימוש ושמור על קבצים קיימים. שמור על הרישיונות והייחוס. בצע בעצמך את פעולות ההכנה שהכלים שלך מאפשרים, ובקש ממני רק אישורים או לחיצות בתוך האפליקציה כשצריך. אל תיתן לי פקודות לביצוע ידני. אל תריץ סקריפט חיצוני לפני שהסברת מה הוא עושה וקיבלת אישור. בסיום, הצג לכל סקיל: מה נוסף, איפה הוא נשמר והאם הצלחת לקרוא את ההנחיות שלו. אם לא הצלחת, ציין מה חסר ואל תדווח שהותקן.

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

בנה אתר בעברית מימין לשמאל עבור [שם העסק]. הלקוחות שלי: [למי האתר מיועד]. אני מציע: [השירות או המוצר]. המטרה: [השארת פרטים / קביעת שיחה / הצגת העסק]. הכפתור הראשי צריך להוביל אל: [הקישור המדויק]. הנה החומרים שלי: [לוגו, צבעים, טקסטים ותמונות]. הנה רפרנסים שאהבתי: [קישורים או צילומי מסך]. קודם ודא אילו סקילים זמינים. השתמש ב־Taste לכיוון העיצובי, ב־Impeccable להיררכיה ולביקורת וב־Emil לפרטי הממשק, רק אם אכן הצלחת לקרוא אותם. אם יש קישור Figma נגיש, התבסס גם עליו. התחל מדף אחד פשוט ויפה שמתאים למובייל. אל תמציא לקוחות, המלצות או נתונים. בצע את הפעולות הטכניות בעצמך דרך הכלים שלך, בלי לבקש ממני לפתוח טרמינל. אם צריך אישור, הסבר בעברית מה הפעולה. בסיום פתח תצוגה מקדימה באפליקציה. אל תפרסם את האתר ואל תחבר תשלום בלי שאבקש.

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

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

Quick navigation

Content & contact

Contact

שלב 1 · מורידים את האפליקציה למחשב

שלב 2 · נכנסים ל־Code ובוחרים תיקייה

Want to master Claude Code from scratch?

שלב 3 · מבקשים מקלוד להכין את סקילי העיצוב

שלב 4 · מחברים Figma בלחיצה, אם יש לכם עיצוב

שלב 5 · מתארים את האתר בעברית

שלב 6 · רואים ובודקים את האתר באפליקציה

Want to master Claude Code from scratch?

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

רוצים להמשיך לבנות עם ליווי?

קלוד קוד לבעלי עסקים: מה זה בכלל ואיך מתחילים?

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

בינה מלאכותית למתחילים: מה זה AI ואיך מתחילים

How can we help you?

Quick navigation

Content & contact

Contact

שלב 1 · מורידים את האפליקציה למחשב

שלב 2 · נכנסים ל־Code ובוחרים תיקייה

Want to master Claude Code from scratch?

שלב 3 · מבקשים מקלוד להכין את סקילי העיצוב

שלב 4 · מחברים Figma בלחיצה, אם יש לכם עיצוב

שלב 5 · מתארים את האתר בעברית

שלב 6 · רואים ובודקים את האתר באפליקציה

Want to master Claude Code from scratch?

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

רוצים להמשיך לבנות עם ליווי?

קלוד קוד לבעלי עסקים: מה זה בכלל ואיך מתחילים?

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

בינה מלאכותית למתחילים: מה זה AI ואיך מתחילים

How can we help you?