תנו ל-Claude Code לעצב כאילו מישהו התכוון לזה

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

התחילו כאן מה זה נותן לי

אחד מהשלושה הוא Skill, שניים הם שרתי MCP.

מה זה כולל

שלושה כלים, שלושה תפקידים

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

01

Stitch MCP + Nano Banana Pro

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

02

UI UX Pro Max

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

03

21st.dev Magic

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

לפני שמתחילים

דרישות מקדימות

סמנו כל שורה שכבר יש לכם. הסימון נשמר רק בזיכרון הדף הנוכחי — לא בדפדפן.

סומנו 0 מתוך 6

בנוסף, ב-Windows אפשר להשתמש בפקודה python --version במקום python3 --version.

אזהרת עלויות

שרת ה-MCP של תמונות קורא ל-Gemini API בתשלום. הפריסט המהיר משתמש ב-Nano Banana 2, והפריסט האיכותי משתמש ב-Nano Banana Pro ועולה יותר.

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

0

התקנת Claude Code

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

npm install -g @anthropic-ai/claude-code
cd "C:\Moshe\Free guides and tools\claude-design-stack"
claude

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

1

Stitch MCP + Nano Banana Pro

חלק א׳ — Stitch

מומלץ

הדרך המומלצת היא האשף המודרך:

npx @_davideast/stitch-mcp init

האשף מוביל אתכם דרך: בחירת לקוח, מצב אימות (OAuth או מפתח API), התקנת gcloud, אימות, בחירת שיטת תעבורה (HTTP ישיר או פרוקסי stdio), בחירת פרויקט Google Cloud, הרשאות IAM והפעלת Stitch API, וכתיבת קובץ ההגדרות.

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

חלופה ידנית

אפשר גם להוסיף את השרת ידנית עם מפתח API:

claude mcp add stitch --env STITCH_API_KEY=your-stitch-key -- npx @_davideast/stitch-mcp proxy

כלים שימושיים נוספים מה-CLI:

npx @_davideast/stitch-mcp view --projects
npx @_davideast/stitch-mcp serve -p <project-id>
npx @_davideast/stitch-mcp doctor --verbose

חלק ב׳ — Nano Banana Pro

קודם משיגים מפתח Gemini API ב-Google AI Studio, ואז מריצים:

claude mcp add mcp-image --scope user --env GEMINI_API_KEY=your-gemini-key --env IMAGE_QUALITY=quality --env IMAGE_OUTPUT_DIR=/absolute/path/to/images -- npx -y mcp-image
  • הערך IMAGE_QUALITY מקבל fast, balanced או quality. ברירת המחדל היא fast. רק quality מנתב ל-Nano Banana Pro.
  • IMAGE_OUTPUT_DIR חייב להיות נתיב מוחלט. הוא נוצר אוטומטית אם אינו קיים.
דוגמה ל-Windows (במרכאות בגלל הרווחים בנתיב) 
--env IMAGE_OUTPUT_DIR="C:\Moshe\Free guides and tools\claude-design-stack\images"
דוגמה ל-macOS 
--env IMAGE_OUTPUT_DIR=/Users/yourname/projects/claude-design-stack/images
בונוס אופציונלי

אותו פרויקט כולל גם Skill עצמאי לכתיבת פרומפטים, שלא דורש מפתח API כלל:

npx mcp-image skills install --path ~/.claude/skills
2

UI UX Pro Max

שימו לב לשם החבילה הנכון: גרסאות ישנות בשם uipro-cli אינן מעודכנות ואין להתקין אותן.

npm install -g ui-ux-pro-max-cli
uipro init --ai claude --global
חלופה מתוך Claude Code 
/plugin marketplace add nextlevelbuilder/ui-ux-pro-max-skill
/plugin install ui-ux-pro-max@ui-ux-pro-max-skill

דרישת Python 3

מנוע החיפוש של ה-Skill הוא סקריפט Python. בלי Python מותקן, ה-Skill יתקין אבל לא יעבוד.

