למה לעצב את האתר כתמונה לפני שבונים אותו?
הדרך הרגילה לבנות אתר עם AI הולכת ככה: כותבים מה רוצים, הכלי בונה, ורק אז רואים מה יצא. אם זה לא מה שדמיינתם, מתחיל סבב של "תגדיל את הכותרת", "לא, הצבע הזה", "תזיז את התמונה". כל סבב כזה בונה מחדש חלק מהקוד, ולפעמים שובר משהו שכבר עבד.
יש סדר אחר, כמו לאשר תוכנית של אדריכל לפני שיוצקים בטון. קודם מקבלים תמונה של הדף, משנים אותה עד שהיא נכונה, ורק את התמונה המאושרת הופכים לקוד. לשנות תמונה זה מהיר וזול, ואתם רואים את התוצאה מיד.
זה גם שונה משכפול אתר של מישהו אחר. במדריך שכפול אתר מלינק מתחילים מאתר קיים ומעתיקים אותו. כאן התמונה היא העיצוב שלכם: אתם יכולים להתחיל מהשראה, אבל משנים צבעים, טקסטים, סדר וסגנון עד שזה שלכם.
מה זה Screenshot to Code ומה הוא יודע לעשות?
Screenshot to Code בגיטהאב הוא כלי בקוד פתוח ברישיון MIT. שמים לו צילום מסך, מוקאפ, עיצוב מפיגמה או אפילו הקלטת מסך של אתר, והוא כותב קוד שעובד. לפי ה-README, אפשר לבחור באיזו טכנולוגיה:
- HTML + Tailwind או HTML + CSS, הכי פשוט לאתר סטטי.
- React + Tailwind או Vue + Tailwind, אם הדף ייכנס לאפליקציה.
- Bootstrap ו-Ionic + Tailwind.
מאחורי הקלעים הוא משתמש במודלים של Gemini, OpenAI וקלוד. Gemini גם שולף מהתמונה את הלוגואים והתמונות האמיתיים במקום לצייר ריבועים אפורים, ויש כלי תצוגה מקדימה שבו המודל מצלם את הדף שבנה ובודק אותו מול המקור.
איך עוברים מתמונה מאושרת לאתר חי, שלב אחרי שלב?
- אוספים השראה. צילום מסך של דף שאהבתם, או סקיצה שציירתם. זו נקודת ההתחלה, לא התוצאה.
- משנים את התמונה בצ'אט ג'י פי טי. מעלים את התמונה ומבקשים שינויים: צבעים של המותג, הכותרת שלכם, סדר אחר של הסקשנים. הפרומפט המלא נמצא בהמשך.
- מאשרים. מסתכלים על התמונה כמו על הצעה של מעצב: האם זה הדף שרציתם? אם לא, עוד סבב תיקונים על התמונה, לא על הקוד.
- הופכים לקוד. מעלים את התמונה המאושרת ל-Screenshot to Code, בוחרים טכנולוגיה, ומקבלים קוד עם תצוגה מקדימה.
- מסיימים בקלוד קוד. פותחים את הקוד בקלוד קוד ומבקשים לסדר עברית מימין לשמאל, להחליף טקסטים ולחבר טפסים.
שלב 5 חשוב במיוחד בעברית. מודלים שמייצרים קוד מתמונה נוטים לבנות את הדף משמאל לימין, וגם טקסט עברי בתוך תמונה שנוצרה ב-AI יוצא לפעמים משובש. עדיף להשאיר בתמונה כותרות קצרות, ולכתוב את הטקסט הסופי ישר בקוד.
איך זה נראה בפועל, למשל בדף לסטודיו ליוגה?
נניח שיש לכם סטודיו ליוגה ואתם צריכים דף הרשמה לסדנת סוף שבוע. ראיתם דף נחיתה של אפליקציית מדיטציה שאהבתם: הרבה אוויר, תמונה גדולה למעלה, שלוש תועלות בשורה אחת.
מעלים את צילום המסך לצ'אט ג'י פי טי עם הפרומפט שבהמשך, ומבקשים צבעי חול וירוק זית, כותרת "סוף שבוע של שקט" ותמונה של חדר עם מזרנים. אחרי שני סבבים התמונה נראית כמו הסטודיו שלכם ולא כמו האפליקציה. עכשיו שולחים אותה לשותפה או ללקוח לאישור, לפני שמישהו התחיל לבנות.
רק אחרי האישור מעלים אותה ל-Screenshot to Code ובוחרים HTML + Tailwind, כי מדובר בדף אחד. מקבלים קוד שנראה כמו התמונה, פותחים אותו בקלוד קוד, ומבקשים לסדר עברית, להחליף את הטקסטים בטקסטים האמיתיים ולחבר את כפתור ההרשמה. אם בסוף משהו קטן לא יושב, את התיקון האחרון אפשר לעשות עם עורך ה-Human Review ישר על הדף.
להשתמש באתר המוכן או להתקין את הריפו בחינם?
האתר: ב-screenshottocode.com אין מה להתקין. מעלים תמונה ומקבלים קוד. זו הדרך הכי מהירה לנסות, אבל היא בתשלום, ולא מצאנו באתר עצמו מחירון שאפשר לצטט. תבדקו את המחיר אחרי ההרשמה.
הריפו: הקוד חינמי, אבל צריך להריץ אותו אצלכם עם מפתח API משלכם, ומשלמים לספק המודל לפי שימוש. צריך לפחות מפתח אחד של OpenAI, אנתרופיק או Gemini, והיוצר ממליץ מאוד להוסיף Gemini ו-Replicate בשביל דיוק ועריכת תמונות. וגם לא צריך להיות טכנולוגי בשביל ההתקנה, כי אפשר לבקש מקלוד קוד לעשות אותה:
תתקין לי מקומית את https://github.com/abi/screenshot-to-code לפי ה-README. תשאל אותי על מפתחות API ותשמור אותם רק בקובץ backend/.env שלא נכנס לגיט. בסוף תריץ את הבקאנד ואת הפרונט ותגיד לי איזה כתובת לפתוח בדפדפן.אם אתם מעדיפים להריץ לבד, אלה הפקודות מה-README עם Docker. אחרי זה האפליקציה פתוחה ב-localhost:5173:
git clone https://github.com/abi/screenshot-to-code.git
cd screenshot-to-code
echo "OPENAI_API_KEY=sk-your-key" > .env
docker-compose up -d --buildמה חשוב לדעת לפני שמתחילים?
- זכויות: השראה זה בסדר, העתקה של עיצוב, לוגו או טקסט של עסק אחר לא. אם התחלתם מצילום מסך של אתר קיים, תשנו אותו מספיק כדי שיהיה שלכם. זה לא ייעוץ משפטי.
- מפתחות: מפתח API הוא כמו כרטיס אשראי. שומרים אותו רק בקובץ .env, לא שולחים בצ'אט ולא מעלים לגיטהאב.
- עלות: כל המרה צורכת קריאות למודל. תמונה אחת לרוב לא עולה הרבה, אבל כמה גרסאות של כמה דפים מצטברות. כדאי לבדוק את החיוב אצל הספק אחרי היום הראשון.
- כמה גרסאות: לפי ה-README, ככל שמחברים יותר מפתחות, הכלי מייצר כמה גרסאות במודלים שונים ואפשר להשוות ביניהן. עם מפתח אחד מקבלים רק את המודלים של אותו ספק, וזה מספיק כדי להתחיל.
- מה הוא לא עושה: הוא בונה את המראה. טפסים שנשלחים, תשלומים, חיבור לדומיין ואחסון, את כל אלה מוסיפים אחר כך בקלוד קוד.
שני פרומפטים: לתמונה ולגימור
הראשון הולך לצ'אט ג'י פי טי יחד עם צילום המסך, כדי להפוך השראה לעיצוב שלכם. השני הולך לקלוד קוד אחרי שקיבלתם קוד, כדי לסדר עברית ולסיים את הדף.
מצורף צילום מסך של דף נחיתה שאני אוהב את המבנה שלו. תעצב לי דף נחיתה חדש באותו מבנה, בשביל העסק שלי:
שם העסק: [שם]
מה אני מוכר: [משפט אחד]
צבעי המותג: [צבע ראשי] ו-[צבע משני]
כותרת ראשית: [עד 6 מילים]
סדר הסקשנים: כותרת עם כפתור, שלוש תועלות, המלצות, שאלות נפוצות, כפתור הרשמה.
הדף בעברית, מיושר לימין. תשאיר כותרות קצרות, טקסט ארוך תסמן כקווים אפורים.
תחליף את כל התמונות והלוגואים של האתר המקורי בתמונות שמתאימות לעסק שלי.
גודל: צילום של דף שלם בדסקטופ, ברוחב 1440 פיקסלים.את התמונה שאישרתם מעלים ל-Screenshot to Code. אחרי שהקוד נשמר בתיקייה, פותחים בה את קלוד קוד ומדביקים:
הקוד בתיקייה הזאת נוצר מתמונה של דף נחיתה בעברית. תעשה את זה:
1. תוסיף dir="rtl" ו-lang="he" ותוודא שכל הסקשנים מיושרים מימין לשמאל, כולל אייקונים וחצים.
2. תחליף את הטקסטים הזמניים בטקסט מהקובץ copy.md.
3. תוודא שהדף נראה טוב ברוחב 390 פיקסלים של טלפון.
4. תצלם את הדף בדסקטופ ובטלפון ותשווה לתמונה המקורית approved.png. תתקן כל הבדל בסידור או בצבע.שאלות נפוצות על Screenshot to Code
מה זה Screenshot to Code?
כלי בקוד פתוח ברישיון MIT שהופך צילום מסך, מוקאפ, עיצוב מפיגמה או הקלטת מסך לקוד עובד ב-HTML, React, Vue ועוד. יש לו גם גרסה מוכנה בתשלום באתר screenshottocode.com.
Screenshot to Code חינמי?
הריפו חינמי, אבל צריך מפתח API משלכם ומשלמים לספק המודל לפי שימוש. האתר המוכן הוא בתשלום, ואת המחיר העדכני רואים אחרי ההרשמה.
במה זה שונה משכפול אתר?
שכפול מתחיל מאתר קיים ומעתיק אותו. כאן מתחילים מתמונה שעיצבתם ואישרתם בעצמכם, אז התוצאה היא העיצוב שלכם ולא העתק.
זה עובד עם אתרים בעברית?
כן, אבל כדאי לסיים בקלוד קוד: להוסיף כיוון מימין לשמאל, לבדוק אייקונים וחצים, ולכתוב את הטקסט העברי ישר בקוד במקום להעתיק אותו מהתמונה.
איזו טכנולוגיה לבחור בהמרה?
לדף נחיתה אחד או אתר קטן, HTML עם Tailwind הוא הכי פשוט לאחסון ולתחזוקה. React או Vue מתאימים כשהדף נכנס לאפליקציה קיימת שכבר בנויה בהם.
אפשר להעלות עיצוב מפיגמה?
כן. לפי ה-README הכלי מקבל עיצובים מפיגמה, מוקאפים וצילומי מסך, וגם הקלטת מסך של אתר בפעולה, שממנה הוא בונה אב טיפוס.