עיצוב · קלוד קוד
Stitch Skills: מעצב של גוגל בתוך קלוד קוד
Stitch Skills היא חבילת סקילים שפורסמה בחשבון הגיטהאב של Google Labs, והיא מלמדת את קלוד קוד לעבוד עם Stitch, כלי העיצוב של גוגל. אחרי חיבור אחד קלוד קוד מבקש מ-Stitch מסכים, מייצר גרסאות, בונה אתר של כמה עמודים, הופך אתר קיים לעיצוב שאפשר לערוך, ובסוף כותב קוד React ומכין סרטון הדגמה.
מה זה Stitch Skills ולמה זה מעניין?
הבעיה המוכרת: קלוד קוד בונה אתר שעובד, אבל העיצוב נראה כמו עוד אתר שבנה AI. Stitch הוא כלי העיצוב של גוגל, שמייצר מסכים ממשפט, מסקיצה או מצילום מסך. Stitch Skills היא החבילה שמחברת בין השניים: קלוד קוד מקבל הוראות מסודרות איך לעבוד מול Stitch, ומעצב שם במקומכם.
נכון ל-31 באוקטובר 2026, למאגר יש 8,642 כוכבים ו-1,049 פורקים בגיטהאב, ברישיון Apache 2.0. לפי ה-README הוא עובד עם קלוד קוד, קודקס, Cursor, Gemini CLI, Antigravity ו-OpenCode, כי כל סקיל כתוב בתקן הפתוח של Agent Skills.
אם כבר יש לכם חשבון ב-Stitch ואתם רוצים להבין את הכלי עצמו, כתבתי על זה במדריך Google Stitch. כאן הנושא הוא מה קורה כשקלוד קוד מפעיל את Stitch לבד.
מה צריך לפני ההתקנה?
זה החלק שהרבה מדלגים עליו ואז לא מבינים למה כלום לא עובד. לפי ה-README, הסקילים דורשים ששרת ה-MCP של Stitch כבר מחובר לקלוד קוד. בלי החיבור הזה הסקילים פשוט לא יכולים לדבר עם Stitch.
- נכנסים ל-stitch.withgoogle.com עם חשבון גוגל.
- עוברים על עמוד הגדרת ה-MCP הרשמי ויוצרים מפתח API ל-Stitch.
- מחברים את השרת לקלוד קוד.
ה-SDK הרשמי של Stitch עובד מול הכתובת stitch.googleapis.com/mcp, עם המפתח בכותרת X-Goog-Api-Key. בפקודה זה נראה ככה:
claude mcp add stitch --transport http https://stitch.googleapis.com/mcp \
--header "X-Goog-Api-Key: YOUR_STITCH_API_KEY"אם עמוד ההגדרה של גוגל מציג לכם פקודה אחרת, תעדיפו אותה. והכי פשוט: תדביקו לקלוד קוד את הקישור לעמוד ההגדרה ותבקשו ממנו לחבר את Stitch בשבילכם. הוא יגיד לכם בדיוק איפה להדביק את המפתח.
מפתח API זה כמו סיסמה. לא מדביקים אותו בצ'אט קבוצתי, לא מעלים אותו לגיטהאב, ואם הוא דלף, מוחקים ויוצרים חדש.
איך מתקינים את Stitch Skills בקלוד קוד?
אחרי שה-MCP מחובר, ההתקנה היא שורה אחת. פותחים טרמינל בתיקיית הפרויקט ומריצים את מה שכתוב ב-README:
npx plugins add google-labs-code/stitch-skills --scope project --target claude-codeהפקודה מתקינה את שלושת הפלאגינים לפרויקט הנוכחי. אם אתם רוצים רק חלק מהסקילים, יש גם התקנה סלקטיבית:
npx skills add google-labs-code/stitch-skillsה-README מזהיר שלסקילים יש תלויות אחד בשני. אם בוחרים ידנית, צריך לוודא שגם הסקילים שהם צריכים מותקנים. למי שלא בטוח, ההתקנה המלאה פשוטה יותר. אחרי ההתקנה סוגרים ופותחים מחדש את קלוד קוד, כדי שיטען את הסקילים.
מה יש בתוך החבילה?
החבילה מחולקת לשלושה פלאגינים. אלה הסקילים שהכי שווה להכיר:
| פלאגין | סקיל | מה הוא עושה |
|---|---|---|
| stitch-design | generate-design | מסכים חדשים מטקסט או מתמונה, עריכת מסך קיים, וגרסאות עיצוב |
| stitch-design | code-to-design | הופך קוד של אתר קיים לעיצוב שאפשר לערוך ב-Stitch |
| stitch-design | extract-design-md | שולף את מערכת העיצוב מהקוד לקובץ DESIGN.md |
| stitch-build | react-components | הופך מסכים מ-Stitch לרכיבי React, עם בדיקה אוטומטית |
| stitch-build | remotion | מכין סרטון הדגמה של הפרויקט, עם זומים ומעברים |
| stitch-utilities | stitch-loop | אתר שלם של כמה עמודים מפרומפט אחד, עם בדיקה אוטומטית |
| stitch-utilities | enhance-prompt | הופך רעיון מעורפל לפרומפט עיצוב מדויק |
חמישה שימושים שאפשר להתחיל מהם היום
1. שלוש גרסאות לאותו מסך
במקום להתווכח עם קלוד על "תעשה את זה יותר יפה", מבקשים כמה כיוונים ובוחרים. זו בדיוק הדוגמה שמופיעה ב-README תחת generate-design:
תשתמש ב-Stitch ותייצר 3 גרסאות עיצוב למסך הבית של האתר שלי:
גרסה כהה ויוקרתית, גרסה בהירה ונקייה, וגרסה צפופה עם הרבה מידע.
האתר בעברית, אז כל המסכים מימין לשמאל.
תראה לי את שלושתן ותחכה שאבחר לפני שאתה ממשיך.2. אתר של כמה עמודים מפרומפט אחד
הסקיל stitch-loop עובד בלולאה: הוא מייצר עמוד, מחבר אותו לאתר, וכותב לעצמו את המשימה הבאה בקובץ. לפי הסקיל עצמו, הוא צריך שני קבצים בתיקייה .stitch: קובץ DESIGN.md עם מערכת העיצוב, וקובץ SITE.md עם החזון של האתר. אם אין לכם, תבקשו מקלוד קוד ליצור אותם קודם.
תבנה לי עם stitch-loop אתר של 5 עמודים לעסק שלי:
דף בית, שירותים, עלינו, המלצות ויצירת קשר.
קודם תכין DESIGN.md ו-SITE.md ותראה לי אותם לאישור.
העסק: [תיאור במשפט]. הקהל: [מי הלקוחות].3. אתר קיים חוזר להיות עיצוב
יש לכם אתר שנבנה פעם, ואין לו קובץ עיצוב? code-to-design לוקח את הקוד, מחלץ ממנו HTML ומערכת עיצוב, ומעלה אותו כפרויקט ב-Stitch. משם אפשר לערוך את המסכים כמו בכלי עיצוב, ולהחזיר אותם לקוד.
4. ממסכים לקוד אמיתי
react-components הופך את המסכים לרכיבי React עם צבעים וגדלים אחידים, ובודק את התוצאה. אם האתר שלכם בנוי ב-React או Next.js, זה חוסך את שלב ההעתקה הידנית.
5. סרטון הדגמה ללקוח
הסקיל remotion מכין סרטון שעובר על כל המסכים בפרויקט, עם זומים ומעברים. זה שימושי כשאתם מציגים ללקוח כיוון עיצוב לפני שבונים, או כשאתם רוצים סרטון לפוסט. על Remotion עצמו יש לי מדריך נפרד.
חשוב לדעת
- זה לא מוצר רשמי של גוגל. המאגר יושב בחשבון google-labs-code, אבל בתחתית ה-README כתוב במפורש שזה לא מוצר שגוגל תומכת בו רשמית.
- "שורה אחת" זה רק הפלאגין. לפני זה צריך חשבון ב-Stitch, מפתח API וחיבור MCP. תקציבו לזה רבע שעה בפעם הראשונה.
- מכסות ותנאים של Stitch נקבעים אצל גוגל ויכולים להשתנות. אם משהו נעצר באמצע, תבדקו קודם את החשבון שלכם ב-Stitch.
- עברית ומימין לשמאל. תכתבו בכל פרומפט שהאתר בעברית ומימין לשמאל, ותבדקו בעין כל מסך לפני שהוא הופך לקוד.
- הסרטון בנוי על Remotion, שיש לו תנאי רישיון משלו לחברות. אם אתם עסק עם עובדים, תקראו אותם לפני שימוש מסחרי.
- קבצי עיצוב של לקוחות. code-to-design מעלה קוד ל-Stitch, כלומר לשרתים של גוגל. על אתר של לקוח, תשאלו אותו קודם.
השורה התחתונה
קלוד קוד יודע לבנות, Stitch יודע לעצב. החבילה הזו נותנת לכם את שניהם בשיחה אחת, ואתם נשארים בתפקיד שבוחר.
שאלות נפוצות על Stitch Skills
Stitch Skills עולה כסף?
החבילה עצמה חינמית ופתוחה, ברישיון Apache 2.0. השימוש ב-Stitch נעשה דרך החשבון שלכם בגוגל, לפי המכסות והתנאים שלהם, ומה שקלוד קוד עושה בדרך נספר במנוי או בחשבון שלכם אצל אנתרופיק.
למה הסקילים לא עובדים אחרי ההתקנה?
כמעט תמיד כי שרת ה-MCP של Stitch לא מחובר. הסקילים דורשים אותו מראש. תבדקו עם הפקודה /mcp בתוך קלוד קוד שהשרת stitch מופיע ומחובר.
מה ההבדל בין זה לבין שימוש רגיל ב-Stitch?
ב-Stitch רגיל אתם מעצבים בדפדפן ומעתיקים קוד. עם הסקילים קלוד קוד מפעיל את Stitch בעצמו, מייצר גרסאות, בונה עמודים, הופך אותם לקוד ומכניס לפרויקט, בלי לעבור בין חלונות.
זה עובד גם עם קודקס?
כן. ב-README יש הוראות התקנה נפרדות לקודקס דרך marketplace, ולכלים נוספים כמו Cursor ו-OpenCode.
אפשר לעבוד ככה על אתר בעברית?
אפשר, אבל תכתבו במפורש בכל בקשה שהאתר בעברית ומימין לשמאל, ותבדקו כל מסך לפני שממשיכים לשלב הקוד.