المواصفات هي الإطار السلكي الجديد: التصميم القائم على المواصفات في عام 2026
حلّ التصميم القائم على المواصفات محلّ التصميم الأولي. إليك كيف تبدو مواصفات التصميم الممتازة، وكيف يتمّ توجيهها عبر أدوات الذكاء الاصطناعي، وكيفية كتابة أول مواصفات لك.

أصبح الهيكل الشبكي عبئًا لا فائدة منه. المواصفات هي الأداة الأساسية التي تُطلق المنتج الآن.
على مدى عقدين من الزمن، كان الهيكل الشبكي محور تصميم المنتج. مربعات، أسهم، مستطيلات بسيطة، ونصوص مؤقتة. كان أول مُخرَج، أداة المحاذاة، الشيء الذي يُسحب ويُضاف إلى ملف Figma قبل أن يبدأ أي شخص بالتعامل مع وحدات البكسل الحقيقية.
في عام 2026، تراجعت أهمية هذه الأداة بشكل ملحوظ. تُحلل مولدات أكواد الذكاء الاصطناعي النوايا المنظمة بشكل أفضل من تحليلها للهياكل الشبكية، ويُوجه مديرو المشاريع المواصفات مباشرةً إلى Cursor.
يُطلق المهندسون الميزات من ملفات spec.md دون الحاجة إلى رابط Figma. أصبح النموذج الأولي الآن الخطوة الأخيرة، إن وُجد أصلًا.
لا يتعلق الأمر بالأدوات، بل بتحول في أسلوب العمل. المصممون الذين يتعاملون مع المواصفات كأداة أساسية يُنجزون العمل بشكل أسرع، ويُسلمون المنتج بسلاسة، ويتحكمون في مساحة أكبر من تلك التي كانوا يتحكمون بها مع ملفات البكسل. المصممون الذين يواصلون تحريك المستطيلات على لوحة Figma يرون تأثيرهم يتلاشى أمام أعينهم.
لماذا فقدت النماذج الأولية أهميتها؟
اكتسبت النماذج الأولية مكانتها في عالم كان فيه إطلاق شاشة يتطلب أربعة أشخاص، وثلاث مراحل تسليم، وفترة تطوير سريعة. كنتَ بحاجة إلى نموذج أولي منخفض الدقة لأن النموذج عالي الدقة كان مكلفًا. كنتَ بحاجة إلى طبقة ترجمة لأن المهندسين ومديري المشاريع لم يكونوا قادرين على فهم ملف Figma والاتفاق على معناه.
انتهى ذلك العالم. تستطيع أدوات مثل Cursor وClaude Code وv0 وBolt، والأدوات الأربع التالية لها، تحويل وصف مكتوب واضح لميزة ما إلى سطح عمل في دقائق. لا تستطيع هذه الأدوات قراءة نموذجك الأولي، لكنها تستطيع قراءة مواصفاتك.
انتقل مركز الاختناق. أصبحت وحدات البكسل رخيصة الآن، بينما أصبح الهدف هو المورد النادر.
يُشفّر النموذج الأولي التصميم. تُحدد المواصفات الغرض والسلوك والحالات الاستثنائية والشروط التي تكون فيها الميزة صحيحة. خمن أيًّا منها يحتاجه برنامج توليد الشفرة البرمجية فعليًا.
هناك أيضًا تحولٌ هادئٌ يحدث على مستوى الفريق. تداخل دور المصمم كمدير منتج، وبروز دور مهندس التصميم، واختفاء الباحث المتخصص من معظم فرق المنتجات. كل ذلك يُشير إلى اتجاه واحد. العنصر الذي يُناسب هذه الأدوار المتداخلة هو النص، وليس المربعات.
كانت النماذج الأولية في الأساس أداة تخطيط للبشر الذين لم يتمكنوا بعد من رؤية المنتج. تستطيع أدوات الذكاء الاصطناعي إنشاء سطح عمل مقبول من وصف في ثوانٍ. انخفضت تكلفة "دعنا نراه".
عندما يُمكنك إنشاء سطح تفاعلي حقيقي في وقت أقل من الوقت المُستغرق لرسم نموذج أولي بسيط، يفقد النموذج الأولي البسيط جدواه. إما أن تنتقل مباشرةً إلى المواصفات، أو تنتقل مباشرةً إلى النموذج الأولي، وتتجاوز المربعات تمامًا.
يُوضح النموذج الأولي ماذا. تُوضح المواصفات لماذا.
يُجيب النموذج الأولي على سؤال واحد: كيف ينبغي أن يبدو هذا؟ أما المواصفات فتُجيب على الأسئلة الأكثر تعقيدًا: ما الغرض من هذا؟ ولمن هو؟
ماذا يحدث عندما تكون البيانات فارغة؟ ماذا يحدث عند تعطل الشبكة؟ ما معنى النجاح هنا؟
المصمم الجيد في عام ٢٠٢٦ يكتب المواصفات أولًا، ثم يُضيف إليها التصميم المرئي تلقائيًا. وليس العكس. فالتصميم المرئي يأتي لاحقًا للقرار، والقرار مُضمّن في المواصفات.
هذه ليست حكمة جديدة. فقد دأب كبار المصممين على كتابة تبريرات مُنظّمة لسنوات. الجديد هو أن المواصفات أصبحت الآن هي الأصل الذي تستخدمه أدوات الذكاء الاصطناعي مباشرةً، مما يعني أن جودة كتابة المواصفات أصبحت عاملًا حاسمًا.
المواصفات الغامضة تُنتج مخرجات غامضة، وثمن هذا الغموض لم يعد مهندسًا مرتبكًا، بل ميزة غير مكتملة عليك التخلي عنها.
بنية مواصفات التصميم الممتازة
المواصفات التي تصمد أمام كل من المهندسين والذكاء الاصطناعي تتميز ببنية ثابتة. بعد مراجعة مئات من مواصفات التصميم لدى فرق تطوير المنتجات التي تُطلق منتجاتها بسرعة، تبيّن وجود نمط ثابت.

