אתר שאינו מבוסס על תבנית עם Claude Code ו-Refero DESIGN.md
Markdownהקשר העיצוב של Refero Styles: מבנה DESIGN.md, בחירת מערכת חזותית, ייבואה אל CLAUDE.md, ארבעה שלבים ליצירת עמוד וטעויות נפוצות.
קריאת המאמר המלא
הנקודה המרכזית
אתרים ש-Claude Code כותב "מהקופסה" נראים כולם אותו דבר: רקע כהה, מעבר צבע סגול, גופן sans-serif וכרטיסי shadcn ברירת מחדל. בהמשך נראה איך לקחת קובץ DESIGN.md מוכן של Apple, Linear, Stripe או ElevenLabs (יש בספרייה יותר מ-2,000 מערכות), להוסיף אותו לפרויקט ולגרום ל-Claude לכתוב בסגנון הזה. האתר המוגמר כבר לא נראה כמו תבנית של AI.
חומרים מעשיים לעבודה עם פרויקטים ומודלים: התיעוד של Ailoot.
למה אתרי Claude Code נראים כמו תבניות Tailwind?
הנקודה המרכזית
בלי מערכת עיצוב, Claude Code מצייר ממשק ממוצע מנתוני האימון שלו. ונתוני האימון האלה הם כל האינטרנט של Tailwind, shadcn/ui ואלפי דפי נחיתה זהים. בלי הקשר מפורש על צבעים, גופנים וריווח, הסוכן מפיק את "הממוצע החשבוני של כל התבניות".
בדוגמה המתוארת מינואר, נוצר פרויקט צד קטן — חייגן למכירות קרות. במאגר ריק ביקשו מ-Claude Code לבנות את דף הבית. התוצאה הייתה גנרית: רקע כהה slate-950, צבע הדגשה purple-500, כותרת מודגשת בגופן sans-serif ושלושה כרטיסים מתחתיה עם צללים זהים. אותה פריסה כמו בגרסה הראשונה של ChatGPT, בגרסה הראשונה של Lovable ובגרסה הראשונה של v0. אחרי חמישה עריכות של ההנחיה, שבהן נוספו "מודרני", "פרימיום" ו"לא כמו כולם" — דבר לא השתנה. הדף עדיין נראה כאילו הגיע מאוסף תבניות Tailwind UI Templates.
כלומר, Claude לא "לא יודע" ליצור משהו יפה. הוא יודע מה רוב האנשים עושים ומשחזר את הרוב הזה. כדי לקבל תוצאה שאינה ממוצעת, הסוכן זקוק לאילוצים מסוימים: באילו צבעים להשתמש, אילו גופנים, איזה ריווח ואילו רכיבים להתייחס אליהם כאל הקנוניים.
כאן מערכת עיצוב נכנסת לתמונה כהקשר. לא "תעשה את זה יפה", אלא "תעשה את זה בסגנון המסוים הזה; הנה הפרמטרים שלו".
Refero Styles סוגרת את הפער בעזרת תוצר מוכן — קובץ DESIGN.md שמכיל פרמטרים ממוצרים אמיתיים.
מהי Refero Styles?
הנקודה המרכזית
Refero Styles היא ספרייה של יותר מ-2,000 מערכות עיצוב שחולצו מאתרים אמיתיים ונארזו בקובצי DESIGN.md. כל מערכת מייצגת מותג: Apple, Stripe, Linear, Notion, Vercel, Airbnb, ElevenLabs, Cursor. נכנסים אל styles.refero.design, בוחרים מותג, מעתיקים את קובץ ה-markdown שלו ומוסיפים אותו לפרויקט כהקשר עבור Claude Code, Cursor, Codex, v0 או Lovable.
דף הבית של styles.refero.design אומר זאת בפשטות: "גלו יותר מ-2,000 מערכות עיצוב מאתרי מוצר מובילים, הניתנות לקריאה בידי סוכני AI." בקטלוג מופיעים מותגים שקובעים את הסטנדרט החזותי: Apple, Linear, Stripe, Notion, Vercel, ElevenLabs, Mercury, PostHog, xAI, Modal, Duolingo. הם אינם מחולצים ידנית — צוות Refero מריץ סקריפט שמנתח את ה-CSS וה-markup בפועל של אתר ואורז את התוצאה ב-markdown מובנה. ספריית styles.refero.design עצמה חינמית.
מילת המפתח היא "מובנה". הקובץ אינו מכיל צילומי מסך או תיאור כמו "בסגנון מינימליסטי". זהו markdown עם קודי hex מסוימים, גדלי גופן מדויקים ב-pt, יחידות ריווח וכללים לרכיבים. סוכן ה-AI קורא את הקובץ ועובד עם פרטים קונקרטיים במקום לנסות לתאר טעם במילים.
צוות Refero מציין בדף ai-agents את הכלים הנתמכים: "Cursor, Claude Code, Codex, v0 ו-Lovable." במילים אחרות, DESIGN.md משמש תוצר אוניברסלי — קובץ אחד שמתאים לכל סוכני הפיתוח המרכזיים של AI.
מה יש בקובץ DESIGN.md?
הנקודה המרכזית
קובץ אחד מכיל את כל השכבות הבסיסיות של מערכת עיצוב: לוח צבעים ב-hex (עם מצבים כהים ובהירים), טיפוגרפיה (גופן, סולם גדלים, משקלים, גובה שורה), כללי ריווח (רשת של 8px או קצב אחר), תיאורי רכיבים (כפתורים, כרטיסים, טפסים), כללי תנועה (אנימציות, easing) ו"קול המותג" (טון המסרים). אורך הקובץ 100 עד 400 שורות markdown.
צוות Refero מתאר את מבנה הקובץ בדף design-md-template כך:
מתחילים בטון המוצר ובעקרונות העיצוב, ואז מגדירים צבעים, טיפוגרפיה, ריווח, רכיבים, פריסה, תנועה, נגישות וכללים לגבי מה לא להשתמש בו.
לכן מבנה הקובץ נראה בדרך כלל כך:
| סעיף | מה הוא מכיל | למה הסוכן זקוק לזה |
|---|---|---|
| טון המוצר | 2–3 משפטים על האופן שבו הממשק נשמע | מכוון את הניסוח של הטקסטים הקטנים בממשק |
| עקרונות עיצוב | 4–6 כללים כמו "מינימליזם בלי להתפשר על קריאות" | מנחים את הסוכן כשהוא בוחר בין אפשרויות טובות באותה מידה |
| צבעים | לוח צבעים ב-hex עם שמות (primary, secondary, accent, surface, text) + מצב כהה/בהיר | הסוכן משתמש בקודים מדויקים במקום להמציא אותם |
| טיפוגרפיה | גופן (שם ומחסנית fallback), סולם גדלים (10–12 צעדים), משקלים (רגיל, בינוני, מודגש), גובה שורה | מונעת מכל האתר להפוך ל-Inter 16px אחד ויחיד |
| ריווח | יחידת בסיס (4px, 8px, 16px) וסולם של כפולות | המרווחים הפנימיים והחיצוניים מפסיקים "לנדוד" |
| רכיבים | כללים לכפתורים, כרטיסים, טפסים וניווט — גדלים, מצבים, וריאציות | הסוכן אינו ממציא וריאציות חדשות |
| פריסה | רשת, נקודות שבירה, רוחבי מרביים של מכלים | כל דפי האתר נבנים על רשת אחת |
| תנועה | משך, easing, מעברים מותרים | האנימציות נשארות מאופקות, ולא Bootstrap-2010 |
| קול וטון | דוגמאות לניסוח כפתורים, כותרות ושגיאות | הטקסט באתר נשמע כמו המותג |
| אין להשתמש | רשימת איסורים ("אין להשתמש ב-box-shadow: 0 10px 30px") | הסוכן אינו חוזר לפתרונות מבוססי תבנית |
היוצרים מדגישים גם עיקרון שפותר 80% מבעיות העיצוב של AI:
הקשר מפורט עובד טוב יותר מתארי טעם.
כלומר, קוד ה-hex #5E6AD2 חזק יותר מ"כמו Linear". הערך המדויק font-size: 13px / line-height: 18px חזק יותר מ"טקסט קומפקטי". פרטים מדויקים עדיפים על פרשנות.
DESIGN.md במאגר אינו תמונה לצוות. הוא אבן בניין של ההקשר הקבוע של הפרויקט: ידע מובנה שה-AI קורא בכל בקשה.
איך יוצרים אתר בסגנון Linear ב-4 שלבים
הנקודה המרכזית
תהליך העבודה קצר: מתקינים את Claude Code, נכנסים אל styles.refero.design, בוחרים מותג (למשל Linear), מעתיקים את DESIGN.md אל docs/DESIGN.md או .claude/DESIGN.md, מוסיפים שורה על הקובץ ל-CLAUDE.md ומבקשים מ-Claude לבנות את הדף. בפועל, לוקח 30 דקות לעבור מפרויקט ריק לדף בית עובד.
ארבעת השלבים האלה מרכיבים את הרצף המתואר להתחלת אתר חדש. לא "ארבעה שלבים באופן כללי", אלא רצף מסוים עם פעולה אחת לכל שלב.
מתקינים את Claude Code
מתקין מקורי בפקודה אחת:
curl -fsSL https://claude.ai/install.sh | bash(השיטה המומלצת בתיעוד הרשמי). ב-macOS אפשר להשתמש ב-brew install --cask claude-code; ב-Windows ב-winget install Anthropic.ClaudeCode. אם הוא כבר מותקן, בדקו את הגרסה:claude --version(נדרשת גרסה 2.1.178 ומעלה — בגרסה זו נוספו הרשאותTool(param:value)וחסימה של פקודות git מסוכנות במצב אוטומטי). היכנסו לחשבון:claudeמפעיל את אשף ההגדרה. Claude Code כלול במינוי Pro ($17 לחודש בחיוב שנתי או $20 לחודש בחיוב חודשי).פותחים את Refero Styles ובוחרים מותג
היכנסו אל https://styles.refero.design ופתחו את הקטלוג. קריטריון הבחירה העיקרי הוא מידת ההתאמה למוצר שלכם, ולא אם "אתם אוהבים את המראה". בונים לוח בקרה של SaaS? בדקו את Linear, Vercel ו-Notion. בונים מוצר פינטק? בדקו את Stripe, Mercury ו-Column. בונים מוצר לחברים? בדקו את Duolingo. פתחו כרטיס של מותג ולחצו על "Copy DESIGN.md".
מוסיפים את DESIGN.md לפרויקט כהקשר
צרו קובץ
docs/DESIGN.mdבשורש הפרויקט והדביקו בו את התוכן שהעתקתם. אחר כך פתחו אתCLAUDE.mdוהוסיפו שורה אחת:@docs/DESIGN.md. זו הנחיית ייבוא — Claude Code טוען את התוכן להקשר עם תחילת הפעלה של סשן. מידע נוסף על ייבוא ב-CLAUDE.md מופיע במדריך לקובץ הוראות אחד עבור Claude Code, Codex ו-Cursor.מבקשים עמוד מסוים
לא "תעשה את זה יפה". פרטו: "בהתבסס על DESIGN.md שבהקשר, בנה דף בית למוצר ניהול משימות של SaaS. מבנה: אזור פתיחה עם כותרת וכותרת משנה, שני כפתורי CTA (ראשי ומשני), מתחתיהם אזור עם 3 תכונות ואייקונים, ואז אזור המלצות. השתמש בדיוק בצבעים ובטיפוגרפיה מתוך DESIGN.md; אל תמציא ערכים משלך."
אחרי השלב הרביעי, Claude בונה את הדף. בחוויה המתוארת, בניית דף בית אורכת בממוצע 8–12 דקות — והוא באמת נראה קרוב לסגנון המותג שנבחר. לא העתקה מושלמת ברמת הפיקסל, אבל אסתטיקה שאפשר לזהות: אותם גופנים, אותו לוח צבעים, אותו קצב ריווח ואותן החלטות קטנות בכפתורים.
היוצרים של Refero מתארים את אותו עיקרון של שלושה שלבים בקיצור בדף ai-agents/design-resources:
בחרו את המשימה, פתחו את המשאב המתאים, תנו לסוכן הקשר: שימו את DESIGN.md בהקשר של הסוכן, הסבירו את המוצר ובקשו מסך מסוים.
רצף ארבעת השלבים פועל לפי אותה לוגיקה, בתוספת השלבים המפורשים של התקנת Claude Code וייבוא הקובץ אל CLAUDE.md.
איזה סגנון כדאי לבחור למוצר שלכם?
הנקודה המרכזית
בחרו לפי צפיפות וטון, לא לפי מותג. כלי SaaS לצוותים (ממשק צפוף, הרבה נתונים) — Linear או Vercel. מוצר פיננסי (אמינות, דיוק) — Stripe, Mercury, Column. מוצר לצרכנים (חמימות, רגש) — Duolingo, Notion לצוותים, Airbnb. כלי AI/פיתוח (מינימליזם, ערכת נושא כהה) — ElevenLabs, xAI, Modal. מוצר לחברים (נגישות, קריאות) — Duolingo. אם מתלבטים, Linear היא בחירה בטוחה לכל מטרה.
יוצרי Refero נותנים את העצה הזאת כבר בשלב הראשון של המדריך שלהם: בחרו אסמכתה לפי שם המותג וגם לפי הצפיפות, הטון והקהל.
מה זה אומר בפועל? צבעים, טיפוגרפיה, היררכיה ותנועה מאופקת בהשראת Apple יכולים להתאים ללוח SaaS, בעוד המרווחים הנדיבים של דף שיווק מוצר מסוים עשויים שלא להתאים. בחנו את ההפניה המסוימת במקום לבחור לפי מותג. בלוח הנהלת חשבונות הגדירו במפורש גובה שורה קומפקטי, מרווחים וצפיפות מידע, תוך שמירה על מספרים ובקרות קריאים; אל תעתיקו פריסת מצגת מרווחת ללא שינוי.
מדריך פשוט לבחירה לפי סוג המוצר:
| סוג המוצר | סגנונות Refero מתאימים | מה משותף להם |
|---|---|---|
| לוח בקרה של SaaS לצוותים | Linear, Vercel, Notion, PostHog; אסימוני עיצוב בהשראת Apple עם פריסה קומפקטית מותאמת | ממשק צפוף וקריא, היררכיה ברורה, טיפוגרפיה תמציתית |
| מוצר פיננסי | Stripe, Mercury, Column | לוח צבעים מעורר אמון, טיפוגרפיה ברורה, גופן monospace למספרים |
| כלי AI/פיתוח | ElevenLabs, xAI, Modal, Anthropic | ערכת נושא כהה, צבעי הדגשה מאופקים, צבע מונוכרומטי עם צבע בהיר אחד |
| מוצר לצרכנים | Duolingo, Airbnb, Notion | לוח צבעים חמים, איורים מלאי הבעה, קול ידידותי |
| אתר שיווקי | Linear, Vercel, Stripe (דפי הבית) | כותרות גדולות, היררכיה ברורה, רקע רגוע |
| תיק עבודות מינימליסטי | Apple, Mercury, Modal | שטח ריק מרבי, sans-serif, צבעי הדגשה מאופקים |
אם עדיין יש ספק, בחרו ב-Linear. היא מציעה בסיס רב-שימושי במיוחד: לוח צבעים ניטרלי, טיפוגרפיה קריאה (Inter / Söhne) וריווח מאופק. אתר המבוסס על Linear ייראה מקצועי ב-9 מתוך 10 סוגי מוצרים.
למה להפוך את DESIGN.md לחלק מההקשר הקבוע של הפרויקט?
הנקודה המרכזית
DESIGN.md אינו תוצר חד-פעמי. הוא חלק מההקשר הקבוע של הפרויקט, כמו CLAUDE.md ותיקיית business/. כשהקובץ נמצא במאגר, לכל סשן של Claude, לכל חבר צוות ולכל סוכן AI חדש (Codex, Cursor, Gemini CLI) יש גישה לאותו קו חזותי מוסכם. הידע מובנה פעם אחת, ואז נעשה בו שימוש ללא הגבלת זמן.
בפרקטיקה המתוארת, DESIGN.md נשמר לצד CLAUDE.md בכל פרויקט שמנוהל באמצעות סוכני AI. הקובץ הזה אינו נחשב "זמני למשימה אחת". זהו קו מנחה קבוע שעליו מסתמכים כל הסשנים העתידיים. בעוד חודש אפשר לבקש מ-Claude להוסיף עמוד חדש לפרויקט — הוא יפתח את אותו DESIGN.md ויבנה באותו סגנון. בעוד שישה חודשים אפשר להעביר את הפרויקט לחבר צוות אחר — גם הוא יוכל להפעיל את Claude ולקבל תוצאה עקבית, כי DESIGN.md נמצא במאגר.
בעיצוב העיקרון פועל כך: מקבלים החלטה פעם אחת — על לוח הצבעים, הטיפוגרפיה וקצב הריווח. אחר כך כל סוכן AI מתייחס אליה כאל נתון.
כלומר, העיצוב חי כקוד (markdown הוא קוד), ולא כקובץ Figma שה-AI אינו יכול לקרוא. כשהעיצוב הוא קובץ במאגר, Claude Code קורא אותו, Codex קורא אותו וגם כל כלי עתידי יוכל לקרוא אותו. כשהעיצוב נמצא ב-Figma, הוא חי במישור נפרד ויש לתרגם אותו ידנית לכל סשן.
בפרויקטי הצד המתוארים נעשה שימוש במבנה הזה:
project/
├── CLAUDE.md (imports @docs/DESIGN.md)
├── docs/
│ ├── DESIGN.md (visual canon, copied from Refero)
│ ├── ARCHITECTURE.md (project structure)
│ └── BRAND.md (tone of voice, vocabulary)
└── ...
שלושת הקבצים האלה הם דרך אחת לארגן את ההקשר הקבוע של הפרויקט. DESIGN.md מטפל במראה, ARCHITECTURE.md במבנה ו-BRAND.md בקול. כל סוכן AI שיש לו גישה למאגר מקבל את שלושתם כהקשר.
מה הם Refero MCP ו-refero_skill?
הנקודה המרכזית
Refero MCP הוא שרת ב-api.refero.design/mcp שנותן ל-Claude Code גישה ליותר מ-150,000 מסכים מאפליקציות אמיתיות וליותר מ-6,000 זרימות משתמשים ישירות מתוך הצ'אט. Refero_skill הוא ה-skill הרשמי ל-Claude Code (npx skills add) שעוטף את MCP והופך "מחקר עיצוב" לצעד ראשון הכרחי לפני כתיבת קוד.
Refero Styles היא שכבת הבסיס (DESIGN.md כקובץ). הגל הבא כולל אינטגרציות שמעניקות לסוכני AI גישה "מקורית" לספרייה.
Refero MCP (רשמי). זהו API של שרת בכתובת https://api.refero.design/mcp שאליה Claude Code מתחבר באמצעות bearer token. לאחר מכן יש לסוכן גישה ליותר מ-150,000 מסכים וליותר מ-6,000 זרימות משתמשים ממוצרים אמיתיים. אפשר להתקין אותו באמצעות skill:
npx skills add https://github.com/referodesign/refero_skill --skill refero-design
לאחר ההתקנה Claude מפעיל "מחקר עיצוב" בתחילת כל סשן כצעד ראשון הכרחי: הוא בוחן אילו בחירות חזותיות מתאימות למשימה, ואם צריך מציע שלושה כיוונים המקושרים לאסמכתה שנבחרה. נכון ל-23 ביוני 2026, במאגר refero_skill יש 67 commits ו-135 stars. זהו מוצר חדש שנמצא בפיתוח פעיל.
בפרקטיקה המתוארת משתמשים בגישה פשוטה: פותחים את האתר ידנית, מעתיקים את DESIGN.md ושמים אותו בקובץ. MCP שימושי כשעבודה עם מערכות עיצוב הופכת לשגרה — למשל, כשמנהלים כמה פרויקטים של לקוחות ועוברים בין קווים חזותיים מדי יום. מידע נוסף על חיבור שרתי MCP ל-Claude Code מופיע במדריך ל-NotebookLM ול-MCP.
אילו 4 טעויות משבשות את התהליך?
הנקודה המרכזית
ראשית, שימוש בהנחיה "תעשה את זה מודרני" בלי לצרף DESIGN.md (הסוכן חוזר לממוצע של נתוני האימון). שנית, הדבקת DESIGN.md בצ'אט כהודעה במקום לשים אותו במאגר (ההקשר לא יישמר בין סשנים). שלישית, בחירה לפי מותג במקום לפי המסך המסוים והצפיפות, למשל העתקת פריסה שיווקית מרווחת ללוח הנהלת חשבונות. רביעית, אי אזכור מפורש של DESIGN.md בהנחיה (הסוכן מתעלם ממנו גם אם הקובץ נמצא בהקשר).
ארבע הטעויות האלה חוזרות בחוויה המתוארת של עבודה עם הקשר עיצובי. כל אחת מהן נראית לא מזיקה, אבל כל אחת מחזירה את התוצאה לתבנית Tailwind הסטנדרטית.
טעות 1. ההנחיה "תעשה את זה מודרני". זהו דפוס הטעות הנפוץ ביותר. אנשים פותחים את Claude Code וכותבים, "תעשה לי אתר SaaS, סגנון מודרני, מראה פרימיום." הם מקבלים רקע כהה וצבע הדגשה סגול. בנתוני האימון, המילה "מודרני" מתואמת עם כל דפי הנחיתה מ-2022–2024 שנבנו מאותה תבנית. בלי הפרמטרים המדויקים מ-DESIGN.md, "מודרני" פירושו "ממוצע".
טעות 2. הדבקת DESIGN.md בצ'אט כהודעה. לפעמים אנשים מעתיקים את DESIGN.md לחלון הצ'אט של Claude Code ואומרים, "הנה הסגנון, תשתמש בו." זה עובד פעם אחת — עד לסיום הסשן. פותחים סשן חדש (או עוברים למשימה אחרת, /clear), וההקשר אובד. אם רוצים שהסגנון יישמר, הקובץ חייב להיות במאגר ולייבא אותו דרך CLAUDE.md. מידע נוסף על הסיבה ש-CLAUDE.md הוא נקודת הכניסה להקשר קבוע מופיע במדריך לזיכרון של Claude.
טעות 3. בחירת סגנון כי ״אתם אוהבים אותו״. הפניה שיווקית מרווחת של Apple עשויה להיות פריסה לא מתאימה להעתקה ללא שינוי ללוח נדל״ן שצריך להציג 30 מודעות במסך. הדבר אינו שולל טיפוגרפיה, פלטה או היררכיה בהשראת Apple: התאימו מרווחים וצפיפות שורות למשימה ואז בדקו כמה מידע מוצג בפועל בגודל המסך המיועד. בחרו את ההפניה המסוימת לפי צפיפות, טון וקהל, ולא רק לפי שמה.
טעות 4. לא מזכירים את DESIGN.md בהנחיה עצמה. DESIGN.md עשוי להיות במאגר, מיובא דרך CLAUDE.md וגלוי לסוכן. אבל אם ההנחיה אומרת "בנה אתר", Claude עשוי לבחור בדרך הסטנדרטית בלי להתייחס במפורש לקובץ. בכל הנחיית עיצוב מועיל לכתוב: "השתמש בדיוק בצבעים, בגופנים ובריווח מתוך docs/DESIGN.md. אל תמציא ערכים משלך — קח אותם מהקובץ." כך מוודאים שהסוכן משתמש ב-DESIGN.md במקום לעקוף אותו.
אסימונים מדויקים הם קודי hex, גדלי גופן ב-pt ויחידות ריווח ב-DESIGN.md. שפה טבעית פירושה "מודרני", "פרימיום", "נקי" או "כמו Apple". אסימונים מדויקים עובדים; מילים חופשיות לא.
מה כדאי לעשות עכשיו?
הנקודה המרכזית
DESIGN.md הוא אבן הבניין הראשונה של קו חזותי מוסכם, לא היחידה. יש שלושה כיוונים להמשך הפיתוח: Frontend Design Skill ב-Claude Code לקבלת משוב חזותי באמצעות צילומי מסך, Refero MCP לעבודה שוטפת עם סגנונות שונים, ושילוב DESIGN.md עם הנדסת ההקשר שלכם — כך שהסוכן יקרא תחילה את הקו החזותי המוסכם, יבנה את הדף ואז יבדוק בעצמו את התוצאה באמצעות צילום מסך.
יש לכם עכשיו את תהליך העבודה הבסיסי: Claude Code + DESIGN.md מ-Refero + 4 שלבים = אתר שאינו מבוסס על תבנית. זה מכסה 70% מהצרכים. 30% הנותרים הם מקרים שבהם נדרשים דיוק רב יותר, מהירות גבוהה יותר או אימות.
שלושה כיוונים להמשך אחרי שתשלימו את היסודות:
Frontend Design Skill. זהו skill רשמי ל-Claude Code שמוסיף משוב חזותי. הסוכן מצלם מסך של הדף המורכב באמצעות Puppeteer, בוחן אותו ב"עיניים" שלו (מודל ראייה), משווה אותו ל-DESIGN.md ומציע בעצמו תיקונים. זהו לולאת "הנחיה → קוד → צילום מסך → ביקורת → הנחיה" אוטומטית. שימושי כשהדף מורכב ואי אפשר להגיע לתוצאה הנכונה באיטרציה אחת.
Refero MCP במצב ייצור. כשמנהלים 3–5 פרויקטים במקביל, הוספה ידנית של DESIGN.md לכל אחד נעשית מייגעת. Refero MCP יכול למצוא 3 סגנונות מתאימים לפי תיאור פרויקט ולהציע בחירה ביניהם. כך זמן ההתחלה של פרויקט חדש מתקצר מ-30 דקות ל-3.
שילוב עם הנדסת הקשר. DESIGN.md הוא אחד מתוצרי ההקשר. לצדו בדרך כלל תמצאו
ARCHITECTURE.md(מבנה הפרויקט),BRAND.md(טון דיבור) ו-business/audience.md(קהל היעד). כולם מיובאים בתוךCLAUDE.md. כשה-Claude בונה עמוד, הוא מסתמך על המראה, הקהל ומבנה המוצר. בעיקרו של דבר, זו הנדסת הקשר — עבודה שיטתית על מה שנותנים לסוכן לפני בקשה.
חומרים מעשיים: התיעוד של Ailoot.
מקורות
חומרים מעשיים: התיעוד של Ailoot.
חומרים וכלים נוספים: Ailoot.
פרטים נוספים
שאלות ותשובות: אתר שאינו מבוסס על תבנית עם Claude Code ו-Refero DESIGN.md | Ailoot
האם הפניה של Apple יכולה להתאים ללוח SaaS צפוף?
כן, אם מתאימים אותה למשימה. השתמשו בפלטה, טיפוגרפיה, היררכיה ותנועה מאופקת מתאימות, אך הגדירו במפורש גבהי שורות קומפקטיים, מרווחים וצפיפות מידע במקום להעתיק פריסה שיווקית מרווחת.
למה DESIGN.md שנשמר עדיין אינו משפיע על עמוד חדש?
בדקו שהקובץ במאגר, מיובא מ-CLAUDE.md ומצוין במפורש בבקשת העיצוב. בקשו את ערכי הצבע, הגופן והמרווחים שלו בפועל ואז השוו את העמוד המרונדר להפניה המיועדת.