פרוטוטייפ ממוקאפ

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

מה זה עושה

מקבל מוקאפ - תמונה, סקרינשוט, קובץ פיגמה או תיאור כתוב - ובונה ממנו מסך שאפשר ללחוץ עליו בפועל: ניווט בין מסכים, טאבים, מודלים, וכל מצב שמופיע בעיצוב (טעינה, שגיאה, ריק וכו').

בורר את הסטאק הכי קל שמתאים - לרוב קובץ HTML אחד לזרימה פשוטה, או React/Tailwind אם הפרויקט כבר בנוי כך. בלי backend אמיתי ובלי בסיס נתונים - רק מה שצריך כדי להראות את הזרימה.

אופציה נוספת: לולאת השוואה ויזואלית - הסקיל מצלם מסך של התוצאה, משווה אותה לעיצוב המקורי, ומתקן הבדלים בצבע/מרווח/גודל - עד שהתוצאה קרובה מאוד למקור.

מתי זה שימושי

יש מוקאפ או סקרינשוט של עיצוב ורוצים גרסה קליקבילית להראות ללקוח
צריך אב-טיפוס מהיר לפני שמשקיעים בפיתוח מלא
רוצים לבדוק שהמימוש בקוד תואם בדיוק לעיצוב שקיבלתם
יש עיצוב בפיגמה ורוצים ממנו פרוטוטייפ עובד

מה אומרים לקלוד

אין פקודות ללמוד. אחרי ההתקנה פשוט כותבים לקלוד משפט כמו:

"הנה מוקאפ, תבנה ממנו פרוטוטייפ קליקבילי"
"תהפוך את התמונה הזו לאתר שאפשר ללחוץ עליו"
"תממש את העיצוב, תצלם מסך, תשווה למקור ותתקן הבדלים"
"תבנה לי דמו מהיר של המסך הזה"

דוגמה

מה נותנים

מצרפים תמונה של מסך התחברות ומבקשים "תבנה מזה פרוטוטייפ"

מה מקבלים

קובץ HTML/React עובד עם השדות, הכפתורים והמצבים (שגיאה, טעינה) שמופיעים בתמונה, ורשימה של מה מזויף (למשל: בלי אימות אמיתי).

מה צריך שיהיה מותקן

מה	למה / הערה
Playwright MCP	רק אם רוצים את לולאת ההשוואה הוויזואלית האוטומטית (צילום מסך והשוואה למקור)

לתשומת לבך: התוצאה היא פרוטוטייפ להדגמה בלבד - בלי backend, אימות או נתונים אמיתיים - לא מיועד לשימוש ישיר בפרודקשן.

התקנה בהדבקה אחת

פותחים את Claude Code, מדביקים את הבלוק הבא, והוא מתקין הכול לבד:

הי קלוד! התקן לי בבקשה את הסקיל "פרוטוטייפ ממוקאפ" (prototype).
1. זהה את מערכת ההפעלה שלי ואת התיקייה ~/.claude/skills/ (ב-Windows: C:\Users\<user>\.claude\skills\). צור אותה אם אינה קיימת.
2. הורד את החבילה: https://hiyabh.github.io/claude-skills/dl/prototype.tar.gz
3. חלץ ממנה את התיקייה skills/prototype אל ~/.claude/skills/prototype. אם כבר קיים סקיל בשם הזה - שאל אותי לפני שאתה דורס.
4. בדוק אם מותקנים אצלי: Playwright MCP. אם חסר משהו - תגיד לי בדיוק מה להתקין ותציע להתקין בעצמך.
5. הסבר לי בקצרה איך מפעילים - למשל שאני פשוט אומר: "הנה מוקאפ, תבנה ממנו פרוטוטייפ קליקבילי".

מעדיף טרמינל? (Git Bash / Mac / Linux)

curl -fsSL https://hiyabh.github.io/claude-skills/install.sh | bash -s -- prototype

או הורדה ידנית של החבילה וחילוץ אל ~/.claude/skills/.