הצ'קליסט המקצועי — מאתר גנרי לאתר שנראה כמו סטודיו

13.1 למה צ'קליסט — ולמה דווקא עכשיו

בפרק 1 הראינו את הבעיה: AI בונה אתר גנרי. בפרק 2 הראינו את הסיבה: AI בונה ממוצע האינטרנט, ואתם צריכים להזין לו את החריג. ב-10 הפרקים שבאו אחר כך לימדנו אתכם, פריט אחר פריט, איך נראה החריג — מה הצבעים של אתר פרימיום, איך נראית טיפוגרפיה מקצועית, איך עובד layout מכוון, מה ההבדל בין אנימציה משמעותית לאנימציה לראווה, מה אומר "responsive mobile-first" באמת, ואיך אתר מהיר נמדד ב-Core Web Vitals.

כל זה ידע. ידע טוב. ידע מפורק. אבל כשמגיע הרגע לבנות אתר חדש — הידע המפורק הזה נהפך לבעיה. אתם פותחים Claude, Cursor או Lovable, כותבים "בנה לי landing page", ופתאום הידע של 12 פרקים מתפזר בין 40-50 החלטות קטנות שצריך לקבל תוך דקות: "האיזו פלטה? איזה font? כמה padding על כפתורים? האם לשים scroll-driven? האם responsive יהיה mobile-first? איך עושים meta tags? מה עם Open Graph? ו-favicon?" — ובלי מסגרת מסודרת, ה-AI מקבל החלטות בשבילכם, וה-AI מחליט על הממוצע. וחזרנו לאתר גנרי.

הצ'קליסט פותר את זה. הוא לוקח את 12 הפרקים והופך אותם ל-רצף קבוע של 13 קטגוריות ו-65+ פריטים שאתם מפעילים תמיד, באותה הסדר, על כל פרויקט. זו לא שוני יצירתי, זו שגרה. שגרות הן מה שמאפשרות למעצבים מנוסים לייצר תוצאה מעולה גם בפרויקט ה-50, ה-100, ה-300 — כי הם לא חושבים יותר "האם שכחתי משהו". הצ'קליסט אומר להם.

למה דווקא 13 קטגוריות (ולא 7, ולא 27)

13 זה המינימום לכיסוי אמיתי. ניסינו 7 קטגוריות — יוצא שטחי. ניסינו 27 — בני-אדם לא מפעילים 27 קטגוריות, הם מוותרים באמצע. 13 קטגוריות הוא מספר שאפשר לזכור (רוצים לבדוק? חצי-חצי: מחצית ראשונה של האלף-בית — צבעים, טיפוגרפיה, spacing, layout, אנימציות, responsive, performance; מחצית שנייה — dark mode, accessibility, meta, favicon, consistency, polish).

כל קטגוריה בצ'קליסט מפנה לפרק ספציפי בקורס, כך שאם נפלתם על פריט — אתם יודעים איפה לחזור. הצ'קליסט הוא לא "משהו חדש ללמוד". הוא הכלי שמסדר את מה שכבר למדתם ל-workflow קבוע.

13.2 איך משתמשים בצ'קליסט — המתודה

לצ'קליסט יש שני מצבי שימוש מרכזיים, ושניהם חשובים:

מצב A — Audit של אתר קיים: יש אתר (שלכם או של אחר). אתם עוברים על 13 הקטגוריות לפי הסדר, מסמנים V או X ליד כל פריט, ומחשבים ציון כולל (X מתוך 65+). פריטים שקיבלו X הופכים לרשימת תיקון. הציון הוא ה-benchmark של ה-Before, ובסוף ה-capstone תחזרו אליו עם ציון After.

מצב B — בנייה מאפס: אין אתר עדיין. אתם לוקחים את הצ'קליסט, ממירים אותו ל-Design Brief (סעיף 13.16), מזינים ל-AI, ומקבלים אתר שכבר נבנה לפי 65 הפריטים מההתחלה. אחר כך עושים גם audit (מצב A) לוודא שה-AI באמת ביצע — AI לא תמיד מממש הכל, גם כשכתבתם במפורש.

רוב הלומדים יעברו דרך שניהם. הסדר המומלץ: מצב A קודם, על אתר קיים שלכם (Before) — כדי שתרגישו מה חסר. אז מצב B — כדי לבנות את ה-After. והפיתרון הכי טוב הוא כשה-Before וה-After הם אותו פרויקט — אתם רואים את ההבדל בלב.

