استنسخ تصميمًا يعجبك — مع حواجز الأمان الصحيحة

ورشة ليا الجديدة: موقع يبهر

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

احفظ هذا التمييز من الآن، فالفصل كله مبني عليه: نحن لا نستنسخ موقعًا، بل نستنسخ ما يجعله جيدًا — شبكته، نسبه، إيقاعه، تسلسله البصري. أما المحتوى وألوان العلامة والصور فستكون لليا. إنه الفرق بين التعلم من أستاذ وسرقة لوحته.

الخطوة 1: التقط واطلب التحليل

ابدأ بلقطات شاشة للموقع المعجَب به: الصفحة كاملة، ثم تكبيرات للمناطق الأساسية (الترويسة، قسم البطل، شبكة المنتجات، التذييل). اسحبها مباشرة إلى Claude Code — فهو يقرأ الصور أصلًا، في الامتداد كما في الترمينال. لكن لا تطلب «اصنع لي الموقع نفسه»: ستحصل على تقليد تقريبي. اطلب أولًا تحليلًا مهيكلًا، فهو ما يحوّل الانطباع البصري إلى مواصفات قابلة للاستغلال:

حلّل لقطة شاشة الموقع هذه كمصمم خبير (senior).
أعطني تحليلًا مهيكلًا:

1. LAYOUT: بنية الصفحة، الشبكة (عدد الأعمدة، الفواصل)، العرض الأقصى للمحتوى
2. PALETTE: كل لون بصيغة hex، ودوره (خلفية، نص، تمييز، حدود)، ونسب الاستخدام
3. TYPOGRAPHIE: العائلات المحتملة، الأحجام (عنوان/عنوان فرعي/متن)، الأوزان، تباعد الأسطر، حالة الأحرف
4. ESPACEMENTS: الإيقاع العمودي بين الأقسام، الحشوات الداخلية للبطاقات/الأزرار
5. HIÉRARCHIE: بأي ترتيب تتحرك العين، وأي وسائل تصنع هذا الترتيب (حجم، تباين، فراغ)
6. SIGNATURE: الاختيارات الثلاثة التي تمنح هذا التصميم شخصيته

لا تولّد أي كود في الوقت الحالي.

عبارة «لا تولّد أي كود في الوقت الحالي» مقصودة: إنه Plan Mode من الفصل 2 مطبَّقًا على التصميم. تريد أولًا التأكد من أن التحليل يلتقط ما يعجبك في هذا الموقع. اقرأ النقطة 6 خصوصًا — «التوقيع» — وصحّح عند الحاجة: «لا، ما يعجبني أساسًا هو التباين بين الصور الكبيرة والنص الدقيق». هذه المحادثة تؤطّر كل ما يلي.

الخطوة 2: استخراج رموز التصميم (design tokens)

بعد اعتماد التحليل، نحوّله إلى رموز تصميم: متغيرات CSS تقنّن كل قرار بصري (ألوان، أحجام، تباعدات). إنها الخطوة التي تغيّر كل شيء مقارنة بالاستنساخ الساذج: تفصل الرموز نظام التصميم (القابل لإعادة الاستخدام) عن القيم (التي ستستبدلها ليا بقيمها). إليك الموجّه الكامل:

انطلاقًا من تحليلك، ولّد ملف tokens.css يحتوي على رموز التصميم كمتغيرات CSS:

:root {
  /* الألوان: خلفية، سطح، نص، نص ثانوي، تمييز، تمييز-تحويم، حدود */
  /* الخطوط: العائلات، الأحجام (سلّم معياري)، الأوزان، تباعد الأسطر */
  /* التباعدات: سلّم (xs, sm, md, lg, xl, 2xl) متناسق مع الإيقاع الملاحظ */
  /* متفرقات: radius، الظلال، العرض الأقصى للمحتوى */
}

