מדריך צעד-אחר-צעד שמראה איך לקחת כל סקשן מכל אתר ולהפוך אותו לשלך - עם התוכן שלך, הצבעים שלך, והסגנון שלך. בלי לדעת שורת קוד.
המדריך בדרך אליכם למייל. תבדקו תוך דקה-שתיים.
עודכן: 21 ביולי 2026
Playwright MCP זה כלי שנותן ל-Claude Code לפתוח דפדפן אמיתי, לגלוש לכל אתר ולשלוף את הקוד מאחורי העיצוב. אתם מצביעים על סקשן שאהבתם, אומרים לו מה התוכן שלכם, והוא בונה אותו מחדש עם כל ה-CSS והאנימציות. לא צריך לדעת קוד, לא צריך מעצב.
אתם יודעים את הרגע שנכנסתם לאתר של מישהו ואמרתם "רגע, איך עשו את זה?" - הטיימליין הזה, הכרטיסים האלה, האנימציה הזאת? Playwright MCP זה כלי שנותן ל-Claude Code לפתוח דפדפן אמיתי, לגלוש לכל אתר, לצלם מסך, ולשלוף את כל הקוד שמאחורי העיצוב. בפועל - אתם אומרים לו "תלך לאתר הזה ותביא לי את הסקשן" והוא עושה את זה.
פותחים את Claude Code ונכנסים להגדרות. מחפשים את הקובץ settings.json ומוסיפים את השורות הבאות. זה כל מה שצריך - Playwright MCP מותקן ומוכן לעבודה.
{ "mcpServers": { "playwright": { "command": "npx", "args": [ "@anthropic-ai/mcp-playwright" ] } } }אחרי שהוספתם את ההגדרות, סוגרים ופותחים מחדש את Claude Code. עכשיו אפשר לבקש ממנו לגלוש לכל אתר. תנסו לכתוב "תפתח את google.com ותצלם מסך" - אם זה עובד, מוכנים להמשיך.
אומרים ל-Claude Code: "תלך לאתר zavitmedia.co.il ותצלם מסך של כל העמוד". הוא פותח דפדפן, גולש לאתר, ומחזיר צילום מסך מלא. עכשיו אתם יכולים להצביע על כל חלק ולהגיד "את הסקשן הזה אני רוצה".
Claude Code משתמש ב-browser_evaluate כדי להריץ JavaScript בתוך הדפדפן ולשלוף את כל הצבעים, הפונטים, הגדלים והמרחקים מהסקשן שבחרתם. הוא מחזיר את כל הנתונים בצורה מסודרת - ככה שהוא יודע בדיוק איך לבנות מחדש.
עכשיו מגיע החלק הכיף. אומרים ל-Claude: "תבנה לי את הסקשן הזה מחדש עם הטקסט הבא" ומדביקים את התוכן שלכם. תוך דקות הוא מייצר קובץ HTML עם כל ה-CSS, האנימציות והמבנה - מוכן לשימוש.
Claude Code מפעיל שרת מקומי ופותח את הקובץ בדפדפן. הוא גם יכול לצלם מסך של התוצאה ולהשוות מול האתר המקורי. אם משהו לא מדויק - אומרים לו "תשנה את הצבע לכתום" או "תגדיל את הפונט" והוא מעדכן מיידית.
אפשר לבקש מ-Claude Code לבדוק איך הסקשן נראה במובייל. הוא משנה את גודל הדפדפן ל-375 פיקסלים ומצלם שוב. אם צריך התאמות - הוא מתקן את ה-CSS בשבילכם.
תמיד תתחילו מצילום מסך לפני שאתם מבקשים לבנות. ככה ל-Claude Code יש reference ויזואלי. אל תנסו לשכפל אתר שלם - תתמקדו בסקשן אחד בכל פעם. ואם אתם רוצים להתאים צבעים - תנו ל-Claude Code את ה-hex codes של הפלטה שלכם ותבקשו ממנו להחליף.
Playwright MCP זה כלי שנותן ל-Claude Code לפתוח דפדפן אמיתי ולגלוש לכל אתר. הוא יכול לצלם מסך, להריץ JavaScript ולשלוף צבעים, פונטים, גדלים ומרחקים מהסקשן שבחרתם. בלעדיו Claude Code לא יכול לגלוש לאינטרנט ולשלוף עיצובים בעצמו.
ההתקנה לוקחת כ-3 דקות. פותחים את Claude Code, נכנסים ל-settings.json ומוסיפים את הקונפיגורציה של Playwright MCP. סוגרים ופותחים מחדש. שימו לב שצריך שיהיה Node.js מותקן, אפשר לבדוק עם node --version בטרמינל.
מומלץ להתמקד בסקשן אחד בכל פעם, לא לנסות לשכפל אתר שלם. אחרי שמצלמים מסך ובוחרים סקשן, Claude Code שולף את הסגנונות ובונה מחדש HTML עם CSS מלא. אפשר גם לבדוק איך זה נראה במובייל ב-375 פיקסלים ולקבל תיקונים מיידית.
רוצים את הגרסה המעוצבת כ-PDF? משאירים מייל בטופס למעלה ומקבלים אותה חינם. ואם בא לכם להבין איך כל זה מתחבר לעסק שלכם, יש לי עוד 60 מדריכים לפי מקצוע וסדנה חיה.