כלל העבודה: קטגוריה-קטגוריה, לא הכל בבת-אחת

הטעות הכי נפוצה ב-capstone היא לנסות לשדרג את כל 13 הקטגוריות במקביל. זה נכשל. אתם מתפזרים, כל שינוי משפיע על כל השאר, ובסוף התוצאה היא שינוי מצטבר לא-מכוון. הכלל הוא פשוט: בוחרים קטגוריה, עובדים עליה 3-5 דקות, סוגרים אותה. עוברים לבאה. אם גיליתם בקטגוריה 7 משהו שמחייב לחזור לקטגוריה 3 — רושמים בצד וממשיכים הלאה. חוזרים אחרי ש-13 הקטגוריות נעשו. אחרת אתם מסתובבים 3 שעות ועדיין לא סיימתם את ה-audit.

13.3 קטגוריה 1: צבעים — פלטה, tokens, contrast

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

רשימת הבדיקה — קטגוריה 1 (5 פריטים)

• 1.1 האתר מוגדר עם 2-3 צבעים מרכזיים בלבד (primary + accent + neutral), לא 7.
• 1.2 כל הצבעים ב-CSS מוגדרים כ-CSS custom properties בגלובל (:root { --primary: ...; }), ולא hardcoded בכל מקום.
• 1.3 contrast ratio של טקסט מול הרקע הוא לפחות 4.5:1 (רגיל) / 3:1 (טקסט גדול מעל 24px). נבדק ב-Chrome DevTools או ב-WebAIM.
• 1.4 אין Purple-to-Blue gradient (האנטי-דפוס הידוע מפרק 1). אם יש gradient, הוא מבוסס ה-brand, לא ברירת-מחדל.
• 1.5 יש dark mode tokens מוכנים (גם אם לא הטמעתם toggle עדיין) — הצ'קליסט מחייב שתהיה לכם @media (prefers-color-scheme: dark) עם פלטה הפוכה.

13.4 קטגוריה 2: טיפוגרפיה — pairing, hierarchy, responsive

טיפוגרפיה היא 40% מ"האם האתר נראה מקצועי". הפרק הזה לא מלמד טיפוגרפיה מחדש (זה היה פרק 4) — הוא נותן לכם רשימת בדיקה למה שפרק 4 הציג.

רשימת הבדיקה — קטגוריה 2 (6 פריטים)

• 2.1 יש font pairing מוגדר — display font ל-headings + body font לטקסט. לא אותו font בכל מקום.
• 2.2 Display font הוא לא Inter (האנטי-דפוס הידוע). אם כבר Inter — רק ל-body, לעולם לא ל-headings.
• 2.3 יש typographic scale ברור: H1 > H2 > H3 > body > small. יחס מינימום 1.25 בין מדרגות.
• 2.4 line-height של body: 1.5-1.7. של headings: 1.1-1.25. לא אותו line-height לשניהם.
• 2.5 Hebrew support אמיתי — פונט שנראה טוב גם ב-Hebrew (Heebo / Assistant / Rubik / IBM Plex Sans Hebrew / Ploni). לא Inter-Hebrew-fallback מכוער.
• 2.6 responsive sizes עם clamp() — לא font-size קבוע ב-px. H1 למשל clamp(2.25rem, 5vw + 1rem, 4rem).

13.5 קטגוריה 3: Spacing — 8px grid ו-whitespace מכוון

Spacing הוא ההבדל הסודי בין אתר חובבני לאתר מקצועי. אתרים חובבניים יש להם spacing רנדומלי — 12px פה, 17px שם, 23px במקום אחר. אתרים מקצועיים עושים הכל בכפולות של 8: 8, 16, 24, 32, 48, 64, 96. העין לא רואה את זה מודעת — היא מרגישה את זה כ"ריתמי" או "מסודר".

רשימת הבדיקה — קטגוריה 3 (5 פריטים)

• 3.1 כל ה-padding ו-margin בכפולות של 8 (או 4 למיקרו). אין 12, 17, 23 — יש 8, 16, 24, 32.
• 3.2 whitespace סביב hero גדול פי 1.5-2 מ-section רגיל. Hero מרגיש "נשימה", sections מרגישים "רצף".
• 3.3 visual grouping מבוסס-spacing — אלמנטים שקשורים קרובים (8-16px), אלמנטים שלא קשורים רחוקים (48-64px). לא אותו gap לכולם.
• 3.4 יש spacing scale ב-tokens (--space-xs: 8px; --space-sm: 16px; --space-md: 24px; ...) ולא px ישירים.
• 3.5 logical properties — padding-inline ו-margin-block במקום padding-left/right (חשוב במיוחד ל-RTL).

