זה יותר ממדריך אחד
11 קורסים ו-23 מדריכים חינמיים על אוטומציית AI לעסקים — ומעבר לכך.
למה תוכנת מחסן נראית כמו משחק אסטרטגיה, ושלכם עדיין נראית כמו טבלה?
מפתח הציג תוכנה לרשת מחסנים שבה משאיות נוסעות על המפה כמו יחידות, והמלאי מוצג למעלה כמו זהב במשחק. אנחנו מפרקים את הטריקים שיוצרים את האפקט ונותנים שישה פרומפטים כדי שה-AI יעשה את אותו הדבר לטבלה, ל-CRM או למנהל המשימות שלכם. בנוסף: התקנת Claude Code ומבט כן על המקומות שבהם ממשק של משחק מפריע.
מה בפנים
חינם, במלואופוסט אחד, שורה אחת על איך זה נבנה
צפיות בפוסט בפחות מיממה
לפי X בבוקר 4 באוקטוברוידאו בלי סאונד: הקלטת מסך של התוכנה
בלי קריינות ובלי עריכהעל איך זה נבנה: Built with Opus 5.5
המחבר לא מציין סטאק ולא לוחות זמניםארבעה טריקים ממשחקי אסטרטגיה שעובדים גם בתוכנת עבודה
דילום סנג'איה, מפתח שמפרסם דמואים שנבנו עם AI, הציג תוכנה לרשת מחסנים. זו מפה איזומטרית כמו במשחק בניית ערים: מחסנים, כבישים, משאיות, מלגזות צהובות ומשטחים. הכיתוב קצר: תוכנה תעשייתית לא חייבת להרגיש תעשייתית, נהלו מחסנים כאילו אתם משחקים במשחק אסטרטגיה. האפקט נשען על ארבעה טריקים.
משאבים למעלה
זהב, עץ ואוכלוסייה תמיד מול העיניים.
מלאי במשטחים, משאיות באתר, אחוז משלוחים בזמן. לכל מספר חץ: עלה או ירד.
יחידות על המפה
יחידות זזות על המפה ורואים מי עסוק במה.
משאיות נכנסות לרציפים, מלגזות מובילות משטחים, מסלול המשאית מסומן בקו.
כרטיס בלחיצה
לוחצים על יחידה ורואים בריאות, מטען ומשימה.
לחיצה על משטח, מלגזה או משאית פותחת כרטיס: כמות, טעינת סוללה, זמן הגעה, עומס.
יומן והתקדמות
תור בנייה ופיד אירועים.
למטה מעקב משלוח שלב אחר שלב, מאישור ועד מסירה, ולשוניות של רציפים, מלגזות ומשאיות עם סטטוסים.
החילו את זה על עצמכם
הטריק לא קשור למחסנים. כל תוכנה שיש בה מלאי, מבצעים וסטטוסים מתפרקת באותה צורה.
מחסן
משאבים: יתרות מלאי, מקומות פנויים, משלוחים להיום
יחידות: משאיות, מלגזות, משטחים
CRM
משאבים: עסקאות פתוחות, הכנסות החודש, המרה
יחידות: עסקאות זזות על מפת המשפך, מנהלים מובילים אותן כמו יחידות
מנהל משימות
משאבים: משימות בספרינט, דדליינים, עומס הצוות
יחידות: משימות עוברות על הלוח מ"לביצוע" עד "בוצע"
מה צריך
מספיקה אחת משלוש האפשרויות. לאב-טיפוס ראשון מספיק צ'אט רגיל; לתוכנה שתמשיכו לפתח, נוח יותר Claude Code.
Claude בצ'אט
claude.ai או האפליקציה. פרומפט אחד, ואחרי דקה יש אב-טיפוס חי בחלון הצ'אט (ארטיפקט). מתאים לבדיקת הרעיון על נתוני דמה.
Claude Code
סוכן בטרמינל: יוצר בעצמו את קבצי הפרויקט, מתקין ספריות, מריץ ובודק. צריך אותו כשהגיע הזמן להפוך את האב-טיפוס לתוכנה עם נתונים אמיתיים.
עורכי AI אחרים
Cursor, Codex, Windsurf ודומיהם. הפרומפטים למטה עובדים גם שם: הם מתארים את המשימה ולא כלי מסוים.
מודל: Opus הגדול לסצנה מורכבת ולארכיטקטורה, Sonnet מהיר יותר לתיקונים. דילום ציין בפוסט את Opus 5.5.
התקנת Claude Code
macOS ו-Linux
- פתחו את Terminal: Cmd + רווח, הקלידו "Terminal".
- הדביקו את פקודת ההתקנה למטה והקישו Enter.
- עברו לתיקיית הפרויקט, למשל cd ~/Projects/my-app.
- הקלידו claude והתחברו עם חשבון Claude בדפדפן.
curl -fsSL https://claude.ai/install.sh | bashWindows
- התקינו Git for Windows מ-git-scm.com: Claude Code משתמש במעטפת שלו.
- פתחו PowerShell והדביקו את פקודת ההתקנה למטה.
- הפעילו מחדש את PowerShell ועברו לתיקיית הפרויקט, למשל cd C:\Projects\my-app.
- הקלידו claude והתחברו עם חשבון Claude בדפדפן.
irm https://claude.ai/install.ps1 | iexפקודות ההתקנה משתנות מדי פעם; ההוראות העדכניות ב-docs.claude.com בחלק של Claude Code. אם נוח לכם npm, אפשר גם npm install -g @anthropic-ai/claude-code (נדרש Node.js 18 ומעלה).
כמה זה עולה
- Free: צ'אט עם מגבלות קטנות, Claude Code לא כלול
- Pro ≈ $20 לחודש: צ'אט ו-Claude Code
- Max מ-≈ $100 לחודש: פי כמה יותר מגבלות
- עורכי AI אחרים מ-≈ $20 לחודש, לרבים יש תקופת ניסיון
המחירים משוערים, נכון לאוקטובר 2026. תוכניות, מגבלות וגרסאות מודלים מתעדכנות באופן קבוע: בדקו את התנאים העדכניים באתר הספק.
חמישה פרומפטים מטבלה אפורה למשחק אסטרטגיה
לכו לפי הסדר ואל תאחדו שלבים: כל שלב נשען על התוצאה של הקודם. החליפו את מה שבסוגריים המרובעים.
01.קונספט: תארו את התוכנה ובקשו עיצוב מחדש
המודל לא רואה את הטבלה שלכם. ככל שתתארו בדיוק מי משתמש בה ומה קורה בה, הקונספט יהיה קרוב יותר לעבודה האמיתית.
זו תוכנת העבודה שלי: [מה זה: מחסן / CRM / מנהל משימות]. [מי] משתמשים בה כל יום כדי [המשימה העיקרית].
כרגע זו [טבלה / רשימה / דשבורד] עם העמודות: [לפרט].
מה אנשים עושים הכי הרבה: [3-5 פעולות, למשל "למצוא הזמנה", "לשנות סטטוס"].
הצע עיצוב מחדש בסגנון משחק אסטרטגיה איזומטרי:
1. פס משאבים למעלה: 3-5 מספרים מרכזיים, לכל אחד חץ שינוי.
2. מפה: מה יהיה שטח ומה יהיו יחידות.
3. כרטיס יחידה בלחיצה: אילו שדות ואילו 1-2 פעולות.
4. פיד אירועים: אילו אירועים נכנסים אליו.
קודם תן תיאור של המסך ורשימת ישויות. אל תכתוב קוד בינתיים.השורה האחרונה חוסכת זמן: טעות בקונספט זול יותר לתקן במילים מאשר בקוד.
02.מודל נתונים ונתוני דמה
מסך של משחק עומד על הנתונים. קודם טיפוסים ונתוני דמה אמינים, אחר כך התמונה.
קח את הקונספט שסיכמנו.
1. תאר את טיפוסי הנתונים ב-TypeScript: משאבים, יחידות (לכל אחת סוג, סטטוס וקואורדינטות על המפה), אירועים.
2. צור נתוני דמה: [20-40] יחידות, [3-5] מיקומים, [30] אירועים ליום. שמות ומספרים אמינים. אל תמציא אנשים, השתמש בתפקידים: "נהג 1", "מנהל 2".
3. כתוב פונקציה שמזיזה את הנתונים כל 2-3 שניות: יחידה משנה סטטוס, משאב עולה או יורד, אירוע נכנס לפיד.
שים את הנתונים במודול נפרד כדי שאפשר יהיה להחליף אותם בנתונים אמיתיים בלי לשכתב את המסך.הפסקה האחרונה היא העיקר: בזכותה השלב הרביעי לא יהפוך לשכתוב של הכול.
03.מפה איזומטרית ואנימציה
כאן קל לטבוע. בקשו גרסה פשוטה: אריחי מעוין שטוחים ואייקונים במקום מודלים בתלת-ממד. את היופי תוסיפו אחר כך.
בנה את המסך ב-React + TypeScript.
- מפה: רשת איזומטרית על [canvas או PixiJS]. אריחי מעוין, יחידות כצורות פשוטות או אייקונים, צבע לפי סטטוס. בלי מודלים בתלת-ממד.
- מצלמה: גרירה בעכבר, זום בגלגלת, כפתור "איפוס תצוגה".
- יחידות עוברות בצורה חלקה בין תאים כשהסטטוס שלהן משתנה.
- לחיצה על יחידה פותחת כרטיס בצד, לחיצה מחוץ לו סוגרת.
- פס משאבים למעלה, פיד אירועים למטה.
- פלטה בהירה ורגועה; סטטוס נקרא גם לפי צבע וגם לפי תווית.
הרץ ובדוק שהמסך לא נתקע עם 40 יחידות. אם הוא נתקע, הסבר למה והצע פישוט.רוצים עומק כמו אצל דילום? בשלב הבא בקשו גרסה ב-Three.js. אבל קודם ודאו שהגרסה השטוחה עובדת.
לאן הפרומפטים מובילים: כרטיס היחידה והמסלול אצל דילום
כרטיס בלחיצה: עמדת טעינה ומלגזה
וידאו: @DilumSanjaya ב-Xמשאית נוסעת לרציף שלה לאורך מסלול מסומן
וידאו: @DilumSanjaya ב-X04.נתונים אמיתיים: CSV, Google Sheets או API
חברו את המקור שכבר יש לכם. התחילו בקריאה, כתיבה תוסיפו אחר כך.
החלף את נתוני הדמה בנתונים אמיתיים. מקור: [קובץ CSV / Google Sheet בקישור / API בכתובת ...]. הנה שורות לדוגמה: [להדביק 5 שורות בלי מידע אישי].
1. כתוב מתאם שהופך את השורות האלה לטיפוסי המשאבים, היחידות והאירועים שלנו. פרט לי את העמודות שלא מתאימות לטיפוסים.
2. הנתונים מתעדכנים כל [30] שניות בלי טעינה מחדש של הדף.
3. אם המקור לא זמין, המסך מציג את הנתונים האחרונים ותווית "אין חיבור" במקום לקרוס.
4. בינתיים קריאה בלבד: אל תכתוב שום דבר למקור.
קרא מפתחות והרשאות מ-.env, לעולם אל תדביק אותם בקוד.אל תכניסו לשורות הדוגמה שמות, טלפונים או כתובות של לקוחות. למודל מספיק המבנה.
05.ליטוש ונגישות
מסך של משחק נראה מצוין עד שמישהו ממהר משתמש בו על לפטופ של 13 אינץ'. הפרומפט הזה מחזיר את הנוחות.
הבא את המסך למצב עבודה:
1. הוסף מתג "מפה / טבלה". הטבלה מציגה את אותם נתונים עם מיון, סינון וחיפוש.
2. כל פעולה בכרטיס זמינה מהמקלדת, עם פוקוס נראה.
3. סטטוסים מובחנים גם בלי צבע: תווית או אייקון לידם.
4. אם במערכת מופעלת הפחתת תנועה, האנימציות נכבות.
5. ניגודיות הטקסט לפחות ברמת AA. בדוק ופרט מה תיקנת.
6. במסך ברוחב 1280 פיקסלים שום דבר לא חופף.סעיף 1 אינו אופציונלי. למה, מוסבר למטה בחלק על המגבלות.
מצ׳אט לאפליקציה: 3 דרכים להפעיל את ה-AI
הפרומפטים למעלה עובדים אם אתם כבר יודעים איפה מריצים AI ומה עושים עם קבצי הפרויקט. הקורס מתחיל מאפס: צ'אט, דפדפן, טרמינל, ובסוף אתם בונים ומפרסמים אפליקציה משלכם במו ידיכם. לא צריך ניסיון בקוד.
מה לבדוק לפני שמראים לצוות
קל לחשוב שמסך יפה הוא מסך גמור. עברו על שתי הרשימות, ואז תנו למודל לבדוק את הקוד עם הפרומפט האחרון.
נתונים ואבטחה
- המספרים בפס המשאבים תואמים לטבלת המקור.
- אין מפתחות וסיסמאות בקוד ובמאגר, רק ב-.env.
- מידע אישי לא נכנס ללוגים ולא מוצג למי שלא צריך אותו.
- התוכנה רק קוראת מהמקור, עד שתחליטו במפורש אחרת.
- כשהחיבור נופל, המסך אומר בכנות "אין חיבור".
- יש עותק של טבלת המקור למקרה של טעות.
נוחות
- אדם חדש מוצא הזמנה מסוימת בפחות מ-10 שניות.
- תצוגת הטבלה קיימת ועושה כל מה שהטבלה הישנה עשתה.
- המסך עובד על הלפטופ של עמית, לא רק על שלכם.
- האנימציה לא מפריעה לקרוא ונכבית בהפחתת תנועה.
- כרטיס היחידה נסגר ב-Esc ובלחיצה מחוץ לו.
- שניים-שלושה עמיתים ניסו בלי רמזים, ורשמתם איפה הם נתקעו.
06.סקירה לפני ההצגה
בצע סקירה של הפרויקט לפני שאני מציג אותו לצוות. בדוק:
1. מפתחות, סיסמאות וטוקנים בקוד ובהיסטוריית git.
2. מה קורה עם נתונים ריקים, עם 10,000 שורות וכשהחיבור נופל.
3. האם הסכומים בפס המשאבים תואמים לנתוני המקור: חשב על דוגמה.
4. נגישות: מקלדת, ניגודיות, הפחתת תנועה.
תן רשימת בעיות לפי חומרה. אל תתקן כלום עד שאבחר מה לתקן.האיסור לתקן בסוף נותן לכם לראות את התמונה המלאה לפני שהמודל מתחיל לשנות קוד.
איפה ממשק של משחק מפריע
- 01
הזנת נתונים צפופה. להקליד 50 שורות של חשבונית מהיר יותר בטבלה מאשר בלחיצות על יחידות.
- 02
עריכות המוניות. לשנות סטטוס למאה הזמנות נוח יותר עם סינון וכפתור אחד.
- 03
דוחות והתאמות. רואה החשבון והמבקר צריכים שורות, סכומים וייצוא, לא מפה.
- 04
מחשבים חלשים ונפחים גדולים. אלפי יחידות מונפשות מעמיסות על הלפטופ, לכן צריך תקרה ומצב מפושט.
לכן הטבלה נשארת. המפה עונה על השאלה "מה קורה עכשיו", הטבלה על "מה בדיוק וכמה". הכי טוב עובדות שתי תצוגות מעל אותם נתונים עם מתג ביניהן.
שישה שלבים מטבלה למפה
הסדר שבו הכי קל לא להיתקע. שלב אחד בערב זה קצב טוב.
01.בחרו תוכנה אחת
כזו שמשתמשים בה כל יום ויש בה מבצעים וסטטוסים: מחסן, פניות, משלוחים, משימות.
זו מפה, לא מדריך הפעלה. בניית אפליקציה משלכם עם AI מאפס, שלב אחר שלב, מכוסה בקורס מצ'אט לאפליקציה.
בכנות על המקור
אנחנו לא יודעים איך בדיוק דילום בנה את התוכנה שלו: בפוסט אין סטאק, אין לוחות זמנים ואין תשובה אם זה מוצר אמיתי או קונספט. יש שורה אחת: Built with Opus 5.5. הפרומפטים במדריך הזה הם הדרך שלנו להגיע לתוצאה דומה, לא שחזור של התהליך שלו. הפריימים וקטעי הווידאו שייכים למחבר ומוצגים עם קישור לפוסט.
הפוסט של המחבר ב-Xלמדו לבנות תוכנות כאלה בעצמכם
המדריך נותן כיוון. בקורסים עוברים את כל הדרך: מהפרומפט הראשון ועד אפליקציה שפורסמה, ובנוסף סוכנים, אוטומציה ועבודה ב-Claude Code.
תגובות