# من الفكرة إلى الهندسة في يومين: عملية تصميم قائمة على المواصفات لصفحة الباقات.

> بحثت نيتسا وبنت عملية تصميم قابلة للتكرار، وأوصل أول تطبيق لها صفحة الباقات حتى التسليم (handoff) إلى كوخافا.

- URL: https://shluchim.shinlamed.com/ar/posts/2026-10-08-spec-driven-design-for-the-tickets-page/
- Author: سيفي فيشر (Seffy Fisher)
- Published: 2026-10-07
- Language: Arabic (ar)
- Topics: الذكاء الاصطناعي في العمل
- Hebrew version: https://shluchim.shinlamed.com/posts/2026-10-08-spec-driven-tickets-redesign.md
- English version: https://shluchim.shinlamed.com/en/posts/2026-10-08-spec-driven-design-for-the-tickets-page.md

أردت عملية spec-driven، لكن للتصميم.
أي عملًا يبدأ من مواصفات مكتوبة، لا من إلهام اللحظة.

لا أن نخترع العجلة من جديد،
بل أن نبني شيئًا ينتج جودة عالية ويمكن تكراره.

قلت لنيتسا: ابحثي أولًا في عمليات أثبتت نجاحها.

(Shluchim كلمة عبرية تعني «المبعوثين»، ومفردها shaliach. هكذا أسمّي مساعديّ من الذكاء الاصطناعي.)

وخلال يومين، من 7 إلى 8 أكتوبر 2026، صار سير العمل (workflow) جاهزًا.
وعليه جرى أول تطبيق حقيقي:
إعادة تصميم صفحة الباقات، حتى حزمة تسليم (handoff، أي وثيقة نقل مرتّبة) إلى كوخافا.

وفي النهاية قلت:

```chat
seffy: كان هذا سير عمل ممتازًا حقًّا
```

```chat-he
seffy: זה היה workflow ממש מעולה
```


## اليوم 1، نبني العملية:

بحثت نيتسا في Spec Kit وBMAD وGoogle DESIGN.md وShape Up وGOV.UK وLinear وغيرها.
ومن كل ذلك خرج تقرير بحث مرتّب.

المراحل التي حدّدناها:

1. موجز (brief).
2. لوحة إلهام.
3. Lo-fi (رسم تقريبي) في Figma، بثلاثة اتجاهات بالأسود والأبيض.
4. Hi-fi (تصميم مكتمل) كنموذج أولي حيّ، بنظام التصميم الخاص بـe-vrit (متجرنا للكتب الإلكترونية بالعبرية).
5. مراجعة من عدة نماذج.
6. جولتان أو ثلاث جولات تصحيح على الأكثر، مع بوابة جودة.
7. التسليم (handoff) إلى كوخافا.

المراجعة تعمل هكذا:
Codex وClaude وGemini، كلٌّ منها ثلاث مرّات، أمام سلّم تقييم (rubric) مشترك، أي جدول معايير لإعطاء الدرجات.

يفحص سلّم التقييم التسلسل الهرمي، وسهولة القراءة بالعبرية، والأمانة للعلامة التجارية،
وإمكانية الوصول، ووضوح الإجراء الرئيسي.

نأخذ الوسيط، ونقارن بالصفحة الحية،
ونصنّف الملاحظات بحسب الخطورة: Blocker وHigh وMedium وNit.
وهناك أيضًا أسئلة من منظور شخصيات المستخدمين (personas).

وأُضيف مساعد Replicate للوحات الإلهام.
وأُضيفت مهارات (skills) للتصميم:
Emil Kowalski، وFigma، وAnthropic، وAddy Osmani، وOneRedOak مكيَّفة لـRTL (الكتابة من اليمين إلى اليسار) وللوضع الداكن.

وحُفظ كل شيء كمهارة قابلة لإعادة الاستخدام، اسمها spec-driven-design.


## اليوم 2، التطبيق على صفحة الباقات:

جمع الموجز مصادر كثيرة.
بحث سابق، وملاحظاتي، وصوت العملاء من Glassix، وسياق تجاري من باشِر.
وأيضًا بيانات من GA4 وClarity، وحقائق من الكود من كوخافا.

ماذا أظهرت البيانات:
الهاتف المحمول يمثّل نحو 75% من المستخدمين.

باقة «محبّو الكتب» تجلب نحو 69% من إيرادات الباقات،
لكنها على الهاتف كانت تقع على بُعد نحو 750px إلى الأسفل.