13.6 קטגוריה 4: Layout — Grid, Flexbox, asymmetry

רשימת הבדיקה — קטגוריה 4 (5 פריטים)

• 4.1 CSS Grid לפריסות דו-ממדיות (hero 2-columns, features 3-columns, pricing 3-tier). לא Flexbox-בתוך-Flexbox.
• 4.2 Flexbox רק ל-1D (נאב, רשימות אופקיות, כפתורים זה ליד זה).
• 4.3 יש asymmetry במקום אחד לפחות — לא הכל מסודר במרכז. Hero עם טקסט 60% משמאל ותמונה 40% מימין, או grid 3-columns שבו הפינה הימנית גדולה פי 2.
• 4.4 content-width מוגדר — container מקסימלי (max-width: 1280px / 1440px), לא content שנמתח על 4K.
• 4.5 gap (לא margin) ל-spacing בין grid items. gap: 2rem; קצר וברור.

13.7 קטגוריה 5: אנימציות — scroll-driven, View Transitions, purposeful

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

רשימת הבדיקה — קטגוריה 5 (6 פריטים)

• 5.1 יש scroll-driven animation אחת לפחות (progress bar, parallax hero, section fade-in) — ב-CSS טהור (פרק 7), לא JS.
• 5.2 יש View Transition לפחות בין 2 עמודים עיקריים — @view-transition { navigation: auto; } (פרק 8).
• 5.3 כל hover state יש לו transition (לא הופעה/העלמה חדה). 150-250ms ease-out.
• 5.4 אין אנימציות מתמשכות ברקע (floating blobs, rotating gradients) שרצות כל הזמן — רק אם הן חלק מה-brand.
• 5.5 prefers-reduced-motion מכובד — יש @media (prefers-reduced-motion: reduce) שמשבית אנימציות למי שהגדיר את זה במערכת.
• 5.6 AOS / JS animations heavy לא משומשים — הכל native CSS. אם יש JS animation, הוא על אלמנט אחד בלבד וחיוני.

13.8 קטגוריה 6: Responsive — mobile-first, touch targets

רשימת הבדיקה — קטגוריה 6 (6 פריטים)

• 6.1 ה-CSS כתוב mobile-first — ה-default הוא מובייל, @media (min-width: ...) מוסיפים desktop.
• 6.2 יש breakpoints ברורים: 640px (sm), 768px (md), 1024px (lg), 1280px (xl). לא רנדומליים (לא 743, לא 1100).
• 6.3 Touch targets מינימום 44×44px (כפתורים, קישורים, אייקונים). נבדק ב-Chrome DevTools → Device mode.
• 6.4 תמונות responsive — <img srcset="..." sizes="..." loading="lazy"> או <picture> עם multiple sources. לא תמונה אחת גדולה לכל המסכים.
• 6.5 Container Queries איפה שרלוונטי (פרק 10) — card שיודע להשתנות לפי רוחב ה-container שלו, לא לפי viewport.
• 6.6 בוצע real device test — פתחתם את האתר על טלפון אמיתי (iPhone ו-Android), לא רק ב-DevTools. בדקו touch, scroll, טפסים.

13.9 קטגוריה 7: Performance — LCP, CLS, INP

Performance הוא הקטגוריה שהכי קל לשכוח ב-audit. ה-AI לא ייצר עבורכם אתר איטי בכוונה — הוא פשוט לא חושב על זה. אתם חייבים לחשוב.

רשימת הבדיקה — קטגוריה 7 (7 פריטים)

• 7.1 LCP < 2.5s — נבדק ב-Lighthouse במובייל. ה-hero image או ה-H1 צריכים להופיע תוך 2.5 שניות.
• 7.2 CLS < 0.1 — אין לחיצות-רפאים של layout. תמונות עם width ו-height מפורשים. fonts עם font-display: swap ב-@font-face.
• 7.3 INP < 200ms — הקלקה על כפתור מגיבה מיידית. אין חסימות JS ארוכות.
• 7.4 lazy-load על כל התמונות למטה מה-fold (loading="lazy"). hero image עם fetchpriority="high" ו-בלי lazy.
• 7.5 תמונות אופטימיזציה — עברו ב-Squoosh או ImgBot. WebP או AVIF, לא PNG של 2MB. מטרה: כל hero image מתחת 200KB.
• 7.6 fonts subsetting — אם השתמשתם ב-Google Fonts, רק ה-weights שבאמת צריך (לא 100-900). לעברית: subset hebrew ולא latin-extended.
• 7.7 JS bundles מתחת ל-150KB gzipped. אם יש פריימוורק כבד (React / Vue) — בדקו שלא הוספתם libraries מיותרות.

