من المواصفة إلى الواجهة الأمامية، بلا تسليم في الوسط
وجّه وكيلك إلى ملف DESIGN.md ووصف؛ فيكتب كود واجهة أمامية حقيقية متسقة مع النظام — مكوّنات وشاشات ولوحات معلومات — مباشرة في مشروعك. بلا خطوط مرجعية، بلا «بانتظار التصميم».
في سطر واحد
يُغلق Open Design الفجوة بين المصمّم والمهندس بجعل نظام التصميم قابلاً للقراءة آلياً: الوكيل نفسه الذي يكتب كودك يطبّق النظام ويرسم واجهة حقيقية.
كيف يستخدم المهندس Open Design
- 01
اقرأ النظام، لا خطاً مرجعياً
ملف DESIGN.md يقيم في المستودع. يقرؤه وكيلك كما يقرأ بقية قاعدة الكود — بلا مواصفات مُصدَّرة تحتاج تفسيراً.
- 02
ولّد واجهة متسقة مع النظام
صِف الشاشة أو المكوّن؛ فيكتب الوكيل واجهة أمامية تطابق النظام أصلاً. نماذج أولية ولوحات إدارة وأدوات داخلية — في دقائق.
- 03
إنه كودك أصلاً
الناتج كود HTML / إطار عمل في مستودعك، قابل للمراجعة في PR. بلا خطوة ترجمة بين «التصميم» و«البناء».
ماذا يستطيع المهندس أن يولّد
نموذج أولي اقرأ الأمر كاملاً → صفحة التوثيق
صفحة توثيق تحتوي على شريط تنقل جانبي، محتوى قابل للتمرير وجدول محتويات. استخدمها عندما يذكر الملخص 'توثيق' أو 'دليل' أو 'مرجع API' أو 'برنامج تعليمي'.
نموذج أولي اقرأ الأمر كاملاً → دليل العمليات الهندسية
دليل عمليات هندسي — نظرة عامة على الخدمة، جدول التنبيهات، روابط لوحات المعلومات، إجراءات شائعة مع أوامر قابلة للنسخ، جدول المناوبات، وقائمة التحقق من الاستجابة للحوادث. استخدمه للـ runbook أو مستندات ops أو دليل المناوبة أو مستندات SRE أو 运维手册.
عرض تقديمي اقرأ الأمر كاملاً → مخطط معماري للمعرفة Html Ppt
مجموعة معمارية بمخطط كريمي — قاعدة ورق كريمي #F0EAE0 + تظليل صدئ أحمر واحد #B5392A، قناع شبكة مخطط 48px، بطاقات صلبة بحدود سوداء 2px، صناديق خطوات خط الأنابيب (واحد مرفوع)، إطار رؤية صدئ أحمر على اليمين، خط Playfair serif كبير، حلقة ملاحظات SVG منقطة. بدون تدرجات، بدون ظلال ناعمة، جدي وصديق للطباعة.
عرض تقديمي اقرأ الأمر كاملاً → Html Ppt Tech Sharing
عرض تقديمي للمؤتمرات / جلسات تقنية داخلية — نمط GitHub-dark، خط JetBrains Mono، كتل أكواد طرفية، صفحات جدول أعمال + أسئلة وأجوبة. للعروض الهندسية والجلسات الداخلية والمؤتمرات والشروحات الغنية بالأكواد.
نموذج أولي اقرأ الأمر كاملاً → تقرير تصور البيانات
يحول بيانات CSV أو Excel أو JSON إلى صفحة تقرير مرئي احترافي.
نموذج أولي اقرأ الأمر كاملاً → لوحة كانبان
لوحة كانبان / المهام مع أعمدة (To do / In progress / In review / Done)، وبطاقات قابلة للسحب، وصور رمزية للمكلفين، وممرات سباحة، وشريط تصفية علوي. استخدمها عندما يذكر الموجز 'kanban' أو 'task board' أو 'sprint board' أو 'trello' أو '看板'.
الواجهة الأمامية مع Open Design مقابل طريقة التسليم
| ما تحتاجه | مع Open Design | تسليم من التصميم إلى التطوير |
|---|---|---|
| الحصول على تصميم تبني منه | ●ملف DESIGN.md يقرؤه وكيلك مباشرة | ملف Figma تعيد تفسيره يدوياً |
| مطابقة النظام | ●مفروضة تلقائياً وقت التوليد | تقديره بالعين مقابل مواصفة، فيتسلّل الانحراف |
| بناء أدوات داخلية / لوحات معلومات | ●توجيه ← واجهة أمامية متسقة مع النظام في المستودع | انتظار مصمّم، ثم بناؤه مرتين |
| المراجعة | ●إنه كود — قارن فرقه في PR | مقارنة بكسلية مقابل نموذج |
| التكلفة والقيد | ●مفتوح المصدر، في مستودعك، يعمل محلياً | أداة تصميم يجب أن يرخّصها الفريق كلّه |
واجهة أمامية حقيقية متسقة مع النظام مُولَّدة مباشرة في المستودع. اختر واحدة قريبة مما تبنيه وصِفها.
أسئلة الهندسة الشائعة
-
01 هل ما زلت بحاجة إلى مصمّم؟
للعلامة والتوجيه، نعم. أما لبناء واجهة متسقة مع النظام وأدوات داخلية، فالوكيل يقرأ ملف DESIGN.md ويكتب الواجهة الأمامية — بلا رحلة تسليم.
-
02 ماذا يُخرِج؟
كود HTML / إطار عمل حقيقي في مستودعك، قابل للمراجعة في PR — لا نموذج تعيد تنفيذه.
-
03 كيف يبقى متسقاً مع النظام؟
ملف DESIGN.md هو مصدر الحقيقة؛ يطبّقه الوكيل وقت التوليد، فيطابق الناتج بلا فحص بكسلي يدوي.
-
04 أي الوكلاء أستطيع استخدامها؟
Claude Code وCodex وCursor Agent وGemini CLI ومزيد من المحوّلات الأصلية، بمفاتيح مزوّدك الخاصة.
ولّد واجهتك التالية الليلة
ضع نجمة للمستودع، ثبّت Open Design، وحوّل ملف DESIGN.md إلى واجهة أمامية — داخل الوكيل الذي تستخدمه أصلاً.