לבנות אתר שלא נראה גנרי עם Claude Code: שלוש רמות עבודה ומסגרת ANF

למה כל כך קל לזהות אתר שנבנה עם Claude Code

אם יצא לבנות אתר עם Claude Code בצורה הכי בסיסית, כנראה שהתקבלה תוצאה סבירה, אבל גם כזו שמרגישה מוכרת מדי: צבעים “דיפולטיים”, גרידים שחוזרים על עצמם, יותר מדי טקסט, ואסתטיקה שצועקת “נוצר עם AI”. זה לא כי Claude Code לא טוב, להפך. זה כי ברמת הפרומפט הבסיסית, המודל מנסה לנחש טעם עיצובי, ומנקודת המבט שלו, “מה שעובד באינטרנט” זה מה שהוא ראה הכי הרבה.

כאן נכנס עיקרון שאני חוזר עליו הרבה בעולם של AI Agents ו־Vibe Coding: הכלי פחות חשוב מהמסגרת, מההקשר ומהתהליך. כשנותנים ל־AI תהליך ברור, חומרי גלם איכותיים וסטנדרטיזציה, מקבלים תוצאה שמרגישה פרימיום.

במאמר הזה נפרק את זה לשלוש רמות עבודה עם Claude Code, מהבסיסי ביותר עד מסגרת עבודה שלמה בשם ANF, שאפשר להעתיק אחד לאחד.

הכנה: סביבת עבודה נכונה לפני שמתחילים

לפני רמות העבודה, צריך בסיס יציב. ההמלצה הפשוטה ביותר היא לעבוד מתוך Visual Studio Code עם תוסף Claude Code. למה זה משנה? כי כשבונים ממשק, לא מספיק “לייצר קוד”. צריך יכולת להריץ פרויקט, לראות תצוגה מקדימה, לבצע תיקונים קטנים, ולהנחות את המודל על בסיס משוב אמיתי.

• VS Code מתקין בקלות ומגיע עם כל מה שצריך.
• מתקינים תוסף Claude Code דרך Marketplace.
• פותחים תיקייה לפרויקט חדש ומתחילים לעבוד בצורה איטרטיבית.

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

רמה 1: פרומפטינג פשוט, עובד אבל צפוי

ברמה הראשונה נותנים ל־Claude Code פרומפט בסגנון “תבנה דף נחיתה למוצר X” ומקווים לטוב. התוצאה לרוב תהיה:

• מבנה מוכר: Hero, Features, Testimonials, Pricing, FAQ.
• מינון טקסט לא מדויק: הרבה יותר מדי פסקאות.
• צבעים “גנריים”: למשל גווני סגול/אינדיגו שנפוצים בסטאקים כמו Tailwind.
• רכיבי UI שמרגישים כמו תבנית חינמית שחזרה אלפי פעמים.

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

השורה התחתונה: ברמת פרומפט בסיסי, המודל “מנחש” טעם. בלי חומרי גלם טובים, קל לקבל אתר שנראה AI.

רמה 2: שימוש ב־Skills ותוספים, שיפור ברור אבל עדיין לא “וואו”

ברמה השנייה מתקינים תוסף עיצוב או “Skill” שמוסיף ל־Claude Code סט הוראות קבוע: להימנע מפונטים שחוקים, להימנע מגרידים גנריים, להעדיף היררכיית טיפוגרפיה מסודרת, לשמור על עקביות צבעים ועוד.

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

איך זה נראה בפועל

1. פותחים פרויקט חדש בתיקייה חדשה.
2. מתקינים תוסף Frontend Design (או דומה) דרך ניהול התוספים.
3. נותנים פרומפט רגיל, והמערכת כבר מחילה את ההנחיות.

התוצאה בדרך כלל תהיה נקייה יותר: פחות צבעי דיפולט, טקסט יותר מאוזן, היררכיית UI יותר עקבית. ועדיין, בהרבה מקרים נשארת תחושה של “עוד אתר AI יפה”. למה? כי עדיין אין רכיבים מקוריים עם חתימה עיצובית, ועדיין אין סטנדרטיזציה עמוקה של שפה ויזואלית.

רמה 3: מסגרת ANF, Assemble, Normalize, Fill

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

• Assemble: אוספים רכיבים מוכנים, ומרכיבים מהם עמוד.
• Normalize: מאחדים את כל הרכיבים לשפה אחת: טיפוגרפיה, צבעים, רווחים, אנימציות.
• Fill: ממלאים את האתר בתוכן מדויק לעולם של המוצר, עם מחקר קצר ותוכן שמוכר.

זה מה שהופך אתר מ“תוצאה של מחולל” ל“תוצר שנראה מעוצב”.

שלב 1: Assemble, להרכיב אתר מרכיבים של מעצבים

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

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

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

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

שלב 2: Normalize, להפוך טלאים למותג אחד

זה שלב שרוב האנשים מדלגים עליו, והוא ההבדל בין אתר “יפה” לאתר “פרימיום”. בנורמליזציה מבקשים מ־Claude Code ליישר קו בכל האתר:

• טיפוגרפיה: משפחת פונטים אחת, גדלים עקביים, line-height אחיד.
• צבעוניות: פלטה מוגדרת, צבעי CTA עקביים, מצבי hover מסודרים.
• Spacing: ריווחים עקביים בין Sections ובין רכיבים פנימיים.
• קומפוננטות חוזרות: כפתורים, כרטיסים, תגיות, תפריט, Footer.
• התנהגות רספונסיבית: נקודות שבירה, מניעת גלילה צדית, התאמת תמונות.

כדאי לעבוד איטרטיבית: להריץ, לראות בעיות, ולהחזיר למודל משוב נקודתי. זה בדיוק המקום שבו Vibe Coding עובד טוב: שומרים על זרימה מהירה, אבל עם ביקורת איכות.

שלב 3: Fill, למלא תוכן שמרגיש אמיתי ומוכר

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

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

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

למה ANF עובד כל כך טוב גם בלי להיות מומחה בעיצוב

הסיבה פשוטה: במקום לנסות “ללמד טעם” באמצעות מילים, נותנים ל־Claude Code טעם דרך דוגמה. רכיבים שנבנו על ידי מעצבים כבר כוללים החלטות קטנות שקשה להסביר בפרומפט: פרופורציות, ניגודיות, micro-interactions, צללים, קצב ריווחים.

כלומר, ה־AI מבצע ביצוע והטמעה, לא המצאה אסתטית. זה הרבה יותר יציב.

צ’ק ליסט פרקטי: איך להפסיק לייצר “אתרי AI” ולהתחיל לייצר מותג

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

איך זה מתחבר ל־AI Agents ול־Vibe Coding

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

במונחים של Vibe Coding, זה מאפשר לבנות מהר בלי לאבד איכות, כי במקום “להילחם” במודל שינחש עיצוב, נותנים לו גבולות וגאיידליין.

סיכום: שלוש רמות, בחירה אחת

אפשר לבנות אתר עם Claude Code בשלוש רמות:

• פרומפטינג פשוט: מהיר, אבל תוצאות צפויות.
• Skills: שיפור מורגש, אך עדיין תבניתי.
• ANF: רכיבים אמיתיים + נורמליזציה + מילוי תוכן, וזה מה שמייצר אתר שנראה אנושי.

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

משפט סיום שאפשר לקחת לפרויקט הבא: עם Claude Code לא מנצחים על ידי עוד פרומפטים, מנצחים על ידי תהליך.