رابط قائمة الكتب كان الأكثر نقرًا.
وكانت هناك نحو 600 نقرة ميتة (dead clicks)، أي نقرات لم تفعل شيئًا، موزّعة على البطاقات.

وبحثٌ في الدفع المسبق مقابل الاشتراك هو الذي شكّل نصوص الصفحة:

- أن نبدأ بعدد الكتب وبالسعر للكتاب الواحد، من دون نسب خصم.
- «دفعة واحدة، من دون اشتراك».
- صلاحية لمدة 5 سنوات.
- سطر صريح واحد بصيغة «ليست لكم إذا».
- الهدية بصيغة «هم يختارون الكتب».

وافقت على الـlo-fi في Figma.
العنوان الذي اختير: «الكتاب التالي صار لك. والذي بعده أيضًا.»

وكان الـhi-fi نموذجًا أوليًا حيًّا بـNext.js.
مع الخطوط، والـtokens، والأغلفة الحية، والأسعار والكميات من API الموقع.

البطاقة الموصى بها اختيرت بحسب ترتيب في قاعدة البيانات (DB)،
لا بقيمة مثبّتة في الكود.

المراجعة: 3 جولات، في 3 نماذج، في 3 مرّات.

في الجولة 1 كانت هناك ملاحظتان بدرجة High أشارت إليهما كل النماذج.
سطر «و29,364 كتابًا آخر» مربك،
ورسم بياني يبدو كأنه من تطبيق مصرفي.

أُصلحت الاثنتان.
وارتفعت درجة Gemini من 69% إلى 92% بحلول الجولة 2.

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

ثم التقط فاحص مستقل، لم يبنِ الصفحة، ملاحظة High فاتت كل النماذج.
فهي لم ترَ إلا لقطات شاشة.
والنقر على الغلاف لم يكن يفعل شيئًا ببساطة.

أُصلح ذلك بسطر واحد،
وتأكّد الإصلاح في 22 نقرة من أصل 22، على الهاتف والحاسوب المكتبي.

أجابت كوخافا عن الأسئلة من داخل الكود،
والتقطت ادعاءً خاطئًا عن الهدية في النصوص.
فالمتلقّي لا يختار كتابًا فورًا، وقد صُحّح ذلك.

تصحيحاتي الحية حُفظت كقواعد ذوق ثابتة:

- من دون تدرّجات لونية.
- الكلمة الأخيرة فقط من العنوان بخط التمييز (accent).
- ألوان البطاقات تلقائية بحسب موضعها، من دون إدارتها في قاعدة البيانات.
- البطاقات الثانوية بالتصميم الكامل نفسه، في كل عرض للشاشة.
- البطاقة الموصى بها وحدها لها عنوان فرعي.

والآن هناك حزمة تسليم لكوخافا،
لتبني ذلك في فرع (branch) مستقل لإعادة التصميم.
بما في ذلك متطلبات قياس قبل A/B (تجربة بين نسختين).


![قبل: صفحة الباقات الحية على الهاتف المحمول، أربع باقات ملوّنة في قائمة طويلة.](https://shluchim.shinlamed.com/images/posts/tickets-before-390.webp)

![بعد: صفحة الباقات الجديدة على الهاتف المحمول، بعنوان «اقرأ أكثر، وادفع أقل» وباقة القصص القصيرة الوردية في أعلى القائمة.](https://shluchim.shinlamed.com/images/posts/tickets-after-776.webp)


## لماذا كان ممتازًا:

هذا ليس «تصميمًا جميلًا».

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

من يوم بحث إلى تسليم جاهز للفريق.


## ما الذي يستحق أن تأخذه من هذا:

**ابحثوا في عمليات مجرّبة قبل أن تبنوا سير عمل.**
نيتسا لم تخترع من الصفر.
التقرير وفّر أسابيع من التجربة والخطأ.

**عدة نماذج، ومعها فاحص لم يبنِ.**
كلٌّ منها يلتقط شيئًا مختلفًا.
لقطات الشاشة فاتها النقر على الغلاف، والفحص التفاعلي التقطه.

**البيانات والكود قبل النصوص.**
GA4 وClarity وGlassix وكوخافا منعت ادعاءات خاطئة.
عن الهدية، وعن موضع الباقة الموصى بها، وعن السعر للكتاب الواحد.

**قواعد الذوق تُحفظ.**
كل تصحيح حيّ مني يصير قاعدة.
والمرة القادمة تبدأ من مستوى أعلى.