# Google Stitch + Claude Code: تصميم المواقع من دون «مظهر الذكاء الاصطناعي»
> مسار يدوي كامل من Google Stitch إلى Claude Code: صدّر HTML/CSS وأنشئ DESIGN.md من ملفات محلية وابن صفحة وتحقق منها، مع بيان مصادقة MCP غير المحسومة.
Source: https://ailoot.ai/blog/ar/google-stitch-claude-code-design/
Canonical: https://ailoot.ai/blog/ar/google-stitch-claude-code-design/
Language: ar
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-106
Revision: sha256-816346bb87eec331703602a9c749083d9b7402be5c7600f265d6acd206c9050e
الخلاصة الرئيسية
يكتب Claude Code المنطق بإتقان، لكن عيبه يظهر فورًا في التصميم: خلفية داكنة، وتدرّج بنفسجي، وخط Inter، وثلاث كتل متطابقة. ينشئ Google Stitch تصميمًا انطلاقًا من وصف نصي، ويوفر رموز الألوان والطباعة في ملف DESIGN.md، ثم يبني Claude Code الموقع انطلاقًا من هذا الملف. أشرح هنا سير العمل كاملًا خطوة بخطوة، وأوضح أين يتعثر.
تجد تعليمات إضافية للعمل مع Ailoot في [التوثيق](https://ailoot.ai/docs/).
## لماذا تبدو المواقع المبنية باستخدام Claude Code وكأنها «AI slop»؟
الخلاصة الرئيسية
من دون نظام تصميم، يرسم Claude Code واجهة عادية المظهر: خلفية داكنة، ولمسة بنفسجية، وخط Inter، وثلاث بطاقات بظلال متطابقة. والسبب أن النموذج يعيد إنتاج النمط الأكثر شيوعًا في بيانات تدريبه، وهي الإنترنت كله مع Tailwind وآلاف الصفحات المقصودة المتطابقة. من دون قيود دقيقة، ينتج الوكيل المتوسط الحسابي لكل القوالب.
في الحالة العملية الموصوفة، بدأ العمل على الصفحة الرئيسية لتطبيق مكالمات بمشروع فارغ وطلب من Claude Code بناء صفحة مقصودة. وكانت النتيجة مألوفة: `slate-950` للخلفية، و`indigo-500` للّون المميّز، وخط Inter عريض في العنوان، وثلاث بطاقات متطابقة بظلال تحتها. التخطيط نفسه الموجود في أول إصدار من v0، وأول إصدار من Lovable، وأول إنشاء من ChatGPT. أعدت كتابة الطلب خمس مرات، وأضفت كلمات «فاخر» و«ليس كالجميع» و«عصري»، لكن الصفحة ظلت تبدو كقالب WordPress من 2015.
المنطق بسيط: من دون قيود، يأخذ النموذج المتوسط الإحصائي لما رآه. وقد رأى مليون صفحة مقصودة متطابقة مبنية باستخدام Bootstrap وTailwind. للحصول على نتيجة لا تبدو عادية، عليك أن تقدم للوكيل تفاصيل محددة: الألوان والخطوط والمسافات التي تريدها، والمكوّنات التي ينبغي اعتمادها مرجعًا. بالنسبة إلى النموذج، تعني كلمة «جميل» «متوسط عام 2020». لن تغيّر الصفات النتيجة؛ ما تحتاجه هو معلمات دقيقة.
تناولت الفجوة نفسها في دليل عن [أنظمة التصميم الجاهزة باستخدام Refero](https://ailoot.ai/blog/ar/claude-code-refero-design-md/): تختار هناك أسلوب جهة أخرى (Apple أو Linear أو Stripe) وتقدمه للوكيل. أما Google Stitch فيعالج الأمر من الجهة الأخرى: بدلًا من استعارة أسلوب جهة أخرى، تنشئ أسلوبك الخاص انطلاقًا من وصفك.
## ما Google Stitch، وكيف يساعد؟
الخلاصة الرئيسية
Stitch أداة مجانية من Google Labs تحوّل وصفًا نصيًا أو صورة إلى تصميم واجهة مستخدم كامل: شاشات وألوان وطباعة وتخطيط. تعمل في المتصفح باستخدام نماذج Gemini. وتتمثل فائدتها الأساسية في سير العمل مع Claude Code في أنها تقدم التصميم على هيئة بيانات منظّمة: ألوان وخطوط ومسافات بقيم دقيقة. يقرأها الوكيل ويعيد تنفيذها في الشيفرة من دون «تقديرها بالنظر» من لقطة شاشة.
Stitch تجربة من Google Labs قُدّمت في Google I/O في مايو 2025. تكتب في حقل الطلب الشكل الذي تريده للتطبيق (أو ترفع لقطة شاشة أو رسمًا على لوح أبيض أو صفحة لمنافس)، وينشئ Stitch شاشات الواجهة على لوحة لا نهائية. يستخدم في الخلفية Gemini 2.5 Pro وFlash، وأُضيف Gemini 3 في ديسمبر 2025 لإنتاج تخطيطات أكثر صقلًا.
ما يفيدنا:
- **Vibe Design** — صف الإحساس بالكلمات («بسيط وفاخر، مثل Stripe») لتحصل على عدة اتجاهات مرئية تختار منها.
- **المراجع** — ارفع صورة من Dribbble أو Pinterest؛ يحافظ Stitch على تخطيطها ويطبق متطلباتك.
- **التصدير** بثلاثة تنسيقات: إلى Figma بطبقات قابلة للتحرير، أو بصيغة HTML/CSS نظيفة، أو عبر MCP مباشرة إلى الوكيل.
الفرق عن الأنماط الجاهزة مثل Refero مهم. Refero مكتبة لأنظمة تصميم مستخرجة مسبقًا من مواقع حقيقية؛ أي إنك تختار علامة تجارية قائمة. أما Stitch فينشئ نظامًا لمنتجك من الصفر. ليس لديك تصميم مرجعي وتريد مظهرًا خاصًا بك؟ اختر Stitch. تريد تطبيق أسلوب منتج معروف بسرعة؟ اختر Refero. يغطي كل منهما مرحلة مختلفة ويكملان بعضهما جيدًا.
يحتوي Claude نفسه أيضًا على وضع تصميم مدمج؛ وقد تناولته في دليل عن [Claude Design](https://ailoot.ai/blog/ar/claude-design-guide/). يختلف Stitch لأنه يوفر نظامًا جاهزًا في ملف خارجي يقرأه الوكيل كلما بنى شيئًا.
## متطلبات توفر Google Stitch
لا يتوفر Stitch في جميع البلدان: كتب ممثل من Google في المنتدى الرسمي أن الخدمة متاحة للمستخدمين بعمر 18 عامًا فأكثر في 212 بلدًا، وأن القائمة تتوسع. في المناطق المقيّدة، لا ترى عند زيارة الموقع سوى رسالة واحدة: «عذرًا، Stitch غير متاح».
تحتاج إلى حساب Google؛ فهو الحساب الوحيد الذي يمكنك تسجيل الدخول به.
## عندما يعطل تفويض Stitch MCP مسار Claude Code
الخلاصة الرئيسية
يوفر Stitch التصاميم للوكلاء عبر MCP. واجه الإعداد الموصوف فشل تفويض مع MCP البعيد على `https://stitch.googleapis.com/mcp` في Claude Code. لا يقدم المقال تكوين MCP متوافقًا مثبتًا؛ ويستخدم المسار الكامل أدناه تصدير HTML/CSS محليًا.
تنتشر على الإنترنت إرشادات رديئة كثيرة حول توصيل MCP، ونصفها لا يعمل ببساطة. على سبيل المثال، توصي أدلة كثيرة (بما فيها أدلة إنجليزية شهيرة) بتثبيت حزمة `@google/stitch-mcp` بالأمر `npx -y @google/stitch-mcp@latest`. هذه الحزمة غير موجودة — ويعيد npm الخطأ `404`. لا تنسخ هذا الأمر؛ ستضيّع وقتك. وللسبب نفسه، اختر عمليات تكامل جرى تأكيد تثبيتها والتحقق منها في مهمة حقيقية.
بلغت محاولة MCP البعيد الموصوفة الخطأ `Incompatible auth server` في Claude Code. ليس هذا الخطأ المرصود وصفة تعمل أو إثبات فشل كل إعداد حالي. لا تتابع بخطوة «وصل MCP» غير محددة؛ استخدم تصدير HTML/CSS اليدوي أدناه حتى التحقق من تكوين متوافق دقيق. هذا خلل مسجل في Claude Code، أُغلق بحالة «غير مخطط له».
أولًا، أنشئ مفتاحًا. في Stitch: انقر على صورتك الرمزية ← **Stitch settings** ← قسم **API key** ← **Create key** ← انسخ المفتاح.
بعد ذلك، أضف الوكيل الوسيط إلى Claude Code بأمر واحد:
bash
ضع المفتاح في متغير بيئة (وهي الطريقة الأسهل؛ فلا حاجة إلى العبث بوحدة تحكم Google أو برموز تنتهي صلاحيتها):
```bash
export STITCH_API_KEY="your-key-from-stitch-settings"
```
إذا كنت تفضّل ضبطه يدويًا، فسيبدو على هذا النحو (في `~/.claude.json` أو `.mcp.json` في جذر المشروع):
json
أعد تشغيل Claude Code وتحقق من أن الاتصال يعمل:
```bash
claude mcp list
```
يمثل سير العمل باستخدام Stitch وDESIGN.md هندسة السياق في أبسط صورها: تضع رموزًا دقيقة في سياق Claude مسبقًا، فيبني وفقًا لها حرفيًا من دون «تخمين ما قصدته». تجمع المنهجية الكاملة بين الركائز الثلاث: نسخة الذكاء الاصطناعي، وSecond Brain، وهندسة السياق. وهذا ما يحوّل Claude من «مساعد يخمّن» إلى أداة تنتج نتائج يمكن توقعها.
## ما DESIGN.md، ولماذا هو أفضل من لقطة شاشة؟
الخلاصة الرئيسية
DESIGN.md ملف Markdown قابل للقراءة آليًا، ويحتوي على معلمات نظام التصميم: ألوان بصيغة hex، ومقياس للطباعة، ووحدات للمسافات، وقواعد للمكوّنات. يقرأه Claude Code كسياق ويبني كل عنصر باستخدام الرموز نفسها. لا يستطيع الوكيل استخراج قيمة hex أو حجم مسافة دقيق من لقطة شاشة، لذا عليه التخمين. أما من Markdown فيأخذ الأرقام حرفيًا، فتبدو كل الشاشات وكأنها صادرة «عن مصمم واحد».
إليك تفصيلًا مهمًا تخطئ فيه معظم الإرشادات: لا يوجد زر «Export DESIGN.md» في Stitch. الوكيل هو من ينشئ الملف. ووفقًا للدرس التطبيقي الرسمي من Google، يكون الطلب على نحو تقريبي كالتالي: «انتقل عبر Stitch MCP إلى المشروع، واستخرج لوحة الألوان والطباعة، وأنشئ ملف DESIGN.md منهما». يفترض ذلك الدرس اتصال MCP عاملًا. في المسار اليدوي هنا، يقرأ Claude Code HTML/CSS المصدر بدلًا منه وينشئ الملف المنظم في جذر المشروع؛ ويجب أن يصرح برموز التصميم الناقصة بدل تخمينها من صورة.
يحتوي DESIGN.md على تفاصيل محددة بدلًا من الصفات:
```markdown
# DESIGN.md
## Colors
- Primary: #0F172A
- Accent: #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## Typography
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## Spacing (base 8px)
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## Layout
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## Components
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)
```
لجعل Claude Code يستخدمه، أشر إلى الملف من `CLAUDE.md` (مثلًا بالسطر «استخدم تصميم جميع المكوّنات من `DESIGN.md`»)، وسيحمّل الوكيل الرموز نفسها في كل جلسة. سيظهر الزر الذي بنيته يوم الاثنين والبطاقة التي بنيتها يوم الجمعة بالأسلوب نفسه، لأن هناك مصدرًا واحدًا للحقيقة.
يعمل مرجعان محليان معًا: يحفظ DESIGN.md قواعد الألوان والطباعة والمسافات والمكونات، ويوفر تصدير HTML/CSS وأصول Stitch تخطيط الشاشة المحددة. MCP اختياري وليس شرطًا لهذا المسار.
## كيف تبني موقعًا إلكترونيًا: المسار الكامل من النص إلى التصميم
الخلاصة الرئيسية
للمسار اليدوي الكامل سبع خطوات: تحقق من الإتاحة، وصف المنتج، وأضف مرجعًا، وحسّن شاشة، وصدّر HTML/CSS، وأنشئ DESIGN.md من الملفات، وابن صفحة واحدة وتحقق منها في Claude Code. يتجنب ذلك مصادقة MCP غير المحسومة. ما زال التجاوب والتنقل والتفاعل يحتاج إلى تنفيذ واختبار.
إليك العملية كاملة بالترتيب:
1. **افتح Stitch.** تحقق من الإتاحة في بلدك وادخل `stitch.withgoogle.com` بحساب Google الخاص بك.
2. **صف المنتج.** حدد الشاشات ورحلة المستخدم، وأكد قائمة الشاشات أو عدلها.
3. **أضف مرجعًا.** ارفع اللقطة المقصودة وحدد الألوان والطباعة والتخطيط المطلوب حفظه.
4. **ولّد وصقل.** اختر شاشة واحدة وحسنها قبل توسيع التصميم.
5. **صدّر الشاشة المختارة HTML/CSS.** احفظ الملفات والأصول اللازمة في مجلد مراجع بالمشروع. افتح HTML المصدر محليًا وتأكد من أنه الشاشة المختارة؛ فلقطة الشاشة وحدها لا تحمل قيم CSS الدقيقة.
6. **أنشئ DESIGN.md من التصدير المحلي.** اطلب قراءة HTML/CSS وتسجيل قيم الألوان والخطوط والمسافات والتخطيط والمكونات الفعلية، وسرد الناقص لتقرره. لا يتطلب المسار مفتاح Stitch أو مصادقة MCP.
7. **ابن صفحة وافحصها.** أعط Claude Code الطلبين التاليين مع استبدال اسم المجلد بمسار التصدير المحلي الحقيقي:
```
اقرأ تصدير Stitch HTML/CSS في refs/stitch-export/. أنشئ DESIGN.md في جذر المشروع باستخدام القيم الموجودة في الملفات. حدد الناقص بدل اختلاقه.
```
```
ابن صفحة واحدة من DESIGN.md وتصدير Stitch المحلي. أبق المكونات معيارية. قارن الصفحة المعروضة بالتصدير بعرض الحاسوب والهاتف، ثم تحقق من التنقل وحالات التفاعل مستقلًا.
```
بعد ذلك، يتولى Claude Code كل شيء: التنقل بين الشاشات، والتوافق مع نقاط التوقف الواردة في DESIGN.md، والرسوم المتحركة، والتفاعلية. يوفر Stitch شاشات ثابتة ونموذجًا أوليًا قابلًا للنقر، لكنه لا يبني منطقًا عمليًا ولا ينشر الموقع على خدمة استضافة؛ فهذه مهمة الوكيل.
## كيف تتخلص من «مظهر الذكاء الاصطناعي»: ما الذي ينبغي تغييره تحديدًا؟
الخلاصة الرئيسية
يزول «مظهر الذكاء الاصطناعي» عندما تستبدل الصفات الذاتية بقيود دقيقة. التغييرات الرئيسية ثلاثة: أزل اللون البنفسجي الافتراضي وحدد قيمة hex خاصة بك، وانتقل من Inter إلى توليفة خطوط معبّرة، وزوّد الوكيل بمرجع من موقع حقيقي بدلًا من كلمة «عصري». سجّل كل ذلك في DESIGN.md، وسيتوقف الوكيل عن الانزلاق نحو المتوسط الحسابي للقوالب.
إليك المواضع المحددة التي يتوقف عندها الموقع عن كشف مصدره:
- **اللون.** اللون البنفسجي `indigo-500` هو أول علامة. حدد اللون الأساسي ولون التمييز بقيم hex دقيقة في DESIGN.md. سيفسر كل وكيل عبارة «أزرق العلامة التجارية» بطريقته.
- **الخط.** Inter هو الخط «الخاص بالذكاء الاصطناعي» الأكثر أمانًا، ولذلك يسهل التعرف عليه. اختر توليفة خطوط معبّرة: مثلًا خط sans serif للنص وخط ذي طابع مميز للعناوين. حدده في تصميم Stitch وسجّله في DESIGN.md.
- **مرجع بدلًا من صفة.** يفسر النموذج عبارة «اجعله عصريًا» على أنها «متوسط عام 2020». أما «استخدم تخطيط هذه الصفحة» مع لقطة شاشة حقيقية فيأخذها حرفيًا. ارفع صورة مرجعية إلى Stitch؛ فلا يمكنك نقل ذوقك بالكلمات.
- **المسافات والفسحة.** يسهل التعرف على التخطيط القائم على القوالب من كتلِه المتطابقة والمتكدسة. حدد مقياس مسافات واسعًا في DESIGN.md، وسيضع الوكيل العناصر بقدر أكبر من الحرية.
التحديد أدق من الصفات الذاتية. Stitch أشبه بآلة تحوّل عبارة «أريده بهذا الشكل» إلى رموز دقيقة، فلا يبقى للوكيل ما يخمّنه.
## Google Stitch أم البدائل: أيها تختار؟
الخلاصة الرئيسية
يُعد Google Stitch خيارًا جيدًا عندما تحتاج إلى تصميم من الصفر ولا تملك ميزانية. موقعك مرسوم بالفعل في Figma؟ استخدم Figma MCP. تحتاج إلى شيفرة React جاهزة للاستخدام؟ استخدم v0. تريد أسلوب علامة تجارية معروفة؟ انتقل إلى Refero. تحتاج إلى تطبيق مع خلفية برمجية فورًا؟ استخدم Lovable. بالنسبة إلى من يبرمجون وفق الإلهام وبميزانية محدودة، يُعد Stitch أسهل نقطة بداية، لكنه لا يوفر النشر أو خلفية برمجية.
قارنت الأدوات وفق الجوانب التي تهم فعلًا عند البرمجة وفق الإلهام بميزانية محدودة:
| الأداة | السعر | ما الذي تقدمه | التكامل مع Claude Code |
|----|----|----|----|
| **Google Stitch** | مجاني | تصميم من الصفر انطلاقًا من النص: شاشات وHTML وFigma | تصدير HTML/CSS محلي؛ وMCP عند تحقق إعداد متوافق فقط |
| **v0 (Vercel)** | مجاني + \$20/الشهر | شيفرة React / Tailwind جاهزة للاستخدام، ونشر على Vercel | عبر الطلبات والشيفرة |
| **Figma Dev Mode MCP** | مجاني في النسخة التجريبية | يوفر تصميمًا جاهزًا من Figma لاستخدامه في الشيفرة | MCP الرسمي من Figma |
| **Refero Styles** | مكتبة مجانية | ملفات DESIGN.md جاهزة من مواقع حقيقية | MCP الرسمي من Refero |
| **Lovable** | مجاني + \$25/الشهر | كل شيء في مكان واحد: واجهة + قاعدة بيانات + نشر | منصة منفصلة |
سير العمل الذي أستخدمه: Stitch لاستكشاف التصميم ← Claude Code للبناء والمنطق. بالنسبة إلى من يبرمجون وفق الإلهام وبميزانية محدودة، يتفوق Stitch لأنه مجاني ويرسم مظهرًا فريدًا لمنتجك من الصفر. إذا أردت فهم مجموعة الأدوات المتاحة في السوق كاملة، فقد تناولتها في المقال المحوري [بماذا نبرمج في 2026](https://ailoot.ai/blog/ar/ai-coding-tools/).
## أين يتعثر Google Stitch: ما حدوده؟
الخلاصة الرئيسية
يتعامل Stitch مع واجهة المستخدم فقط: لا خلفية برمجية ولا نشر ولا عروض تقديمية. أدوات التحرير اليدوي محدودة: لا يمكنك تحريك عنصر منفرد كما في Figma، وإنما يمكنك إعادة إنشائه فقط. النتائج غير حتمية؛ فقد ينتج طلب واحد شاشات مختلفة. إضافة إلى ذلك، هناك حد لعدد مرات الإنشاء المجانية من دون خيار شراء المزيد، وحالة تجريبية بلا ضمانات، ومشكلة التفويض في Claude Code.
إليك قائمة صريحة لتجنب خيبة الأمل بحلول الشاشة الثالثة:
- **واجهة فقط.** لا خلفية برمجية ولا قاعدة بيانات ولا نشر على خدمة استضافة. تحتاج إلى Claude Code لذلك (أو Lovable إذا أردت كل شيء في مكان واحد).
- **تحرير محدود داخل الأداة.** لا يمكنك تحريك عنصر منفرد بالفأرة؛ يمكنك تغييره عبر طلب ثم إعادة إنشائه فقط. إنها ليست Figma.
- **عدم الحتمية.** ينتج الطلب نفسه نتائج مختلفة. هذا جيد لاستكشاف الأفكار، لكنه غير مريح عندما تحتاج إلى نتائج قابلة للتكرار.
- **الحصة.** ستبلغ الحد الأقصى للإنشاء المجاني (يوميًا في الوقت الحالي)؛ ولا يمكنك شراء المزيد، لذا عليك انتظار إعادة ضبط الحصة. يختلف العدد الدقيق، فتحقق من الواجهة.
- **حالة تجريبية.** لا تقدم Google Labs التزامًا بدعم طويل الأمد. قد تتغير الخدمة أو تتوقف.
- **قيود جغرافية** ومشكلة تفويض MCP في Claude Code، المذكورتان في قسمي التوفر والإعداد.
لا يناسب Stitch الحالات التي يكون لديك فيها دليل صارم للعلامة التجارية لمشاريع كثيرة، أو يكون التصميم موجودًا بالفعل في Figma، أو تحتاج إلى تطبيق منشور مسبقًا مع خلفية برمجية.
## ما الخطوة التالية؟
الخلاصة الرئيسية
بعد ذلك، أنشئ سير العمل يدويًا: أنشئ أول شاشة في Stitch، واستخرج DESIGN.md، واستخدمه لبناء صفحة واحدة في Claude Code. سيستغرق ذلك أمسية، وسيعالج القلق الأساسي: أن يبدو الموقع كأنه «مولّد بالذكاء الاصطناعي» مرة أخرى. يعتمد الأمر كله على مهارة واحدة: التحكم فيما يدخل إلى سياق الوكيل. أما الباقي فيأتي مع الممارسة.
أنشئ أصغر سير عمل ممكن باستخدام شاشة واحدة: صِف المنتج في Stitch، وأنشئ الصفحة الرئيسية وصدّر HTML/CSS، واطلب من Claude Code إعداد DESIGN.md وبناء الصفحة من تلك الملفات المحلية. عندما ترى التدرّج البنفسجي يختفي من تلقاء نفسه، ستصبح بقية الخطوات أسهل.
التصميم باستخدام Stitch أحد أساليب هندسة السياق. ويجمع النظام الكامل بين نسخة الذكاء الاصطناعي وSecond Brain وهندسة السياق، لكي يتمكن Claude من الاعتماد على قواعد وسياق مُعَدَّين مسبقًا.
### المصادر
- [مدونة Google Developers - Stitch: طريقة جديدة لتصميم واجهات المستخدم](https://developers.googleblog.com/stitch-a-new-way-to-design-uis/)
- [مدونة Google - Stitch وGemini 3](https://blog.google/technology/google-labs/stitch-gemini-3/)
- [Google Codelab - من التصميم إلى الشيفرة باستخدام Stitch MCP](https://codelabs.developers.google.com/design-to-code-with-antigravity-stitch)
- [Figma - إعداد MCP لـ Claude Code](https://help.figma.com/hc/en-us/articles/39888612464151-Claude-Code-and-Figma-Set-up-the-MCP-server)
نسخة الذكاء الاصطناعي وSecond Brain وهندسة السياق مهمة للمنتج. والتصميم باستخدام Stitch هو أول لبنة في هذا المزيج.
لمواصلة العمل مع النماذج، يمكنك الانتقال إلى [Ailoot](https://ailoot.ai/).
## أسئلة شائعة
### ماذا أفعل عندما يعيد Stitch MCP خطأ Incompatible auth server؟
استخدم المسار اليدوي الكامل: صدّر الشاشة المختارة HTML/CSS واحفظ أصولها في المشروع وتحقق من التصدير محليًا، ثم أنشئ DESIGN.md بهذه الملفات. لا يوفر المقال تكوين MCP مثبتًا؛ فلا تعتبر «توصيل MCP» خطوة منجزة.
### كيف أمنع تخمين رموز التصميم في DESIGN.md؟
أعط Claude Code HTML/CSS المصدر بدل لقطة وحدها. اطلب تسجيل القيم الموجودة فعلًا وسرد الألوان والخطوط والمسافات وقواعد المكونات الناقصة لتقررها، ثم قارن صفحة معروضة واحدة بالتصدير.
## Ailoot · الشركة ومحفظة مشاريعها
تستند Ailoot إلى خبرة تشغيلية متراكمة وقاعدة عملاء واسعة وخدمة مستقرة ومراقبة مستمرة لمؤشرات الأداء KPI.
الشركة ومحفظة مشاريعها: ملايين العملاء؛ مبيعات بالمليارات شهريًا.
توظف Ailoot هذه الخبرة التشغيلية لإتاحة الوصول عبر API إلى قدرات الذكاء الاصطناعي في منتجات العملاء ووكلائهم وتطبيقاتهم وعمليات الأتمتة.