موقع ويب غير قائم على قالب باستخدام Claude Code وRefero DESIGN.md

مواد عملية حول العمل مع المشاريع والنماذج: توثيق Ailoot.

لماذا تبدو مواقع Claude Code كقوالب Tailwind؟#

في مثال يناير المذكور، كان العمل على مشروع جانبي صغير: نظام اتصال للمبيعات الباردة. طُلب من Claude Code إنشاء الصفحة الرئيسية في مستودع فارغ. كانت النتيجة عامة: خلفية داكنة slate-950، ولمسة لونية purple-500، وعنوان عريض بخط بلا زوائد، وثلاث بطاقات تحته بظلال متطابقة. التصميم نفسه الذي ظهر في الإصدار الأول من ChatGPT، والإصدار الأول من Lovable، والإصدار الأول من v0. وبعد خمس تعديلات على التوجيهات أضافت كلمات «حديث»، و«فاخر»، و«ليس كالجميع»، لم يتغير شيء. ظل شكل الصفحة يوحي بأنها مأخوذة من مجموعة قوالب Tailwind UI Templates.

أي إن Claude لا «يجهل» كيفية صنع شيء جميل. بل يعرف ما يفعله معظم الناس ويعيد إنتاج ذلك الشائع. وللحصول على نتيجة لا تعكس المتوسط، يحتاج الوكيل إلى قيود محددة: الألوان التي ينبغي استخدامها، والخطوط، والمسافات، والمكونات التي ينبغي اعتمادها بوصفها مرجعًا ثابتًا.

هنا يأتي دور نظام التصميم بوصفه سياقًا. ليس «اجعله جميلًا»، بل «أنشئه بهذا الأسلوب المحدد؛ وهذه معاييره».

تسد Refero Styles هذه الفجوة بملف جاهز، هو DESIGN.md، يتضمن معايير مستمدة من منتجات حقيقية.

ما Refero Styles؟#

تشرح الصفحة الرئيسية لـ styles.refero.design الفكرة بوضوح: «اكتشف أكثر من 2,000 نظام تصميم قابل للقراءة من وكلاء الذكاء الاصطناعي ومستمد من مواقع منتجات رائدة». يضم الفهرس علامات تجارية تضع معايير التصميم المرئي: Apple وLinear وStripe وNotion وVercel وElevenLabs وMercury وPostHog وxAI وModal وDuolingo. ولا يجري استخراجها يدويًا؛ إذ يشغّل فريق Refero نصًا برمجيًا يحلل CSS والترميز الفعليين للموقع، ثم يحزم النتائج في markdown منظّم. مكتبة styles.refero.design نفسها مجانية.

الكلمة الأساسية هي «منظّمة». لا يحتوي الملف على لقطات شاشة أو أوصاف مثل «بأسلوب بسيط». بل هو ملف markdown يضم ألوانًا محددة بصيغة hex، وأحجام خطوط دقيقة بوحدة pt، ووحدات للمسافات، وقواعد للمكونات. يقرأ وكيل الذكاء الاصطناعي الملف ويعمل وفق تفاصيل محددة بدلًا من محاولة وصف الذوق بالكلمات.

يسرد فريق Refero الأدوات المدعومة على صفحة ai-agents: «Cursor وClaude Code وCodex وv0 وLovable». بمعنى آخر، يعمل DESIGN.md كملف عام واحد يناسب جميع وكلاء التطوير الرئيسيين المعتمدين على الذكاء الاصطناعي.

ما محتويات DESIGN.md؟#

يصف فريق Refero بنية الملف على صفحة design-md-template كما يلي:

لذلك تكون بنية الملف عادةً على النحو التالي:

ويؤكد المبدعون أيضًا مبدأً يحل 80% من مشكلات التصميم باستخدام الذكاء الاصطناعي:

أي إن رمز اللون #5E6AD2 أقوى من عبارة «مثل Linear». والقيمة الدقيقة font-size: 13px / line-height: 18px أقوى من عبارة «نص مضغوط». التفاصيل المحددة تتفوق على التأويل.

ليس DESIGN.md في المستودع صورةً للفريق، بل هو لبنة أساسية في السياق الدائم لمشروعك: معرفة منظّمة يقرؤها الذكاء الاصطناعي مع كل طلب.

إنشاء موقع بأسلوب Linear في 4 خطوات#

تشكل هذه الخطوات الأربع التسلسل الموصوف لبدء موقع ويب جديد. ليست «أربع خطوات» عامة، بل تسلسل محدد يتضمن إجراءً لكل خطوة.

1. تثبيت 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 معالج الإعداد. يتضمن اشتراك Pro خدمة Claude Code ($17 شهريًا عند الدفع سنويًا أو $20 شهريًا عند الدفع شهرًا بشهر).

2. فتح Refero Styles واختيار علامة تجارية

   انتقل إلى https://styles.refero.design وافتح الفهرس. معيار الاختيار الأساسي هو مدى ملاءمة الأسلوب لمنتجك، لا ما إذا كان «يعجبك شكله». هل تنشئ لوحة معلومات SaaS؟ ألقِ نظرة على Linear وVercel وNotion. هل تنشئ منتجًا للتقنية المالية؟ ألقِ نظرة على Stripe وMercury وColumn. هل تنشئ منتجًا للأعضاء؟ ألقِ نظرة على Duolingo. افتح بطاقة العلامة التجارية وانقر على «Copy DESIGN.md».

