מה זה DrawBridge?
דמיינו שאתם יכולים להשאיר הערות על אתר אינטרנט בדיוק כמו ב-[Figma](https://www.figma.com/) – לסמן אלמנט, לכתוב מה צריך לשנות, ולתת ל-AI לעשות את העבודה. זה בדיוק מה ש-**DrawBridge** עושה.
DrawBridge הוא תוסף Chrome שמחבר בין הדפדפן שלכם לבין כלי פיתוח AI כמו Claude Code ו-Cursor. במקום לתאר שינויים במילים או לצלם מסכים ידנית, פשוט מסמנים את האלמנט באתר, כותבים מה רוצים לשנות, והכל נשמר אוטומטית כמשימות שה-AI יכול לעבד.
-
מסמנים אלמנט באתר ומוסיפים הערה
-
DrawBridge שומר צילום מסך, סלקטור CSS, ואת ההערה שלכם
-
מריצים פקודה ב-Claude Code או Cursor
-
ה-AI מבצע את השינויים אוטומטית
למי זה מתאים?
קהל יעדשימוש עיקרימפתחי Full-Stackזירוז עריכות ויזואליות בפרויקטיםמעצבי UI/UXתקשורת שינויים למפתחים או ל-AIבעלי מוצרסימון באגים או שיפורים ישירות על האתרפרילנסריםקבלת משוב ויזואלי מדויק מלקוחות
מדריך התקנה
שלב 1: הורדת הפרויקט
הורידו את הפרויקט מ-GitHub:
git clone https://github.com/breschio/drawbridge.git
או הורידו כקובץ ZIP מ-GitHub ופרקו לתיקייה במחשב.
שלב 2: התקנת התוסף ב-Chrome
פתיחת דף ההרחבות
פתחו את Chrome ונווטו ל-chrome://extensions/
הפעלת מצב מפתח
הפעילו את Developer mode בפינה הימנית העליונה
טעינת התוסף
לחצו על Load unpacked ובחרו את התיקייה drawbridge/chrome-extension
הצמדה לסרגל
לחצו על אייקון הפאזל בסרגל הכלים והצמידו את DrawBridge לגישה מהירה.
שלב 3: חיבור פרויקט
-
פתחו אתר כלשהו בדפדפן (לא דף פנימי של Chrome)
-
לחצו על אייקון DrawBridge ואז על Open Sidebar
-
לחצו Ctrl+Shift+P (או Cmd+Shift+P ב-Mac) לחיבור פרויקט
-
בחרו את תיקיית הפרויקט המקומי ואשרו גישה
מה נוצר אחרי החיבור?
-
תיקיית .moat/ עם קבצי המשימות וצילומי מסך
-
פקודת /bridge בתיקיית .claude/commands/
-
עדכון אוטומטי של .gitignore
איך להשתמש
קיצורי מקלדת
קיצורפעולהCמצב הערה – לחצו על אלמנט להוספת הערהRמצב מלבן – צרו אזור חופשי להערהEscיציאה מהמצב הנוכחיCtrl+Shift+Fפתיחה/סגירה של הסרגל הצידי
הוספת הערה
-
לחצו C בדפדפן להיכנס למצב הערה
-
העבירו את העכבר מעל האתר – אלמנטים יסומנו
-
לחצו על האלמנט שרוצים לשנות
-
כתבו את ההערה ולחצו Enter
-
ההערה תופיע בסרגל הצידי ותישמר אוטומטית
הוספת הערה על אלמנט באתר
ציור מלבן (הערות חופשיות)
לחצו R לכניסה למצב ציור מלבן, גררו על האזור הרצוי ושחררו להוספת הערה:
ציור מלבן להערה על אזור חופשי
עיבוד המשימות עם Claude Code
הריצו בטרמינל את הפקודה:
/bridge
Claude ישאל באיזה מצב לעבד:
stepמשימה אחת בכל פעם עם אישור (מומלץ להתחלה)batchקיבוץ משימות קשורות יחדyoloעיבוד אוטונומי של כל המשימות (זהירות!)
עיבוד המשימות עם Cursor
הקלידו בעורך:
bridge
ה-AI מעבד את המשימות ומבצע שינויים בקוד
סיום ובדיקה
לאחר סיום העיבוד, חזרו לדפדפן לראות את השינויים:
המשימות הושלמו והשינויים מופיעים באתר
טיפים לשימוש יעיל
-
✅ היו ספציפיים – “שנה את הכפתור לכחול #3B82F6” עדיף על “שנה את הצבע”
-
✅ משימה אחת להערה – כל הערה צריכה לייצג שינוי אחד ברור
-
✅ שרשרו מחשבות – לשינויים מרובים, צרו הערות נפרדות בסדר הנכון
-
✅ השתמשו במצב step – בהתחלה, עד שתרגישו בנוח עם הכלי
קבצים חשובים
קובץתפקיד.moat/moat-tasks.mdרשימת המשימות בפורמט קריא.moat/moat-tasks-detail.jsonנתונים מפורטים כולל סלקטורים.moat/screenshots/צילומי מסך של האלמנטים.moat/drawbridge-workflow.mdהוראות ל-AI
סיכום
**DrawBridge **מפשט משמעותית את תהליך העבודה על שינויים ויזואליים. במקום להעתיק סלקטורים, לצלם מסכים, ולתאר מיקומים – פשוט מסמנים וכותבים. ה-AI מקבל את כל ההקשר שהוא צריך כולל צילום מסך וסלקטור מדויק.
אם אתם עובדים עם Claude Code או Cursor על פרויקטים של frontend – זה כלי שחובה לנסות.
