Vibe Coding: איך בונים כלי עבודה ייעודי עם AI בלי לכתוב קוד

צור אפליקציית ווב מעוצבת, אינטראקטיבית ומרשימה בשם:

# סטודיו ויזואלי למיזמי אימפקט

מטרת האפליקציה:
האפליקציה עוזרת למשתמש להפוך תיאור של מיזם חברתי לגלריה ויזואלית מרשימה של 6–8 תמונות קונספט, שמספרות את סיפור המיזם בצורה ברורה, מרגשת ושימושית להצגה, השראה, חשיבה או שיווק.

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

---

## מה האפליקציה עושה

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

1. הקלדת טקסט
2. דיבור חופשי למיקרופון
3. העלאת קובץ עם מידע על המיזם

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

---

## קהל יעד

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

---

## שפת הממשק

ברירת המחדל: עברית מלאה  
הממשק כולו צריך להיות RTL  
העברית צריכה להיות תקינה, נקייה, פשוטה וברורה  
אפשר לאפשר תמיכה עתידית באנגלית, אבל כרגע העברית היא הראשית

---

## חוויית משתמש כללית

בנה אפליקציה כ-single page app עם חוויית שימוש עשירה ונעימה.

האפליקציה צריכה לכלול:

- מסך פתיחה מרשים
- תהליך שאלות מדורג עם פס התקדמות ברור
- מעבר חלק בין שלבים
- משוב ויזואלי ברור למשתמש
- תחושת “מסע יצירתי” מהרעיון הגולמי ועד תוצר ויזואלי

הטון הכללי:
מקצועי, חם, יצירתי, נקי ומודרני

---

## מבנה האפליקציה

### 1. מסך פתיחה

מסך פתיחה יפה מאוד עם:

- כותרת: "סטודיו ויזואלי למיזמי אימפקט"
- תת כותרת קצרה:
  "הפכו תיאור של מיזם חברתי לגלריית תמונות שמספרת את הסיפור שלו"
- כפתור בולט: "בואו נתחיל"
- רקע מעוצב ועדין, עם אווירה יצירתית וחברתית
- אפשרות קצרה להסבר: "איך זה עובד?"

---

### 2. תהליך שאלות מדורג

האפליקציה צריכה לכלול wizard של מספר שלבים ברורים.

בכל שלב יש:
- כותרת קצרה
- שאלה מנחה
- שדה טקסט
- כפתור הקלטת דיבור
- אזור להעלאת קובץ
- כפתור "המשך"
- כפתור "חזור"

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

דוגמא לשלביות:

#### שלב 1: היכרות עם המיזם
שאלות:
- מה שם המיזם?
- במשפט או שניים, מה המיזם עושה?

#### שלב 2: הבעיה החברתית
שאלות:
- איזו בעיה חברתית המיזם מנסה לפתור?
- למה הבעיה הזאת חשובה?

#### שלב 3: קהל היעד
שאלות:
- למי המיזם מיועד?
- מי האנשים שהמיזם אמור לעזור להם?

#### שלב 4: הפתרון
שאלות:
- איך המיזם פועל בפועל?
- מה המשתמשים או המשתתפים מקבלים?

#### שלב 5: האימפקט
שאלות:
- איזה שינוי המיזם רוצה ליצור?
- איך נראה הצלחה מבחינתכם?

#### שלב 6: סגנון חזותי
שאלות:
- איזה אופי ויזואלי אתם רוצים?
- בחרו טון: מקצועי / מרגש / קהילתי / חדשני / אופטימי
- בחרו צבעוניות מועדפת אם רוצים
- אפשר להוסיף השראה או הערות

#### שלב 7: העלאת חומרים
אפשר להעלות:
- מסמך תיאור מיזם
- מצגת
- טקסט קיים
- בריף
- תמונות השראה

בשלב הזה הצג סיכום קצר של מה שנאסף עד כה.

---

### 3. שלב סיכום לפני יצירה

לפני יצירת התמונות, הצג למשתמש מסך סיכום מעוצב עם:

- שם המיזם
- הבעיה
- קהל היעד
- הפתרון
- האימפקט
- הטון הוויזואלי
- אילו קבצים הועלו

הצג כרטיסי מידע יפים ומסודרים.

הוסף כפתור מרכזי:
"צור גלריית אימפקט"

אם חסר מידע, הצג המלצה עדינה להשלים, אבל אפשר לאפשר גם להמשיך.

---

### 4. שלב יצירה

כאשר המשתמש לוחץ על יצירה:

- הצג מסך טעינה מרשים
- עם אנימציה עדינה ומקצועית
- עם הודעות מצב כמו:
  - "מנתחים את סיפור המיזם"
  - "מזהים רגעים ויזואליים מרכזיים"
  - "בונים קונספטים לתמונות"
  - "יוצרים גלריה"

