Claude Code Artifacts: להפוך את העבודה של Claude Code לדף אינטראקטיבי שמשתפים בלינק אחד

בשורה התחתונה

בוריס צ'רנין, היוצר של Claude Code, קורא לזה game changer לאופן שבו הוא עובד עם Claude. כל דבר שאפשר לבטא ב-HTML, CSS ו-JavaScript הוא דף לגיטימי.

איור פתיחה למדריך: Claude Code Artifacts

מה זה Claude Code Artifacts

Claude Code קיבל פיצ’ר חדש בשם Artifacts. במקום שהתוצאות של סשן העבודה יישארו כטקסט בטרמינל, Claude Code יכול לפרסם אותן כדף אינטראקטיבי חי בכתובת פרטית ב-claude.ai, דף שאתם פותחים בדפדפן ומשתפים עם הצוות בלינק אחד.

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

את הפיצ’ר בנתה Anthropic, והוא יצא ב-18 ביוני 2026. בוריס צ’רנין, היוצר של Claude Code, קורא לזה game changer לאופן שבו הוא עובד עם Claude.

דוגמה ל-artifact אמיתי: דשבורד אינטראקטיבי שנפתח בדפדפן עם כפתור Share וקישור פרטי

דוגמה ל-artifact אמיתי: דשבורד אינטראקטיבי שנפתח בדפדפן עם כפתור Share וקישור פרטי

למה זה משנה

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

מה אפשר לבנות

כל דבר שאפשר לבטא ב-HTML, CSS ו-JavaScript הוא דף לגיטימי. אלה התבניות שחוזרות הכי הרבה:

סוג תוצרלמה זה טוב
Pull Request walkthroughסקירת PR עם ה-diff מוער והערות לצד הקוד, הסוקר קורא את ההיגיון שלכם במקום לשחזר אותו.
דשבורד אינטראקטיבינתונים מהסשן עם פילטרים, סליידרים וטוגלים שאפשר לשחק איתם ישירות.
השוואת אפשרויותכמה גרסאות עיצוב או מימוש זו לצד זו עם שורת trade-off מתחת לכל אחת.
ציר זמן של תקלהחקירה שמתמלאת תוך כדי שהמשימה רצה, כל מי שיש לו את הלינק עוקב בלי לקרוא את הטרמינל.
צ’קליסט / רשימת שחרוררשימה שמסמנת את עצמה כשהעבודה מתקדמת, עם הערה על מה שדילגתם.

איך משתמשים: צעד אחרי צעד

1. מבקשים בשפה חופשית

תארו את התוצר שאתם רוצים במילים פשוטות, או פשוט תנו ל-Claude לפרסם דף לבד כשהפלט מתאים יותר לדף מאשר לטקסט. שתי דוגמאות לבקשה:

Make an artifact that walks through this PR with the diff annotated inline.
Build a dashboard artifact of last week's deploy failures by service and keep it updated.

2. מאשרים פרסום

לפני פרסום, Claude Code מבקש אישור (משהו כמו: Claude wants to publish “Deploy failures” to a private page on claude.ai). בוחרים Yes. פרסום מחדש של דף שכבר אישרתם לא שואל שוב.

3. הדפדפן נפתח לבד

Claude מדפיס את הלינק והדפדפן נפתח לדף החדש אוטומטית. בכל רגע אפשר ללחוץ Ctrl+] בטרמינל כדי לפתוח מחדש את ה-artifact האחרון.

4. מעדכנים

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

5. משתפים

בכותרת הדף יש כפתור Share, תנו גישה לאנשים ספציפיים בארגון או לכולם. הכותרת גם מציגה אתכם כמחבר, והשיתוף לא יוצא מחוץ לארגון.

שיהיה במיתוג שלכם, לא גנרי

ל-Claude יש קישור עיצוב מובנה (design skill) שנותן לכל דף פלטה, טיפוגרפיה ופריסה מכוונות בלי פרומפט נוסף. וחשוב מזה: הוא מחפש קודם מערכת עיצוב קיימת בפרויקט שלכם.

כדי שה-artifacts יתאימו למיתוג של הצוות, כתבו את ה-design tokens במקום ש-Claude ימצא, למשל בקובץ CLAUDE.md של הפרויקט:

## Design system
- Colors: primary #1a4d8f, accent #f59e0b, surface #f8fafc
- Typography: Inter for body, JetBrains Mono for code

Claude מתייחס למערכת העיצוב שלכם כעדיפות גבוהה יותר מהבחירות שלו, אז הדף יוצא במיתוג שלכם ולא נראה כמו תבנית גנרית.

מגבלות שכדאי להכיר

  • דף יחיד ועצמאי, בלי backend, הוא לא שומר נתונים מטופס, לא מאמת צופים ולא קורא ל-API בזמן צפייה.
  • בלי בקשות חיצוניות: CSP חוסם סקריפטים, פונטים ותמונות מ-host אחר; Claude מטמיע את ה-CSS וה-JS ומכניס תמונות כ-data URI.
  • סוגי קבצים נתמכים: html, htm או md בלבד (קובץ Markdown מוצג כ-HTML מעוצב).
  • גודל מקסימלי של הדף המוצג: 16MB. תמונות raster גדולות הן הסיבה הנפוצה לכישלון פרסום.

דרישות הפעלה

דרישהמתי זמין
תוכניתTeam או Enterprise. ב-Team מופעל כברירת מחדל; ב-Enterprise אדמין מפעיל בהגדרות.
התחברותמחוברים ל-claude.ai עם הפקודה login. סשן עם API key או טוקן של ספק ענן לא יכול לפרסם.
ספק מודלAnthropic API. לא זמין על Amazon Bedrock, Google Vertex AI או Microsoft Foundry.
משטחClaude Code ב-CLI, או אפליקציית הדסקטופ של Claude בגרסה עדכנית.

טיפים

  • העדיפו SVG, HTML ו-CSS על תמונות raster, חוסך טוקנים ושומר את הדף קל.
  • בקשו מ-Claude כותרת ואייקון ספציפיים ל-artifact, הם מופיעים בגלריה שלכם ובלינקים המשותפים.
  • כדי לעדכן artifact מסשן אחר, תנו ל-Claude את ה-URL שלו ובקשו לעדכן. בלי ה-URL הוא ייצור דף חדש.
  • חברו MCP servers כדי ש-Claude ימשוך נתונים חיים מהכלים שלכם לתוך הדף.
  • רוצים להחזיר תוצאה בחזרה לטרמינל? בקשו כפתור “Copy as prompt” בדף שנותן טקסט להדביק חזרה בסשן.
  • לכבות artifacts לסשן שלכם: disableArtifact true בהגדרות, או משתנה הסביבה CLAUDE_CODE_DISABLE_ARTIFACT=1.

לינקים

נכתב על ידי

מוביל AI ודאטה בקבוצה עסקית גדולה, מעביר סדנאות ובונה סוכני AI לארגונים.

עודכן לאחרונה:

רוצים שהצוות שלכם יעבוד ככה?

אני עובד עם צוותי פיתוח על Claude Code, סוכני קוד, MCP ותשתיות AI, מהתכנון ועד הייצור.

5,000+ חברים בקהילת Vibe Coding Israel

הקהילה הגדולה בישראל לבנייה עם AI: שאלות, דמואים, מדריכים ומפגשים. בלי ספאם, רק אנשים שבונים.

הצטרפות לקבוצה (נפתח בחלון חדש)

המספר מתעדכן ידנית. נכון ל-10/2026.