פרומפטים לפי סגנון
פרומפט לעיצוב אתר לפי סגנון
כתיבה של „תעשה את זה ברוטליסטי” מניבה כמה מסגרות עבות על עמוד גנרי. סגנון הוא אוסף כללים, ו-Claude מקיים כללים היטב כשמפרטים אותם. כאן שמונה סגנונות עיצוב אתרים, ולכל אחד בלוק שאפשר להדביק בכל פרומפט.
4 דקות קריאהעודכן
למה שם של סגנון לא מספיק
שמות של סגנונות הם מושגים עמומים. „מינימלי” יכול להיות אפל, מוג׳י או עמוד ריק. „ברוטליסטי” היה בטון חשוף, HTML בלי עיצוב וסטיקרים ורודים. כשנותנים ל-Claude רק שם, הוא ממצע את כל המשמעויות ומחזיר את האמצע הבטוח.
הפתרון הוא לתרגם את השם להחלטות: פלטה עם קודי צבע, זוג גופנים, כלל למסגרות וצללים, כלל לפריסה ורשימה קצרה של דברים אסורים. זה המבנה של כל בלוק כאן. מדביקים בלוק בתחילת הפרומפט ואז מוסיפים תוכן. המבנה המלא של פרומפט מופיע במדריך איך כותבים פרומפט ל-Claude לעיצוב אתר.
1. ניאו-ברוטליסט
קווי מתאר שחורים עבים, צללים קשיחים בהיסט, צבע שטוח רווי וטיפוגרפיה שצועקת. מתאים לסוכנויות, אירועים ולמי שרוצה להיזכר. בעמוד סגנון ניאו-ברוטליסט יש דוגמאות חיות, ואתר סוכנות Loudmouth מציג עמוד שלם.
STYLE: neo-brutalist.
COLORS: paper #FFFDF5, ink #111111, accents #FF5C39 and #3D5AFE, one flat color per section.
TYPE: huge grotesk headlines (clamp 3rem to 9rem), tight leading, mono for labels.
RULES: 3px solid black borders, hard shadows 6px 6px 0 #111 with no blur, square or lightly rounded corners, hover moves the element 2px and shrinks the shadow.
AVOID: gradients, glass, soft shadows, stock icons.2. באוהאוס
צבעי יסוד, עיגולים, ריבועים ומשולשים, ורשת קפדנית. עובד יפה לבתי קפה, בתי ספר ומוסדות תרבות. ראו את עמוד סגנון באוהאוס ואת אתר Cafe Bauhaus.
STYLE: Bauhaus.
COLORS: off-white #F4EFE6, black, red #D6322B, yellow #F2B705, blue #1F4E9E. Nothing else.
TYPE: geometric sans in bold and light, all lowercase headlines, set flush left.
RULES: build visuals only from circles, squares and triangles; align everything to a 12-column grid; use diagonals and rotated 90-degree blocks for rhythm.
AVOID: photos with effects, rounded cards, drop shadows.3. שוויצרי (Swiss International)
רשת, מרווחים ריקים, משפחת גופנים אחת וצבע הדגשה יחיד. הסגנון משדר אמינות, ולכן הוא מתאים ליועצים, לתוכנה ולמשרדי עורכי דין. ראו את עמוד הסגנון השוויצרי.
STYLE: Swiss International.
COLORS: white, black, one red accent #E30613 used on at most one element per screen.
TYPE: one neo-grotesk family, three sizes only, headlines flush left and ragged right.
RULES: 12-column grid with visible alignment, generous margins, thin 1px rules between sections, numbered sections.
AVOID: decoration, icons, more than one accent color.4. מינימליזם יפני
שקט, חם ואיטי, והחלל עושה את רוב העבודה. מתאים לאדריכלים, לקרמיקה ולבריאות. ראו את עמוד מינימליזם יפני ואת Kanso Architects.
STYLE: Japanese minimal (kanso).
COLORS: washi #F2EEE6, charcoal #2B2B2B, moss #6B705C as the only accent.
TYPE: light serif for headlines, small sans for body, generous letter spacing on small labels.
RULES: at least 120px between sections, one image per screen, vertical text for one decorative label, motion limited to slow 600ms fades.
AVOID: bright colors, dense grids, bounce animations.5. נואר יוקרתי
רקעים כמעט שחורים, הדגשה מתכתית וגופן סריף אלגנטי. מתאים למלונות, למסעדות ולתכשיטים. ראו את עמוד נואר יוקרתי ואת אתר מלון Nocturne.
STYLE: luxury noir.
COLORS: background #0B0B0C, text #EDE8DF, gold #B8975A for lines and small details only.
TYPE: high-contrast serif for headlines at large size, small caps sans for navigation.
RULES: hairline 1px gold dividers, full-bleed dark photography, slow parallax at most, buttons as outlined rectangles.
AVOID: neon, glow effects, gradients, rounded pill buttons.6. רטרו שנות ה-70
חומים וכתומים חמים, אותיות עבות ועגולות ופסי שקיעה. מתאים למזון, למוזיקה ולמותגי לייפסטייל. ראו את עמוד רטרו 70.
STYLE: retro 70s.
COLORS: cream #F6E7C8, brown #5A2E1B, orange #E8702A, mustard #E3A72F, teal #2A7F7B.
TYPE: soft heavy display serif or rounded sans, tight leading.
RULES: concentric stripe bands as dividers, rounded corners 24px, sun and arch shapes, subtle paper grain.
AVOID: pure black, cold blues, sharp corners.7. קליימורפיזם
צורות רכות, מנופחות ודמויות צעצוע, עם הארה פנימית. מתאים לילדים, לאפליקציות ולמוצרים שובבים. ראו את עמוד קליימורפיזם.
STYLE: claymorphism.
COLORS: pastel background #EEF0FF, shapes in peach, mint and lilac, text #2A2A40.
TYPE: rounded sans, bold weights, friendly sentence-case headlines.
RULES: radius 28px or more, double shadow (outer soft plus inner highlight), buttons that squish on press, no hard borders.
AVOID: sharp edges, flat black, dense text blocks.8. ריזוגרף (פנזין)
שניים או שלושה צבעי דיו שנדפסים זה על זה, גרעיניות וסטייה קלה בהתאמה. עובד לאירועים, להוצאות ספרים ולסטודיואים יצירתיים. ראו את עמוד ריזוגרף פנזין ואת אתר Overprint Zine Fair.
STYLE: risograph zine.
COLORS: paper #F5F0E6, fluorescent pink #FF48B0, blue #0078BF, overlap areas use multiply blend.
TYPE: chunky grotesk plus a typewriter mono for captions.
RULES: halftone dot textures, shapes offset 3px to fake misregistration, uneven hand-cut edges, two inks per section at most.
AVOID: smooth gradients, glass, perfect alignment.הבלוקים נכתבים באנגלית בכוונה: Claude מבצע הוראות עיצוב באנגלית בדיוק רב יותר, והתוכן של האתר עצמו אפשר לבקש בעברית.
איך משלבים ומתאימים סגנונות
- בוחרים סגנון אחד למבנה ולוקחים לכל היותר פרט אחד מסגנון אחר, למשל גופן מונו לתוויות.
- מחליפים את צבע ההדגשה לצבע המותג ומשאירים את שאר הבלוק.
- מבקשים שתי גרסאות של אזור הפתיחה בלבד, משווים, ורק אז בונים את העמוד.
- אם התוצאה סוטה, מדביקים את הבלוק שוב ומציינים איזה כלל נשבר.
עוד טיפים נגד פלט גנרי יש במדריך איך גורמים לאתר AI לא להיראות כמו AI. כדי לראות כל סגנון רץ חי, עיינו בעיצובי האתרים. בכל עמוד עיצוב מופיע הפרומפט שמאחוריו.
העיצובים שמוזכרים במדריך
- אתרים מלאים · ניאו־ברוטליסטיאתר סוכנות בסגנון ניאו־ברוטליסטיאתר לסוכנות מיתוג רועשת, מודפס כמו כרזת מחאה: מילים בכותרת שצועקות בחזרה במעבר עכבר ובועת דיבור שעוקבת אחרי הסמן, שורות שירותים שמתמלאות בוורוד, אריחי פרויקטים בסגנון כרזה שנלחצים פנימה ו־SAY HI ענק.
- אתרים מלאים · באוהאוסאתר בית קפה בסגנון באוהאוסאתר לבית קפה שבנוי כמו כרזת באוהאוס: כותרת מוערמת שעולה פנימה, כרזה גאומטרית של 3 על 3 שמסתובבת ברבע בכל לחיצה, תפריט באריחים בצבעי יסוד, שעות פתיחה כגרף עמודות ושקי פולים שמתרוממים.
- אתרים מלאים · מינימליזם יפניאתר משרד אדריכלים מינימליסטי יפניאתר שקט למשרד אדריכלים בקיוטו: חזית של בית תה משורטטת בקו, שבה תזוזת הסמן משנה את שעת היום ואת הצל מתחת לגג, כיתובים אנכיים ביפנית, שורות פרויקטים שמזיזות הצידה תוכנית קומה, וחותמת אדומה.
- אתרים מלאים · יוקרה שחורהאתר מלון בוטיק יוקרתיאתר כהה למלון בבית דפוס משנת 1931: כותרת בודוני לצד חזית משורטטת שבה 24 חלונות נדלקים ומראים כל חדר ומחירו, תוכניות קומה בזהב שמציירות את עצמן, תפריט קוקטיילים שנפתח ושורת הזמנה.
- אתרים מלאים · פנזין ריזוגרףאתר יריד פנזינים בסגנון ריזוגרףאתר שלם ליריד הוצאות עצמאיות בשני צבעי ריזוגרף: כותרת בהדפסת יתר, תוכנייה בנקודות רסטר, רשימת מציגים וכרטיסים.
שאלות נפוצות
מהו הפרומפט הטוב ביותר לאתר ברוטליסטי?
נותנים שם לסגנון ואז כללים קשיחים: מסגרות שחורות של 3 פיקסלים, צללים קשיחים בלי טשטוש, שניים-שלושה צבעי הדגשה שטוחים וגופן גרוטסק ענק. רשימת איסורים על גרדיאנטים וצללים רכים מונעת מ-Claude לסטות.
אפשר לשלב שני סגנונות בעמוד אחד?
רק לעיתים רחוקות וזה עובד היטב. בוחרים סגנון אחד למבנה ולוקחים ממנו פרט אחד מסגנון אחר, למשל גופן מונו לתוויות.
איזה סגנון הכי מתאים לעסק קטן?
אין מנצח אחד. הסגנון השוויצרי הכי בטוח לאמינות ובהירות, וסגנונות נועזים כמו ברוטליזם או באוהאוס עוזרים כשחשוב יותר לבלוט.
להמשיך לקרוא
- 01פרומפטים
5 דקות קריאהאיך כותבים פרומפט לבניית אתרמבנה מעשי לפרומפט לעיצוב אתר ב-Claude: רעיון, מקטעים, מערכת עיצוב, תנועה וכללי פלט. כולל תבנית מוכנה להעתקה ודוגמאות אמיתיות.למדריך - 02עקרונות עיצוב
5 דקות קריאהאיך גורמים לאתר שנבנה עם AI לא להיראות כמו AIלמה כל אתרי ה-AI נראים אותו דבר, ותשעה כללי עיצוב מעשיים, עם קטעי פרומפט, שהופכים אתר שנבנה עם Claude לאתר שנראה מעוצב.למדריך - 03מדריך מעשי
4 דקות קריאהבונים דף נחיתה עם Claude, שלב אחר שלבמבריף ועד אתר באוויר: מתכננים את העמוד, כותבים פרומפט, משפרים ב-Artifact, מעבירים ל-Next.js ומעלים. שבעה שלבים עם פרומפטים מוכנים.למדריך