קורן בן עזרא
MohtashamMurshidמה זה getdesign?
getdesign הוא סקיל שמקבל כתובת של אתר ציבורי ומפיק ממנו קובץ design.md מסודר בתשעה סעיפים: אווירה, צבעים, טיפוגרפיה, רכיבים, פריסה, עומק, תנועה, רספונסיביות והנחיות לסוכן. הכלל המרכזי שלו הוא שכל ערך חייב להגיע מה-CSS או מצילום המסך של האתר, ולא מהדמיון של המודל.
הרבה פעמים יש אתר שאוהבים את המראה שלו, ורוצים שהאתר שלכם ידבר באותה שפה בלי להעתיק אותו. getdesign עושה את עבודת הניתוח: הוא קורא את ה-HTML ואת קובצי ה-CSS של האתר, מצלם את המסך ומרכיב מסמך design.md. המסמך מתאר את מערכת העיצוב של האתר בצורה שסוכן אחר יכול לבנות לפיה.
הסקיל עובד רק עם הכלים שכבר יש לסוכן: WebFetch להורדת הדף וקובצי הסגנון, כלי דפדפן לצילום מסך וכתיבת קבצים. אין שרת, אין מפתח API ואין התקנת חבילות. התוצר הוא קובץ design.md ולצידו תיקיית images עם צילומי המסך, והסעיפים מופיעים תמיד באותו סדר, מ-Visual Theme ועד Agent Prompt Guide.
מה שהופך אותו לשימושי הוא כלל העיגון. כל צבע, גופן, מרווח או צל חייב להופיע במשהו שנשלף בפועל מהאתר, ואם אין מקור, הסקיל מתאר את התפקיד במילים במקום להמציא קוד צבע. סוכנות שמקבלת מלקוח אתר של מתחרה כהשראה חוסכת כך שעות של ניחושים, ומקבלת בריף עיצובי מבוסס שאפשר לעבוד לפיו.
למי זה מתאים
- סוכנויות ומעצבים שמקבלים מלקוח אתר רפרנס ורוצים לתרגם אותו לבריף עיצובי מדויק
- בעלי עסקים שרוצים לבנות דף עם Claude בהשראת אתר שהם אוהבים
- מי שרוצה לתעד את מערכת העיצוב של האתר הקיים שלו לפני שדרוג
- מפתחים שצריכים טוקנים של צבע, טיפוגרפיה וברייקפוינטים מתוך אתר חי
מה הוא עושה
תשעה סעיפים קבועים
Visual Theme, Color Palette, Typography, Component Stylings, Layout, Depth, Interaction and Motion, Responsive Behavior ו-Agent Prompt Guide. הסדר והשמות קבועים, כך שכל מסמך נראה אותו דבר.
עיגון מלא בקוד של האתר
כל קוד צבע בטבלת הפלטה מגיע עם המקום שבו הוא נמצא ב-CSS. ערכים שמופיעים פחות מפעמיים ובלי שם משתנה נחשבים מקריים ולא נכנסים לפלטה.
צילומי מסך אמיתיים
הסקיל פותח את האתר ברוחב 1440 על 900, מצלם ושומר את התמונות בתיקייה images לצד המסמך. הוא פותח כל תמונה ובודק שהיא מראה את הדף ולא מסך טעינה.
בדיקת מצב בהיר ומצב כהה
אם לאתר יש מצב כהה, הסקיל אוסף נתונים לשני המצבים ומציין אילו טוקנים משותפים ואילו שייכים רק לאחד מהם.
טבלאות מסודרות
פלטה בטבלה של קוד צבע, תפקיד ומיקום באתר, והיררכיית טיפוגרפיה עם גודל, משקל, גובה שורה וריווח אותיות לכל רמה.
מדריך פרומפטים לסוכן
הסעיף האחרון כולל את קודי הצבע המרכזיים, שלושה פרומפטים לדוגמה לשחזור הסגנון ובין ארבעה לשישה טיפים לשיפור.
בלי תשתית
הסקיל לא מתקין חבילות ולא מפעיל סביבות נפרדות. הוא משתמש רק בכלים שכבר קיימים בסוכן.
דוגמאות שימוש
מה כותבים ל-Claude אחרי ההתקנה, ומה מקבלים.
בריף מאתר רפרנס
extract the design system from cursor.com into design.md
מה מקבלים: זה הפרומפט שמופיע ב-README. מקבלים קובץ design.md בתשעה סעיפים ותיקיית images עם צילומי מסך, וכל קוד צבע מגובה במקור מה-CSS.
תיעוד האתר שלכם
תשתמש בסקיל getdesign על האתר שלי https://www.example.co.il ותכתוב design.md, כדי שנשמור על אותה שפה עיצובית בכל דפי הנחיתה הבאים.מה מקבלים: מסמך מערכת עיצוב של האתר הקיים, שאפשר לתת ל-Claude בכל פעם שבונים עמוד חדש.
מהמסמך לדף חדש
תקרא את design.md שיצרנו ותבנה לפי הסעיף Agent Prompt Guide דף נחיתה בעברית למשרד הנהלת חשבונות, עם הצבעים והטיפוגרפיה שמופיעים במסמך.מה מקבלים: דף שמדבר באותה שפה חזותית של האתר המקורי, עם תוכן ומבנה משלכם.
השוואת מתחרים
תפיק design.md לשלושה אתרים של מתחרים שלי, כל אחד בתיקייה משלו, ואז תכתוב טבלה שמשווה פלטות, גופנים ורדיוס פינות.מה מקבלים: שלושה מסמכים וטבלת השוואה, שעוזרים לבחור כיוון שמבדל אתכם מהמתחרים.
מה צריך לפני שמתחילים
- Claude Code עם הכלי המובנה WebFetch
- כלי דפדפן שמצלם מסך, למשל Claude in Chrome או Playwright MCP. בלי צילום מסך הסקיל עוצר ומסביר, וממשיך במצב טקסט בלבד רק אם מבקשים זאת במפורש
- האתר צריך להיות ציבורי ובכתובת https. דפים שמאחורי התחברות, localhost וכתובות IP פרטיות נדחים
- בלי מפתח API ובלי עלות, רישיון MIT. המסמך נכתב באנגלית
אין עדיין Claude Code? במדריך הזה יש התקנה צעד אחרי צעד.
איך מתקינים את getdesign.
יש 3 דרכים, ומספיקה אחת מהן. הראשונה הכי פשוטה, בלי קוד בכלל.
הכי פשוט: באפליקציה של Claude, בלי שום קוד
מתאים ל-Claude במחשב ובדפדפן. לוקח דקה, ועושים את זה פעם אחת.
- מורידים את הסקילהורדת getdesign.zip (9 KB)לא פותחים את הקובץ, מעלים אותו כמו שהוא.
- מדליקים פעם אחת את היכולתב-Claude נכנסים ל-Settings, ואז Capabilities, ומדליקים את
Code execution and file creation. - מעלים את הקובץנכנסים ל-Customize, ואז Skills, לוחצים על הפלוס, בוחרים
Create skillואזUpload a skill, ובוחרים את הקובץ שהורדתם. - זהו, עובדיםמבקשים מ-Claude את המשימה במילים רגילות, והוא משתמש בסקיל לבד כשהוא רלוונטי.
ב-Claude Code: מדביקים הודעה אחת
פותחים שיחה חדשה ב-Claude Code, מעתיקים את ההודעה ומדביקים. כש-Claude מבקש אישור להריץ, לוחצים Allow.
תתקין לי את הסקיל getdesign מהמאגר MohtashamMurshid/getdesign לתיקיית הסקילים שלי. תריץ את הפקודה הזו בדיוק: D="$(mktemp -d)" && git clone --depth 1 -q https://github.com/MohtashamMurshid/getdesign "$D/repo" && mkdir -p ~/.claude/skills && cp -R "$D/repo/skills/getdesign" ~/.claude/skills/ && rm -rf "$D" && echo "הותקן ✓"
בטרמינל, ידנית
למי שמעדיף להריץ בעצמו. מעתיקים לטרמינל ומריצים.
git clone --depth 1 https://github.com/MohtashamMurshid/getdesign /tmp/getdesign mkdir -p ~/.claude/skills cp -R /tmp/getdesign/skills/getdesign ~/.claude/skills/ rm -rf /tmp/getdesign
צריך להפעיל מחדש את Claude Code. אם אין לכם כלי דפדפן מחובר, כדאי לחבר אחד לפני השימוש, כי הסקיל דורש צילום מסך כברירת מחדל.
- מריצים ls ~/.claude/skills/getdesign ורואים את הקבצים SKILL.md ו-TEMPLATE.md
- בשיחה חדשה מקלידים / ומחפשים getdesign
- שואלים את Claude: יש לך סקיל שמפיק design.md מכתובת של אתר?
מריצים שוב את פקודת ההתקנה, והיא מעתיקה את הגרסה העדכנית מעל הקיימת.
rm -rf ~/.claude/skills/getdesign
איך משתמשים ביום יום
- מדביקים כתובת מלאה עם https ומבקשים design.md או design system
- אפשר לציין נתיב לשמירה. בלי נתיב, הקובץ נשמר בשם design.md בתיקייה הנוכחית
- כשהקובץ מוכן, מבקשים מ-Claude לבנות לפיו ומפנים אותו לסעיף Agent Prompt Guide
- אם אתר חוסם גישה (שגיאה 403 או Cloudflare), הסקיל מנסה את עמוד הבית ואת עמוד about, ואם גם זה נכשל הוא עוצר ומדווח בלי לנחש
טיפים שימושיים
- השתמשו בתוצאה כהשראה ולא כהעתקה. פלטה וקצב מרווחים הם כלי עבודה, אבל הלוגו, התמונות והמיתוג של מותג אחר שייכים לו
- לאתר עם מצב כהה, בקשו במפורש לצלם ולתעד את שני המצבים
- אם רוצים מסמך בעברית, מבקשים תרגום אחרי שהקובץ נוצר, ומשאירים את כותרות הסעיפים באנגלית כדי שסוכנים אחרים יזהו אותן
- אפשר להתקין גם עם npx skills add MohtashamMurshid/getdesign, שמופיע ב-README ומציג בחירה של סוכנים
- השם design-md משמש גם מאגר אחר ומוכר, VoltAgent/awesome-design-md, עם קובצי DESIGN.md מוכנים של מותגים. getdesign שונה ממנו, כי הוא מייצר את הקובץ בעצמו מכל כתובת
תקלות נפוצות
הסקיל עוצר ואומר שאין לו כלי לצילום מסך
האתר מחזיר שגיאה 403
המסמך דל וחסרים בו צבעים
npx skills add לא עובד אצלי
שאלות ותשובות
צריך חשבון או מפתח API?
מה ההבדל בין getdesign ל-awesome-design-md?
ה-API וה-CLI של getdesign עובדים?
זה עובד על אתרים בעברית?
כמה ותיק ופופולרי הפרויקט?
קרדיט ומקור. getdesign נכתב על ידי MohtashamMurshid ונמצא ב-MohtashamMurshid/getdesign ברישיון MIT. את העמוד כתב קורן בן עזרא אחרי בדיקה של המאגר ושל פקודות ההתקנה (29.09.2026). מאגרים מתעדכנים, ולכן אם משהו השתנה, המאגר הוא המקור הקובע.
bergside
leonxlnx
nextlevelbuilder