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

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

מאת קווין ליאקס. פורסם 2026-06-22. נושא: Claude ו-Claude Code.
העמוד המלא: https://kevinliaks.ai/guides/claude-artifacts

## מה זה Claude Code Artifacts

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

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

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

![דוגמה ל-artifact אמיתי: דשבורד אינטראקטיבי שנפתח בדפדפן עם כפתור Share וקישור פרטי](https://kevinliaks.ai/_astro/01.DaXqIxgY.png)

*דוגמה ל-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 של הפרויקט:

```markdown
## 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.

## לינקים

- ההכרזה הרשמית: [claude.com/blog/artifacts-in-claude-code](https://claude.com/blog/artifacts-in-claude-code)
- התיעוד המלא: [code.claude.com/docs/en/artifacts](https://code.claude.com/docs/en/artifacts)
- מרכז העזרה: [support.claude.com](https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them)

---
קווין ליאקס מעביר סדנאות AI, הרצאות והטמעה לארגונים: https://kevinliaks.ai/workshops