ה-Skill מופעל באופן אוטומטי כשמבקשים עבודת UI או UX — אין צורך להפעיל אותו ידנית.

פקודות נוספות:

uipro update
uipro versions
uipro uninstall --ai claude
3

21st.dev Magic

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

npx @21st-dev/cli@latest install claude --api-key your-21st-key
חלופה ידנית 
claude mcp add magic --scope user --env API_KEY=your-21st-key -- npx -y @21st-dev/magic@latest
אל תדלגו על זה

בדיקת ההתקנה

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

  1. 01סוגרים את Claude Code לגמרי — לא רק חלון, אלא יציאה מלאה מהתהליך.
  2. 02פותחים אותו מחדש.
  3. 03מריצים /mcp ומוודאים ששלושת השרתים — stitch, mcp-image ו-magic — מופיעים ומחוברים.
  4. 04אם שרת חסר, מריצים claude --debug כדי לראות מה נכשל.
התמונה המלאה

איך זה עובד ביחד

1

מעצבים את המסך ב-Stitch

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

2

מייצרים דימויי ייחוס עם Nano Banana Pro

תמונות באיכות גבוהה שמעגנות את הכיוון החזותי.

3

UI UX Pro Max אוכף כללי עיצוב אמיתיים

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

4

מסיימים עם רכיבים מ-21st.dev

רכיבים מונפשים ומוכנים שנשלפים ישירות לפרויקט.

דוגמאות

פרומפטים לדוגמה

אפשר להעתיק ולהדביק ישירות לתוך Claude Code.

בנייה ממוקאפ

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

תמונת גיבור ב-4K

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

עיצוב מחדש

עצב מחדש את העמוד הזה לפי כללי UI UX Pro Max — פלטה, טיפוגרפיה והיררכיה ברורה.

רכיב מונפש

הוסף רכיב כרטיסיות מונפש מ-21st.dev שמתאים לסגנון העיצוב הקיים באתר.

פתרון בעיות

פתרון תקלות

הסעיף הכי מפורט בעמוד — כי כאן נתקעים הכי הרבה.

סימפטום

השרת שהוספתם לא מופיע כשמריצים /mcp.

סיבה

Claude Code לא הופעל מחדש באופן מלא.

פתרון

סגרו לגמרי, פתחו מחדש, והריצו /mcp.

סימפטום

שגיאת הרשאה (permission denied) בקריאות ל-Stitch.

סיבה

החיוב (billing) לא מופעל, או ש-Stitch API לא מופעל בפרויקט.

פתרון

הפעילו חיוב, הריצו את פקודת gcloud beta services הרלוונטית, ודאו שיש לכם תפקיד Owner או Editor, ואז הריצו npx @_davideast/stitch-mcp doctor --verbose.

סימפטום

שגיאה שאומרת שה-API מצפה לטוקן OAuth.

סיבה

נתיב הפרוקסי דורש אימות OAuth ולא מפתח API בלבד.

פתרון

הריצו מחדש init ובחרו במצב OAuth.

סימפטום

שגיאת invalid-character בהפעלת הפרוקסי.

סיבה

קובץ .env בתיקיית הפרויקט נקרא בטעות.

פתרון

שנו את שם הקובץ או הזיזו אותו החוצה מהתיקייה.

סימפטום

חיבור שהתנתק כעבור כשעה.

סיבה

טוקני OAuth חיים שעה אחת בלבד.

פתרון

פרוקסי ה-stdio מרענן את הטוקן אוטומטית כל 55 דקות. תעבורת HTTP ישירה לא עושה זאת.

סימפטום

תהליך האימות נתקע ולא נפתח דפדפן.

סיבה

אין דפדפן זמין בסביבה.

פתרון

העתיקו את כתובת ה-OAuth ופתחו אותה במחשב עם דפדפן — הטוקן ייכתב חזרה אוטומטית.