تتضمن مواصفات التصميم العملية سبعة أقسام، بهذا الترتيب:
-
الغاية: فقرة واحدة تشرح سبب وجود هذه الميزة، والمشكلة التي تحلها للمستخدم، والتغييرات التي تطرأ على المنتج بعد إطلاقه.
-
النطاق: ما هو مُضمّن، وما هو مُستبعد بشكل صريح، مع التركيز على قائمة المُستبعدين.
-
السلوك: شرح مُفصّل لما يحدث عند تفاعل المستخدم مع الميزة، بما في ذلك المُحفزات، والحالات، والانتقالات، والنتائج.
-
الحالات الاستثنائية: قائمة الحالات غير المرغوبة التي لا يرغب أحد في كتابتها، ولكن الجميع يحتاجها: حالة فارغة، حالة خطأ، حالة تحميل، رفض الوصول، انقطاع الشبكة، تجاوز حدّ المعدل، بيانات قديمة.
٥. معايير النجاح: كيف نعرف أن النظام يعمل؟ نقيس ذلك بمؤشرات قابلة للقياس، وليس بشكل عام، مثل "معدل حفظ يتجاوز ٤٠٪" وليس "شعور المستخدمين بالرضا عند الحفظ".
٦. التقييمات: ما سنختبره تلقائيًا للتأكد من أن التنفيذ يطابق الهدف، وهذا هو ما يميز سير عمل الذكاء الاصطناعي عن التصميم التقليدي.
٧. إمكانية الوصول والنصوص: متطلبات WCAG، ومسارات لوحة المفاتيح، وسلوك قارئ الشاشة، وكل نص يراه المستخدم، بأسلوب المنتج.
هذا هو جوهر العمل. تضيف بعض المواصفات قسم "المراجع" الذي يربط برموز نظام التصميم، أو الميزات المشابهة، أو السوابق. ويضيف بعضها قسم "المخاطر" الذي يشير إلى الأمور التي يجب على الفريق الانتباه إليها أثناء التطوير. النقاط السبع المذكورة أعلاه غير قابلة للتفاوض.
لاحظ ما هو غير موجود: لا لقطة شاشة، ولا مخطط تخطيط، ولا مخطط تدفق. تصف المواصفات الميزة كمجموعة من القيود والسلوكيات، وليس كصورة.
منهجية التصميم الهيكلي أولاً مقابل منهجية المواصفات أولاً، عملياً
لا يقتصر تأثير التحول من منهجية التصميم الهيكلي أولاً إلى منهجية المواصفات أولاً على المنتج النهائي فحسب، بل يشمل أيضاً تحديد الأدوار والمسؤوليات، وتوقيت العمل، وكيفية سير العمل داخل الفريق.
| البُعد | منهجية التصميم الهيكلي أولاً | منهجية المواصفات أولاً |
|---|---|---|
| المنتج الأساسي | ملف Figma يحتوي على شاشات منخفضة الدقة | مواصفات Markdown، من 200 إلى 500 سطر تقريباً |
| مدة الإصدار الأولي | من 3 إلى 7 أيام | في نفس اليوم، غالباً في نفس الساعة |
| توقيت إدخال بيانات المهندس | بعد اكتمال النموذج الأولي | أثناء صياغة المواصفات |
| استخدام أدوات الذكاء الاصطناعي | محدود، في مرحلة متأخرة | مسار الإصدار الأساسي |
| تغطية الحالات الاستثنائية | تم اكتشافها في قسم ضمان الجودة | مكتوبة مسبقاً في القسم 4 |
| صيغة التسليم | رابط Figma بالإضافة إلى التعليقات التوضيحية | ملف المواصفات بالإضافة إلى رموز التصميم |
| وحدة التكرار | الشاشة أو التدفق | قسم من المواصفات |
| حيث تكمن الغاية | في ذهن المصمم | على الصفحة، كتابةً |
إنّ التركيز على المواصفات أولاً ليس حالة مستقبلية، بل هو أسلوب عمل أسرع فرق تطوير المنتجات حتى عام ٢٠٢٦. أما التركيز على التصميم الهيكلي أولاً فهو ما لا تزال الفرق الأبطأ تسميه "تصميمًا".

