زيد التعليقات التوضيحية للنماذج الأولية ديال AI باش تولّي المتطلبات مكتوبة وواضحة

Prototype Notes Skill مخصّص لـ HTML Demo والمشاريع ديال الواجهة الأمامية.

فهاد المدة الأخيرة، وليت كنفضّل نخلي AI يولّد مباشرة صفحات النماذج الأولية وكود الواجهة الأمامية.

الصفحة كتوجد بسرعة، ولكن كيبانو معاها مشاكل جديدة:

«منين كتضغط على هاد الزر، خاص تأكيد ثاني.»

«هاد الصورة ما زويناش، بدّل طريقة عرضها.»

«منين كنبدلو التصنيف فالجدول، خاص البيانات اللي لتحت حتى هي تتصفّى.»

فين خاصنا نكتبو هاد الكلام؟

كتصيفط screenshot، كترسم دوائر حمراء، كتكتب وثيقة، ولا كتزيد ملاحظة فالمجموعة، ومن بعد المطوّر كيبقى كيقلب فالصفحة مدة طويلة. منين كتتبدل الصفحة، screenshot القديمة كتولي ما صالحةش؛ ومنين كتكثر الملاحظات، السياق وسط محادثة المجموعة كيضيع بسهولة.

لهذا صايبت Skill سميتو: Prototype Notes (التعليقات على النموذج الأولي). كيضيف طبقة مستقلة ديال أدوات التعليق فوق نموذج HTML ولا بيئة تطوير الواجهة، وكيخلي المتطلبات وملاحظات التعديل فالمكان اللي وقعات فيه.

شنو كيدير بالضبط؟

ببساطة، بحال إلا ركّبتي فالموقع طبقة ديال «ملاحظات فالمكان».

منين كتفعّل وضع التعليقات، كدير كليك يمين فأي بلاصة فالصفحة، وكتختار تزيد واحد من جوج أنواع ديال المحتوى:

شرح المتطلبات: موجّه لمدير المنتج، باش يوصف متطلب جديد ولا تغيير فمتطلب، مع إمكانية تحديد الأولوية والحالة وإضافة بزاف ديال الشروحات.

ملاحظة تعديل: موجّهة للمراجع، باش يقترح ملاحظات ديال المراجعة. خاصو يكتب الاسم ديالو، ولكن ما كيحتاجش يحدد الأولوية ولا الحالة.

>من بعد تفعيل وضع التعليقات، دير كليك يمين واختار نوع التعليق اللي بغيتي تزيد

من بعد الإرسال، كيتختصر الشرح وكيولي أيقونة صغيرة فالصفحة. المطوّر كيكليكي على الأيقونة باش يشوف السياق، وما كيبقاش محتاج يخمّن «شنو هو المكان المقصود فـ screenshot».

الوظائف الرئيسية

01 فصل شرح المتطلبات على ملاحظات المراجعة

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

>شرح المتطلبات: محتوى متعدد، الأولوية، حالة الإضافة أو التغيير، ووقت الحفظ

>ملاحظة التعديل: كتب اسم المراجع وسجّل اقتراح المراجعة مباشرة

02 علامة وحدة تقدر تحمل بزاف ديال الشروحات

ما كاينش علاش نعمروا نفس المكان بصف كامل ديال الأيقونات. علامة متطلب وحدة تقدر تزيد ليها شروحات متعددة، وعلامة ملاحظة التعديل حتى هي تقدر تحمل ملاحظات كثيرة، مع إظهار العدد فشارة صغيرة.

03 العلامة والنافذة العائمة قابلين للتحريك

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

04 تقدر تلصق الصور مباشرة فالشرح

إلا كان الكلام بوحدو ما كافيش، نسخ screenshot ولسّقها مباشرة فالشرح الحالي. الصورة كتتصغّر أوتوماتيكياً وكتتحفظ مع بيانات التعليق، وتقدر تحيدها بوحدها.

05 وضع القراءة العادي للقراءة فقط

فالمشاهدة اليومية، ما يمكنش تبدّل المحتوى بالغلط، وما كيتعطّلش الكليك اليمين العادي. غير منين كتفعّل وضع التعليقات بإرادتك، كتقدر تزيد أو تعدّل أو تحرك أو تستورد أو تحيد العلامات.

>وضع المشاهدة العادي: تقدر تشوف الشرح، ولكن ما كايناش عمليات التعديل والحذف

06 الحفظ الأوتوماتيكي فـ JSON داخل مستودع Git

بيانات التعليقات كتتحفظ فالمجلد الرئيسي ديال المشروع:

