דילוג לתוכן

דוגמאות לכפתורים מונפשים

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

כפתור מגנטי

מגזיני חם

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

כפתורים

כפתורים עם צל קשיח שנלחצים פיזית לתוך הדף וקופצים בחזרה בתנועת קפיץ.

כפתורים

כפתור מחיקה שצריך להחזיק לחוץ 1.2 שניות. הוא מתמלא בצבע, ושחרור מוקדם מחזיר אותו אחורה.

כפתורים

כפתור העתקה שהאייקון שלו הופך לוי מצויר והכפתור מתרחב לטקסט "הועתק".

כפתורים

מתג אלסטי

מגזיני חם

מתג הגדרות שהידית שלו נמתחת בתנועה ונעצרת בקפיצה, והמסילה מתמלאת בכחול.

כפתורים

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

כפתורים

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

כפתורים

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

כפתורים

שאלות נפוצות

מה זה דוגמית עיצוב?

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

איך משתמשים בפרומפט ל-Claude כדי לעצב אתר?

פותחים עיצוב, לוחצים על „העתקת הפרומפט” ומדביקים ב-Claude. מקבלים רכיב React שלם עם Tailwind CSS ו-Framer Motion שאפשר לשלב באתר Next.js.

העיצובים חופשיים לשימוש?

כן. כל העיצובים והקוד חופשיים לשימוש בפרויקטים אישיים ומסחריים לפי רישיון MIT.

איך גורמים לאתר שנבנה עם AI לא להיראות כמו AI?

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

אילו סגנונות עיצוב יש באתר?

28 שפות עיצוב, בהן ניאו־ברוטליזם, באוהאוס, שוויצרי, מינימליזם יפני, יוקרה כהה, רטרו שנות ה־70, ממפיס, Y2K, קליימורפיזם, ריזוגרף, ארט דקו ו־8 ביט.

אפשר להזמין אתר מותאם לעסק שלי?

כן. ממלאים את הבריף בדף הבית ומקבלים תשובה תוך יום עבודה אחד.