Flash DSM - جينوم التصميم الذي يبني به وكلاؤك.
ركّب الأساسيات، وسيتبعها كل مكوّن ووحدة. يعرف جينوم التصميم مكان كل عنصر، وما الذي يتحرك حين يتغير.
تجاوز Figma. ابدأ من نظام التصميم.
بُنيت Figma - وكل أداة تعتمد على لوحة الرسم - لترسم صورًا عن نظام التصميم، لا لتبنيه. ترسم أولًا، ثم تحاول استنتاج نظام من تحت الرسومات، فتطلق كودًا لا يطابق التصميم تمامًا. يقلب Flash المعادلة: ابنِ النظام أولًا، وانتقل مباشرة إلى كود دقيق فعلًا. ولأن النظام قابل للقراءة الآلية، فهو يعمل أيضًا كحواجز أمان لكل ما تولّده أدوات الذكاء الاصطناعي لديك.
اللون والخطوط والتباعد والمكوّنات - مترابطة.
أعطِ Flash موجزًا أو رابطًا أو ملف Figma وسيقصّ لك النموذج: تدرّجات لونية كاملة في السمتين، وزوج خطوط، وتباعد، واستدارات، وحركة، ومكوّنات تشير إليها جميعًا. تلك نقطة البداية، لا المنتج. المنتج هو ما تصنعه منها في المحرر.
صِفه
اكتب موجّهًا، أو الصق رابط موقع منشور، أو اربط ملف Figma. في كل الحالات يستخرج Flash الهوية التصميمية.
اجعله ملكك
يبني Flash مقاييس رموز كاملة - ألوان للوضعين الفاتح والداكن، وزوج خطوط، وتباعد، واستدارات، وظلال، وحركة - وتحرّرها في مكانها. بدّل الخط، وأعد ضبط مقياس، واحذف ما لا يعجبك.
أطلقه
صدّر متغيرات CSS أو إعداد Tailwind أو Tokens Studio JSON. أو ادفع مباشرة إلى GitHub.
- استخراج هوية العلامة
- بناء تدرّجات الألوان
- اختيار أزواج الخطوط
- تشكيل التباعد والاستدارة
- ضبط الحركة والتأثيرات
- ربط المكوّنات
+ 8–14 مكوّنًا خاصًا بالمجال، مربوطة بالرموز
نموذج قَصّ واحد. وأي قماش تريده.
نموذج القصّ عند الخياط يحدد المقاس والدرزات، ولا يحدد لون القماش أبدًا. هذا الفصل هو ما يتيح لنظام واحد أن يكسو شركة بأكملها.
النموذج الذي يتشاركه الجميع
البنية هي الجزء الذي يجب ألا يتغير: ممّ تتكوّن البطاقة، وكيف يوزّع الزر المسافة حول نصه، وما الحالات الموجودة. يحفظ Flash ذلك في مكان واحد، فيقصّ كل منتج على النموذج نفسه.
القماش الذي يختاره كل منتج
اللون والخطوط والاستدارة والحركة. توضع السمة فوق البنية وتُستبدل دون المساس بها، فيبدو فريق مختلفًا تمامًا عن الآخر مع بقاء كل مكوّن مشتركًا بينهما.
لماذا تتعثّر الأنظمة
أطلق مكوّنًا هو في الوقت نفسه لون أزرق بعينه، وسيقول الفريق التالي «هذا ليس أزرقنا» ويكتب مكوّنه الخاص. وبعد شهرين تجد نفسك تصون نظامين. فصل القماش عن النموذج هو ما يمنع ذلك.
هل يطمس نظام التصميم خصوصية العمل؟
إنه يحسم الأمور التي لا ينبغي إعادة البتّ فيها كل مرة، وهذا بالضبط ما يترك متسعًا لما لا يمكن أن يأتي إلا منك.
كل نظام تصميم فريد بذاته
لا يسلّمك Flash قالبًا جاهزًا. الأساسيات والمكوّنات والوحدات - كلها مبنية لتلائم علامتك التجارية، لا العكس.
أسلوبك الخاص
الألوان والخطوط والتباعد تحددها أنت - لا تُنتقى أبدًا من لوحة جاهزة.
فن وتأثيرات وحركة
الرسوم التوضيحية والتأثيرات والحركات والانتقالات جزء من النظام، لا إضافات منفصلة أُلصقت بشاشة واحدة.
مكوّنات ووحدات على طريقتك
ابنِ مكوّنات ووحدات جديدة تطابق رؤية منتجك. لا يقيّدك Flash بمكتبة ثابتة.
لا توجد شعارات عملاء بعد.
Flash جديد، والاقتباسات سهلة الجمع. إليك ثلاثة أمور يمكنك التحقق منها بنفسك قبل أن تدفع شيئًا.
افتح الأمثلة
كل نظام في هذه الصفحة عام. افتح واحدًا، واقرأ الرموز التي أنتجها، وانسخه إلى حسابك وفكّكه. لا شيء هنا مجرد لقطة شاشة.
خذ الملفات وارحل
ملفات التصدير هي tokens.css وإعداد Tailwind وTokens Studio JSON: ملفات عادية كان بإمكانك كتابتها بيدك. وتبقى تعمل سواء بقينا نحن أم لا.
اقرأ التواريخ
كل إصلاح وكل ميزة مدوَّنان مع يوم إطلاقهما. إن تباطأ العمل، سترى ذلك هنا قبل أن يخبرك أحد.
أسئلة؟
ما هو Flash؟
Flash أداة لبناء أنظمة التصميم. من موجّه أو رابط موقع منشور أو ملف Figma، يبني بنية رموز كاملة - تدرّجات ألوان للوضعين الفاتح والداكن، وأزواج خطوط، وتباعد، واستدارات، وظلال، وحركة - مع مكوّنات خاصة بالمجال مربوطة بتلك الرموز. تحرّر، ثم تصدّر CSS أو Tailwind أو Tokens Studio JSON، أو تدفع إلى GitHub.
لماذا تحتاج أدوات البناء بالذكاء الاصطناعي إلى نظام تصميم؟
أدوات مثل Lovable وv0 وBolt تولّد الشاشات بسرعة، لكن كل موجّه جديد يخترع ألوانًا وتباعدًا خاصين به ما لم يثبّتهما شيء. نظام التصميم هو طبقة القواعد تلك: أعطِ هذه الأدوات رموزًا قابلة للقراءة الآلية فيبقى الناتج متسقًا مع العلامة، ويحافظ على تباين مقروء، ويطابق الكود الذي أطلقته بالفعل. يبني Flash هذه الطبقة ويقدّمها بالصيغ التي تقرأها الأدوات فعلًا - kit.md وملفات الرموز وMCP.
لمن صُمم Flash؟
لمهندسي التصميم - أفرادًا أو فرقًا - المسؤولين عن جودة الواجهات ممن لا وقت لديهم لمراقبة الالتزام بنظام تصميم. ومبني أيضًا لفرق التطوير السريعة التي تحتاج نظامًا يواكب سرعة إطلاقها.
هل Flash مجاني؟
نعم، للبدء. كل حساب يبني Genome واحدًا، أي نظام تصميم واحدًا وكل ما يقرأ منه، مجانًا ودون بطاقة. وتضيف Pro وTeam وStudio سحب الوحدات ومزامنة التحديثات وGenome مشتركًا والتسليم للعملاء - راجع صفحة الأسعار لتعرف ما تشمله كل خطة.
هل يمكنني استيراد تصاميمي الحالية؟
اربط ملف Figma، أو الصق رابط أي موقع منشور، أو اسحب من GitHub وStorybook. يستخرج Flash الهوية التصميمية القائمة ويحوّلها إلى رموز منظّمة قابلة للتحرير.
هل يبقى Flash متزامنًا مع Figma وكودي؟
إليك ما يعمل اليوم فعلًا: الاستيراد من Figma أو رابط أو قاعدة كود؛ وتصدير CSS وTailwind وTokens Studio JSON؛ والدفع إلى GitHub؛ وإرسال المتغيرات إلى Figma عبر إضافة Flash. أما المزامنة ثنائية الاتجاه الأعمق - عودة التغييرات تلقائيًا من الكود ومن Figma - فهي في الطريق، ونفضّل أن نقلّل الوعود على أن ندّعي أنها جاهزة.
ماذا يمكنني أن أصدّر؟
صيغ جاهزة للإنتاج: tokens.css بخصائص CSS مخصصة، وامتداد tailwind.config.js، وTokens Studio JSON يذهب إلى Figma ويعود منه، ومواصفات المكوّنات. ويمكنك أيضًا الدفع مباشرة إلى GitHub.
هل يولّد كودًا حقيقيًا قابلًا للاستخدام؟
ملفات التصدير هي متغيرات CSS ورموز Tailwind نفسها التي كنت ستكتبها بيدك، جاهزة للإدراج في قاعدة كودك. لا بيئة تشغيل خاصة، ولا ارتهان لمنصة.
بمَ يختلف Flash عن مولّدات الواجهات بالذكاء الاصطناعي؟
مولّدات الشاشات تعطيك نماذج. أما Flash فيعطيك النظام الذي تحتها: مقاييس متسقة، ورموز دلالية، ودعم الوضعين الفاتح والداكن، ومكوّنات ترجع إلى الرموز بدل القيم الثابتة - ليبقى كل ما تبنيه لاحقًا متسقًا.
هل أملك ما يولّده Flash؟
بالكامل. كل رمز ومواصفة مكوّن وتصدير ملك لك - استخدمها في أعمال العملاء أو المنتجات التجارية أو أدوات التصميم الخاصة بك.