13.10 קטגוריה 8: Dark Mode — toggle, tokens, contrast שמור

Dark mode הוא לא bonus. ב-2026, משתמשים שמגדירים dark mode במערכת שלהם מצפים שכל אתר יכבד את זה — ואם האתר לא, הם חושבים שהוא "ישן". הצ'קליסט פה הוא מינימום הכרחי, לא אקסטרה.

רשימת הבדיקה — קטגוריה 8 (5 פריטים)

• 8.1 יש dark mode tokens ב-CSS — :root { ... } למצב בהיר + @media (prefers-color-scheme: dark) { :root { ... } } למצב כהה. שני מצבים, אותם שמות של tokens.
• 8.2 יש toggle ידני (כפתור בנאב) שדורס את העדפת המערכת. שמור ב-localStorage ו-ניטל מ-data-theme על <html>.
• 8.3 contrast 4.5:1 נשמר בשני המצבים. בעיה נפוצה: light mode עובר, dark mode לא. בדיקה חובה בשני המצבים.
• 8.4 images מסתגלות — צריך להיות gradient/צבע חלופי ל-hero image שהיה יפה על בהיר אבל נבלע על כהה. אפשר עם picture + media="(prefers-color-scheme: dark)".
• 8.5 לא מעבר חד בין המצבים — transition עדין של 250ms על background-color ו-color של body.

13.11 קטגוריה 9: Accessibility — alt, semantic, keyboard

Accessibility (a11y) היא לא bonus — היא חובה משפטית בישראל (חוק שוויון זכויות לאנשים עם מוגבלות, תקנות נגישות לאתרים). מעבר להיבט המשפטי, אתר נגיש הוא אתר טוב יותר לכולם: SEO משתפר, מהירות משתפרת, חווית השימוש מקלה גם למשתמשים רגילים. הצ'קליסט כאן הוא מינימום, לא a11y מלא.

רשימת הבדיקה — קטגוריה 9 (7 פריטים)

• 9.1 alt text על כל התמונות — תיאור משמעותי, לא "image.png". תמונות דקורטיביות — alt="" (ריק מפורש, לא נעדר).
• 9.2 semantic HTML — <nav>, <main>, <article>, <section>, <footer>. לא <div> לכל דבר.
• 9.3 heading hierarchy — H1 אחד בעמוד, ואז H2 → H3 בסדר. אין H1 → H4. קוראי מסך מסתמכים על זה.
• 9.4 ARIA labels על כפתורי אייקון שאין להם טקסט (aria-label="סגור תפריט").
• 9.5 keyboard navigation עובדת — אפשר לעבור על כל האתר עם Tab בלבד. כל אלמנט אינטראקטיבי מקבל focus מובהק.
• 9.6 focus indicator נראה היטב — outline של 2px + offset, בצבע accent של ה-brand. לא outline: none בלי אלטרנטיבה.
• 9.7 axe DevTools עובר עם 0 critical errors — זה מינימום. הרצה חובה.

13.12 קטגוריה 10: Meta tags ו-Open Graph

השיתוף הוא חלק מהאתר. אם הלינק של האתר שלכם מופיע ב-WhatsApp בלי תמונה, בלי כותרת, עם URL ארוך ומכוער — המשתמש לא יקליק. לא משנה כמה האתר עצמו יפה. Open Graph הוא מה שהופך את הלינק שלכם ל-preview card מקצועי.

רשימת הבדיקה — קטגוריה 10 (6 פריטים)

• 10.1 <title> ייחודי לכל עמוד, 50-60 תווים, כולל brand בסוף. דוגמה: "מחירון | שם המוצר".
• 10.2 <meta name="description"> ייחודי לכל עמוד, 150-160 תווים. מה שמופיע ב-Google תחת הכותרת.
• 10.3 og:image מוגדר, קובץ 1200×630px PNG עם לוגו, כותרת ו-brand colors. לא ה-favicon.
• 10.4 og:title, og:description, og:url, og:type — ארבעתם מוגדרים. אחרת השיתוף יראה URL בלבד.
• 10.5 twitter:card = summary_large_image (הגדולה יותר, נראית טוב יותר).
• 10.6 בדיקה ב-OpenGraph.xyz או metatags.io — העלו את ה-URL שלכם ותראו איך זה נראה ב-FB, Twitter, LinkedIn, Slack לפני שחרור.

