AI-translated from English; not yet reviewed by a fluent editor.

# استخدم مرجع DESIGN.md بإصدار ثابت في Claude Code لصفحة واحدة

> اختر ملف DESIGN.md بإصدار ثابت وقدّمه إلى Claude Code لتعديل صفحة مخوّل بتعديلها، ثم افحص الشيفرة والعرض على الحاسوب والهاتف.

By BIG CHANGE Editorial

Published: 2026-10-20T00:01:06.937Z
Updated: 2026-10-20T00:01:06.937Z
Canonical: https://bigchange.ai/blog/claude-code-pinned-design-reference-page-guide

![Conceptual charcoal illustration of one clipped design-reference sheet beside an unbranded display showing a simple webpage layout.](https://bigchange.ai/api/media/file/pinned-design-reference-one-page-hero-v1.png)
AI-generated conceptual illustration by BIG CHANGE; no Claude Code run, Notion or edited and tested page is depicted.

تمنحك الصفحة الموجودة عناصر محددة لتحسينها وأخرى لحمايتها. توفّر [مجموعة Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) من VoltAgent تحليلات نصية لمواقع عامة يمكنك عرضها على وكيل برمجة بالذكاء الاصطناعي. يستخدم هذا الدليل ملفًا واحدًا من تعديل المستودع بتاريخ 14 أكتوبر 2026 مرجعًا بصريًا لتعديل محدود في Claude Code. لا يكتمل العمل إلا بفحص الشيفرة المعدّلة والصفحة المعروضة بنفسك.

راجعت BIG CHANGE المستودع المثبّت ووثائق Claude Code. لم نشغّل Claude Code أو نعدّل صفحة أو نقس الوقت أو نفحص نتيجة مولّدة. تتضمن الشجرة المثبّتة 84 ملفًا مباشرة تحت `design-md/*/DESIGN.md`؛ يصف العدد ذلك التعديل، لا حجمًا دائمًا للفهرس.

## التغيير الكبير

- **ما الذي تغيّر:** يمكن تقديم تحليل تصميم واحد ثابت الإصدار كسياق صريح لتعديل صفحة واحدة مخوّل العمل عليها.
- **لماذا يهم:** يستطيع المالك استعارة فكرة نافعة للتخطيط أو المسافات مع فحص النتيجة مقابل محتوى الصفحة وهويتها وسلوكها الفعلي.
- **ما الذي ينبغي الانتباه له:** المرجع تحليل مجتمعي. قد تكون تفاصيل العلامة وبعض تعليماته الداخلية خاطئة أو غير مناسبة لصفحتك.

## قبل البدء

تحتاج إلى صفحة ومستودع يجوز لك تعديلهما، ونسخة عمل أو فرع، وطريقة لعرض الصفحة محليًا، وإمكانية استخدام [Claude Code](https://code.claude.com/docs/en/quickstart) عبر حساب أو مزوّد مؤهل. حدّد ملف الصفحة وطريقة تشغيلها وفحصها المعتادة في مشروعك. دوّن الجمهور والنص والروابط الأساسية والألوان والخطوط والشعار المعتمدة، ومشكلة بصرية واحدة لحلّها. احتفظ بقرارات المالك بجانب نسخة العمل لتقييم التعديل المقترح.

قبل تقديم مواد عميل خاصة، راجع [سياسة البيانات](https://code.claude.com/docs/en/data-usage) وكذلك [أذونات الأدوات](https://code.claude.com/docs/en/permissions) في حسابك. يعالج Claude Code الطلبات ومحتوى المشروع وفق شروط الحساب؛ المشروع المحلي لا يجعل جلسة النموذج محلية فقط. تأكد من جواز مشاركة النصوص أو الأصول أو الشيفرة الخاصة التي سيكشفها العمل.

## استخدم مرجعًا واحدًا لصفحة واحدة

1. افتح [README للمجموعة المثبّتة](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md). اختر ملف `design-md/<name>/DESIGN.md` يقدم فكرة مرتبطة بمشكلة الصفحة المحددة. اقرأ الملف كاملًا قبل استخدامه. يوضّح [مثال Notion](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) التنسيق: اقتراحات للتخطيط والخط والمسافات والمكوّنات. كما يصف أزرارًا كبسولية ومستطيلة. هذا التناقض يستدعي قرارك، لا أن تطلب من Claude Code اتباع كل سطر.
2. انسخ ملف `DESIGN.md` المثبّت الواحد إلى مشروع العمل، مثلًا في `design-reference/DESIGN.md`. سجّل بجانبه عنوان URL الأصلي والمسار والتعديل `3b605329240ce735b510037cca322f1831fdd7f8`. احتفظ مع النسخة بـ [إشعار حقوق النشر والإذن MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) الخاص بالمستودع. لا يتطلب مرجع Markdown نفسه تثبيت حزمة. الترخيص يشمل مادة المستودع؛ لا يمنح استخدام شعار الشركة الممثلة أو ملفات خطوطها أو صورها أو علامتها التجارية.
3. افتح Claude Code من المشروع المخوّل وقدّم الملف المنسوخ صراحة كسياق. توثّق Anthropic [مراجع الملفات](https://code.claude.com/docs/en/common-workflows) وكذلك [ملفات تعليمات المشروع](https://code.claude.com/docs/en/memory) المنفصلة؛ وضع ملف `DESIGN.md` مستقل في مجلد لا يثبت أن Claude Code حمّله. استبدل مسار الصفحة وقواعد المالك بين الأقواس بقيم حقيقية، وتأكد من قراءة المرجع قبل قبول التغيير.

```markdown
Read @design-reference/DESIGN.md as a visual reference. Edit only [path/to/owned-page] and the existing styles that page needs. Improve [one specific layout or hierarchy problem]. Keep the page's current audience, approved copy, links, brand colors, font and logo. Use only layout, hierarchy or spacing ideas that fit those rules. Do not copy the example site's name, assets or identity. Preserve working interactions and keyboard access. Show the proposed file changes and tell me how to render and check this page with this project's existing commands.
```

4. اقرأ الفروق المقترحة قبل التنفيذ أو القبول. افحص كل ملف ونص ورابط تغيّر. ارفض أي تبعية أو أصل جديد أو تعديل لصفحة أخرى لم تطلبه. اعرض الصفحة بأمر التشغيل الموثّق لمشروعك. افتحها بعرض حاسوب وهاتف؛ افحص الصفحة الفعلية لا وصف نية الوكيل.
5. قارن العرض بمتطلباتك المكتوبة. تأكد من بقاء النص والروابط المطلوبة وترتيب مفيد للعناوين وتباين كاف للنص وعناصر التحكم، ومن عدم اقتطاع المحتوى أو التمرير الأفقي على الهاتف. تنقّل بلوحة المفاتيح إلى الروابط والأزرار والقوائم والنماذج المتأثرة واستخدمها. جرّب التفاعلات المعدّلة بما فيها التركيز المرئي وحالات الخطأ. دوّن إصدار الصفحة والعروض والفحوص والعيوب. لا تقبل التعديل إلا بعد اجتياز الفحوص على صفحتك.

إذا تجاهل Claude Code المرجع، أشر إلى الملف مجددًا واطلب تحديد الأقسام المستخدمة. إذا خالف قواعد علامتك، احذف ذلك التوجيه من الطلب وعدّل الشيفرة المتأثرة. إذا تعطل رابط أو مسار التركيز أو تفاعل، استعد السلوك السابق ثم نفّذ تغييرًا أصغر. إذا تعذر العرض أو الفحص، اترك التغيير دون قبول حتى تستطيع التحقق.

المجموعة أوصاف مجتمعية لمواقع أخرى يقدّمها المشرفون كما هي. يتضمن ملف Notion أشكال أزرار متناقضة وسلوك مرور مؤشر غير موثّق وأمر فحص شيفرة لم يتحقق منه هذا الدليل. استخدم فحوص مشروعك المعروفة لا ذلك الأمر المقترح. تعتمد كلفة Claude Code والاستضافة أو الأصول لاحقًا على حسابك ومشروعك؛ لا يثبت الدليل زمن تعديل أو جودة تصميم نهائية.

لنهج آخر في العمل على الصفحات بمساعدة الذكاء الاصطناعي، يشرح [دليلنا لنموذج Genspark الأولي](https://bigchange.ai/blog/genspark-design-prototype-source-zip) نسخ نموذج مستضاف وفحص ZIP الشيفرة المصدرية المصدّر. تبدأ تلك المهمة من مادة مختلفة ولها معيار انتهاء مختلف.

## المصادر وقراءات إضافية

- [README المثبّت من VoltAgent](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) يصف المجموعة وتحليلات المواقع العامة المقدّمة كما هي. عدد الملفات من الشجرة التكرارية المثبّتة، لا ادعاء عن إصدارات لاحقة.
- ملف [Notion `DESIGN.md`](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) المثبّت يوضّح الصيغة والتناقضات الداخلية. ليس مواصفة معتمدة من Notion ولا مصدرًا لحقوق استخدام أصولها.
- يلزم [ترخيص MIT](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) للمستودع إبقاء إشعار حقوق النشر والإذن في النسخ أو الأجزاء الجوهرية.
- تشرح وثائق Anthropic: [البدء السريع في Claude Code](https://code.claude.com/docs/en/quickstart)، [إرشادات مراجع الملفات](https://code.claude.com/docs/en/common-workflows) وكذلك [وثائق تعليمات المشروع](https://code.claude.com/docs/en/memory) الوصول والسياق الصريح. لا تتحقق من تعديل الصفحة هذا أو التحميل التلقائي للمرجع المستقل.
- تشرح وثائق Anthropic حول [الكلفة](https://code.claude.com/docs/en/costs)، [استخدام البيانات](https://code.claude.com/docs/en/data-usage) وكذلك [الأذونات](https://code.claude.com/docs/en/permissions) الاستخدام والضوابط بحسب الحساب. لم تُختبر جلسة أو فاتورة أو صفحة ناتجة لهذا الدليل.

## Sources

- [README المثبّت لـ Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/README.md) — وصف المستودع الأساسي وإرشاد نسخ ملف واحد في التعديل غير القابل للتغيير. يقول إن تحليلات المواقع العامة مقدّمة كما هي؛ لغة جودة النتائج ترويجية. تحتوي الشجرة الكاملة المفحوصة مستقلًا لهذا التعديل على 84 ملف DESIGN.md مباشرًا، وهو عدد خاص بالإصدار.
- [مثال Notion DESIGN.md عند التعديل المثبّت](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/design-md/notion/DESIGN.md) — مثال لتحليل التخطيط والمسافات والخطوط والمكوّنات. يتناقض بشأن الأزرار الكبسولية والمستطيلة ولا يثبت سلوك مرور مؤشر أو حركة متحققًا منه، ويقترح أمر فحص شيفرة غير متحقق منه. تحليل مجتمعي، لا مواصفة علامة Notion الرسمية ولا إذن نسخ الأصول.
- [ترخيص MIT لـ Awesome DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/3b605329240ce735b510037cca322f1831fdd7f8/LICENSE) — Copyright (c) 2026 VoltAgent؛ يجب إبقاء إشعار حقوق النشر والإذن في النسخ أو الأجزاء الجوهرية. لا يثبت ترخيص المستودع حقوق العلامة أو الشعار أو الخط المملوك أو الصور لموقع ممثّل.
- [البدء السريع في Claude Code](https://code.claude.com/docs/en/quickstart) — المتطلبات الرسمية للمشروع والحساب أو المزوّد وتسجيل الدخول. يجب استخدام مسار مؤهل ومشروع القارئ نفسه؛ لم تختبر BIG CHANGE إعداد Claude Code أو حسابًا مدفوعًا.
- [سير العمل المعتاد في Claude Code](https://code.claude.com/docs/en/common-workflows) — إرشاد رسمي للسياق الصريح @file وعمل المشروع. يدعم تعمد الإشارة إلى الملف المنسوخ وفق الإعدادات والحدود، لا تحميل أي DESIGN.md تلقائيًا.
- [ذاكرة مشروع Claude Code](https://code.claude.com/docs/en/memory) — تشرح ملفات تعليمات المشروع والتحميل بحسب الإعداد. لا تثبت أن DESIGN.md مستقلة تُحمّل لمجرد وجودها بالمستودع؛ لا يغيّر هذا الدليل إعداد التعليمات.
- [كلفة Claude Code](https://code.claude.com/docs/en/costs) — سياق الاستخدام والفوترة بحسب الحساب. لا يضيف مرجع Markdown تبعية حزمة، لكن الدليل لا يثبت سعرًا ثابتًا لمهمة Claude Code أو حصة مجانية أو توفير وقت.
- [استخدام بيانات Claude Code](https://code.claude.com/docs/en/data-usage) — معالجة البيانات الرسمية بحسب الحساب وسلوك سجل المحادثات المحلي. على المالك مراجعة السياسة قبل مشاركة شيفرة أو أصول العميل الخاصة؛ لا ادعاء عامًا بمعالجة محلية فقط أو بشأن التدريب.
- [أذونات Claude Code](https://code.claude.com/docs/en/permissions) — ضوابط أذونات الأدوات الرسمية. تعليمات الطلب لا تمنح أو تفرض وحدها وصول الأدوات؛ يجب فحص الإجراءات المقترحة والملفات المتغيرة فعلًا.