---
name: portfolio-build
description: "השתמש בסקיל הזה בכל פעם שבונים, מעצבים או משדרגים תיק עבודות (portfolio) של מעצבת UX / Product Designer סניורית לחברות גדולות. טען אותו כשמישהי אומרת: תיק עבודות, portfolio, דף בית לפורטפוליו, עיצוב הפורטפוליו, קייסטאדי, homepage, או מבקשת להתחיל לבנות/לעצב תיק. הסקיל מגדיר את הערכים שהתיק צריך לשדר, הפרמטרים לכל קייסטאדי, ואת שפת הנראות המדויקת (צבע, טיפוגרפיה, מבנה, אינטראקציות)."
---

# Portfolio Build Skill
## תיק עבודות סניורי ל-UX / Product Designer — חברות גדולות

זהו מסמך-אב שמרכז את כל ההחלטות שכבר גובשו. בצ'אט חדש: צרפי אותו, ותגידי על איזה חלק את רוצה לעבוד (דף בית / קייסטאדי / פונט / וכו').

---

## 0 — המצפן: מה התיק הזה צריך לשדר

**העיקרון העליון:** ג'וניור מציגה *מה עשתה*. סניורית מציגה *מה שינתה — ולמה זה חשוב לביזנס*.

התיק ממצב אותי כמעצבת מוצר ש**חושבת על בעיה עסקית** ומזיזה מדדים (retention, task time, churn) — לא כמי שמייצרת מסכים יפים. כל דבר בתיק, מהכותרת הראשית ועד כרטיס פרויקט, מוכפף למסר הזה.

**עמדת המיצוב (positioning):** משפט אחד חד שממסגר אותי סביב תוצאה, לא סביב כלים.
> דוגמה שגובשה: *"I design products people come back to."* (retention כחוט מרכזי).

---

## 1 — הערכים שהתיק משדר (Parameters & Values)

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

| ערך | איך הוא בא לידי ביטוי |
|---|---|
| **חשיבה עסקית** | כל פרויקט מוביל עם impact/מדד, לא עם ויזואל |
| **עומק תהליכי** | קייסטאדי מלא: בעיה → מחקר → פשרות → פתרון → תוצאה |
| **ריסון (senior restraint)** | אקסנט אחד, הרבה whitespace, שום דקורציה מיותרת |
| **יושרה אינטלקטואלית** | "מה הפתיע אותי", "מה הייתי עושה אחרת" — לא רק הצלחות |
| **גיוון (range)** | consumer + enterprise/redesign + פרויקט נישה בלתי-נשכח |
| **קרפט ויזואלי** | המעטפת עצמה מעוצבת ברמה של העבודות שבתוכה |
| **אמינות (proof)** | מדדים, ציטוט של PM/מנהל עם שם ותפקיד, קרדנציאלס |
| **בהירות** | סיפור אחד רציף, קריא בשנייה, לא אוסף סליידים |

**ההימור האסטרטגי לחברות גדולות:** מינימליזם בטוח-בעצמו + מהלך חתימה אחד בלתי-נשכח. המהלך שנבחר: **להוביל עם impact כבר בדף הבית** (מגייס סורק ~6 שניות; מספרים שקופצים = נשארים בזיכרון).

**מה *לא* לעשות:** לא craft-first נוצץ (קורא "פרילנס/אייג'נסי"), לא צבעוני-רועש, לא יופי על חשבון חשיבה, לא להסתיר את ה-impact עמוק בקייס.

---

## 2 — מבנה הקייסטאדי (7 Sections)

כל section עונה על **שאלה שמנהל שואל בראש** — לא מתאר תהליך.

1. **Opening Hook** — "למה לקרוא?" · משפט אחד על הבעיה העסקית + מספר בודד וזועק. *לא* להתחיל ב-"X is a leading platform".
2. **Problem Framing ⭐** — "הבנת את הבעיה האמיתית?" · שלוש שכבות: Surface → Root cause → Business impact. משפט חתימה: *"This wasn't a ___ problem, it was a ___ problem."*
3. **Discovery & Research** — "מה גילית שלא ידעת?" · מתודולוגיה + ממצא מפתיע. פורמט: finding → insight → design decision. **כאן נולדת הפרסונה.**
4. **Constraints & Trade-offs ⭐** — "מה שקלת ודחית?" · 2–3 פשרות אמיתיות. פורמט: שקלתי X → דחיתי כי → בחרתי Y → כי. *הסקשן שכמעט אף ג'וניור לא כותב.*
5. **Solution with Rationale** — "למה ככה?" · הרעיון המארגן האחד + נימוק לכל החלטה. **הפרסונה חוזרת** ומעגנת לפחות פעמיים. **כאן המסע המתוקן.**
6. **Iteration** — "הפתרון הראשון היה שגוי — מה שינית?" · v1 → מה התגלה → v2 → למה עדיף.
7. **Impact & Reflection** — "מה הביזנס קיבל?" · מדד אמיתי או projected עם methodology. **חובה "What I'd do differently".** סוגר את הלולאה חזרה ל-KPI מסקשן 2.

**שני חוטים שנמתחים דרך הסיפור (לא סקשנים נפרדים):**
- **הפרסונה** — נולדת ב-03, חוזרת ומעגנת החלטות ב-05.
- **מסע המשתמש** — מופיע *שבור* ב-02 (איפה נתקע/נוטש) ו*מתוקן* ב-05 (החיכוך נעלם).

**שומר-עקביות לפרסונה (אזהרה מלקח אמיתי):** שם זהה בכל הופעה · אין שדות-שבלונה ("Species") · הציטוט מחובר לבעיה מ-02 · מופיעה לפחות פעמיים ב-05.