3. وضع DESIGN.md في المشروع بوصفه سياقًا

   أنشئ ملف docs/DESIGN.md في جذر المشروع والصق فيه المحتوى الذي نسخته. ثم افتح CLAUDE.md وأضف سطرًا واحدًا: @docs/DESIGN.md. هذا توجيه استيراد؛ إذ يحمّل Claude Code المحتويات إلى السياق عند بدء الجلسة. للمزيد عن عمليات الاستيراد في CLAUDE.md، راجع الدليل الخاص بملف تعليمات واحد لـ Claude Code وCodex وCursor.

4. طلب صفحة محددة

   لا تقل «اجعلها جميلة». كن محددًا: «باستخدام DESIGN.md الموجود في السياق، أنشئ صفحة رئيسية لمنتج SaaS لإدارة المهام. البنية: قسم افتتاحي بعنوان وعنوان فرعي، وزرا CTA (أساسي وثانوي)، ثم قسم يضم 3 ميزات وأيقونات، وبعده قسم للشهادات. استخدم ألوان DESIGN.md وخطوطه تمامًا؛ ولا تخترع قيمًا من عندك».

بعد الخطوة الرابعة، ينشئ Claude الصفحة. في التجربة الموصوفة، تستغرق الصفحة الرئيسية في المتوسط 8–12 دقيقة، وتبدو فعلًا قريبة من أسلوب العلامة التجارية المختارة. ليست نسخة مطابقة على مستوى البكسل، لكنها تتسم بجماليات يمكن تمييزها: الخطوط نفسها، ولوحة الألوان نفسها، وإيقاع المسافات نفسه، والخيارات الدقيقة نفسها في الأزرار.

يصف منشئو Refero المبدأ نفسه في ثلاث خطوات، بإيجاز أكبر قليلًا، على صفحة ai-agents/design-resources:

يتبع هذا التسلسل المؤلف من أربع خطوات المنطق نفسه، مع إضافة خطوتَي تثبيت Claude Code واستيراد الملف إلى CLAUDE.md صراحةً.

أي أسلوب تختار لمنتجك؟#

يقدم منشئو Refero هذه النصيحة في الخطوة الأولى من دليلهم: اختر مرجعًا بناءً على أكثر من اسم العلامة التجارية؛ خذ في الحسبان أيضًا الكثافة والنبرة والجمهور.

ما معنى ذلك عمليًا؟ قد تناسب ألوان Apple وطباعتها وتسلسلها الهرمي وحركتها المنضبطة لوحة SaaS، بينما لا تناسبها مسافات واسعة في صفحة تسويق منتج معينة. افحص المرجع المحدد بدل الاختيار بالعلامة التجارية. للوحة محاسبة، حدد ارتفاع صفوف مضغوطًا ومسافات وكثافة معلومات صراحة، مع وضوح الأرقام والأدوات؛ ولا تنسخ تخطيط عرض واسعًا دون تكييف.

دليل بسيط للاختيار حسب نوع المنتج:

إذا بقيت مترددًا، فاختر Linear. فهو يوفر أساسًا متعدد الاستخدامات: لوحة ألوان محايدة، وطباعة مقروءة (Inter / Söhne)، ومسافات محدودة. سيبدو الموقع المبني على Linear احترافيًا مع 9 من كل 10 أنواع من المنتجات.

لماذا تجعل DESIGN.md جزءًا من السياق الدائم لمشروعك؟#

في الممارسة الموصوفة، يُحفظ DESIGN.md بجوار CLAUDE.md في كل مشروع تديره وكلاء الذكاء الاصطناعي. ولا يُعد الملف «مؤقتًا لمهمة واحدة». بل هو مرجع دائم تعتمد عليه جميع الجلسات المقبلة. بعد شهر، يمكنك أن تطلب من Claude إضافة صفحة جديدة إلى المشروع؛ وسيفتح ملف DESIGN.md نفسه وينشئها بالأسلوب ذاته. وبعد ستة أشهر، يمكنك تسليم المشروع إلى عضو آخر في الفريق، وسيتمكن هو أيضًا من تشغيل Claude والحصول على نتيجة متسقة لأن DESIGN.md موجود في المستودع.

يعمل هذا المبدأ في التصميم على النحو التالي: يُتخذ القرار مرة واحدة بشأن لوحة الألوان والطباعة وإيقاع المسافات. وبعد ذلك، يتعامل كل وكيل ذكاء اصطناعي مع هذه العناصر على أنها معطيات ثابتة.

أي إن التصميم يعيش على هيئة كود (markdown كود)، لا في ملف Figma لا يستطيع الذكاء الاصطناعي قراءته. عندما يكون التصميم ملفًا في المستودع، يقرؤه Claude Code وCodex وأي أداة مستقبلية. أما عندما يكون في Figma، فيظل في مساحة منفصلة ويتعين نقله يدويًا في كل جلسة.

