AI Tooling أدوات الذكاء الاصطناعي

Flow Linter AI —
from a recurring handoff problem
to a Figma plugin. Flow Linter AI —
من مشكلة متكررة في التسليم
إلى أداة داخل فيجما.

Contextالسياق Personal project · Figma plugin · AI-assisted buildمشروع شخصي · بلاجن فيجما · بناء بمساعدة الذكاء الاصطناعي
Edge cases cataloguedحالات موثّقة 100+ across 5 component typesأكثر من 100 حالة موزّعة على 5 مكونات
Review categoriesفئات المراجعة 13 built from real problems13 فئة مبنية على مشكلات حقيقية
01 — The Problem01 — المشكلة

The same scene, every single handoff.المشهد نفسه، في كل مرحلة تسليم.

The design is complete in its ideal state. Then the questions start. What shows when the table is empty? What if loading fails? What happens when all rows are selected and the data spans multiple pages? التصميم مكتمل في حالته المثالية. ثم تبدأ الأسئلة. ماذا يظهر عندما يكون الجدول فارغًا؟ ماذا لو فشل التحميل؟ ماذا يحدث عند تحديد كل الصفوف والبيانات موزعة على عدة صفحات؟

These cases aren't missed from ignorance. Design is typically built around the happy path — what lies outside it only surfaces during implementation. And every time, the result was the same: the developer stops. Extra review rounds. Design decisions made by the developer because the answer isn't in the spec. هذه الحالات لا تُنسى عن جهل. التصميم يُبنى عادةً حول "المسار السعيد"، وما خارجه لا يظهر إلا عند التنفيذ. وكانت النتيجة واحدة في كل مرة: توقّف المطور، وجولات مراجعة إضافية، وقرارات تصميمية يتخذها المطور بنفسه لأن الإجابة غير موجودة.

02 — The Idea02 — الفكرة

Review the design before the developer has to.راجِع التصميم قبل أن يضطر المطور إلى ذلك.

A tool inside Figma that reviews designs the way a developer about to implement them would — surfacing missing edge cases before handoff, not after. أداة داخل فيجما تراجع التصميم كما يراجعه مطور على وشك تنفيذه — تكشف الحالات الناقصة قبل التسليم لا بعده.

03 — How I Used AI03 — كيف استخدمتُ الذكاء الاصطناعي

The quality came from how I directed it, not the tool alone.جودة النتيجة جاءت من طريقة التوجيه، لا من الأداة وحدها.

I'm not a professional programmer — AI was my build partner. But the output quality came from how I directed it, not the tool alone. لستُ مبرمجًا محترفًا، فكان الذكاء الاصطناعي شريكي في البناء. لكن جودة النتيجة جاءت من طريقة توجيهه، لا من الأداة وحدها.

Rejected surface-level answersرفضتُ الإجابات السطحية
The first list was 10 cases for screens. I pushed deeper multiple times until we reached 100+ cases categorised by component: tables, input fields, dropdowns, modals, notifications. The bar: real value per item, not a generic checklist.أول قائمة اقترحها كانت 10 حالات للشاشات. طلبت التعمق أكثر من مرة حتى وصلنا إلى أكثر من 100 حالة مصنّفة حسب كل مكوّن: الجداول، وحقول الإدخال، والقوائم المنسدلة، والنوافذ، والتنبيهات. المعيار: أن تقدّم الأداة قيمة فعلية لكل بند، لا قائمة عامة.
Designed for reality, not assumptionفكّرتُ في الواقع لا في الافتراض
Many designers don't name their layers and frames — any analysis that relies on names alone would fail. So the tool became screenshot-first as the primary source of truth, with the layer tree as a secondary signal only.لاحظتُ أن كثيرًا من المصممين لا يسمّون الطبقات والإطارات، فأي تحليل يعتمد على الأسماء وحدها سيفشل. لذلك أصبحت الأداة تعتمد على لقطات الشاشة مصدرًا أساسيًا للحقيقة، وشجرة الطبقات مصدرًا مساعدًا فقط.
Fixed false positivesعالجتُ مشكلة الإنذارات الكاذبة
Early on, the analysis flagged elements as "missing" that were present in the design. That destroys user trust immediately. I rewrote the review instructions to check visually first, and only report what is genuinely absent.في البداية كان التحليل يقول إن عناصر "ناقصة" وهي موجودة فعلًا في التصميم — وهذا يُفقد الأداة ثقة المستخدم فورًا. أعدتُ صياغة تعليمات المراجعة لتفحص المرئي أولًا ولا تبلّغ إلا عمّا هو غائب فعلاً.
Tested on a real designاختبرتُ على تصميم حقيقي
Applied the tool to a live order management screen, then reviewed the output with a designer's eye. Found four cases it missed: bulk selection across paginated data, allowed order status transitions, icons with no explained action, coloured rows with no legend. Each became a new review category. طبّقتُ الأداة على شاشة إدارة طلبات فعلية، ثم راجعتُ نتيجتها بعين المصمم. وجدتُ أربع حالات فاتتها: التحديد الجماعي مع تعدد الصفحات، وانتقالات حالة الطلب المسموح بها، وأيقونات ظاهرة بلا وظيفة موضّحة، وصفوف ملوّنة بلا دليل. كل ملاحظة أصبحت فئة فحص جديدة.
04 — The Result04 — النتيجة