**סדר עדיפויות:** 🔴 Problem Framing · Trade-offs · Impact (הכי מבדילים) → 🟡 Iteration · Hook → 🟢 Cross-functional leadership.

---

## 3 — שפת הנראות (Design Language)

### פלטת צבע (Light)
```
--paper:      #F5F3EE   רקע עמוד (off-white חמים)
--surface:    #FCFBF9   כרטיסים
--ink:        #17150F   טקסט ראשי (near-black חמים)
--secondary:  #6B675C   טקסט משני
--muted:      #9A968B   רמזים / מטא
--line:       #E4E1D8   גבולות דקיקים
--accent:     #2438E0   אקסנט יחיד (פעולה + hover)
--good:       #1D7A57   הצלחה / זמינות (ירוק)
```
**כלל הזהב:** אקסנט אחד לכל מסך. הוספת צבע "כי יפה" = לעצור. הריסון מבדיל סניורית מסטודנטית.
**המספרים תופסים עין דרך גודל, לא צבע** — מטריקות גדולות ב-mono, ניטרליות במנוחה, אקסנט רק ב-hover.

### טיפוגרפיה (הכל חינמי, OFL, Google Fonts)
- **תצוגה/כותרות:** Bricolage Grotesque (אופי מודרני, חמים). חלופות חינמיות: Clash Display (בטוח), Space Grotesk (טכי), Fraunces (סריף עם נשמה).
- **גוף/UI:** Inter.
- **מספרים/תוויות:** JetBrains Mono (תחושת "נתון מדוד", tabular-nums).
- **סקאלה:** Hero 42–88px · כותרת סקשן/eyebrow 13px mono · גוף 16–17px · מטריקה 30–44px mono.
- **משקלים:** 400/500/600 בלבד. letter-spacing שלילי בכותרות (‎-0.02 עד ‎-0.035em).

### מרווח ומבנה
- בסיס 8px. Padding סקשן נדיב. גבולות 1px דקיקים בין סקשנים.
- רדיוס כרטיס 12–16px · תגית/pill 20px.
- **תוויות mono** ("selected work", "01 —") מחזיקות נרטיב אחד — אבל להשתמש במספור רק כשיש רצף אמיתי.

### דף הבית — המבנה שגובש
נאב מינימלי (שם + work/about/contact + נקודת זמינות ירוקה) → **hero**: eyebrow → כותרת ענקית עם עמדה → subline → מטא → **selected work כרשימה** (לא רשת): לכל שורה index · כותרת · reframe במשפט · תגיות · **מטריקה גדולה בקצה** → פס recognition → ציטוט בודד חזק (שם + תפקיד) → contact עם כפתור העתקת מייל.

### אינטראקציות ומושן
- כניסת hero מדורגת (stagger fade-up).
- גילוי-בגלילה לסקשנים (IntersectionObserver).
- **count-up** למספרי impact כשנכנסים לפריים — זו החתימה.
- hover על שורת פרויקט: הזזה קלה + חץ מופיע + מטריקה נצבעת באקסנט.
- כפתור מייל: click-to-copy → "copied".
- **Quality floor חובה:** רספונסיבי עד מובייל · focus גלוי למקלדת · כיבוד `prefers-reduced-motion` (הכל סטטי אם כובה).

---

## 4 — כללי תיק (מעל הקייס הבודד)
- **גיוון דומיינים:** consumer + enterprise/redesign + פרויקט נישה בלתי-נשכח אחד.
- **פרויקט differentiator אחד** שאף אחת אחרת לא יכלה לעשות — הוא מה שזוכרים.
- **2–3 קייסים עמוקים > 6 שטחיים.**
- **לולאה סגורה** בכל קייס: מדד ב-02 ↔ מדד ב-07.
- **המעטפת ברמת העבודות** שבתוכה.
- **אנגלית מלוטשת** — הגהה לפני פרסום (שגיאות שוברות אמון).

---

## 5 — Checklist לפני פרסום
- ☐ הכותרת עמדה, לא תיאור תפקיד
- ☐ כל פרויקט מוביל עם impact/מדד
- ☐ בכל קייס: 2+ trade-offs · פרסונה מעוגנת 2+ · v1→v2 · "what I'd do differently"
- ☐ מסע שבור ב-02, מתוקן ב-05
- ☐ אקסנט אחד · whitespace נדיב · פונטים עקביים
- ☐ רספונסיבי · focus · reduced-motion
- ☐ social proof: ציטוט אחד עם שם ותפקיד
- ☐ אנגלית עברה הגהה

---

## 6 — נכסים שכבר נבנו (להמשכיות)
- **טמפלט קייסטאדי מלא** (7 sections עם פסקאות למילוי) — קיים.
- **דף בית מעוצב** — קובץ `index.html` עובד: hero מונפש, רשימת עבודות impact-forward, count-up, hover, העתקת מייל, רספונסיבי. טוקנים ב-`:root`, מספרים ב-`data-to`.
- **מפרט עיצובי** — הפלטה, הסקאלה והמרווחים שבסעיף 3.

**צעדים הבאים אפשריים:** עמוד קייסטאדי מלא באותה שפה · גרסת dark mode · החלפת placeholder icons בקאברים אמיתיים · מילוי קייסטאדי על פרויקט אמיתי.

---

## כלל האצבע הסופי
אם מרכיב לא עונה על שאלה של מנהל ולא משרת בהירות — הוא דקורציה. מחקי אותו או הפכי אותו ל-insight.