استُخدمت هذه البنية في المشاريع الجانبية المذكورة:

project/
├── CLAUDE.md            (يستورد @docs/DESIGN.md)
├── docs/
│   ├── DESIGN.md        (المرجع البصري، منسوخ من Refero)
│   ├── ARCHITECTURE.md  (بنية المشروع)
│   └── BRAND.md         (نبرة الصوت والمفردات)
└── ...

هذه الملفات الثلاثة إحدى طرق تنظيم السياق الدائم للمشروع. يتولى DESIGN.md العناصر المرئية، وARCHITECTURE.md البنية، وBRAND.md الصوت. ويحصل أي وكيل ذكاء اصطناعي لديه صلاحية الوصول إلى المستودع على الملفات الثلاثة كلها بوصفها سياقًا.

ما Refero MCP وrefero_skill؟#

Refero Styles هي الطبقة الأساسية (DESIGN.md في ملف). والموجة التالية هي التكاملات التي تجعل الوصول إلى المكتبة «مباشرًا» لوكلاء الذكاء الاصطناعي.

Refero MCP (الرسمي). هذه واجهة API لخادم على https://api.refero.design/mcp يتصل بها Claude Code باستخدام bearer token. عندها يصبح بإمكان الوكيل الوصول إلى أكثر من 150,000 شاشة وأكثر من 6,000 تدفق مستخدم من منتجات حقيقية. يمكنك تثبيته باستخدام مهارة:

npx skills add https://github.com/referodesign/refero_skill --skill refero-design

بعد التثبيت، يطلق Claude «البحث التصميمي» في بداية كل جلسة بوصفه خطوة أولى إلزامية: يفحص الخيارات المرئية المناسبة للمهمة، ويقترح عند الحاجة ثلاثة اتجاهات مرتبطة بالمرجع المختار. في 23 يونيو 2026، بلغ عدد الإيداعات في مستودع refero_skill 67، وعدد النجوم 135. إنه منتج جديد قيد التطوير النشط.

تستخدم الممارسة الموصوفة نهجًا بسيطًا: افتح الموقع يدويًا، وانسخ DESIGN.md، وضعه في ملف. يفيد MCP عندما يصبح العمل مع أنظمة التصميم أمرًا روتينيًا، مثل إدارة عدة مشاريع لعملاء والتبديل يوميًا بين مراجع بصرية مختلفة. لمعرفة المزيد عن ربط خوادم MCP بـ Claude Code، راجع دليل NotebookLM وMCP.

ما الأخطاء الأربعة التي تفسد سير العمل؟#

تتكرر هذه الأخطاء الأربعة في التجربة الموصوفة للعمل باستخدام سياق التصميم. يبدو كل منها غير مؤذٍ، لكن كلًا منها يعيد النتيجة إلى قالب 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». الرموز الدقيقة تنجح، أما الكلمات الحرة فلا.

ماذا ينبغي أن تفعل بعد ذلك؟#

أصبح لديك الآن سير العمل الأساسي: Claude Code + DESIGN.md من Refero + 4 خطوات = موقع ويب غير قائم على قالب. يغطي هذا 70% من الاحتياجات. أما الـ 30% المتبقية فتتعلق بالحالات التي تتطلب دقة أكبر أو سرعة أعلى أو تحققًا.

ثلاثة اتجاهات لمتابعتها بعد إتقان الأساسيات:

1. Frontend Design Skill. مهارة رسمية لـ Claude Code تضيف ملاحظات مرئية. يلتقط الوكيل صورة للشاشة المجمّعة باستخدام Puppeteer، وينظر إليها بـ«عينيه» (نموذج رؤية)، ويقارنها بـ DESIGN.md، ثم يقترح التصحيحات بنفسه. إنها حلقة مؤتمتة: «توجيه → كود → لقطة شاشة → نقد → توجيه». وهي مفيدة عندما تكون الصفحة معقدة ولا يمكنك الوصول إلى النتيجة الصحيحة في محاولة واحدة.

2. Refero MCP في وضع الإنتاج. عندما تدير 3–5 مشاريع بالتوازي، يصبح إدراج DESIGN.md يدويًا لكل مشروع أمرًا مرهقًا. يمكن لـ Refero MCP أن يجد 3 أنماط مناسبة بناءً على وصف المشروع ويتيح لك الاختيار بينها. وهذا يقلل وقت بدء مشروع جديد من 30 دقيقة إلى 3.

3. الدمج مع Context Engineering. DESIGN.md أحد ملفات السياق. وستجد معه عادةً ARCHITECTURE.md (بنية المشروع) وBRAND.md (نبرة الصوت) وbusiness/audience.md (الجمهور المستهدف). وتُستورد كلها في CLAUDE.md. عندما ينشئ Claude صفحة، فإنه يستند إلى العناصر المرئية والجمهور وبنية المنتج. وهذا في جوهره هندسة السياق: عمل منهجي على ما تقدمه للوكيل قبل الطلب.

مواد عملية: توثيق Ailoot.

مواد عملية: توثيق Ailoot.

المزيد من المواد والأدوات: Ailoot.