13.13 קטגוריה 11: Favicon — כולל גרסת Dark Mode

Favicon הוא הפרט הכי קטן באתר ויש לו השפעה הכי לא-פרופורציונלית על תפיסת מקצועיות. אתר בלי favicon (או עם favicon גנרי של "world icon") מאבד נקודות ברגע שהמשתמש פותח 7 לשוניות ולא יכול לזהות איזו שייכת לאתר שלכם.

רשימת הבדיקה — קטגוריה 11 (5 פריטים)

• 11.1 favicon.svg — לוגו שלכם כ-SVG, נראה טוב בכל גודל. קובץ אחד, scalable.
• 11.2 favicon.ico fallback — 32×32 ו-16×16 בתוך קובץ .ico אחד (לדפדפנים ישנים). אפשר לייצר ב-realfavicongenerator.net.
• 11.3 apple-touch-icon 180×180 — מה שמופיע כשמוסיפים למסך הבית ב-iOS.
• 11.4 גרסת Dark Mode — ב-SVG favicon, הוסיפו <style>@media (prefers-color-scheme: dark) { .logo-path { fill: white; } }</style>. ב-macOS Safari ו-Chrome Dark, האייקון ישתנה לגרסה המתאימה.
• 11.5 web app manifest (manifest.webmanifest) עם theme_color ו-icons array — אם האתר הוא PWA או רוצים תמיכה מלאה במובייל.

13.14 קטגוריה 12: עקביות — style guide בין עמודים

עקביות היא מה שמפריד בין אתר מקצועי לאתר ש"מישהו בנה". סימן ההיכר לאתר חובבני: כל עמוד נראה כמו שנבנה ביום אחר. Hero עם font אחד, about page עם font אחר. כפתור "הירשם" בגוון ירוק בדף הבית, ובגוון צהבהב בדף pricing. הפריטים כאן הם למניעת אי-עקביות.

רשימת הבדיקה — קטגוריה 12 (5 פריטים)

• 12.1 אותם tokens בכל עמוד — אין עמוד עם צבעים שלא ב-:root. CSS גלובלי אחד, לא CSS local לכל עמוד.
• 12.2 אותו font pairing בכל עמוד — ב-home יש Display font X ו-body Y? בכל עמוד אותם שניים. אין דף אחד "מפתיע".
• 12.3 אותו spacing scale בכל עמוד — section padding גלובלי זהה. לא 64px ב-home ו-48px ב-about.
• 12.4 Nav עקבי — אותם קישורים, באותו סדר, באותה צורה בכל העמודים. מיקום לוגו זהה.
• 12.5 Footer עקבי — גם footer הוא חלק מ-style guide. אותו content, אותו עיצוב בכל עמוד.

13.15 קטגוריה 13: Polish + 5 Premium Micro-Details

Polish הוא השכבה הדקה האחרונה. מי שמדלג עליה — האתר נשאר "כמעט מקצועי". מי שעובר עליה — האתר הופך "כמו סטודיו". בסעיף הזה מכסים את הפריטים הבסיסיים של polish + 5 פרטים פרימיום שלא דיברנו עליהם באף פרק קודם, אבל שכל אתר ברמת סטודיו מקפיד עליהם.

רשימת הבדיקה — קטגוריה 13 (7 פריטים + 5 פרטי פרימיום)

• 13.1 hover state על כל אלמנט אינטראקטיבי — כפתורים, קישורים, כרטיסים. אין רכיב שלא מגיב ל-hover.
• 13.2 transitions חלקים על hover (150-250ms ease-out). לא קופץ-מיידי.
• 13.3 loading state בכל מקום שדורש anticipation — כפתור submit עם spinner, skeleton screen במקום תוכן ריק, shimmer של card.
• 13.4 error state מעוצב — לא רק "שגיאה" אדום. הסבר מה השתבש + מה לעשות.
• 13.5 success state חיובי — לא רק "הצלחה!". חוויית micro של checkmark מצויר, confetti ל-actions גדולות, או transition שמאשר.
• 13.6 empty state מעוצב — רשימה ריקה? אל תציגו "אין נתונים". הציגו ציור + הסבר + כפתור "צור הראשון".
• 13.7 loading state של עמוד ראשוני — view transition או fade-in של 300ms, לא הופעה חדה של layout מלא.

