13 פרקים מעשיים שמלמדים Vibe Coders איך להנחות AI ליצור אתרים שנראים כאילו סטודיו עיצוב בנה אותם. צבע, טיפוגרפיה, layout, CSS מודרני, אנימציות, responsive ו-performance — עם מספרים מדויקים, פרומפטים מוכנים ו-capstone.
זיהוי סימני AI, הבנת מה הופך אתר לפרימיום, ובניית בסיס בצבע וטיפוגרפיה.
12 ה-tells שחושפים אתר כגנרי, AI slop checklist עם 15 שאלות, ופרומפט anti-AI מוכן לשימוש.
8px grid, letter-spacing -0.02em, hero H1 44-56px, 4 archetypes (SaaS/Agency/Portfolio/Luxury) ו-Premium Prompt Template.
פלטה שלמה (primary/secondary/accent/neutrals/semantic), contrast WCAG, design tokens, dark mode והפרומפט שנותן ל-AI פלטה.
font pairing, typographic scale, Google Fonts, variable fonts, פונטים עבריים (Heebo/Assistant/Rubik), RTL ו-mixed content.
שליטה ב-layout, אנימציות, מגמות עיצוב, responsive ו-performance — הפיצ'רים של 2024-2026 שרוב ה-AIs עדיין לא משתמשים בהם.
Grid vs Flexbox, bento grid, grid-template-areas, 8px grid system, whitespace ככלי עיצוב, asymmetric layouts.
Container Queries, :has(), @layer, CSS nesting, subgrid, @scope, anchor positioning, Masonry, color-mix, oklch — ב-4 tiers לפי browser support.
scroll() timeline, view() timeline, animation-range, scroll-triggered (Chrome 145), reveal, parallax ו-progress indicator ב-CSS טהור.
cross-fade, morph, slide, same/cross-document, שילוב עם Next.js/Astro/React Router, reduced-motion fallback.
backdrop-filter, Apple Liquid Glass (SVG feTurbulence/feSpecularLighting), mesh gradients, Neubrutalism — טרנדי 2025-2026.
breakpoints, Container Queries vs media, <picture> עם AVIF/WebP, touch targets 44x44, 3 hamburger patterns, stack-as-cards tables, RTL logical properties.
LCP/CLS/INP, Lighthouse, lazy loading, content-visibility, critical CSS, skeleton screens.
כלים אופציונליים ופרויקט סיום שמחבר את כל הידע.
כל פרק כולל פרומפטים מוכנים, תרגילים, ו-"עשה עכשיו" boxes — הידע הופך מיד לאתר טוב יותר.
letter-spacing -0.02em, content-width 680-720px, LCP < 2.5s — הספציפיים שמבדילים פרימיום מגנרי.
RTL נכון, פונטים עבריים (Heebo/Assistant/Rubik), ואתגרי mixed content עם מונחי אנגלית — מותאם לשוק הישראלי.
Container Queries, :has(), View Transitions, scroll-driven animations, Liquid Glass — הפיצ'רים שרוב ה-AIs עדיין לא משתמשים בהם.