.prototype-notes/annotations.json

من بعد الحفظ أو التحريك أو الاستيراد أو الحذف، بيئة التطوير كترجع تكتب هاد الملف أوتوماتيكياً. منين كيدفعو أعضاء الفريق التغييرات لـ Git، التعليقات كتقدر تبقى مع المشروع، وتدوز من المراجعة، ويتحافظ على تاريخها. الاستيراد والتصدير اليدويين باقيين متوفرين كحل لاسترجاع البيانات فحالة العطب.

07 البناء النهائي ما كيدخلش فيه كود التعليقات

هادشي ماشي أداة كتدير «إخفاء بالكليك» وكتدّعي الأمان. مشاريع Vite كتحمّل وقت التشغيل غير فـ وضع التطوير، وواجهة الحفظ كتكون مربوطة غير بسيرفر التطوير؛ ومشاريع HTML الثابتة تقدر تحيد منها هاد المكوّن قبل النشر. الهدف من فحص النشر هو أن ما يبقى حتى وقت تشغيل ديال التعليقات ولا محتوى ديالها فالناتج النهائي.

شي أفكار صغيرة عجباتني

أيقونة زرقاء للوثائق وأيقونة برتقالية للملاحظات. حتى بلا ما تحل النافذة العائمة، تقدر تعرف واش هادي متطلبات المنتج ولا ملاحظة مراجعة.

الكليك اليمين كيتحكّم فيه غير فـ وضع التعليقات. فالاستعمال العادي ما كيتدخلش، ومنين كتحتاج تسجّل ملاحظة كتفعّلو.

كل شرح فيه آخر وقت ديال الحفظ. المطوّر يقدر يعرف واش النسخة اللي كيشوف هي فعلاً آخر نسخة محدثة.

التخزين المحلي كحل احتياطي. إلا فشل الحفظ الأوتوماتيكي، المسودة اللي فالمتصفح ما كتضيعش مباشرة، وشريط الأدوات كيعرض «فشل المزامنة».

علامة المصدر مدمجة. النسخة الحالية كتعرض «مختبر AI ديال ني هاو»، وكتخلي نفس العلامة القابلة للتحقق فـ وقت التشغيل وأدوات التطوير وJSON المصدّر.

شنو المشكل اللي كيحلّو؟

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

ثانياً، كيقلّل الوقت اللي كيضيعو المنتج والتطوير فالبحث على المكان. العلامة مربوطة بالعنصر المحدد، ومنين كتفتح الصفحة كتعرف مباشرة فين خاص التعديل.

ثالثاً، كيفصل بين متطلبات المنتج وملاحظات المراجعة. كيبان بسرعة شكون اقترحها وشنو طبيعتها.

رابعاً، كيدخل نموذج AI الأولي فعلاً فدورة التطوير. AI كيتكلف بالتوليد السريع، وطبقة التعليقات كترجع الملاحظات الجديدة لـ AI ولا للمطوّر.

خامساً، ما كيضحّيش بأمان النشر. التعليقات كتنتمي غير لبيئة التطوير والمراجعة، وما كتولّيش وظيفة فالمنتج النهائي.

كيفاش تستعملو فمختلف الحالات؟

الحالة الأولى: AI ولّد Single-page HTML Demo

خلي AI يستعمل Prototype Notes Skill باش يركّب طبقة التعليقات، ويشغّل خدمة التطوير المحلية المرافقة. المنتج كيدير كليك يمين فالصفحة وكيكتب المتطلبات، ومن بعد الحفظ كتدخل أوتوماتيكياً لـ JSON ديال المشروع. منين كتسالي المراجعة، حيّد وقت التشغيل ومن بعد نشر الصفحة الثابتة.

الحالة الثانية: مشروع Vue / React + Vite للواجهة الأمامية

الـ Skill كيدخل وقت التشغيل فمجلد أدوات التطوير، وكيركّب إضافة للحفظ كتخدم غير فـ سيرفر التطوير. شغّل أمر التطوير العادي ديال المشروع واستعملها؛ وفالبناء النهائي ما كيتحمّلش وقت تشغيل التعليقات.

الحالة الثالثة: مدير المنتج والمطوّر خدامين فنفس مستودع Git

من بعد ما كيحفظ مدير المنتج العلامات، كيدفع annotations.json، والمطوّر كيسحب الكود ويشوفها فالصفحة الأصلية؛ ومن بعد ما يكمل التعديلات كيدفعها من جديد. Git كيتكلف بالإصدارات والدمج والتاريخ، وأداة التعليقات كتتكلف بالتعبير فالمكان الحقيقي داخل الصفحة.