התחושה צריכה להיות של סטודיו שעובד על יצירה, לא סתם spinner גנרי.

---

## התוצר הסופי

בסיום התהליך, האפליקציה צריכה ליצור גלריה של 6–8 תמונות קונספט.

סוגי התמונות המומלצים:

1. תמונת "הבעיה"
2. תמונת "קהל היעד"
3. תמונת "הפתרון בפעולה"
4. תמונת "לפני ואחרי"
5. תמונת "שותפים / קהילה"
6. תמונת "אימפקט"
7. תמונת "קריאה לפעולה"
8. באנר מסכם של המיזם

המערכת יכולה להחליט לייצר 6, 7 או 8 תמונות לפי איכות החומר.

---

## אופן הצגת התוצר

זה החלק הכי חשוב בעיצוב:

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

הכוונה:
- לא גריד רגיל ומשעמם
- אלא פיזור ויזואלי אלגנטי, כאילו התמונות מונחות על שולחן סטודיו
- חלק מעט בזווית
- חלק בפורמטים שונים
- עם shadow עדין
- עם עומק ותחושת פרימיום
- עם רקע עדין ונקי
- עם תחושה של moodboard / desk layout / creative board

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

---

## יכולות נוספות בתוצר

מתחת לגלריה, הוסף אזור מסכם עם:

### סיכום נרטיבי קצר
פסקה קצרה שמסבירה איך הגלריה מספרת את סיפור המיזם:
- מה הבעיה
- מי קהל היעד
- איך נראה הפתרון
- מה האימפקט

### פעולות המשך
כפתורים אפשריים:
- צור וריאציות נוספות
- צור באנר מסכם
- צור פוסט קצר על בסיס הגלריה
- יצא כ-PDF
- שמור פרויקט

---

## חוויית שימוש ועיצוב

השקע מאוד ב-UX וב-UI.

העיצוב צריך להיות:
- מודרני
- מינימליסטי
- מרשים
- נקי
- אלגנטי
- חם
- מקצועי

השתמש ב:
- כרטיסים לבנים או בהירים
- היררכיית טיפוגרפיה ברורה
- אייקונים עדינים
- אנימציות מיקרו חלקות
- ריווח מעולה
- צבעי accent עדינים שנותנים תחושת חדשנות ואימפקט

הממשק צריך להיראות ברמה גבוהה, כמו מוצר אמיתי ולא כמו דמו גס.

---

## חוויית קלט

בכל שלב המשתמש יכול לבחור איך לענות:

### טקסט
שדה טקסט מרווח ונעים

### דיבור
כפתור ברור של הקלטה
כאשר המשתמש מדבר:
- הצג מצב recording
- תמלל את הדיבור לשדה הטקסט
- תן למשתמש לערוך את התמלול

### העלאת קובץ
אפשר להעלות קבצים רלוונטיים
לאחר העלאה:
- הצג את שם הקובץ
- תן חיווי שהמידע נקלט
- אפשר למחוק או להחליף קובץ

אם המשתמש גם כתב, גם דיבר וגם העלה קובץ, האפליקציה צריכה לשלב את כל המידע.

---

## פס התקדמות

לכל אורך תהליך השאלות צריך להופיע progress bar בולט, יפה וברור.

הדרישות:
- להראות באיזה שלב נמצאים
- להראות כמה שלבים נשארו
- להרגיש נעים ולא טכני מדי
- אפשר להציג גם כטקסט, למשל:
  "שלב 3 מתוך 7"

---

## לוגיקת יצירה

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

לכל תמונה צריך להיות:
- שם קונספט
- מטרת התמונה
- תיאור קצר
- סגנון חזותי
- פרומפט יצירה

לא חייבים להציג את כל זה למשתמש כברירת מחדל, אבל אפשר לחשוף את זה בלחיצה.

---

## רספונסיביות

האפליקציה חייבת לעבוד טוב גם בדסקטופ וגם במובייל.

בדסקטופ:
- פריסה עשירה, מרווחת ומרשימה

במובייל:
- שמירה על חוויית שימוש ברורה
- ה-studio board צריך להפוך לגרסה נוחה לגלילה

---

## נגישות

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

---

## מה חשוב לא לעשות

- לא ליצור ממשק גנרי
- לא להשתמש בגריד פשוט ומשעמם לתמונות
- לא להעמיס יותר מדי טקסט בכל מסך
- לא לבנות תהליך טכני או מאיים
- לא להפוך את האפליקציה לצ'אט רגיל

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

---

## תוצאה רצויה

אני רוצה לקבל אפליקציה מוכנה לשימוש, עם:

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

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