كيفية توجيه المواصفات عبر أدوات الذكاء الاصطناعي
المواصفات المكتوبة جيدًا ليست منتجًا نهائيًا يبقى حبيس Notion إلى الأبد، بل هي مدخل.
المواصفات هي ما تلصقه في Cursor عند إنشاء هيكل الميزة. وهي ما تسلمه إلى Claude Code عندما تريد مسارًا عمليًا. وهي ما يقرأه الإصدار v0 عند إنشاء واجهة المستخدم الأولية. وهي ما يستهلكه Bolt عند تشغيل النموذج الأولي.

نفس العنصر، ولكن بتوجيه مختلف، يُشغّل كل جزء من عملية البناء.
يُرجع المهندسون إليه أثناء التنفيذ. وتستخدمه فرق تصميم الأنظمة للتحقق من صحة استخدام الرموز. ويكتب فريق ضمان الجودة اختباراتٍ بناءً على معايير النجاح وأقسام التقييم. حتى فريق التسويق يمكنه استخلاص نص الإطلاق من فقرة الغرض.
هذه هي الميزة الحقيقية لتحول المواصفات إلى وثيقة مرجعية. مصدر واحد موثوق، مكتوب مرة واحدة، يُستخدم من قِبل جميع الأدوات وجميع الأدوار. لا مزيد من "الوثيقة Figma قديمة، لكن التذكرة Linear تحتوي على أحدث نسخة". لا مزيد من مُلاحقة المصممين للمهندسين لتحديث النماذج الأولية بعد اكتشاف قيود في الواجهة الخلفية.
تُحفظ المواصفات في المستودع. وتنتقل مع الكود، وتُراجع في طلبات السحب. عند تغيير المواصفات، يُتتبع التغيير ويُؤرخ ويُنسب الفضل إلى صاحبه. حاول فعل ذلك مع ملف Figma.
كتابة مواصفات تصمد أمام تفاعل المهندسين والذكاء الاصطناعي
أسرع طريقة لاكتشاف المواصفات السيئة هي إعطاؤها لمولد أكواد وقراءة الناتج. إذا كانت المخرجات خاطئة، فالمواصفات خاطئة. النموذج محرر صارم لكنه عادل.
تشترك المواصفات السيئة في سمات معينة. فهي تستخدم مصطلحات فريق المنتج التي لا يفهمها أحد خارج الفريق، وتصف التفاعلات من حيث مكونات واجهة المستخدم ("النافذة المنبثقة") بدلاً من إجراءات المستخدم ("تأكيد المستخدم للحفظ"). كما أنها تتجاهل الحالات الشاذة لأن الكاتب يفترض أن القارئ سيكتشفها. وتخفي معايير النجاح في ذهن المستخدم.
أما المواصفات الجيدة فهي محددة وواضحة. فهي تُسمّي السلوكيات، لا المكونات، وتكتب الحالة الفارغة بلغة إنجليزية بسيطة. وتُعرّف النجاح بأرقام يمكن للنظام قياسها. وهي مملة في القراءة لأن الملل هو ما يصمد أمام الغموض.
اختبار مفيد: أعطِ مواصفاتك لشخص لم يرَ المنتج من قبل، واطلب منه وصف ما يتم بناؤه. إذا استطاع فعل ذلك، فالمواصفات جيدة. أما إذا طرح ثلاثة أسئلة توضيحية، فالمواصفات بها ثلاث ثغرات. قم بتصحيحها وأطلق المنتج.
ملاحظة: مولد الشفرة هو أكثر محرر صادق ستواجهه مواصفاتك. إذا كان البناء خاطئًا، فالكتابة خاطئة.
مواصفات مصغرة كاملة مع شروح
إليك مثال على مواصفات عملية لميزة حقيقية. هذا هو نموذج حفظ البيانات في مجموعة لمنصة SaaS افتراضية، مكتوبة بإيجاز، ويمكن نسخها ولصقها في مستودع اليوم.
# Spec: Save to Collection
## Intent
Users browsing content need a way to bookmark items into named groups
so they can return to them later. Without this, repeat visit rate
drops and high-intent users churn.
## Scope
In: save action on any content card. Collection picker. Default
"Saved" collection. Create new collection inline.
Out: collection sharing. Collaborative collections. Collection
cover images. Reordering items within a collection.
## Behavior
1. User clicks the save icon on a content card.
2. Picker opens, anchored to the card, listing user's collections
plus a "+ New collection" row.
3. User selects a collection. Item is saved. Picker closes.
Toast confirms with collection name and an Undo action.
4. If user selects "+ New collection", inline input appears.
On submit, collection is created and item is saved to it.
## Edge cases
- User not signed in: clicking save opens auth modal,
resumes save action after auth.
- No collections exist: picker shows "+ New collection" only,
with placeholder text "Save your first item."
- Network error mid-save: toast shows error, save action remains
available, item is not marked saved.
- Item already in target collection: picker shows checkmark,
selecting it removes the item from that collection.
- User hits free-tier collection limit: "+ New collection"
row shows lock icon and routes to upgrade.
## Success criteria
- 30%+ of weekly active users save at least one item per month.
- Average user has 2.4+ collections within 30 days of first save.
- 60%+ of saved items are revisited within 14 days.
## Evals
- E2E: save flow completes in under 2 seconds on 4G.
- Unit: collection picker renders correctly with 0, 1, 50 collections.
- Visual: picker anchoring stays within viewport on all breakpoints.
## Accessibility and copy
- Save button: aria-label "Save to collection".
- Picker is fully keyboard navigable. Esc closes.
- Focus returns to save button on close.
- Toast is announced via aria-live="polite".
- Copy: "Saved to [Collection]" / "Undo" / "Save your first item".
تتكون هذه المواصفات من 40 سطرًا تقريبًا، ولا تحتوي على أي تفاصيل. يمكن لأداة ذكاء اصطناعي بناء نسخة عاملة من هذه الميزة منها في خطوة واحدة. يمكن للمهندس تحديد نطاقها في 15 دقيقة، ويمكن لمسؤول ضمان الجودة كتابة خطة الاختبار مباشرةً من قسم التقييمات.
هذا هو المنتج النهائي. ليس ملف Figma. ليس مخطط انسيابي. هذا هو.
كيفية كتابة أول مواصفات لك
إذا لم يسبق لك كتابة مواصفات، فابدأ من هنا. اختر ميزة صغيرة تعرفها جيدًا، وافتح ملف Markdown فارغًا. استخدم القالب المكون من سبعة أقسام أعلاه، واضبط مؤقتًا لمدة 90 دقيقة.
اكتب فقرة الغرض أولًا. إذا لم تستطع كتابة الميزة في ثلاث جمل، فأنت لم تفهمها جيدًا بعد. توقف وفكّر في ذلك قبل المتابعة.
ثم اكتب نطاق الميزة. قائمة "الاستثناءات" هي الجزء الأهم. حاول أن تذكر خمسة أشياء لا تنطبق على هذه الميزة. هنا تكمن نقاط قوة معظم المواصفات.
بعد ذلك، اكتب سلوك الميزة. اكتبه كقائمة مرقمة، بلغة بسيطة وواضحة، كما لو كنت تشرحه لصديق ذكي لم يستخدم المنتج من قبل. لا تستخدم أسماء المكونات أو المصطلحات التصميمية المعقدة، فقط ما يفعله المستخدم وما يحدث.
ستكون الحالات الاستثنائية أصعب جزء في البداية. راجع قائمة سلوك الميزة واسأل نفسك "ماذا لو فشل هذا؟" في كل خطوة.
بيانات فارغة، صلاحيات خاطئة، شبكة بطيئة. تراجع المستخدم في منتصف العملية. اكتب كل حالة في جملة واحدة.
في معايير النجاح والتقييمات، تستبدل التطلعات الغامضة بتطلعات قابلة للقياس. "سيحبها المستخدمون" ليس معيار نجاح، بينما "معدل حفظ يزيد عن 30%" هو المعيار. اختر ثلاثة أرقام يمكنك الدفاع عنها في مراجعة.
أخيرًا، سهولة الوصول والنصوص. اكتب كل نص، وحدد مسارات لوحة المفاتيح، وحدد تسميات aria. هذا القسم يضمن الوضوح التام.
احفظ الملف في المستودع، وليس في Notion. سمِّه spec.md في مجلد الميزة. من الآن فصاعدًا، هذا هو المصدر.
ملاحظة: المواصفات الموجودة في المستودع تنتقل مع الكود. أما المواصفات الموجودة في Notion فتصبح قديمة بمجرد بدء عملية البناء.
مكان نظام التصميم
لا ينجح التصميم القائم على المواصفات إلا إذا كان نظام التصميم الأساسي متينًا. تُحدد المواصفات الغرض، بينما يُوفر نظام التصميم العناصر. إذا كان النظام غير منظم، فإن المواصفات ستنقل هذا الخلل إلى كل ميزة.
الفرق التي تُصدر منتجاتها بسرعة في عام 2026 تتعامل مع نظام التصميم الخاص بها كواجهة برمجة تطبيقات عامة لأدوات الذكاء الاصطناعي. تُسمى الرموز وفقًا للغرض، وليس المظهر. تحتوي المكونات على خصائص موثقة، وسلوك متوقع، وشروط إمكانية الوصول. تُقرأ كل صفحة مكون في النظام كمواصفات مصغرة، تتضمن الغرض، والسلوك، والحالات الاستثنائية، والشيفرة البرمجية.
عندما تشير المواصفات إلى مكون، فإنها تشير إلى عقد ثابت، وليس إلى لقطة شاشة. يكفي قول: "استخدم المكون القياسي Card بمستوى الرفع 2". تقرأ أداة الذكاء الاصطناعي وثائق المكون، وتُقرأ المواصفات كقيود، ويكون البناء متسقًا عبر جميع الميزات.
إذا كان نظام التصميم الخاص بك لا يزال مكتبة Figma مليئة بأنماط محلية غير مُسماة، فعليك القيام ببعض العمل قبل اعتماد منهجية المواصفات الكاملة. وثّق المكونات بلغة إنجليزية بسيطة. سمِّ الرموز بما يُشير إلى معناها. تعامل مع النظام نفسه كأول مواصفات تكتبها.
متى لا تزال النماذج الأولية ضرورية
تحل المواصفات محل معظم النماذج الأولية، ولكن ليس كلها. لا تزال هناك حالات يكون فيها التصميم المرئي البسيط هو الأنسب، والادعاء بخلاف ذلك ليس إلا مُخالفة للرأي السائد.