סימפטום

ההגדרות הקיימות תקועות או שגויות.

סיבה

צריך לאפס את החיבור והתצורה.

פתרון

npx @_davideast/stitch-mcp logout --force --clear-config ואז npx @_davideast/stitch-mcp init.

סימפטום

שגיאה שאומרת שמפתח ה-API חסר.

סיבה

המפתח לא הוגדר, או שהוא לא תקין.

פתרון

ודאו שהמפתח הוגדר נכון ב-GEMINI_API_KEY.

סימפטום

הבקשה עוברת אך לא חוזרת תמונה.

סיבה

הבקשה לא ברורה מספיק, או שהמכסה נגמרה.

פתרון

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

סימפטום

שגיאה שהקובץ לא נמצא.

סיבה

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

פתרון

השתמשו רק בנתיבים מוחלטים, בפורמט PNG, JPEG או WebP, מתחת ל-10MB.

סימפטום

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

סיבה

הנתיב מכיל רווחים ולא הוקף במרכאות.

פתרון

עטפו את כל הנתיב במרכאות כפולות.

סימפטום

איכות התמונה חלשה מהצפוי.

סיבה

עדיין בפריסט fast.

פתרון

הגדירו IMAGE_QUALITY ל-quality, או פשוט בקשו איכות גבוהה בבקשה עצמה.

סימפטום

הזמן מרגיש ארוך.

סיבה

זה צפוי.

פתרון

פריסט fast לוקח בערך 30 עד 40 שניות, quality איטי יותר, ורזולוציית 4K איטית עוד יותר.

סימפטום

ה-Skill קיים אך לא מחזיר תוצאות.

סיבה

Python 3 לא מותקן.

פתרון

התקינו מ-python.org או ממנהל חבילות. ב-Windows השתמשו ב-python במקום python3.

סימפטום

הבקשה עוברת בלי שה-Skill נכנס לפעולה.

סיבה

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

פתרון

התקינו מחדש עם uipro init --ai claude --global ותארו את עבודת ה-UI בשפה פשוטה.

סימפטום

משהו לא מתנהג כמצופה.

סיבה

uipro-cli הישנה הותקנה בטעות.

פתרון

הסירו אותה והתקינו את ui-ux-pro-max-cli.

סימפטום

הרכיב לא נוצר או מוחזר ריק.

סיבה

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

פתרון

ודאו שאתם על @21st-dev/magic@latest, שהמפתח תקין ויש לו יצירות נותרות, ונסו שוב.

סימפטום

השרת לא מתחיל להריץ.

סיבה

API_KEY חסר, או גרסת Node ישנה מדי.

פתרון

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

סימפטום

כלים שונים נכשלים בהתקנה או בהרצה.

סיבה

הרבה מהכלים האלה דורשים Node 22 ומעלה.

פתרון

בדקו את הגרסה עם node -v ועדכנו במידת הצורך.

אבטחה

שמירה על המפתחות בטוחים

הסרה

הסרת הכלים

Stitch MCP

npx @_davideast/stitch-mcp logout --force --clear-config
claude mcp remove stitch

Nano Banana / mcp-image

claude mcp remove mcp-image

UI UX Pro Max

uipro uninstall --ai claude
npm uninstall -g ui-ux-pro-max-cli

21st.dev Magic

claude mcp remove magic
קיצור דרך

כרטיס פקודות מהיר

Stitch MCP

npx @_davideast/stitch-mcp init

Nano Banana Pro / mcp-image

claude mcp add mcp-image --scope user --env GEMINI_API_KEY=your-gemini-key --env IMAGE_QUALITY=quality --env IMAGE_OUTPUT_DIR=/absolute/path/to/images -- npx -y mcp-image

UI UX Pro Max

npm install -g ui-ux-pro-max-cli && uipro init --ai claude --global

21st.dev Magic

npx @21st-dev/cli@latest install claude --api-key your-21st-key