Create a beautifully designed, interactive web application called:

# Visual Studio for Impact Ventures

Purpose:
The app helps a user turn a description of a social venture into an impressive visual gallery of 6-8 concept images that tell the venture's story in a clear, moving, and useful way — for presentations, inspiration, brainstorming, or marketing.

The app should feel like a premium creative tool with excellent UX, strong visuals, and a sense of a "creative studio."

---

## What the app does

The app asks the user a guided series of questions about their venture.

At each step, the user can respond in one or more ways:
1. Type text
2. Speak freely into the microphone
3. Upload a file with information about the venture

The system should accept input from all channels, summarize it, and use it to generate a visual gallery of concept images at the end.

---

## Target audience

Teams, entrepreneurs, content managers, program directors, or anyone who wants to visually represent a social venture.

---

## Interface language

Default: Hebrew (full RTL).
All interface text must be clean, simple, and clear Hebrew.

---

## Overall user experience

Build a single-page app with a rich and pleasant experience.

Include:
- An impressive landing screen
- A stepped question flow with a clear progress bar
- Smooth transitions between steps
- Clear visual feedback
- A feeling of a "guided creative journey" from raw idea to visual output

Tone: professional, warm, creative, clean, modern.

---

## App structure

### 1. Landing screen

A beautiful landing screen with:
- Title: "סטודיו ויזואלי למיזמי אימפקט"
- Subtitle: "הפכו תיאור של מיזם חברתי לגלריית תמונות שמספרת את הסיפור שלו"
- Prominent CTA button: "בואו נתחיל"
- Subtle creative background
- Optional short explainer: "איך זה עובד?"

### 2. Stepped question wizard

A multi-step wizard with:
- Short title per step
- A guiding question
- Text field
- Voice recording button
- File upload area
- "Continue" and "Back" buttons
- A prominent, beautiful progress bar at the top showing current step and total steps

Steps:

Step 1 – Getting to know the venture:
- What is the venture's name?
- In a sentence or two, what does the venture do?

Step 2 – The social problem:
- What social problem does the venture try to solve?
- Why is this problem important?

Step 3 – Target audience:
- Who is the venture for?
- Who are the people the venture helps?

Step 4 – The solution:
- How does the venture work in practice?
- What do participants or users receive?

Step 5 – Impact:
- What change does the venture want to create?
- What does success look like?

Step 6 – Visual style:
- What visual tone do you want?
- Choose: professional / emotional / community / innovative / optimistic
- Optional preferred color palette
- Optional inspiration or notes

Step 7 – Upload materials:
- Upload venture description, presentation, text, brief, or inspiration images
- Show a short summary of everything collected so far

### 3. Summary screen before generation

Show a beautifully designed summary with:
- Venture name
- Problem
- Audience
- Solution
- Impact
- Visual tone
- Uploaded files

Display as elegant info cards.
Add a central button: "צור גלריית אימפקט"
If info is missing, gently suggest completing it, but allow continuing.

### 4. Generation phase

When user clicks generate:
- Show an impressive loading screen
- With subtle professional animation
- With status messages like:
  "מנתחים את סיפור המיזם"
  "מזהים רגעים ויזואליים מרכזיים"
  "בונים קונספטים לתמונות"
  "יוצרים גלריה"

---

## Final output

A gallery of 6-8 concept images.

Recommended image types:
1. "The Problem"
2. "Target Audience"
3. "The Solution in Action"
4. "Before and After"
5. "Partners / Community"
6. "Impact"
7. "Call to Action"
8. "Summary Banner"

---

## Gallery display

This is the most important design element:

Display all images as if placed on a beautiful, creative work desk.
NOT a boring regular grid.
Instead: elegant visual scatter, as if laid on a studio desk.
- Some slightly tilted
- Different formats
- Soft shadows
- Depth and premium feel
- Clean subtle background
- Moodboard / desk layout / creative board feel

Each image card includes:
- Title
- Short description of the visual concept
- Enlarge button
- Regenerate button
- Copy prompt/concept button
- Download button

---

## Below the gallery

### Narrative summary
A short paragraph explaining how the gallery tells the venture's story.

### Follow-up actions
Buttons:
- Generate more variations
- Create a summary banner
- Create a short post based on the gallery
- Export as PDF
- Save project

---

## Design requirements

Modern, minimalist, impressive, clean, elegant, warm, professional.

Use:
- White or light cards
- Clear typography hierarchy
- Subtle icons
- Smooth micro-animations
- Excellent spacing
- Subtle accent colors

The interface should look premium, like a real product.

---

## Input experience

At each step the user can:
- Type (spacious text field)
- Record voice (clear recording button with recording state, transcription to text field, editable)
- Upload file (show filename, confirmation, allow delete/replace)