الحالة الرابعة: مراجعة التصميم أو العمل

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

الحالة الخامسة: اجتماع مراجعة بصلاحية المشاهدة فقط

منين كتسد وضع التعليقات، المشاركين باقي يقدرو يكليكو على الأيقونات ويشوفوها، ولكن ما يقدروش يعدّلو؛ وتقدر حتى تخبي جميع العلامات بكليك واحد باش ترجع الصفحة للعرض النقي.

كيفاش تركّب وتستعمل الـ Skill؟

هاد الـ Skill مازال ما تحلّش المصدر ديالو للعموم. إلا بغيتي تجرّبو:

تابع «مختبر AI ديال ني هاو»

صيفط فـ الخاص الكلمة المفتاحية: التعليقات على النموذج الأولي
وغادي نصيفط ليك الملف المضغوط ديال Skill ودليل الاستعمال.

من بعد ما توصلك الحزمة المضغوطة، فكّ الضغط عليها فمجلد Codex Skill الشخصي:

C:\Users\اسم المستخدم ديالك\.codex\skills\prototype-notes

عاود حل مهمة Codex، ومن بعد تقدر تستعملها بهاد الشكل:

استعمل $prototype-notes باش تزيد وظيفة التعليقات للنموذج الأولي الحالي ديال HTML.

وتقدر حتى تقولها بلغة طبيعية، بحال:

«ركّب التعليقات على النموذج الأولي لهاد المشروع Vue/Vite، وخلي البيانات تتحفظ أوتوماتيكياً فـ Git JSON، وما تدخلش كود التعليقات فالبناء النهائي.»

«زيد لهاد Single-page HTML Demo شرح المتطلبات وملاحظات التعديل الموقّعة، وساعدني نشغّل المعاينة المحلية.»

مشاكل شائعة فالاستخدام

1. الصفحة كتتحل، ولكن من بعد الحفظ JSON ما تبدّلش

فالغالب كتكون كتستعمل سيرفر ثابت عادي. المتصفح ما يقدرش يكتب مباشرة فملفات Git، خاصك تستعمل خدمة تطوير HTML اللي ركّبها الـ Skill، ولا تفعّل إضافة التطوير المرافقة فـ Vite. منين كيبان فشريط الأدوات «فشل المزامنة»، التخزين المحلي باقي كيحتافظ بالمسودة.

2. منين كتبدّل الحاسوب ما كتبانش التعليقات

تأكد بلي .prototype-notes/annotations.json تدار ليه commit فـ Git، وبلي الطرف الآخر سحب آخر كود. localStorage غير حل احتياطي فالحاسوب المحلي، وماشي وسيلة مشاركة للفريق.

3. ما كيباناش قائمة التعليقات فالكليك اليمين

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

4. من بعد تغيير تصميم الصفحة، العلامة ولات بعيدة على المكان

فـ وضع التعليقات، جرّ الأيقونة للمكان الجديد. بالنسبة للمناطق المهمة اللي كتتبدل بنيتها بزاف، تقدر تخلي AI يزيد data-prototype-anchor ثابت، باش ما يبقاش الاعتماد على مستويات DOM اللي كتتبدل بسهولة.

5. وقع تعارض فدمج annotations.json مع Git

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

6. خايف نصيفط متطلبات داخلية ولا screenshots للخارج

محتوى التعليقات، أسماء المراجعين، مسارات الصفحات، والصور الملصقة يقدرو كاملين يحتويوا على معلومات حساسة. خاص المشروع يستعمل مستودع خاص؛ وما تعرضش خدمة التطوير المحلية على شبكة ما كتتّقش فيها، وما تنشرش مجلد .prototype-notes على الإنترنت.

7. الصور كثار والمتصفح ما بقاش قادر يخزنهم

وقت التشغيل كيضغط الصور وكيحد من عدد الصور فكل شرح، ولكن screenshots ما زال تقدر تكبّر حجم JSON. من الأفضل تخلي غير الصور المرتبطة مباشرة بالمشكل، وقصّ الصور الكبيرة قبل ما تلصقها.

فالأخير

AI خلّى «صايب صفحة» تولّي أسرع فأسرع، ولكن الطريق من الصفحة حتى للمنتج القابل للتسليم ما زال محتاج متطلبات واضحة، ومراجعة، وتعاون.

ما صايبتش هاد الـ Skill باش نعاود نبني نظام ضخم لتدبير المشاريع، ولكن باش نسد واحد النقص صغير وواضح:

نخلي الملاحظات تبقى فالمكان اللي وقعات فيه فعلاً.