5 Premium Micro-Details — מה שמפריד "טוב" מ-"סטודיו"

Micro-Detail 1: Custom Scrollbar Styling. ברירת המחדל של הדפדפן נראית חובבנית. אתרים מקצועיים מעצבים את ה-scrollbar שלהם להתאים ל-brand.

/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg-subtle); }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); }

/* Firefox */
html { scrollbar-width: thin; scrollbar-color: var(--primary) var(--bg-subtle); }

Micro-Detail 2: Z-Index Strategy. אתרים חובבניים יש להם z-index: 9999999 פה ו-z-index: 1 שם. אתרים מקצועיים תכננו סדר ברור:

:root {
  --z-base: 0;          /* הרקע, תוכן רגיל */
  --z-content: 1;       /* תוכן מורם, cards */
  --z-sticky: 10;       /* Sticky nav */
  --z-dropdown: 50;     /* Dropdowns, popovers */
  --z-modal-backdrop: 90; /* רקע של modal */
  --z-modal: 100;       /* Modal עצמו */
  --z-toast: 1000;      /* הודעות toast שמופיעות מעל הכל */
}

בכל z-index בפרויקט — משתמשים רק ב-tokens האלה. לא מספר חופשי.

Micro-Detail 3: Custom 404 Page. ב-99% מהאתרים, דף 404 הוא טקסט חיוור "Page not found" בזברה של הדפדפן. אתר מקצועי הופך את הרגע הזה לחוויה מיתוגית — איור או illustration של brand, הודעה בטון של המוצר, ו-2-3 קישורים חזרה לעמודים פופולריים.

<!-- 404.html -->
<main class="error-page">
  <img src="/404-illustration.svg" alt="" width="320" height="320">
  <h1>אופס — הדף הזה לא כאן</h1>
  <p>כנראה הגעתם לקישור שהסתובב, או שהדף שינה כתובת.</p>
  <div class="cta-row">
    <a href="/" class="btn">חזרה לדף הבית</a>
    <a href="/search" class="btn-outline">חיפוש באתר</a>
  </div>
</main>

Micro-Detail 4: Form Focus States. ברירת המחדל: outline כחול מכוער. מקצועי: ring בצבע brand עם transition עדין.

input, textarea, select {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75em 1em;
  transition: border-color 150ms, box-shadow 150ms;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 30%, transparent);
}

Micro-Detail 5: Button Proportional Padding. הטעות הנפוצה היא padding: 12px 24px על כל כפתור. אתר מקצועי משתמש ב-em:

.btn {
  padding: 0.7em 1.4em;  /* יחסי לגודל הפונט */
  line-height: 1;
  border-radius: 8px;
}
.btn--lg { font-size: 1.25rem; }   /* אוטומטית גדול יותר, גם הכפתור */
.btn--sm { font-size: 0.875rem; }  /* אוטומטית קטן יותר, גם הכפתור */

התוצאה: כפתורים נראים פרופורציונליים בכל גודל. לא צריך להגדיר padding חדש לכל variant.

13.16 Design Brief Template — פרומפט-העל של 500 מילים

אחרי שעברנו על 13 הקטגוריות, ה-"deliverable" של הפרק הזה הוא לא הצ'קליסט עצמו (שהוא כלי audit). ה-deliverable האמיתי הוא Design Brief Template — פרומפט של 400-500 מילים שמתאר את כל ההחלטות מ-13 הקטגוריות באופן שה-AI יכול לממש מהפרומפט הראשון. זו התוצאה הסופית של הקורס: היכולת לכתוב פרומפט אחד ולקבל אתר ברמת סטודיו.

להלן התבנית. העתיקו, החליפו את המשתנים ב-<חץ>, הזינו ל-Claude / Cursor / Lovable / v0.

# DESIGN BRIEF — <שם הפרויקט>

## PROJECT
Build a production-ready landing page for <שם המוצר>, serving
<קהל יעד ספציפי, 10-15 מילים>, communicating <רגש/archetype, 5-10 מילים>.
Language: Hebrew (RTL). Stack: vanilla HTML + CSS (no build step). Target: 1 file, self-contained.

## ANTI-PATTERNS (avoid at all cost — from Chapter 1)
- Inter font anywhere except body fallback
- Purple-to-blue gradients
- Generic CTAs ("Get Started", "Learn More") — use outcome-specific copy
- Identical section padding (use hierarchy)
- Zero hover states on interactive elements
- Stock photos of smiling teams