If user uses multiple input methods, combine all information.

---

## Progress bar

Throughout the question flow, show a prominent beautiful progress bar.
- Show current step
- Show remaining steps
- Text like "שלב 3 מתוך 7"

---

## Responsive

Must work well on desktop and mobile.

---

## Accessibility

Clear buttons, readable text, good contrast, simple language, clear loading/success states.

---

## What NOT to do

- No generic interface
- No boring simple grid for images
- No too much text per screen
- No intimidating technical process
- No turning the app into a regular chat

This should be a purpose-built, designed, experiential app with a clear process and impressive visual output.

שפר את חוויית המשתמש של האפליקציה.

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

שפר:
1. את המסך הראשי
2. את הניסוח של השאלות
3. את המעברים בין השלבים
4. את סרגל ההתקדמות
5. את מסך הסיכום לפני הייצור

שמור על עיצוב נקי ומקצועי, בעברית מלאה, מימין לשמאל.

Improve the user experience of the app.

I want the app to feel more like a guided creative journey and less like a form.

Improve:
1. The landing screen
2. The wording of the questions
3. The transitions between steps
4. The progress bar
5. The summary screen before generation

Keep full Hebrew, RTL, clean and professional design.

שפר את תצוגת הגלריה הסופית.

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

הוסף:
1. פיזור עדין וטבעי של הכרטיסים
2. זוויות מעט שונות עבור כל תמונה
3. צללים רכים
4. רקע בהיר ונקי
5. תחושת לוח מצב מקצועי
6. כרטיס מידע קטן ליד כל תמונה

שמור על קריאות והתאמה לנייד.

Improve the final gallery display.

I want the images to look as if placed on a beautiful creative work desk, not in a regular grid.

Add:
1. Natural subtle scatter of the cards
2. Slight different angles for each image
3. Soft shadows
4. Clean light background
5. Professional moodboard feeling
6. A small info card next to each image

Keep readability and mobile compatibility.

שפר את הלוגיקה ליצירת תמונות.

לפני יצירת הגלריה, האפליקציה צריכה לבנות 6-8 מרכיבים שונים שסיפורים על המיזם.

עבור כל מרכיב צור:
1. שם התמונה
2. מטרת התמונה
3. תיאור חזותי
4. סגנון חזותי
5. הנחיית יצירה

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

Improve the image generation logic.

Before creating the gallery, the app should build 6-8 distinct concepts that tell the venture's story.

For each concept create:
1. Image name
2. Image purpose
3. Visual description
4. Visual style
5. Generation prompt

Make sure images don't repeat the same idea.
Each image should represent a different moment in the venture's story:
problem, audience, solution, before and after, community, impact, call to action.

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

האפליקציה צריכה להיות פשוטה, מעוצבת היטב, ברורה וקלה לשימוש.

הנה המפרט:

שם הכלי:
[הדבק כאן]

מי ישתמש בזה:
[הדבק כאן]

שבעיה שהיא פותרת:
[הדבק כאן]

מה שהמשתמש מזין:
[הדבק כאן]

מה שהכלי מפיק:
[הדבק כאן]

מה הופך אותה לטובה יותר מטופס רגיל:
[הדבק כאן]

איזה חלק מהתהליך צריך להיות חזותי:
[הדבק כאן]

מה חייב להישאר תחת שליטה אנושית:
[הדבק כאן]

מה הדבר אחד שהיא חייבת לעשות ממש טוב:
[הדבק כאן]

בנה לי אפליקציה ראשונית שעושה את זה.

דרישות:
1. ממשק בעברית, RTL
2. מסך נחיתה קצר
3. זרימת עבודה ברורה
4. שדות קלט מתאימים
5. פלט סופי מעוצב
6. חוויה נעימה ולא טכנית למשתמש
7. עיצוב מודרני ונקי
8. יכולת לשפר את הכלי בעדכונים

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

I want to build a small web app as a purpose-built work tool.

The app should be simple, well-designed, clear, and easy to use.

Here is the specification:

Tool name:
[paste here]

Who will use it:
[paste here]

What problem it solves:
[paste here]

What the user inputs:
[paste here]

What the tool outputs:
[paste here]

What makes it better than a regular form:
[paste here]

What part of the process should be visual:
[paste here]

What must remain under human control:
[paste here]

What one thing it must do really well:
[paste here]

Build me an initial app that does this.

Requirements:
1. Hebrew interface, RTL
2. Short landing screen
3. Clear workflow
4. Appropriate input fields
5. Designed final output
6. Pleasant, non-technical user experience
7. Modern clean design
8. Ability to improve the tool in iterations

Do NOT create a regular chat.
Build a purpose-built tool with a clear interface.