לעצב ולבנות אתר עם סוכן AI

המתכון המלא

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

```text
# טיוטה: עיצוב ובניית אתר עם סוכן, מבריף עד בדיקה חיה

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

## המתכון לסוכן חדש

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

### קלט והרשאות
- קהל, מה הוא צריך לדעת/לעשות ומה נחשב הצלחה. לא בוחרים יעד עסקי במקום הבעלים.
- סוג האתר, דפים, שפות/RTL, תוכן מאושר, brand assets, תמונות עם זכויות וקישורים.
- 2-4 references והסבר מה אהבו בהם. לומדים hierarchy/spacing, לא מעתיקים מותג ונכסים.
- ריפו, stack/runtime/lockfile, hosting/domain וחשבון בעלים. באתר חדש בחר stack מינימלי והצג tradeoffs לפני החלטה גדולה.
- דרישות פונקציונליות: טפסים, API, search, analytics, auth. לכל תכונה פרטיות ועלות. אין טופס שנראה פעיל אך אינו מחובר.
- הרשאות לגישה, עריכה ופרסום בנפרד; preview/branch ומי מאשר. תוכן חסר נשאר blocker או placeholder מסומן ב-preview, לא עובדה מומצאת ב-production.

### כלים
עורך קוד, Git, runtime של הפרויקט, dev server, build/tests, browser לצילומי viewport ובדיקות קישורים/נגישות. HTML/CSS/JS מספיקים לאתר פשוט; שמור framework קיים כשאין סיבה להחליפו. נכסים ושירותים בתשלום דורשים אישור.

### שלבים
1. קרא את האתר והריפו: דפים, routes, components, style tokens, build/deploy ו-tests. בדוק git ושינויים מקבילים. שמור baseline screenshots ורשימת כתובות.
2. כתוב brief קצר: קהל, פעולה ראשית, תוכן חובה, מגבלות וסגנון. אסוף תוכן חסר. אין testimonials, שמות לקוחות או מספרי הצלחה מומצאים.
3. פתח references וצפה בפיקסלים. נתח כותרת/טקסט, grid, רוחב תוכן, contrast, תמונות ו-spacing. תעד מה תאמץ ומה לא; screenshot של אתר אחר אינו עיצוב שלך.
4. בנה information architecture: דפים/sections, פעולה ראשית וניווט. סדר נקבע מהבריף, לא מתבנית קבועה. שרטט wireframe ברוחב קטן לפני צבעים.
5. הגדר design tokens: background/surface/text/action, פונט תומך בשפות, טיפוגרפיה, spacing, radius ורוחב מרבי. בדוק contrast ושמור עקביות במקום ערכים אקראיים.
6. בנה preview של כיוון אחד עם תוכן אמיתי ושלד מלא. ברור מי האתר, למי ומה עושים. כשיש החלטת brand משמעותית הצג אותה לבעלים לפני בנייה מלאה.
7. כתוב semantic HTML: header/nav/main/footer, headings לפי hierarchy, button לפעולה ו-link לניווט, labels לטופס ו-alt מועיל. אל תשתמש ב-clickable div שאינו נגיש למקלדת.
8. בנה mobile-first עם grid/flex ויחידות גמישות. breakpoints במקום שבו התוכן נשבר. ב-RTL השתמש ב-logical properties וב-direction מתאים לקוד/URLs. בדוק טקסט ארוך ושפה מעורבת.
9. השתמש רק בנכסים מאושרים. הגדר מידות תמונה למניעת קפיצות layout, גדלים מתאימים ו-loading מתאים. הטקסט נשאר טקסט. אין תוכן בסיסי שחייב אנימציה כדי להופיע.
10. חבר רק תכונות בסקופ. טופס: validation, success/error, יעד נתונים מאושר, privacy/consent והגנת spam לפי סיכון. אין API secret בקוד לקוח. חיפוש: loading/empty/error. auth/payment דורשים תכנון והרשאה נפרדים, לא mock שמתחזה לפעיל.
11. הרץ build/lint/tests. בדוק routes, links, 404, title/meta/canonical לפי התוכן והיעדר מידע פרטי ב-assets/source maps. preview לא יהיה ציבורי/indexed בלי כוונה מאושרת.
12. פתח בדפדפן ובדוק פיקסלים: viewport צר (~390px), בינוני ורחב (~1440px), zoom 200%, תוכן ארוך וטעינה מלאה. בדוק overflow, crop, footer, sticky/menu/RTL ומצבי טופס. שמור screenshots למסכים/מצבים חשובים, תקן ובדוק שוב.
13. בדוק keyboard-only: tab order, focus visible, enter/space, escape ל-dialog; reduced motion ונגישות בסיסית. בדיקות אוטומטיות משלימות בדיקה ידנית, לא מחליפות אותה.
14. מסור preview עם diff, החלטות ו-known gaps. לפני פרסום אמת מחדש account/domain/branch. קבל אישור לתוכן הסופי ולאudience. אישור עיצוב אינו אישור לרכוש domain או לשנות DNS שמשבית אתר.
15. פרסם ב-hosting מאושר, קרא deploy result ופתח URL שהתקבל. אמת את הדף, assets/routes/actions וגדלי המסך. HTTP 200 אינו הוכחה. כשל deploy משאיר live קודם; אין bypass שקט של checks.
16. מסור URL חי, commit, commands לשחזור, tokens/components, gaps ו-rollback. תעד איפה עורכים תוכן ואיך בודקים. אין הבטחת SEO/conversion על סמך redesign בלבד.

### בדיקות
תוכן displayed מול מאושר; build; routes/links; סודות; mobile/desktop pixels; RTL; images loaded; form success/error; keyboard/focus; zoom/contrast; loading/empty; console/network errors; production readback. טופס נבדק רק עם נתוני בדיקה ונמען מורשים.

### מוכן
אין placeholder לא מאושר; פעולה ברורה; אין חיתוך או overflow לא מכוון; פונקציות עובדות או מסומנות לא מוכנות; pixels בגדלים רלוונטיים נבדקו; owner review ופרסום במסגרת הרשאה; URL חי אומת ו-rollback קיים. preview מוכן אינו אתר שפורסם.

### מלכודות ומגבלות
build אינו עיצוב שנבדק. screenshot לפני טעינת תמונה מטעה. RTL עם מספרים/קוד דורש בדיקה. CSS global יכול לשבור component אחר. mock form אינו form פעיל. צילום אחד אינו בדיקת כל המסכים או נגישות. אלה סיכוני יישום, לא טענות לתוצאה עסקית.

## מקורות שנקראו
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Responsive_Design
https://www.w3.org/WAI/tutorials/page-structure/
```