CSS Picker

הסקירה

אתם מעלים צילום מסך של אתר או ממשק, והכלי מנתח את התמונה ופולט קוד תואם בתוך שניות. העבודה מבוססת על מנוע הבינה המלאכותית Gemini 3 Pro של Google, שמקבל את הוויזואליה ומנסה לפענח מבנה של כפתורים, תפריטים ושדות טקסט. התוצאה מופיעה ישירות בעורך אינטראקטיבי שבו אתם יכולים לראות תצוגה מקדימה, לתקן שורות בעצמכם או לבקש שינויים בצ׳אט. המטרה כאן היא לדלג על השלב שבו יושבים מול מסך ריק וכותבים מאפס הגדרות עיצוב. הכלי מייצר קוד עבור React או מסמכי HTML רגילים, ומשלב ספריות עיצוב כמו Tailwind CSS בהתאם לבחירה שלכם.

מלבד פיענוח תמונות, יש כאן תוסף דפדפן שמאפשר ללחוץ על אלמנט חי בכל אתר ברשת ולשאוב ממנו את המבנה והסגנון המדויקים. במקום לפתוח את כלי המפתחים של הדפדפן ולהעתיק עשרות כללים מפוזרים, התוסף דוגם את הרכיב, מחלץ את הסטייל ומאפשר להמיר אותו לתחביר מודרני. האתר כולל גם כלי המרה עצמאיים ברשת, למשל מעבר ישיר בין קוד CSS רגיל לבין מחלקות של Tailwind, או הפיכת קטעי HTML אל תוך רכיבי JSX. אם ראיתם פריסה של כרטיס מוצר או ממשק צ׳אט באתר קיים, אפשר למשוך אותם מיד כשלד ראשוני.

איך זה עובד בפועל

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

הקוד דורש בדיקה ידנית.

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

• מסלול חינםקיים עם קרדיטים מוגבלים
• מחיר כניסה19.99 דולר לחודש
• פירוט קרדיטיםלא מצוין באתר

המחיר קופץ מהר.

למי זה באמת מתאים

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

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

בעברית זה פחות מותאם.