---
title: "חמש דרכים לעצב דף בית עם Claude Code"
author: "יותם פרום"
mode: developer
type: post
date: 2026-10-21
url: https://yotamfromm.dev/developer/blog/design-bakeoff-five-routes/
category: "workflows עם AI"
series: "השוואות וניסויים"
series_order: 6
tags: ["ניסויים", "עיצוב", "claude-code", "מגבלות-כלים"]
lang: he
---

# חמש דרכים לעצב דף בית עם Claude Code

> חמישה מסלולי עיצוב לדף בית, ואחר כך שישי: אף כלי לא ניצח את Opus לבד. כולל מה שלמדתי על שופטי מודל ועל מה שאי אפשר להריץ בלי אדם.

אם אתם בוחרים כלי עיצוב ל-agent, כדאי לדעת אם הוא באמת משפר את התוצאה על פני model בלי כלי. בניתי את דף הבית של האתר הזה חמש פעמים: Opus 5.5 לבד ועם ארבעה כלי עיצוב, ואחר כך הוספתי מסלול שישי עם Trove. אף כלי לא ניצח את Opus לבד: Opus בלי כלי קיבל את הציון הגבוה ביותר, בזמן ובעלות הנמוכים ביותר. בדרך גיליתי גם איך judge model מטעה, ואילו כלים אי אפשר להריץ בלי אדם.

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

## השאלה

איזה תהליך עיצוב צריך לבנות עם Claude Code את דפי האתר: Opus לבד, או Opus עם אחד מארבעה כלי עיצוב?

## ההגדרה

- **הבריף:** דף הבית של האתר, צד המפתח וצד הפילוסוף, בריף משותף אחד, בנייה מאפס.
- **חמשת המסלולים:** Opus 5.5 ברמת מאמץ בינונית; skill frontend-design; Google Stitch; Claude Design; ו-21st Magic בשכבה החינמית.
- **ההרצה:** `claude -p` אחד לכל מסלול, בתיקייה ריקה ומבודדת, בלי קריאה מתיקיית הבית, עם רשימת היתרים לרשת, ומפתחות רק בהגדרות ה-MCP. השלבים נרשמו מזרם הפלט בסקריפט.
- **השיפוט:** בודק Playwright, ושני judges Sonnet עיוורים: אחד כללי ואחד עם "עדשה" של ספרי העיצוב מהספרייה. בנוסף בדיקת כן או לא לכל צילום מסך: האם הוא נופל באשכול "קרם, סריף וטרקוטה".

## הזרימה

1. חמשת המסלולים עברו כל test פונקציונלי.
2. judge העדשה החיל את התקרה בצורה לא עקבית: הגביל את Opus הפשוט אבל לא את Stitch, והגביל בטעות את Claude Design. את התקרה העברתי לקוד, ונשאר "פסק דין מתוקן".
3. באותו יום, לבקשתי, נוסף מסלול שישי: Opus עם plugin Trove החי (skill, ספרן ב-Haiku וקורא ב-Sonnet). הוא קרא את "UI/UX Design Principles", את "Awesome Design.md" ואת הנחיות Vercel לפני הבנייה. שישת הדפים נשפטו מחדש בעיוור, עם ערבוב חדש.
4. השער של מסלול Trove חסם את הקריאה בספרים שלי על התוצאות האלה, ולכן הוא לא יכול היה לראות אותן.
5. judge Sonnet שהתבקש לצפות ב-48 צילומי מסך צפה ב-20 וכינה את השאר "עקביים בהנחה". התיקון: לדרוש בתשובה ספירה `VIEWED: n` ולדחות ספירה קצרה מדי.

## המספרים

| מסלול | זמן | עלות | judges (כללי / עדשה) |
|---|---|---|---|
| Opus לבד | 7.1 דקות | 1.61$ | 9 / 7 |
| frontend-design | 7.6 דקות | 1.86$ | 7 / 7 |
| Stitch | 29.1 דקות, מהן 14 עד 17 בהמתנה ליצירה | 3.62$ | 8 / 8 |
| Claude Design (אינטראקטיבי) | כ-10 דקות | כ-0.9$ (הערכה) | 7 / 6 |
| Magic (שכבה חינמית) | 10.1 דקות | 2.30$ | 7 / 6 |

