בנה לוח בקרה להשוואה עם Claude Code

דרישות קדם

• Claude Code מותקן (claude בטרמינל שלך)
• דפדפן
• (אופציונלי) Vercel CLI לפריסה: npm i -g vercel

שלב 1: בסיס עיצוב אפל

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

הנושא:

Create a file called comparison.html — a single-page dark-themed dashboard for comparing two vendors. Set up CSS custom properties for colors: dark navy background (#0b1120), card background (#172033), blue accent (#4d8cf5), amber accent (#f0b429), green (#34d399), red (#f87171), and text colors (primary #e8ecf4, muted #647490). Add a centered header with the title "Vendor Comparison" in a gradient text style, a subtitle "Choosing between Option A and Option B", and two small metadata chips showing dates. No JavaScript. No frameworks.

מה Claude Code עושה: הוא יוצר קובץ HTML שלם עם בלוק <style> המגדיר משתנים CSS (CSS custom properties) ב:root. כל צבע, רדיוס פינה וערך ריווח חיים במקום אחד. זה אותו דפוס שמערכות עיצוב מקצועיות משתמשות בו — שנה --blue פעם אחת, וכל כפתור, כרטיס וקישור מתעדכנים באופן אוטומטי.

נסה: פתח את comparison.html בדפדפן שלך. רקע אפל, כותרת עם גרדיאנט, שבבים סטיילינג. שנה את גודל החלון — זה כבר אמור להיראות טוב בטלפון.

שלב 2: דשדוש הנושא + כרטיסי ספקים

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

הנושא:

Add two sections to comparison.html. First, a "verdict hero" banner with a green-tinted border showing "Option A is 25% cheaper" as a headline, with a large "25%" stat on the right side. Second, two side-by-side vendor cards. Option A: "Acme Services", quote date Dec 2025, total $15,000, blue color stripe on top. Option B: "Beta Corp", quote date Feb 2026, total $19,500, amber color stripe. Cards should have a subtle lift on hover and stack vertically on screens under 900px.

מה Claude Code עושה: הוא בונה פריסת CSS Grid — שתי עמודות שמתקרסות לאחת במובייל דרך @media query. דשדוש הנושא משתמש בradial-gradient לזוהר עדין. הכרטיסים מקבלים רצועת צבע 4px בחלקו העליון — דפוס המשמש את Stripe ו-Linear. ה-hover משתמש בtransform: translateY(-2px) עם box-shadow לעיטוף.

נסה: שני כרטיסים זה לצד זה עם הדגשות צבע שונות. העף עליהם — הם מתרוממים. צמצם את החלון שלך — הם מתסדרים בעמודה. בנר הנושא הופך את המנצח לברור במבט אחד.

שלב 3: טבלת השוואה

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

הנושא:

Add a comparison table to comparison.html. Columns: Category, Option A, Option B, Difference, Notes. Rows: Design ($3,000 vs $4,200), Development ($7,500 vs $8,800), Testing ($2,000 vs $2,500), Support ($2,500 vs $2,000 — B is cheaper here), Infrastructure ($0 vs $2,000 — only in B). Add a total row with bold styling. Color the difference: green when A is cheaper, red when B is cheaper. Add small rounded tags in Notes ("A cheaper" green, "B cheaper" red, "Only in B" blue). Use tabular-nums font feature for number alignment.

מה Claude Code עושה: הטבלה משתמשת בקידוד צבע סמנטי — סרוק את עמודת ההבדל וראה מיד את הדפוס בלי לקרוא מספרים. font-variant-numeric: tabular-nums יישור הספרות בעמודה כדי שכל ה-$15,000 יתיישרו בצורה깔끔. התוצאות המעורבות (בעיקר ירוק, קצת אדום וכחול) מראות שזו לא השוואה חד-צדדית — היא הוגנת.

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

שלב 4: תרשימי עמודות + כרטיסי שיתוף

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

הנושא:

Add two sections to comparison.html. First: horizontal bar charts comparing each category visually. Two bars per chart (blue for A, amber for B), the larger bar at 100% width and the smaller proportional. Labels on the left, amounts inside the bars. Second: two side-by-side scope cards. Option A includes: Design, Development, Testing, Documentation (green checkmarks). Excludes: Dedicated support, Infrastructure hosting, 24/7 monitoring (red X marks). Option B includes everything PLUS support, infrastructure, and monitoring (all green). Pure CSS bars — no JavaScript or chart libraries.

מה Claude Code עושה: תרשימי העמודות הם אלמנטי div עם רוחבים מבוססי אחוזים ורקעיות גרדיאנט. אין ספריית תרשימים — CSS מטפלת בזה. כרטיסי השיתוף משתמשים ברשימות flexbox עם אייקונים עיגול בצבע. זה ויזואליזציית נתונים בלבד CSS — קלה, מהירה, עובדת בכל מקום, וממראה רגיע כמו ספריית תרשימים.

נסה: תרשימים מראים פרופורציות במבט אחד. כרטיסי שיתוף חושפים את ההחלפה — Option B עולה יותר אבל כולל אירוח ותמיכה. הקשר שטבלאות לבדן לא יכולות להעביר.

שלב 5: ניתוח פערים + סך הכל גדול + פריסה

הדחיפה הסופית — הראה מה חסר, חשב את הסך הכל האמיתי, וספן זאת.

הנושא:

Add three final sections to comparison.html. First: a "What's Missing" section with a red border listing items neither vendor covers — Hosting ($200-500/mo), SSL ($0-100/yr), Monitoring ($50-200/mo), Team training ($2,000-5,000 one-time). Group by priority: Critical vs Nice-to-have. Show cost ranges. Second: a grand total — Option A ($15,000 + ~$4,000 extras = ~$19,000) vs Option B ($19,500 + ~$2,000 extras = ~$21,500), showing ~$2,500 savings with A. Third: three scenario cards — Budget ($17,500), Balanced ($19,000), Premium ($21,000). Add a footer with a note about estimates. Then deploy this to Vercel.

מה Claude Code עושה: ניתוח הפערים משתמש באותו מערכת כרטיסים אבל עם גבול הדגש אדום לאות אזהרה. כותרות קבוצת עדיפויות משתמשות בתגים בעלי צבע — אותה שפה ויזואלית מטבלת ההשוואה, מחדשת בעקביות. הסך הכל הגדול קושר הכל. לפריסה, Claude Code מריץ את vercel — Vercel מזהה אתר סטטי ופורס אותו ל-CDN גלובלי. לוח הבקרה שלך טוען במהירות בכל מקום בעולם.

נסה: הדף מספר סיפור שלם: נושא, פירוק, פערים, סך הכל, תרחישים. פתח את הכתובת של Vercel בטלפון שלך — הכל מתסדר וקורא בצורה깔끔ה.

מה בנית

קובץ HTML יחיד עם:

• מערכת עיצוב באמצעות CSS custom properties
• פריסות רספונסיביות ברשת שמתסדרות בטלפון
• טבלת השוואה עם קידוד צבע סמנטי
• תרשימי עמודות בלבד CSS — אין JavaScript
• ניתוח שיתוף עם סימני ביקורת ויזואליים
• ניתוח פערים עם קיבוץ עדיפויות
• סך הכל גדול עם דוגמנות תרחישים
• פרוס לכתובת שניתן לשתף

חמישה נושאים. קובץ אחד. אפס תלויות.

קח את זה הלאה

• הנמק את הנתונים האמיתיים — הדבק PDF או צילום מסך ל-Claude Code וביקש ממנו לחלץ מספרים ולמלא את לוח הבקרה באופן אוטומטי.
• הפוך אותו דינמי — בקש מ-Claude Code להוסיף JavaScript שקורא מקובץ JSON, כך שתוכל להחליף השוואות בלי לערוך HTML.
• בנה תבנית — בקש מ-Claude Code לעשות אותה גנרית עם משתנים מציין מקום, כך שכל אחד יוכל להפוך אותה לשלו לעבור השוואות משלהם.