## COLORS (Category 1)
Palette: <2-3 צבעים בprimary oklch()> + 4 neutrals (white, gray-100, gray-500, gray-900).
All in CSS custom properties. Dark mode included via @media (prefers-color-scheme: dark).
Contrast 4.5:1 minimum, both modes.

## TYPOGRAPHY (Category 2)
Display: <Fraunces / Instrument Serif / Space Grotesk — לא Inter>.
Body: <Heebo / Assistant / Rubik> (Hebrew-ready).
Scale: H1 clamp(2.25rem, 5vw+1rem, 4rem), H2 clamp(1.75rem, 3.5vw+0.5rem, 2.5rem).
Line-height: headings 1.15, body 1.6. Letter-spacing headings -0.02em.

## SPACING (Category 3)
8px grid. Space tokens: --space-xs:8px, sm:16px, md:24px, lg:48px, xl:96px.
Hero padding-block: clamp(6rem, 12vw, 10rem). Section padding-block: clamp(4rem, 8vw, 6rem).
Use logical properties (padding-inline, margin-block) for RTL safety.

## LAYOUT (Category 4)
CSS Grid for 2D (hero, features, pricing). Flexbox only for 1D (nav, button rows).
Max-width container: 1280px. Hero asymmetric 3fr/2fr (text/visual).
Gap (not margin) between grid children.

## ANIMATIONS (Category 5)
One scroll-driven animation (progress bar or section fade-in via animation-timeline: scroll()).
View Transitions enabled (@view-transition { navigation: auto; }).
All hover transitions: 150-250ms ease-out. Respect prefers-reduced-motion.

## RESPONSIVE (Category 6)
Mobile-first CSS. Breakpoints 640/768/1024/1280. Touch targets min 44×44px.
Images: <picture> or srcset with WebP. Hero image fetchpriority=high, others lazy.

## PERFORMANCE (Category 7)
Target: LCP < 2.5s, CLS < 0.1, INP < 200ms on simulated 4G.
No JS libraries unless essential. Inline critical CSS. font-display: swap.

## DARK MODE (Category 8)
Manual toggle via data-theme on <html>, persisted in localStorage. Respects system preference by default.
Smooth 250ms transition on background-color and color.

## ACCESSIBILITY (Category 9)
Semantic HTML (nav/main/article/section/footer). Alt on all images. ARIA-label on icon buttons.
Focus-visible ring 2px accent color + offset 2px. Heading hierarchy H1 → H2 → H3.

## META + OG (Category 10)
<title>, <meta description>, og:image 1200×630 (to be designed separately),
og:title/description/url/type, twitter:card=summary_large_image.

## FAVICON (Category 11)
SVG favicon with @media (prefers-color-scheme: dark) rule. 180×180 apple-touch-icon.

## CONSISTENCY (Category 12)
One global CSS file. All tokens in :root. Same nav/footer on every page.

## POLISH (Category 13 + 5 micro-details)
Hover on every interactive. Loading/error/empty/success states designed.
Custom scrollbar matching brand. Z-index tokens (base:0, content:1, sticky:10, modal:100, toast:1000).
Custom 404 page. Form focus-ring matching accent. Button padding in em (0.7em 1.4em).

## DELIVER
One index.html + one styles.css + favicon.svg + 404.html. Inline SVG icons only (no external libs).
Hebrew content throughout, dir="rtl" on html tag, tested visually in RTL.

13.17 ה-Capstone — Before/After מלא, צעד אחר צעד

זהו ה-capstone האמיתי. במקום לקרוא עוד תיאוריה, אתם תעברו את התהליך בעצמכם. 60-90 דקות. אחרי זה תהיה לכם דוגמה אישית של "מה זה אומר לקחת אתר גנרי ולהפוך אותו למקצועי", וה-before/after הזה יהיה התיק שלכם לפרויקטים עתידיים.

החלק הראשון: Before — בונים אתר גנרי בכוונה

הזינו ל-AI פרומפט גנרי ורע בכוונה. זה ה-"before":

Build me a modern landing page for an AI writing tool.
Make it sleek and professional.

בלי בריף, בלי ספציפיות, בלי anti-patterns. מה שה-AI מחזיר — זו הברירה-מחדל שלו, והיא כמעט תמיד גנרית. שמרו את התוצאה כ-before.html. שמרו גם צילום מסך של הדף מה-browser.

