הבעיה שאף כלי לא פתר, עד עכשיו
כל מפתח front-end מכיר את הריטואל הזה: מעצב שולח Figma. אתה מסתכל, לא ברור איזה spacing, איזה font weight, ואיזה animation מצופה. 3 ימים של הלוך-ושוב, 7 Pull Requests לתיקוני pixel. שבוע שלם הלך על עמוד אחד. לא כי מישהו עשה דברים לא נכון, אלא כי design ו-code דיברו שפות שונות מאז ומתמיד.
ב-17 אפריל 2026 Anthropic השיקה את Claude Design יחד עם פיצ'ר שנקרא Handoff Bundle. הרעיון פשוט: במקום לייצא CSS סטטי שמפתח צריך לתרגם ידנית, ה-bundle מכיל את ה-intent, ה-tokens, את ה-component tree, וClaude Code קורא אותו ישירות ומייצר קוד שמשתלב ב-codebase הקיים. Datadog דיווחו על קיצור מחזור שבועי של briefs, mockups וסבבי review לשיחה אחת.
הזרימה המלאה, 5 שלבים
הPipeline עובד בחמישה שלבים עוקבים:
- עיצוב ב-Claude Design, פותחים claude.ai/design ומתארים את הממשק בשפה טבעית. Claude Design קורא את ה-codebase שלכם ואת design system קיים (tailwind.config.js, tokens.json, רכיבי Radix/shadcn) ומיישם אותם אוטומטית.
- Refinement, עורכים inline (tweak sliders, direct edits) ולא מנסחים מחדש את כל הפרומפט. כל regeneration של scratch שורפת tokens יקרים.
- Export ל-Handoff Bundle, לחיצה אחת יוצרת tar archive עם README, component JSON, tokens ו-assets. Bundle זה הוא spec שClaude Code קורא ישירות.
- Claude Code מממש, עוברים לטרמינל ומריצים Claude Code עם bundle כהקשר ועם constraints מדויקים: ממה להשתמש, לאן לשמור, איך לשמור על routing קיים.
- Review ו-PR, בוחנים את הקוד שנוצר, מריצים code review רגיל, ופותחים PR. הקוד עובד אבל לא production-ready ללא בדיקה.
מה בתוך ה-Handoff Bundle?
ה-bundle הוא לא תמונה ולא HTML סטטי, הוא spec מובנה שClaude Code מבין:
| שדה | תוכן | למה זה חשוב |
|---|---|---|
| design_tokens | צבעים, typography, spacing scale | מסונכרן ל-tailwind.config הקיים |
| component_tree | היררכיה עם props, Tailwind tokens, copy variants | Claude Code ממפה לקומפוננטים קיימים |
| intent_notes | עקרונות עיצוב ונימוקים מאחורי בחירות | Claude Code שומר על הרוח, לא רק הפיקסלים |
| interactions | hover states, scroll triggers, transitions | מייתר ציון אנימציות ב-Framer Motion ידנית |
| a11y_annotations | aria-labels, focus order, keyboard nav | accessibility מובנה מהרגע הראשון |
דוגמה מהחיים, סטארטאפ תל-אביבי
צוות פיתוח של חמישה אנשים בסטארטאפ SaaS בת"א עבד בשיטה הישנה: מעצב ב-Figma, מפתח front-end שמפענח, 3-4 ימי הלוך-ושוב לכל feature. עם Handoff Bundle:
- מעצב בנה prototype ב-Claude Design תוך 20 דקות (כולל brand kit שנגזר מה-repo).
- Export יצר bundle שClaude Code קרא ישירות עם הפקודה:
claude-code "Implement design-bundle.json in Next.js 15, reuse src/components/ui, match tailwind.config.ts. Open PR titled feat(dashboard): new KPI cards." - PR נפתח תוך שעה, עם 3 הערות בלבד ב-review (כולן על copy, לא על layout).
- מחזור שלקח 3-4 ימים הצטמצם ל-4 שעות.
חשוב לציין: הקוד שנוצר עובד, אבל לא production-ready ללא בדיקה. "The code exported by Claude Code works, but it still needs to be audited: security, scaling, accessibility, SEO, tests" (lushbinary.com). ה-PR review אינו אופציונלי.
מתי זה עובד, ומתי לא
- עובד מצוין: מערכת design system קיימת ומסודרת (tailwind.config.js, tokens.json, Radix/shadcn). ה-bundle ימפה קומפוננטים קיימים ולא יצור חדשים מיותרים.
- עובד חלקית: Next.js/React codebase ללא design system רשמי, bundle יגיד ל-Claude Code לבחור, ותוצאות פחות עקביות.
- לא מתאים: legacy code עם CSS גלובלי מעורב, מספר frameworks בפרויקט, חברה עם 10+ design systems שונים. Claude Code יצטרך החלטות שלא מפורשות ב-bundle.
- אזהרה על tokens: Claude Design כבד מאוד בצריכה. ביקורת קהילה ב-2026: "one working session burned more than 50% of a weekly Pro allotment." ברגע שיש draft טוב, עברו ל-Claude Code.
2 טעויות נפוצות שמבזבזות שעות
טעות 1: לייצא bundle על legacy codebase ללא tokens. Claude Code יצור CSS חדש שלא מתואם עם שאר הפרויקט. התוצאה: PR שנדחה, שעות תיקון. הפתרון: לפני handoff, ודאו שיש tailwind.config.ts או tokens.json מסודר.
טעות 2: לעשות כל iteration ב-Claude Design. קהילה מדווחת שזה שורף tokens מהר מאוד. הפרקטיקה הנכונה: עצב ב-Claude Design עד שיש prototype שמניח את הדעת, ואז עברו ל-Claude Code לכל שאר ה-iterations.
סיכום, מה לקחת מהשיעור הזה
- Handoff Bundle הוא spec מובנה (לא PNG, לא CSS) שClaude Code קורא ישירות, מה שהופך design intent לקוד שמשתלב.
- הזרימה: Claude Design (prototype) → Export bundle → Claude Code (implements) → PR review. אין קיצורים בreview.
- Bundle עובד הכי טוב כשה-codebase מסודר עם design tokens. legacy code = תוצאות פחות עקביות.
- Claude Design כבד בטוקנים, עברו ל-Claude Code ברגע שיש prototype שמניח את הדעת.
- הפרומפט ל-Claude Code צריך constraints מפורשים: אילו קומפוננטים לשמש, לאן לשמור, איך לשמור routing.