הנדסת 80/20: איך שבניתי את האתר שלי מחדש בסופשבוע אחד
אני אגלה לכם סוד: לא כתבתי מחדש את אתר האישי שלי בסופשבוע כי אני מהיר במיוחד בקידוד. עשיתי זאת כי בעצם כמעט ולא קידדתי בכלל.
במקום זאת, ביליתי את רוב הזמן שלי במה שרוב המפתחים נמנעים ממנו כמו מגפה — הכנה. תיעוד. כתיבה מסודרת. וכשבסופו של דבר פתחתי את העורך שלי והתחלתי לעבוד עם Codex של OpenAI, היישום בפועל עבר מהר כמו קסם מתורגל היטב.
זו סיפור על לעשות 80% מהעבודה לפני שכותבים שורת קוד אחת, ואיך זה שינה את כל התמונה.
למה לשכתב את האתר?
האתר שלי פעל על Qwik v3. טכנולוגיה יציבה, האווירה טובה, אבל רציתי יותר גמישות — במיוחד בפיצול מסלולים (routing). עברתי ל-React Router במצב פריימוורק. שחזור מלא, לא רק רפקטור. ארכיטקטורה חדשה, מבנה קבצים נקי, עיצוב מעודכן (היי Tailwind v4), ולוח חלק לגמרי.
אבל מה שהפתיע אותי: הקידוד בפועל לקח בערך 2-3 שעות בלבד. מתחילת ועד סיום. וזה עבד בניסיון הראשון.
אז מה קרה בשאר 5 השעות?
ה-80%: הכנת Codex כמו יועץ שמכין מצגת מכירה
רוב המאמץ הושקע בבניית "מערכת פקודות מאסיבית" — לא בממשק משתמש מפואר, אלא ישירות בתיקיית הפרויקט שלי. זה מה שעשיתי לפני שביקשתי מ-Codex לכתוב אפילו רכיב אחד:
-
הורדתי את כל תיעוד React Router ושמרתי אותו בתיקיית
/guides. -
עשיתי את אותו הדבר ל-Tailwind CSS v4, והמרתי את הדפים הרלוונטיים ביותר ל-Markdown בעזרת Firecrawl.
-
כתבתי קובץ
PROMPT.mdשנושא סקירה כללית של הפרויקט:- "קוד ישן נמצא ב-
/, הקוד החדש הולך ל-/app." - "רק ממשק משתמש מינימלי, התמקדות בלוגיקת העסק."
- "להשתמש ב-Tailwind v4. להיצמד למצב פריימוורק ב-React Router."
- וכן הלאה.
- "קוד ישן נמצא ב-
זה לא היה סתם מילים ריקות. זו הייתה הקשר תפעולי — סוג הבריף המפורט שהיית נותן לחבר צוות חדש ביום הראשון שלו. Codex לא רק ניחש מה רציתי. היה לו תיעוד בריפו. היו לו חוקים מדויקים באנגלית פשוטה. היו לו מגבלות.
כשהקלדתי לבסוף:
"קרא את PROMPT.md. קודם כל, העבר את כל המסלולים לאפליקציה החדשה."
Codex הגיב כאילו חיכה למשימה הזאת כל חייו.
פקודות מאסיביות, הזיות מינימליות
התוצאות היו מדהימות. Codex נשאר מדויק להוראות. לא הזיהה. לא ניסה להמציא. כיבד את ההנחיה "לא להתמקד בממשק משתמש". הלוגיקה של השרת הועברה בדיוק רב. הקונפיגורציה של המסלולים נראתה כאילו כתבתי אותה בעצמי — אם הייתה לי הסבלנות של מהדר קוד.
זה לא היה סתם "הנדסת פקודות". זה היה עיגון Codex במפרטים האמיתיים והעדכניים. לא רשימת משימות מעורפלת. לא רשימת תכונות למשאלה. אלא קלט מובנה, דוגמאות ברורות, וגישה מקומית למאגר התיעוד שנדרש לו.
מה לקח זמן? לא הקוד
לאחר שהבסיס הונח, העבודה התפצלה לשני שלבים מובחנים:
- מצב Codex – ביצוע מהיר, מובנה, ושובר שגרה. עבד דרך ההגירה, הלוגיקה, ואפילו מעט שלד עיצוב עם דיוק כמעט מושלם.
- מצב חקר עיצוב – איטי, ידני, ופתוח. זה החלק האנושי: בחירת מראה, ניסוי בפריסות, התנסות ברכיבים. כשקיבלתי סגנון ויזואלי עובד, Codex חזר להמשיך להפיץ את דפוסי העיצוב.
האיטיות היחידה הייתה ממני, כי לא ידעתי איך רציתי שמשהו ייראה — לא איך הוא צריך לפעול.
התובנה האמיתית: Codex טוב רק כמו ההכנה שלך
הסופשבוע הזה חיזק שינוי שאני שם לב אליו בעבודתי:
הקידוד הופך לחלק הקל. התכנון הוא הקשה — והכי חשוב.
לפרויקטים קטנים ובינוניים, אני כיום מתייחס ליישום כמשימה של 20%. ה-80% נטענים מראש: איסוף תיעוד, כתיבת משימות ממוקדות, בניית פקודות בהקשר.
Codex משגשג עם סוג כזה של מבנה. אם תזין לו עמימות, הוא יחזיר עמימות. אבל אם תבנה לו סביבה במכוון — תיעוד, מגבלות, תיאורים ברורים — הוא מתפקד כמו מפתח בכיר עם זיכרון מושלם וללא אגו.
לסיכום: התייחס ל-AI כחבר צוות, לא כרוח קסמים
המסקנה פשוטה: התייחס לכלי הקידוד מבוססי ה-AI כמו לשותפים לעבודה. תן להם את אותם חומרי רקע שהיית נותן למהנדס אמיתי. הכין את ההקשר. היה מדויק. היה מקיף.
בפעם הבאה, בפרויקט גדול יותר, אלך אפילו רחוק יותר:
- מסמך תוכנית ראשית שמגדיר את היקף הפרויקט כולו.
- מפרטי משימות נפרדים לכל תת-מערכת או רכיב.
- סט פעיל של מסמכי Markdown וקבצי דוגמאות כהערת ייחוס מקומית.
Codex לא צריך מילים קסומות — הוא צריך מבנה.
רוצה לבנות מהר יותר? תתחיל מלעשות לא לבנות. תכנן קודם. ואז תן פקודות כאילו אתה באמת מתכוון לזה.
התפתחות העיצוב: מסע ויזואלי
עם הזמן, האתר שלי עבר מספר גלגולים — כל אחד מהם ביטוי לרעיונות חדשים, כלים, ולמידה. הנה סיור ויזואלי קצר איך הדברים התפתחו:
גרסה 1: נקודת ההתחלה
גרסה 2: קול מוגדר יותר
גרסה 2.1: שדרוג ושיפור
גרסה 3: עידן Qwik
גרסה 4: פשטות ממוקדת עם Remix
כל גרסה הביאה תובנות חדשות למה שהופך אתר ליעיל — לא רק מבחינת אסתטיקה, אלא גם בהירות, שימושיות, ותחזוקה. מסע העיצוב שיקף את מסע הפיתוח: מכוון, חוזר, ותמיד מביט קדימה.