القيود:
- كل متغير مشروح بدوره
- يجب أن يكون سلّم التباعد سلّمًا حقيقيًا (نسبة ثابتة)، لا قيمًا عشوائية
- اقترح بعدها لوحة ألوان ثانية: منطق التباينات نفسه، لكن بألوان علامتي (أخضر مريمية #87A96B، كريمي #F5F0E8، بني #5C4033)

انظر جيدًا إلى القيد الأخير: نطلب التحويل نحو لوحة ليا منذ هذه الخطوة. التصميم المعجَب به يوفّر منطق التباينات (خلفية فاتحة، لون تمييز مشبع يُستخدم باقتصاد، نص يقارب الأسود دون أن يبلغه)؛ والقيم تصبح قيم العلامة. هذه هي اللحظة التي يكفّ فيها المشروع عن كونه نسخة ليصبح إبداعًا مستنيرًا.

الخطوة 3: أعد بناء نسختك أنت

الآن فقط نبني — بمحتويات ليا: منتجاتها، صورها، نصوصها (التي تجيد مهارتك /post كتابتها بصوتها). اطلب صفحة تستهلك الرموز حصريًا: لا لون ولا حجم مكتوب مباشرة في HTML. هذا الانضباط يؤتي ثماره مرتين: تغيير رمز واحد يحدّث الموقع كله، ويمكنك تطوير اللوحة دون لمس البنية.

ابنِ صفحتي الرئيسية بـ HTML/CSS مستخدمًا حصريًا
متغيرات tokens.css (لا قيم مكتوبة مباشرة).

البنية: ترويسة بسيطة، قسم بطل مع صورة مجموعة الواقيات الشمسية،
شبكة من 3 منتجات، شريط «التزامات»، تذييل.
المحتويات: استخدم نصوص content/accueil.md.
الصور: فقط صور مجلد assets/ (صوري).

احترم التخطيط والإيقاع المحلَّلين، لا محتويات الموقع الأصلي.

الخطوة 4: كرّر عبر الفروقات

النسخة الأولى ستكون قريبة لكن غير مضبوطة — هذا طبيعي، وأسوأ رد فعل هو إعادة الطلب جملةً («ليست هي بعد، أعد المحاولة»). الطريقة الصحيحة هي التكرار عبر الفروقات: نقارن بمنهجية، نعدّد، نصحّح نقطة بنقطة. إنها حلقة الصقل نفسها من الفصل 4 لصوت العلامة، مطبَّقة على البكسل:

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

لكل فرق: ما يفعله المرجع، وما تفعله نسختي،
والتصحيح الدقيق (أي رمز أو قاعدة CSS يجب تعديلها).

ثم صحّحها واحدًا واحدًا مع عرض النتيجة في كل خطوة.

لعبارة «واحدًا واحدًا» الوظيفة نفسها كما في تأطير الفصل 3: تجعل كل تغيير قابلًا للملاحظة. إذا أفسد تصحيحٌ المجملَ (يحدث ذلك — التباعد المثالي للمرجع قد يخنق محتوياتك الأكثر كثافة)، ترفضه منفردًا بدل رمي الدفعة كلها. عادةً تكفي جولتان أو ثلاث من هذه الحلقة للانتقال من «مشابه» إلى «إتقان احترافي».

أبعد من ذلك: تحليل البنية الفعلية لصفحة عامة

تُظهر اللقطات النتيجة، لا الآلية. لفهم كيف يتحقق أثر ما (تلك الشبكة التي تعيد ترتيب نفسها بأناقة على الهاتف، تلك الترويسة التي تتقلص عند التمرير)، يمكنك الطلب من Claude جلب رابط URL عام وتحليل HTML/CSS الفعلي — إنها أداة WebFetch التي سمحت بها في الفصل 2:

اجلب https://exemple-de-marque.com وحلّل البنية:
- كيف بُنيت شبكة المنتجات (grid؟ flex؟ breakpoints؟)
- كيف تتعامل الترويسة مع التمرير والهاتف
- أي متغيرات CSS أو اصطلاحات تسمية يستخدمون

الهدف: فهم التقنية لتطبيق المنطق نفسه
على صفحتي، برموزي. لا تنسخ أي محتوى ولا أي أصل (asset).

flowchart LR
  A["لقطة شاشة الموقع المعجَب به"] --> B["تحليل مهيكل (مصمم خبير)"]
  B --> C["رموز التصميم: tokens.css"]
  C --> D["إعادة بناء بمحتوياتك ولوحتك"]
  D --> E["مقارنة جنبًا إلى جنب: 10 فروقات"]
  E -->|"تصحيحات واحدًا واحدًا"| D
  E -->|"بلوغ الإتقان"| F["صفحة ليا على الإنترنت"]

الحدود الأخلاقية والقانونية: استلهم، لا تنسخ

لنتحدث بصراحة عن الخط الذي لا يجوز تجاوزه، لأنه أوضح مما يُظن. أفكار التصميم — شبكة، نسب، إيقاع تباعدات، مبدأ لوحة ألوان ناعمة — لا تُمتلك: كل الويب يستلهم من كل الويب، وهكذا تتقدم المعايير. في المقابل، الأصول (assets) أعمال محمية: الشعارات، الرسوم، الصور، الأيقونات المرسومة خصيصًا، النصوص. نسخها ليس استلهامًا، بل تقليد غير مشروع — بغضّ النظر عن كونه «لمجرد الاستلهام» أو أن Claude فعله نيابة عنك.

حواجز أمان تقنية: إقفال المشروع بـ allow/deny

ورشة إعادة تصميم تعني أوامر كثيرة: تثبيت اعتماديات، خوادم محلية، معالجة ملفات. إنها اللحظة المناسبة لتعميق أذونات الفصل 2 بسياسة allow/deny حقيقية مكتوبة في .claude/settings.json — أي محفوظة في Git ومشتركة مع كل من سينضم إلى المشروع:

{
  "permissions": {
    "allow": [
      "Bash(npm run:*)",
      "Bash(npm install:*)",
      "Bash(git add:*)",
      "Bash(git commit:*)",
      "WebFetch(domain:fonts.google.com)"
    ],
    "deny": [
      "Bash(rm -rf:*)",
      "Bash(git push --force:*)",
      "Read(./.env)",
      "Read(./.env.*)"
    ]
  }
}

اقرأ قائمة deny سطرًا سطرًا، فكل قاعدة تحكي حادثًا تم تفاديه: rm -rf (الحذف التكراري الذي يجرف مجلدًا كاملًا بمسار مبني خطأ)، وgit push --force (الذي قد يمحو التاريخ المشترك)، وقراءة .env — نعم، يمكن منع Claude من قراءة ملف: لن تظهر مفاتيح API أبدًا في السياق، وبالتالي أبدًا في أي رد. وتذكّر الفصل 2: deny تتقدم دائمًا على allow، حتى لو شملتها قاعدة سماح واسعة.

أكمل بـ CLAUDE.local.md لتفضيلاتك الشخصية في الورشة: «خادم المعاينة يعمل على المنفذ 4321»، «لقطات مراجعي في ~/Bureau/refs/». هذه التفاصيل ملكك؛ ولا مكان لها في الذاكرة المشتركة للمشروع.

إذن أم خطاف: قفلان متكاملان

تملك الآن آليتي حماية، ومن المفيد رؤية كيف تتمفصلان بدقة:

قاعدة التوزيع: ما هو محظور دائمًا وفي كل مكان من اختصاص الأذونات — إنه ثنائي، فالأفضل إعلانه مرة واحدة. وما يعتمد على المحتوى («هل يتجاوز هذا المنشور الحد؟ هل يحترم الصوت؟») من اختصاص خطاف، لأن القرار يتطلب فحصًا. الطبقتان معًا، إضافةً إلى الموافقة البشرية عند نقطة الرافعة (الفصل 7)، تشكّلان الدفاع المتعدد الطبقات لنظامك: تستطيع ليا ترك Claude يعمل بسرعة تحديدًا لأن حواجز الأمان لا تنام أبدًا.