ثلاث حالات لا يزال فيها استخدام المخطط الهيكلي ضروريًا:
-
التصاميم المبتكرة حقًا: عند ابتكار نمط مكاني جديد، لا يدعمه نظام التصميم الحالي، يجب رسمه، لأن الكلمات وحدها لا تكفي، والفكرة المكانية تحتاج إلى رسم تخطيطي.
-
الأقسام الرئيسية واللحظات التي تُبرز العلامة التجارية: صفحات التسويق، وواجهات الإطلاق، والوحدات الرئيسية حيث يكون التصميم نفسه هو الرسالة، لأن المواصفات لا تُوصل الفكرة بشكل كامل، بينما يُشير المخطط الهيكلي إليها قبل أن يتولى المصمم المرئي زمام الأمور.
-
التوافق القيادي في المؤسسات غير المنتجة: إذا كنت تُقدم عرضًا لفريق تنفيذي لم يتبنَّ بعدُ سير العمل القائم على المواصفات، فإن المخطط الهيكلي لا يزال هو اللغة المشتركة، ويُستخدم كأداة ترجمة وليس كأداة أساسية.
هذه هي القائمة. ثلاث حالات. فيما عدا ذلك، تُعدّ المواصفات الفنية أفضل دليل، ويُفضّل التخلي عن استخدام المخططات الأولية.
ملف أعمال المصممين الجديد
يتبع سؤال ملف الأعمال سؤالَ جودة المنتج. إذا كانت المواصفات الفنية هي العمل، فكيف يبدو ملف الأعمال؟
تبدأ أقوى ملفات أعمال التصميم في عام ٢٠٢٦ بمقتطفات من المواصفات الفنية، لا بنماذج الشاشة. صفحة تتضمن فقرة توضح الغرض من المشروع، وقائمة بالحالات الاستثنائية، ولقطة شاشة للميزة المُنجزة، تُقدّم للمدير المسؤول عن التوظيف أكثر من عشر صور من موقع Dribbble.
فهي تُظهر القدرة على اتخاذ القرارات، والالتزام بنطاق العمل، وقدرة المرشح على أداء الوظيفة المطلوبة.
لا يزال معرض نماذج الشاشة موجودًا، لكنه يُمثّل المستوى الثاني من ملف الأعمال، وليس المستوى الأول. تُظهر الصور الذوق، بينما تُظهر المواصفات الفنية التفكير. يُركّز مديرو التوظيف في الشركات التي ترغب بالعمل فيها على التفكير.
ينبغي على المصممين الذين ينتقلون إلى عام ٢٠٢٦ إعادة بناء ملفات أعمالهم حول ثلاث إلى خمس دراسات حالة، ترتكز كل منها على المواصفات الفنية وتنتهي بالنتيجة النهائية. ليس رابط Figma، بل المنتج المُصدَر. المواصفات هي الأساس.
كيف يُعيد المصممون المبتدئون صقل مهاراتهم
يوجد حاليًا فئتان من المصممين المبتدئين: فئة تتعامل مع أدوات الذكاء الاصطناعي كغشٍّ في الواجبات المنزلية يجب إخفاؤه، وفئة أخرى تتعامل معها كمهارة جديدة. الفئة الثانية فقط هي التي ستحظى بفرصة عمل خلال خمس سنوات.
مسار إعادة الصقل واضح. تعلّم الكتابة، وليس "تعلّم كتابة ملاحظات نقدية على التصميم". تعلّم كتابة نصوص تقنية مُنظَّمة، كما يكتب مدير المشروع وثيقة متطلبات المنتج أو يكتب المهندس طلب تعليقات.
اقرأ المواصفات الجيدة، واقتدِ بها، واطلب من شخص ذي خبرة مراجعة مواصفاتك.
خصّص ساعة يوميًا في Cursor أو Claude Code لمواصفات كتبتها، وراقب ما يتم تنفيذه وأين يختلف عن هدفك. كل اختلاف هو ثغرة في مواصفاتك. أصلحها، ثم أعد المحاولة. هذه الدورة، عند تطبيقها يوميًا لمدة ثلاثة أشهر، ستغير طريقة تفكيرك في التصميم.
توقف عن إضاعة الوقت في دروس حول إضافات Figma. ابدأ بالتركيز على التفكير المنهجي الذي يصمد أمام كل تغيير في الأدوات. المواصفات تبقى، أما التركيز على التفاصيل الصغيرة فلا.
ملاحظة هامة: المصممون المبتدئون الذين يكتبون مواصفات جيدة يتفوقون بمستويين على أقرانهم الذين يركزون فقط على التفاصيل الصغيرة. وتتسع هذه الفجوة أسبوعيًا.
اجمع هذا مع مهارتين جديدتين مرتبطتين. أولًا، تعلم قراءة الكود جيدًا بما يكفي لمراجعة ما تبنيه أدوات الذكاء الاصطناعي من مواصفاتك. لستَ بحاجة لكتابة React للإنتاج، ولكن عليك مراجعة ملف المكون ومعرفة ما إذا كان يطابق السلوك الذي حددته.
ثانيًا، تعلم استخدام دوال التقييم (evals). كتابة اختبار يؤكد أن "الحالة الفارغة تعرض النسخة الصحيحة" أصبح الآن مسؤولية تصميمية، وليس هندسية فقط. المواصفات تحدد الصحة، ودوال التقييم تضمنها. المصمم الذي يتقن كلا الأمرين يعمل على مستوى أعلى بكثير من المصمم الذي يقتصر عمله على تصميم الرسومات.
ماذا يعني هذا للمصممين؟
أصبح تصميم الرسومات مهمة ثانوية، مؤتمتة بواسطة أدوات جاهزة، ومُصنّعة باستخدام قوالب جاهزة. لقد ارتقى دور المصمم. أصبح الآن تصميم الهدف، والالتزام بنطاق العمل، والتفكير في الحالات الاستثنائية، وكتابة نصوص عالية الجودة تُمكّن أدوات الذكاء الاصطناعي من تطوير ميزة بناءً على كتاباتك.
هذا لا يُعدّ تراجعًا في مستوى هذا التخصص، بل على العكس تمامًا. المصممون الذين يكتبون مواصفات جيدة يعملون الآن بشكل أقرب إلى استراتيجية المنتج من أي وقت مضى، ولديهم تأثير أكبر على المنتج النهائي مقارنةً بسير العمل السابق.
مصمم واحد مُتقن لكتابة المواصفات يمكنه تحقيق ما كان يُحققه فريق من أربعة أشخاص. فجوة الإنتاج حقيقية، وتتفاقم أسبوعًا بعد أسبوع.
العمل المطلوب هذا الأسبوع صغير وملموس. اختر ميزة واحدة تعمل عليها، واكتب مواصفاتها، واستخدم الأقسام السبعة. سلّمها لمهندس وأداة ذكاء اصطناعي في آن واحد.
شاهد النتائج. قارنها بما كنت ستُنتجه باستخدام نموذج أولي. الفجوة بين المخرجين هي الفجوة بين النموذج القديم والنموذج الجديد.
كان الهيكل الشبكي مفيدًا لفترة طويلة. المواصفات مفيدة الآن. اكتب المواصفات التالية.
hero:
key: hero
prompt: "voxel illustration. A wireframe and a spec document side by side, with the spec glowing brighter. Soft pastel palette. Editorial. The composition does not include any human figures."
alt: "A wireframe and a design spec document side by side, the spec glowing brighter"
width: 1600
height: 900
inline-1:
key: spec-anatomy
prompt: "voxel illustration showing a spec document with labeled sections: intent, scope, behavior, edge cases, success criteria, evals. Soft pastel."
alt: "A spec document with labeled sections: intent, scope, behavior, edge cases, success criteria, evals"
width: 1400
height: 900
inline-2:
key: workflow-comparison
prompt: "voxel split illustration. Left: designer pushing pixels in figma forever. Right: designer writing a clear spec, AI tools building. Soft pastel. The composition does not include any human figures."
alt: "Split illustration comparing endless pixel pushing on the left to a clear spec driving AI tools on the right"
width: 1400
height: 900
inline-3:
key: spec-routing
prompt: "voxel illustration: a single spec document at the top, branching arrows down into Cursor, Claude Code, v0, Bolt, design system docs. Soft pastel. The composition does not include any human figures."
alt: "A single spec document at the top, branching arrows down into Cursor, Claude Code, v0, Bolt, design system docs"
width: 1400
height: 900
inline-4:
key: when-wireframes-still-work
prompt: "voxel illustration: a few preserved wireframes for novel layouts and hero sections, the rest fading into mist. Soft pastel. The composition does not include any human figures."
alt: "A few preserved wireframes for novel layouts and hero sections, the rest fading into mist"
width: 1400
height: 900
Want a design partner who ships specs that AI tools and engineers both read cleanly? Brainy writes them every day.
Get Started