הציונים המשולבים אחרי התקרה בקוד: Opus לבד 8.18, Stitch 7.87, frontend-design 7.50, ו-Claude Design עם Magic בתיקו על 6.81. שלושה מתוך חמשת הדפים נפלו באשכול "קרם, סריף וטרקוטה" בצד הפילוסוף: Opus לבד, Stitch ו-Magic. רק frontend-design ו-Claude Design נמנעו ממנו.

בשיפוט החוזר של שישה מסלולים: Opus לבד 7.94, frontend-design 7.69, Stitch 7.43, מסלול Trove 7.19 (3.02$, 12.4 דקות, ועוד 0.51$ לקורא ב-Sonnet), ואחרונים Claude Design ו-Magic על 6.94. השיפוט החוזר הזיז ציונים עד 0.5 והפך כמה תשובות כן או לא באשכול, אבל הראש והזנב החזיקו. מסלול Trove נמנע מקרם וטרקוטה, ובכל זאת סיים רביעי מתוך שישה.

## מגבלות של הכלים שראיתי בעצמי

- Claude Design לא יכול לרוץ בלי אדם: הפקודה `/design` מיועדת להפעלה ידנית, והכניסה אליו דורשת `/design-login` אינטראקטיבי.
- 21st Magic בחינם: אין יצירה (`aiGenerationEnabled=false`), אפס קרדיטים ושתי שליפות רכיבים ביום.
- Figma, השרת הרשמי בתוכנית הבסיסית: 20 קריאות כלי בחודש.
- Stitch חושף כלי `delete_project`, ולכן קיבל רשימת היתרים לפי כלי.
- מתקין ה-plugins שהורץ עם `--scope project` כתב בכל זאת את `enabledPlugins` להגדרות המשתמש.

## המסקנה

אף כלי לא ניצח את Opus לבד. ההמלצה שרשמתי: Opus עם frontend-design ועם בדיקת הספציפיות מספרי העיצוב מודבקת לבריף, ו-Stitch רק לחקירה על קנבס. מסלול Trove החי עלה בערך פי שניים, ולכן את הכלל מדביקים ולא מחפשים בספרייה בכל דף.

## מה אפשר לקחת מזה

- **התחילו מ-Opus בלי כלי כ-baseline.** כאן הוא ניצח בציון, בזמן ובעלות, ושני כלים (Claude Design ו-Magic) סיימו אחרונים.
- **תנו לקוד להחיל תקרות, ול-judge רק שאלות של כן או לא.** judge model החיל תקרה בצורה לא עקבית על שלושה מסלולים, ולכן התקרה עברה לקוד.
- **דרשו מה-judge ספירה של מה שראה.** judge שהתבקש לצפות ב-48 צילומים צפה ב-20. ספירה `VIEWED: n` ודחיית ספירה קצרה תופסות את זה.
- **בדקו אם הכלי רץ בלי אדם לפני שמתכננים עליו.** Claude Design דורש הפעלה ידנית, ו-Magic בחינם לא מייצר. את Claude Design הרצתי אינטראקטיבית, ולכן העלות שלו הערכה.
- **הדביקו את הכלל לבריף במקום לחפש בספרייה בכל דף.** מסלול Trove החי עלה בערך פי שניים ולא ניצח.

## הסתייגויות

- כל מסלול רץ פעם אחת, ולכן שונות בין הרצות לא ידועה.
- שני ה-judges הם models, ואחד מהם החיל תקרה בצורה לא עקבית. תיקנתי את זה בקוד.
- העלות של Claude Design היא הערכה, כי הוא רץ באופן אינטראקטיבי.
- ה-Opus הפשוט בניסוי הזה נשא, כפי שגיליתי למחרת, skill עיצוב מובנה, ולכן ה-baseline לא היה נקי לגמרי.
- משך ההמתנה של Stitch מופיע ברשומות שלי כ-14 דקות וכ-17 דקות, ואין לי נתוני גלם להכריע.

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