ההנחיות לפיתוח אתרים מודרני הן מיומנות של סוכן שמיישמת שיטות מומלצות מודרניות בתהליך העבודה של קידוד בעזרת AI. הוא עוזר להרחיק את סוכן התכנות מפתרונות עקיפים מדור קודם לבעיות נפוצות בפיתוח אתרים, ובמקום זאת להפנות אותו לפתרונות שצריכים להשתמש בתכונות חדשות יותר של פלטפורמת האינטרנט.
התקנה
אפשר להתקין את היכולות של 'הנחיות לשימוש באינטרנט מודרני' במגוון רחב של סוכנים, וכך לשמור על תהליך העבודה המועדף עליכם ועדיין ליהנות מההנחיות שהם מספקים.
modern-web-guidance CLI (מומלץ)
שיטת ההתקנה המומלצת היא באמצעות modern-web-guidance CLI שנוצר על ידי צוות Chrome. התקנת הכישורים באמצעות modern-web-guidance CLI תעדכן את הכישורים באופן אוטומטי. אפשר להתקין מ-modern-web-guidance CLI כך:
npx modern-web-guidance@latest install
אם אתם מפתחים תוספים ל-Chrome, מומלץ להשתמש בפקודה הבאה:
npx modern-web-guidance@latest install --choose
הפעולה הזו מפעילה אשף אינטראקטיבי להתקנת המיומנויות בהתאם להעדפות שלכם.
אם אתם מעדיפים להשתמש ביכולות של Modern Web Guidance בלי להשתמש ב-modern-web-guidance CLI, תוכלו לקרוא בהמשך איך להתקין אותן לסוכן המועדף שלכם.
Antigravity
מורידים את Antigravity ומפעילים את האפשרות modern-web-guidance (הנחיות לגבי אתרים מודרניים) במהלך תהליך ההתקנה, או דרך הדף Settings (הגדרות) בקטע Customizations (התאמות אישיות) ואז בקטע Build with Google Plugins (בנייה באמצעות פלאגינים של Google).
Antigravity CLI
agy plugin install https://github.com/GoogleChrome/modern-web-guidance
Gemini CLI
gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update
JetBrains WebStorm
אפשר למצוא את המיומנויות של Modern Web Guidance במרכז המיומנויות, שזמין בקטע הגדרות > עוזר ה-AI > מיומנויות. בוחרים מיומנות כדי לפתוח את דף הפרטים שלה. כדי להתקין את היכולת, לוחצים על הלחצן Install כדי להחיל אותה על מופע ה-IDE הנוכחי.
GitHub CLI
gh skill install GoogleChrome/modern-web-guidance
npx skills
npx skills add GoogleChrome/modern-web-guidance
Claude Code
התקנת Modern Web Guidance לשימוש עם Claude Code מתבצעת בשלושה שלבים:
1. מוסיפים את זירת המסחר:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. מתקינים את הפלאגין מ-Marketplace:
/plugin install modern-web-guidance@googlechrome
3. טעינה מחדש של פלאגינים:
/reload-plugins
Copilot CLI
התקנת Modern Web Guidance לשימוש עם Copilot מתבצעת בשני שלבים:
1. מוסיפים את זירת המסחר:
/plugin marketplace add GoogleChrome/modern-web-guidance
2. מתקינים את הפלאגין מ-Marketplace:
/plugin install modern-web-guidance@googlechrome
אווז
goose plugin install https://github.com/GoogleChrome/modern-web-guidance --auto-update
בדיקה לפני ההתקנה
לפני ההתקנה, אפשר להעריך את ספריית המדריכים של Modern Web Guidance על ידי חיפוש באמצעות שאילתה או אחזור המדריכים שלנו לפי מזהה. כדי לעשות זאת, משתמשים בפקודה search של ה-CLI כדי למצוא את מזהה תרחיש השימוש באמצעות הנחיה:
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
אובייקט JSON יוצג במסוף:
[{"id":"light-dismiss-a-dialog","description":"Create a modal dialog that can be closed via light dismiss (i.e. clicking or tapping outside of the dialog)","category":"user-experience","featuresUsed":["<dialog closedby>"],"tokenCount":1085,"similarity":0.7076},
{"id":"animate-to-from-top-layer","description":"Animate elements such as dialogs, popovers, and tooltips as they're entering/exiting the top layer.","category":"user-experience","featuresUsed":["::backdrop","<dialog>","overlay","Popover","@starting-style","transition-behavior"],"tokenCount":1541,"similarity":0.6842},
{"id":"declarative-dialog-popover-control","description":"Toggle the visibility of a dialog or popover from a button without writing JavaScript.","category":"user-experience","featuresUsed":["Invoker commands","Popover","<dialog>"],"tokenCount":2684,"similarity":0.5685},
{"id":"html","description":"Action-oriented guidelines for modern HTML architecture, semantics, native interactive APIs (Dialog, Popover, Details), focus management, and resource prioritization. Use this guide when structuring web documents, implementing native overlays, or optimizing resource loading order.","category":"html","tokenCount":5484,"similarity":0.5471},
{"id":"accessibility","description":"Actionable coding guidelines for building accessible web applications, covering semantic HTML, focus management, forms, media, and testing. Use this skill when auditing or implementing accessibility features, keyboard navigation, or ARIA.","category":"accessibility","tokenCount":7129,"similarity":0.5102}]
אחרי שתקראו את description הערכים, תוכלו לבחור את id שהכי מתאים ליעד שלכם ולהשתמש בפקודה retrieve
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
במקרה כזה, המדריך בפורמט Markdown לתרחיש השימוש animate-to-from-top-layer יוצג במסוף. למקרי שימוש אחרים, מחליפים את animate-to-from-top-layer במזהה תקף של מקרה שימוש.
למה כדאי להשתמש בהנחיות לגבי אתרים מודרניים?
יש שלושה יתרונות מובהקים לשימוש במיומנויות של AI גנרטיבי מודרני בהשוואה למודלים של AI לא מודרני:
- סוכני AI לתכנות נוטים להשתמש כברירת מחדל בפתרונות ישנים ולא עדכניים לבעיות בפיתוח אתרים מודרניים. הפתרונות האלה כוללים לעיתים קרובות JavaScript כדי לספק פונקציונליות לבעיות שניתן לפתור בצורה טובה יותר באמצעות ממשקי API מודרניים של CSS ו-HTML.
- בעבר, מודלים של AI לא הכירו את התכונות האחרונות של פלטפורמת האינטרנט, או שהיה להם מידע שגוי לגביהן.
- בנוסף, מודלים של AI נוטים לתת המלצות מיושנות שלא מתייחסות לדרישות הפרויקט או לקריטריונים של תמיכה בדפדפן, במקום להתאים את ההנחיות לדרישות הבסיסיות של פרויקט נתון.
ההנחיות המודרניות לשימוש באינטרנט מתייחסות לחסרונות האלה, ומבטיחות שלתהליך העבודה שלכם בכתיבת קוד בעזרת AI יהיו הכלים לשילוב תכונות חדשות יותר של פלטפורמת האינטרנט קודם – ועם חלופות לגיבוי.
מה כולל המדריך בנושא אתרים מודרניים?
ההנחיות בנושא אתרים מודרניים כוללות שיטות מומלצות ליותר מ-100 תרחישי שימוש בפיתוח אתרים, במספר תחומים מרכזיים. מתחת לפני השטח, מדובר במיומנות סוכן יחידה שמנחה את סוכן הקידוד איך להפעיל את modern-web-guidance CLI כדי למצוא ולאחזר את ההנחיות הכי טובות לתרחיש השימוש שלכם.
- חוויית משתמש: מעברים בין תצוגות, סגנון CSS
scrollbar-colorואנימציות כניסה ויציאה. - CSS: שאילתות של רכיבי container, מרחבי צבעים מודרניים כמו
oklch, פריסת subgrid של CSS,text-wrapוגיזום של גובה השורה בטיפוגרפיה. - ביצועים: אבחון של מהירות התגובה לאינטראקציה באתר (INP),
scheduler.yieldפיצול משימות ארוכות, תזמון משימות ברקע ותעדוף טעינת תמונות. - טפסים: שינוי גודל אוטומטי של שדות קלט (
field-sizing: content) וסגנונות אימות מדויקים באמצעות:user-invalid. - רכיבי ממשק משתמש מובנים: שליטה ישירה בתיבות דו-שיח, במיקום של עוגני CSS בתיאורי כלים וב-
popover. - נגישות: הודעות שגיאה נגישות וניהול של מוקד ההקלדה.
- AI מובנה: שימוש במודלים מקומיים של לקוחות במכשיר (ממשקי API מקוריים לזיהוי שפה, לסיכום ולתרגום).
- מפתחות גישה: רישום, אימות וניהול של מפתחות גישה.
אלה רק כמה תרחישי שימוש מכל תחום. כדי לראות את כל תרחישי השימוש, אפשר לעיין ברשימה המלאה של תרחישי השימוש.
בסיס להשוואה
Baseline מספק למפתחים מידע ברור לגבי תכונות האינטרנט שניתנות להפעלה הדדית במנועי דפדפן מרכזיים. אם תכונת אינטרנט היא Baseline, אפשר לסמוך על רמת התאימות לדפדפן. תכונות אינטרנט משתייכות לאחת משלוש קטגוריות שמוגדרות על ידי Baseline:
- זמינות מוגבלת – התכונה לא פועלת בצורה הדדית.
- זמינות חדשה פירושה שהתכונה הפכה לאחרונה לניתנת להפעלה הדדית ב-30 החודשים האחרונים.
- זמינות נרחבת פירושה שהתכונה ניתנת להפעלה הדדית במשך 30 חודשים לפחות.
התכונה Baseline היא הגדרה של יכולת פעולה הדדית של תכונות אינטרנט, אבל היא גם היבט שניתן להגדרה בפרויקט. אתם יכולים לבחור יעד בסיסי, ואז להגדיר את הפרויקט כך שישתמש בו על ידי הוספתו לקובץ AGENTS.md או CLAUDE.md, למשל:
This project's Baseline target is Baseline 2024.
<other project info...>
הנחיות לגבי אתרים מודרניים וגיבויים של תכונות
ההנחיות בנושא אתרים מודרניים מתבססות על מגוון רחב של תכונות מודרניות של אתרים. יכול להיות שחלק מהתכונות האלה יהיו זמינות בגרסה החדשה או בגרסה הרגילה, אבל חלק מהן יהיו זמינות רק במלאי מוגבל. במקרים שבהם תכונה מסוימת לא זמינה באופן נרחב, מדריכים לתרחישי שימוש מספקים לנציגים הוראות ספציפיות לגבי האופן שבו אפשר להבטיח תאימות רחבה יותר בדפדפנים שלא תומכים בתכונה. במקרים רבים, הגיבויים מוטמעים כשיפורים הדרגתיים שבהם אפשר להשתמש בתכונה המודרנית בכל מקום שבו היא נתמכת. אם נדרש polyfill לדפדפנים שלא נתמכים, הסוכנים תמיד מקבלים הוראה לטעון אותם באופן מותנה, כך שהם יגררו עלות רק במקרים שבהם הם נחוצים.
איך מוודאים שהמידע מדויק?
כל תרחיש לדוגמה ב-Modern Web Guidance כולל מדריך, וברוב התרחישים לדוגמה מתבצעת כיול מתמשך כדי להנחות סוכני AI ליצירת פלט איכותי.
בתרחישי שימוש שעברו כיול, נעשה שימוש במערכת אוטומטית לבקרת איכות כדי לבדוק את ההתנהגות הנכונה של הסוכן, כאשר Playwright ממלא תפקיד מרכזי:
- לכל מדריך פיתחנו סקריפט של Playwright כדי לבדוק אם פרטי ההטמעה של המדריך בוצעו – לדוגמה, אם
@media (prefers-reduced-motion: reduce)נצפה במקום שבו הוא נדרש. - הסקריפטים האלה של Playwright עוברים כיול באופן רציף בהשוואה להטמעה של הדגמה 'נכונה' שצפויה להניב שיעור הצלחה של 100%. בצד השני, הסקריפטים בודקים מול הטמעה פגומה בכוונה, שמצפה לשיעור הצלחה של 0%.
- אם אחת מההטמעות או שתיהן – "הנכונה" והפגומה בכוונה – לא מניבות שיעורי הצלחה של 100% ו-0% בהתאמה, מחולל ה-AI ינסה שוב באופן אוטומטי באמצעות הקשר עד להשגת כיול של 100%.
- לבסוף, מתבצעות הערכות מקצה לקצה באפליקציית בסיס. אחת מההערכות האלה היא לא מודרכת, והיא משמשת כבקרת איכות. היא מתבססת על נתוני ההדרכה שמוגדרים כברירת מחדל, בלי להפעיל את הכישורים של Modern Web Guidance כדי להשלים משימה. הערכה נוספת (הניסוי) מתייחסת לאותה משימה באמצעות כישורי הדרכה של Modern Web.
ההערכות שלנו מתבצעות מדי יום באמצעות מודלים וסוכני קידוד מתקדמים, ומספקות לנו תמונה ברורה של רמת הביצועים של הסוכנים עם ההנחיות שלנו ובלי ההנחיות שלנו. בממוצע, התוצאות הראשוניות מראות שיפור של 37 נקודות אחוז בהקפדה על השיטות המומלצות המודרניות כשסוכנים מצוידים בהנחיות לשימוש באינטרנט מודרני. עם זאת, התוצאות עשויות להשתנות בהתאם לדרישות הפרויקט, למודל, להנחיות שכותבים ולכלים המועדפים לכתיבת קוד.
השלבים הבאים
עכשיו יש לכם סקירה כללית של ההנחיות בנושא אתרים מודרניים, ושל הפוטנציאל שלהן להקל על הטמעת שיטות מומלצות ליצירת אתרים מודרניים בתהליך העבודה שלכם עם קוד AI. עכשיו אפשר לבדוק את הכישורים ותרחישי השימוש שמופיעים ב-Modern Web Guidance.