Three things that ship with every handoff.ثلاثة مخرجات ترافق كل تسليم.

Figma pluginبلاجن فيجما
Analyses screens and outputs a report sorted by priority: critical, warning, informational. Each item identifies the element, what's missing, and why a developer would stop there. يحلل الشاشات ويُخرج تقريرًا مرتبًا حسب الأولوية: حرج، تحذير، معلومة. يحدد كل بند العنصر نفسه، وما الناقص فيه، ولماذا سيتوقف عنده المطور.
Edge casesحالات
100+
cataloguedموثّقة
Categoriesفئات
13
review typesفئة مراجعة
Componentsمكونات
5
types coveredأنواع مغطاة
Exportable handoff reportتقرير قابل للتصدير
A report ready to copy and attach to any handoff. Missing states are flagged before the developer opens the file, not discovered mid-implementation.تقرير قابل للنسخ والتصدير يُرفق مع كل تسليم. الحالات الناقصة تُرصد قبل أن يفتح المطور الملف، لا في منتصف التنفيذ.
Standalone review promptمنهجية مراجعة مستقلة
The full review methodology exported as a prompt — the same 13 categories — that any designer can use directly with any AI, without installing the plugin.نسخة مستقلة من منهجية المراجعة الكاملة على هيئة prompt — نفس الـ 13 فئة — يمكن لأي مصمم استخدامها مع أي ذكاء اصطناعي دون تثبيت البلاجن.
05 — What I Learned05 — ما تعلّمته

AI accelerated the build. Three things it couldn't do alone.الذكاء الاصطناعي سرّع البناء. ثلاثة أمور لا يقوم بها وحده.

Defining the problem preciselyتعريف المشكلة بدقة
The first outputs were generic because the problem was framed generically. Every improvement in the tool came from tightening the frame — not from the AI, but from knowing what a designer actually needs at handoff.أول المخرجات كانت عامة لأن المشكلة صيغت بعمومية. كل تحسين في الأداة جاء من تضييق الإطار — ليس من الذكاء الاصطناعي، بل من معرفة ما يحتاجه المصمم فعلاً عند التسليم.
Knowing when an answer isn't good enoughمعرفة متى تكون الإجابة غير كافية
The AI would stop when I didn't push. "10 edge cases" feels complete until you know there are 100 worth finding. The quality bar came from me, not from the model.كان الذكاء الاصطناعي يتوقف حين لا أدفعه. "10 حالات" تبدو كاملة حتى تعرف أن هناك 100 تستحق الاكتشاف. معيار الجودة جاء مني، لا من النموذج.
Testing the result against realityاختبار النتيجة على الواقع
Running the tool on a real screen and reviewing it with a designer's eye found cases no prompt could have anticipated. The four findings that became categories didn't exist in theory — they existed in the gap between how design is taught and how developers actually ask questions.تشغيل الأداة على شاشة حقيقية ومراجعة نتيجتها بعين المصمم كشف حالات لم يكن بإمكان أي prompt توقعها. الحالات الأربع التي أصبحت فئات لم تكن موجودة نظريًا — كانت موجودة في الفجوة بين كيفية تدريس التصميم وكيفية طرح المطورين لأسئلتهم.
"My role wasn't writing the code. It was being the designer who knows what a good review looks like — and encoding that into a tool." «دوري لم يكن كتابة الكود. بل أن أكون المصمم الذي يعرف كيف تبدو "المراجعة الجيدة" — ثم أنقل هذه المعرفة إلى أداة.»

Thinking about the handoff problem?تفكّر في مشكلة تسليم التصاميم؟

The gap between what's designed and what ships is almost always about what wasn't designed at all — the edge cases, the empty states, the failure paths. Solving it means making the invisible visible before it becomes an implementation decision.الفجوة بين ما يُصمَّم وما يُشحَن تكاد تكون دائمًا عمّا لم يُصمَّم أصلاً — الحالات الحافة، والحالات الفارغة، ومسارات الفشل. حلّها يعني جعل غير المرئي مرئيًا قبل أن يصبح قرارًا في يد المطور.

Full portfolioمعرض الأعمال الكامل Get in touchتواصل عبر البريد
Design tooling · AI-assisted build · Figma pluginأدوات التصميم · بناء بمساعدة الذكاء الاصطناعي · بلاجن فيجما