החלק השני: Audit — הפעילו את הצ'קליסט

עברו על 13 הקטגוריות, קטגוריה-קטגוריה, על ה-before. עבור כל פריט — V או X. סכמו ציון (בדרך כלל יצא סביב 25-35 מתוך 65 בגלל תבנית AI). רשמו את ה-20-30 פריטים שנפלו — אלה רשימת התיקון.

החלק השלישי: After — הזינו ל-AI את ה-Design Brief

מלאו את ה-Design Brief Template מסעיף 13.16 עם ערכים ספציפיים שמתאימים לאתר של כלי כתיבה AI:

• archetype: "creative yet precise — serves professional writers, 25-45, who value clarity"
• palette: "oklch(25% 0.04 270) primary, oklch(70% 0.15 50) accent, neutrals"
• display font: "Instrument Serif"
• body font: "Heebo"
• mood: "editorial confidence, not tech-bro enthusiasm"

הזינו את הפרומפט המלא ל-AI. מה שיחזור זה ה-After. שמרו כ-after.html. צלמו שוב.

החלק הרביעי: ציון After + מסמך הבדלים

הפעילו שוב את הצ'קליסט על ה-After. בדרך כלל הציון יקפוץ ל-50-58 מתוך 65 (לא 65 מלאים — AI מחמיץ כמה פריטים תמיד, זה נורמלי). תקנו ידנית את הפריטים שנפלו. הגיעו ל-60+.

עכשיו כתבו diff.md — מסמך של 5-10 שורות: "מה השתנה בין Before ל-After?". לדוגמה:

• Before: Inter בכל מקום. After: Instrument Serif ל-headings + Heebo ל-body.
• Before: Purple-blue gradient hero. After: Solid primary עם accent badge.
• Before: Padding זהה בכל section. After: Hero גדול פי 2, sections בסיס ב-clamp().
• Before: אין dark mode. After: Toggle מלא + tokens לשני המצבים.
• Before: אין og:image. After: 1200×630 PNG מעוצב.
• Before: Favicon גנרי. After: SVG עם dark mode variant.
• Before: כפתורים עם padding קבוע. After: em-based proportional padding.

13.18 הסגירה — מה בניתם ב-13 פרקים

התחלתם ב-פרק 1 עם שאלה: "למה אתרים של AI נראים AI-generated?". סיימתם ב-פרק 13 עם היכולת לכתוב פרומפט של 500 מילים שה-AI ייקח ויחזיר לכם אתר ברמת סטודיו. זו אותה אמירה בדיוק — רק מהצד השני. הראשונה אומרת את הבעיה, השנייה אומרת את הפתרון.

אבל חשוב להבין: הקורס הזה לא לימד אתכם "איך להשתמש ב-AI כדי לבנות אתרים". זה יכלו ללמד אתכם ביום אחד. הקורס לימד אתכם משהו אחר — איך לדעת מה אתם רוצים מאתר. ה-AI הוא רק הממציא. ה-brief זה ה-יכולת שלכם.

ה-Design Brief של 500 מילים לא הופיע יש-מאין. הוא אוסף של 12 פרקי ידע, מומר לפורמט שה-AI קורא. בלי הידע של פרק 3 (צבעים) — אתם לא יודעים לכתוב "oklch(25% 0.04 270)". בלי הידע של פרק 4 (טיפוגרפיה) — אתם לא יודעים למה לבקש Instrument Serif ולא Inter. בלי פרק 11 (performance) — אתם לא יודעים להגדיר "LCP < 2.5s". הידע הוא הפרומפט. הפרומפט הוא האתר.

בפרק 12 אמרנו: כלים = power-up אופציונלי. הפרק הזה מסיים את המשפט: הצ'קליסט = workflow הכרחי. בלי הצ'קליסט, אתם שוכחים. בלי שכחה, אתם עקביים. עקביות זה מה שהופך Vibe Coder מסתם-מישהו-שבונה-אתרים למי שבונה-אתרים-ברמה-גבוהה.

השמרו את ה-Design Brief. עדכנו אותו לפרויקט הבא. ועוד אחד. ועוד. אחרי 10 פרויקטים, יהיה לכם תבנית-על אישית, מותאמת ל-archetypes שלכם, עם הערות כמו "הלקוחות שלי תמיד אוהבים סגול מעט יותר" ו-"לא להציע אנימציות scroll-driven ללקוחות בגילאי 60+". זו המומחיות שלכם. הקורס הזה היה הזרע.