מבוא
frontend-design הוא skill רשמי של Anthropic שמתקינה את Claude עם יכולות עיצוב ממשק ברמה מקצועית. במקום לייצר HTML גנרי ומשעמם, הוא בונה דפים עם עיצוב מחשבותי, אסתטיקה נקייה וחוויית משתמש איכותית. זה שימושי במיוחד ליצירת חומרי הסבר למטופלים - במקום להסתמך על הדפים המודפסים שיש במרפאה (לעתים קרובות מיושנים, באנגלית, או לא מותאמים למקרה הספציפי).
מה זה skill? skill הוא תוסף שמרחיב את היכולות של Claude למשימה מסוימת. frontend-design היא skill שמתווספת אוטומטית לחשבון Claude שלכם (אפשר לבדוק ברשימת ה-skills בהגדרות).
---
למה חומרי הסבר ויזואליים עובדים יותר טוב
מחקרים הדגימו שחומרי הסבר מאוירים או סכמתיים מעלים משמעותית את הבנת המטופל וההיענות לטיפול לעומת הסבר טקסטואלי בלבד. בכירורגיה דרמטולוגית זה בולט: מטופל שמקבל דף עם ציר זמן החלמה לפני Mohs מגיע פחות ל-emergency עם חרדה לא מוצדקת ושואל פחות שאלות מיותרות בטלפון אחרי הניתוח.
---
ארבע דוגמאות מעשיות
1. מסך הסבר BCC למטופל
מטופלת בת 55 יוצאת מפגישת ייעוץ עם אבחנה של BCC. היא רוצה להבין מה זה ומה הלאה.
פרומפט:
השתמש ב-skill בשם frontend-design.
בנה דף HTML עצמאי (standalone, בלי תלויות חיצוניות) בנושא:
"קרצינומה של תאי בסיס (BCC) - מה זה ומה הלאה" למטופלת בגיל 55+.
דרישות:
- עברית מלאה, RTL
- שני מסכים: (1) "מה זה BCC" עם איור סכמתי של שכבות העור וסימון הנגע,
(2) "אפשרויות טיפול" עם טבלה: Mohs / excision רגיל / קריותרפיה / imiquimod
- פונט 18px+, צבעים חמים ורגועים, לא מפחיד
- FAQ: "מתי הגידול מסוכן?", "מה הסיכוי לחזרה?", "מה אסור אחרי ניתוח?"
- קישור צר בתחתית לאתר הקליניקה וטלפון המזכירה
- ללא תמונות רפואיות ריאליסטיות - רק איקונים סכמתיים
שמור ב-~/Desktop/bcc-patient.html
5 דקות אחר כך יש דף מוכן להדפסה או לשליחה בדיגיטל.
2. ציר זמן החלמה אחרי Mohs
השתמש ב-skill בשם frontend-design.
בנה דף ציר זמן אופקי (RTL) על החלמה אחרי Mohs בפנים:
- יום 0: תום הניתוח (שעות ראשונות)
- ימים 1-3: החלפת תחבושות, ניקיון
- יום 7: הסרת תפרים (או לא, לפי סוג תפר)
- שבועות 2-4: נפיחות, אודם, תחושות
- חודשים 1-3: השלמת ריפוי, תחילת הצטלקות
- חודשים 6-12: הבשלת הצלקת
לכל שלב:
- מה צפוי להיראות
- מה לעשות
- דגלים אדומים (מתי להתקשר)
בתחתית: טלפון חירום, טלפון מרפאה, שעות פעילות.
שמור ב-~/Desktop/mohs-recovery.html
הדף עובד גם ב-mobile (מטופל פותח ב-WhatsApp) וגם להדפסה.
3. טופס הסכמה מודעת אינטראקטיבי (טיוטה)
השתמש ב-skill בשם frontend-design.
בנה טיוטת טופס הסכמה מודעת ל-excision של נגע עור חשוד:
מחולק ל-6 סקציות עם checkbox "קראתי והבנתי" לכל אחת:
1. מה הניתוח - תיאור פשוט
2. מטרה וחלופות
3. סיכונים נפוצים (זיהום, דימום, צלקת)
4. סיכונים נדירים (פגיעה עצבית, איבוד תחושה)
5. מה אם הפתולוגיה ממאירה
6. ציפיות לגבי הצלקת
בסוף: חתימה + תאריך + שם מלא.
**חשוב:** הטופס הוא טיוטה בלבד, לא תחליף להסכמה חוקית שעבר ע"י יועץ משפטי.
שמור ב-~/Desktop/consent-draft.html
שולחים ליועץ משפטי לסיום. חוסכים לו שעה של הכנה.
4. אינפוגרפיקה על הגנה מהשמש
השתמש ב-skill בשם frontend-design.
בנה אינפוגרפיקה של עמוד A4 על הגנה מהשמש, לקליניקה בישראל.
תוכן:
- UV Index - מה זה ואיפה לבדוק
- 5 כללים: קרם, בגדים, כובע, צל 11-15, משקפיים
- תדירות מריחה מחדש
- SPF 30 מול 50
- שאלון עצמי: האם אני בסיכון מוגבר?
- קישור לעמוד באתר הקליניקה על מניעה שניונית
עיצוב: צבעי שמש, איקונים סכמתיים, A4 portrait.
שמור ב-~/Desktop/sun-protection.html
---
תהליך עבודה מומלץ
- הכן תבנית בסיסית - הדף הראשון לוקח הכי הרבה זמן. שמור אותו כבסיס.
- צור וריאציות לפי מקרה - BCC, SCC, מלנומה, לימפומה - כל אחד עם הדף שלו.
- תרגום במקרה הצורך - אם מטופל ברוסית/ערבית, שלח לClaude את הקובץ ובקש תרגום + שמירה של העיצוב.
- שמור ב-clinic knowledge base - תיקיית Drive מרכזית עם כל הדפים, נגיש לכל הצוות.
- עדכן פעם בשנה - גיידליינים משתנים. בקש מ-Claude לבדוק מה התעדכן במקורות.
---
פרומפטים לדוגמה נוספים
פרומפט 1: דף הסבר למטופל על biopsy
השתמש ב-frontend-design.
דף לעריכה: "מה קורה לפני, תוך כדי, ואחרי ביופסיית עור?"
3 סקציות:
- לפני: הכנה (כלום לאכול? להפסיק תרופות? מה ללבוש?)
- תוך כדי: הליך בפועל (זריקת הרדמה מקומית, לוקח X דקות, כאב מינימלי)
- אחרי: איך לטפל באזור, מתי להסיר תחבושת, מה לצפות
עיצוב: חם, לא רפואי מדי, בסגנון infographic.
פרומפט 2: כרטיס סיכום ביקור
השתמש ב-frontend-design.
בנה דף של עמוד אחד המשמש "כרטיס סיכום ביקור":
שדות שהרופא ממלא ידנית אחרי הביקור (אפשר ב-HTML editable):
- תאריך ביקור
- אבחנה
- טיפול שניתן היום
- מה הביקור הבא (תאריך, רופא, מטרה)
- הוראות מיוחדות (תרופות, הגבלות)
- טלפון חירום
עיצוב: בסגנון סיכום ביקור רשמי אבל לא מפחיד.
שמור ב-~/Desktop/visit-summary-template.html
---
אזהרות וטיפים מעשיים
frontend-design מייצרת HTML לא PDF. להדפסה - פתח בדפדפן ועשה Ctrl+P → Save as PDF.
ה-skill לא יודעת דיוק רפואי. אם אתה מבקש "הוסף אחוזי חזרה של BCC", צריך להזין לה את המספר. אל תסמוך עליה למידע קליני.
אל תעלה PII של מטופלים. הדפים גנריים - השם והפרטים מוקלדים אחר כך.
RTL לפעמים שבור. אם ציר זמן יוצא הפוך, הוסף בפרומפט: "כל הדף RTL עם direction: rtl, פונט Heebo או Assistant".
בדוק במובייל. מטופלים בישראל פותחים הכל ב-WhatsApp ממובייל. ודא שהדף עובר את מבחן המובייל.
---
🔒 פרטיות
דפי ההסבר שנוצרים הם גנריים - הם לא כוללים PII. ההתאמה האישית (אם יש) נעשית ידנית אחרי קבלת התבנית.
אם אתה מבקש דף מותאם אישית ("דף הסבר למטופל X"), אל תכלול את שמו או פרטיו בפרומפט - Claude ייצר תבנית, והתאמה אישית תעשה ידנית.
מקורות
- Anthropic. frontend-design skill documentation. https://github.com/anthropics/claude-code/blob/main/plugins/frontend-design
- Anthropic. Skills overview. https://docs.claude.com/en/docs/claude-apps/skills
- Coulter A, et al. Patient information materials for health professionals. *BMJ*. 2015;350:h1285. https://pubmed.ncbi.nlm.nih.gov/25820612/
- Shapiro BL, et al. Effect of visual aids on informed consent comprehension. *Plast Reconstr Surg Glob Open*. 2020;8(4):e2759. https://pubmed.ncbi.nlm.nih.gov/32440403/
---
הערת עזר קלינית: חומרי ההסבר שנוצרים הם עזר חינוכי. הם אינם מחליפים את שיחת ההסכמה מדעת ואת הדרישות המשפטיות של הסכמה חוקית.