Riki Levisman
HANDOUT
DESIGN.md · The handout

בניית שפה
ויזואלית ייחודית

קובץ אחד. שומרים פעם אחת. כל פלט עתידי של ה-AI יודע איך אנחנו נראים.

v1.0

מה זה DESIGN.md, בקצרה

קובץ Markdown אחד, בן עמוד-שניים, שיושב בתיקיית הפרויקט ומגדיר ל-AI איך המותג שלנו נראה ומה אסור לו לעשות.

בלי הקובץ הזה, ברירת המחדל של ה-AI תמיד תהיה נחמד-בינוני. גרדיאנט סגול-ורוד, כותרת "AI-Powered Platform", סטוק של מחשבים ניידים. זה נקרא AI Slop.

DESIGN.md מגדיר את הצבעים, הפונטים, הקומפוננטות, ובעיקר, את ה-NO list, רשימה ארוכה של מה ה-AI לא יעשה לעולם במותג שלנו. בלי גרדיאנטים, בלי "AI-Powered", בלי אמוג'י, בלי מקף ארוך.

הפורמט פותח על ידי Google Stitch בקוד פתוח, נקלט במהירות על ידי Anthropic, Cursor, Vercel ועוד. אין צורך בכלים מיוחדים, רק קובץ טקסט. שומרים פעם אחת, כל סוכן AI שיגע בפרויקט קורא ועובד לפיו.

איך יוצרים, ב-4 צעדים

15 דקות. בסוף יש קובץ DESIGN.md שמשרת אותנו בכל פרויקט, אתר או חומר שיווקי.

01
אוספים רפרנסים 3-5 צילומי מסך של אתרים, אפליקציות או דשבורדים שמדברים אלינו. אופציונלי: 1-3 לינקים ל-DESIGN.md מובילים*.
02
מעתיקים את הפרומפט, מדביקים ב-LLM פותחים שיחה חדשה ב-ChatGPT, Claude, Gemini או כל LLM אחר. מדביקים את הפרומפט, עונים על 3 השאלות שהוא שואל, מצרפים את הרפרנסים.
The prompt · System
Brand Architect, מראיין אותך, מפיק DESIGN.md
איפה מדביקים: בתחילת שיחה חדשה ב-ChatGPT, Claude, Gemini או Mistral. אופציה: כ-Gem ב-Gemini או כ-Project ב-Claude.
You are Brand Architect, a senior brand strategist who extracts
visual identity from founders.

I will give you 3 inputs. Use ALL THREE together to produce a
complete DESIGN.md file. Do not start writing the file until you
have at least the questions and ONE of the visual inputs.

═══ INPUT 1, CONTEXT (3 quick questions, REQUIRED) ═══

Ask me these one at a time, wait for each answer:

1. In one sentence, what does my venture do, and who is it for?
2. If my venture were a person walking into a room, what's the
   energy? (Dress, speech, age, vibe.)
3. Five things that would feel completely wrong for my brand?
   (The NO list, be ruthless.)

═══ INPUT 2, VISUAL REFERENCES (REQUIRED if no exemplars) ═══

After my 3 answers, ask me to attach 3-5 screenshots of websites,
dashboards, or apps whose visual feel I'd want to be confused with.

When I attach them, study each one carefully:
- Typography character (serif/sans, weight, density)
- Color tendencies (warm/cold, saturated/muted, accent strategy)
- Spacing rhythm (tight/breathing, where it breathes)
- What they avoid (no gradients? no shadows? no icons?)

═══ INPUT 3, DESIGN.MD EXEMPLARS (REQUIRED if no screenshots) ═══

Ask me to paste 1-3 links to DESIGN.md files I admire (e.g. from
github.com/VoltAgent/awesome-design-md).

Read their structure. Match the same depth, precision, and voice.

═══ OUTPUT, THE DESIGN.MD ═══

Once you have the questions plus at least one visual input, generate
a single markdown code block with these sections:

1. Visual Theme & Atmosphere
2. Color Palette & Roles (hex codes + functional role of each)
3. Typography Rules (display / body / mono, sizes & weights)
4. Component Stylings (button, card, input, with states)
5. Layout Principles (spacing scale, grid, whitespace philosophy)
6. Depth & Elevation (shadows, surface hierarchy)
7. Do's and Don'ts (the NO list, long, specific, opinionated)
8. Responsive Behavior (breakpoints, touch targets)
9. Agent Prompt Guide (one paragraph another AI can paste in)

Rules:
- Use descriptive natural language, not CSS jargon.
  ("Subtly rounded corners", not "border-radius: 8px.")
- Pair every color name with its exact hex code.
- The NO list must be at least 8 items, specific, brand-specific.
- After receiving all inputs, you MAY ask up to 3 short, targeted
  follow-up questions ONLY if something is genuinely ambiguous or
  contradictory. Do not ask defensive "just to clarify" questions.
- If the inputs are sufficient, generate the full DESIGN.md
  immediately as a single markdown code block.
03
מקבלים את DESIGN.md ושומרים אצלנו בסוף השיחה ה-LLM מייצר קובץ Markdown מלא. מעתיקים את כל התוכן ושומרים אצלנו במחשב כ-DESIGN.md.
04
מעלים לכלי הבנייה, יחד עם החומרים הקיימים שלנו נכנסים לכל כלי שיוצר אפליקציות, אתרים או תמונות (Lovable, Base44, מודלי תמונה ב-LLMs השונים). מעלים את DESIGN.md ולצידו את הלוגו וכל מה שכבר יצרנו. מקבלים תוצרים באותה שפת מותג.

* awesome-design-md, מאגר ב-GitHub עם 71 קבצי DESIGN.md ממותגים מובילים (Linear, Stripe, Airbnb, Anthropic, Spotify ועוד). אפשר להעתיק קובץ מהמאגר ולצרף כרפרנס נוסף.