---
title: "DrawBridge: עורך ויזואלי ל-Claude Code ו-Cursor"
description: "מה זה DrawBridge? דמיינו שאתם יכולים להשאיר הערות על אתר אינטרנט בדיוק כמו ב-Figma, לסמן אלמנט, לכתוב מה צריך לשנות, ולתת ל-AI לעשות את העבודה. זה בדיוק מה ש-DrawBridge עושה. DrawBridge הוא תוסף..."
url: "https://tigermedia.co.il/blog/drawbridge"
author: "Tiger Media"
date: "2025-12-29"
category: "וייב קודינג"
---

# DrawBridge: עורך ויזואלי ל-Claude Code ו-Cursor

## מה זה DrawBridge?

                דמיינו שאתם יכולים להשאיר הערות על אתר אינטרנט בדיוק כמו ב-[Figma](https://www.figma.com/) – לסמן אלמנט, לכתוב מה צריך לשנות, ולתת ל-AI לעשות את העבודה. זה בדיוק מה ש-**DrawBridge** עושה.
            

DrawBridge הוא תוסף [Chrome](https://www.google.com/chrome/) שמחבר בין הדפדפן שלכם לבין כלי פיתוח AI כמו **[Claude Code](https://claude.com/product/claude-code)** ו-**[Cursor](https://www.cursor.com/)**. במקום לתאר שינויים במילים או לצלם מסכים ידנית, פשוט מסמנים את האלמנט באתר, כותבים מה רוצים לשנות, והכל נשמר אוטומטית כמשימות שה-AI יכול לעבד.

- מסמנים אלמנט באתר ומוסיפים הערה

- DrawBridge שומר צילום מסך, סלקטור CSS, ואת ההערה שלכם

- מריצים פקודה ב-Claude Code או Cursor

- ה-AI מבצע את השינויים אוטומטית

## למי זה מתאים?

קהל יעדשימוש עיקרי**מפתחי Full-Stack**זירוז עריכות ויזואליות בפרויקטים**מעצבי UI/UX**תקשורת שינויים למפתחים או ל-AI**בעלי מוצר**סימון באגים או שיפורים ישירות על האתר**פרילנסרים**קבלת משוב ויזואלי מדויק מלקוחות

## מדריך התקנה

### שלב 1: הורדת הפרויקט

הורידו את הפרויקט מ-[GitHub](https://github.com/breschio/drawbridge):

git clone https://github.com/breschio/drawbridge.git

או הורידו כקובץ ZIP מ-GitHub ופרקו לתיקייה במחשב.

### שלב 2: התקנת התוסף ב-Chrome

#### פתיחת דף ההרחבות

פתחו את Chrome ונווטו ל-chrome://extensions/

#### הפעלת מצב מפתח

הפעילו את **Developer mode** בפינה הימנית העליונה

#### טעינת התוסף

לחצו על **Load unpacked** ובחרו את התיקייה drawbridge/chrome-extension

#### הצמדה לסרגל

לחצו על אייקון הפאזל בסרגל הכלים והצמידו את DrawBridge לגישה מהירה.

![](/wp-content/uploads/2025/12/image-80x80.png)

### שלב 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

- ההערה תופיע בסרגל הצידי ותישמר אוטומטית

![הוספת הערה על אלמנט באתר](https://github.com/breschio/drawbridge-media/blob/main/drawbridge-comment-2.gif?raw=true)

הוספת הערה על אלמנט באתר

### ציור מלבן (הערות חופשיות)

לחצו R לכניסה למצב ציור מלבן, גררו על האזור הרצוי ושחררו להוספת הערה:

![ציור מלבן](https://github.com/breschio/drawbridge-media/raw/main/drawbridge-rectangle.gif)

ציור מלבן להערה על אזור חופשי

### עיבוד המשימות עם Claude Code

הריצו בטרמינל את הפקודה:

/bridge

Claude ישאל באיזה מצב לעבד:

**step**משימה אחת בכל פעם עם אישור (מומלץ להתחלה)**batch**קיבוץ משימות קשורות יחד**yolo**עיבוד אוטונומי של כל המשימות (זהירות!)

### עיבוד המשימות עם Cursor

הקלידו בעורך:

bridge

![עיבוד משימות](https://github.com/user-attachments/assets/da71b412-eee4-4cec-abe5-3b9719e297b2)

ה-AI מעבד את המשימות ומבצע שינויים בקוד

### סיום ובדיקה

לאחר סיום העיבוד, חזרו לדפדפן לראות את השינויים:

![משימות הושלמו](https://github.com/user-attachments/assets/799c0ad6-da98-4506-8f12-ad338aa1aba3)

המשימות הושלמו והשינויים מופיעים באתר

## טיפים לשימוש יעיל

- ✅ היו ספציפיים – “שנה את הכפתור לכחול #3B82F6” עדיף על “שנה את הצבע”

- ✅ משימה אחת להערה – כל הערה צריכה לייצג שינוי אחד ברור

- ✅ שרשרו מחשבות – לשינויים מרובים, צרו הערות נפרדות בסדר הנכון

- ✅ השתמשו במצב step – בהתחלה, עד שתרגישו בנוח עם הכלי

## קבצים חשובים

קובץתפקיד.moat/moat-tasks.mdרשימת המשימות בפורמט קריא.moat/moat-tasks-detail.jsonנתונים מפורטים כולל סלקטורים.moat/screenshots/צילומי מסך של האלמנטים.moat/drawbridge-workflow.mdהוראות ל-AI

## סיכום

**DrawBridge **מפשט משמעותית את תהליך העבודה על שינויים ויזואליים. במקום להעתיק סלקטורים, לצלם מסכים, ולתאר מיקומים – פשוט מסמנים וכותבים. ה-AI מקבל את כל ההקשר שהוא צריך כולל צילום מסך וסלקטור מדויק. 

אם אתם עובדים עם Claude Code או Cursor על פרויקטים של frontend – זה כלי שחובה לנסות.

[GitHub Repository](https://github.com/breschio/drawbridge)

[תיעוד מלא](https://github.com/breschio/drawbridge#readme)