● مجتمع
zanwei
⚡ فوري
design-dna
بواسطة zanwei · zanwei/design-dna
استخرج الحمض النووي التصميمي الكمي من أي واجهة مرجعية — رموز، أسلوب نوعي، تأثيرات بصرية — ثم ولّد مكونات تطابقها.
تأخذ design-dna الصور أو لقطات الشاشة أو الروابط الحية كمراجع وتصدر JSON لـ Design DNA منظم: رموز اللون، مقياس الخط، المسافات، واصفات الأسلوب النوعي، ومعاملات التأثيرات البصرية. أعد تغذية الحمض النووي إلى كلود عند توليد المكونات وستبقى النتائج على هوية العلامة بدلاً من أن تكون Tailwind عاماً.
لماذا تستخدمه
الميزات الأساسية
- استخراج الرموز (اللون، الخط، المسافات، الزوايا) من المراجع
- التقاط الأسلوب النوعي (تحريري / بروتالي / زجاجي)
- التقاط التأثيرات (ظل، ضبابية، حبيبات، تدرجات) مع المعاملات
- يُخرج JSON قابلاً للنقل — أعد تغذيته لأي LLM لتوليد الكود
- يعمل من الصور أو لقطات الشاشة أو الروابط الحية
عرض مباشر
كيف يبدو في الممارسة
جاهز
حالات الاستخدام
استخدامات عملية: design-dna
متى تستخدمه: تضيف شاشة لتطبيق قائم وتريدها أن تبدو طبيعية.
الخطوات
-
الحمض النووي من رابط حي
Use design-dna. Extract DNA from https://app.example.com/dashboard (logged-in screenshot).✓ تم النسخ
→ الحمض النووي يعكس المنتج الفعلي
-
مراجعة فروق الرموز
Compare DNA to our existing tailwind.config — flag drift.✓ تم النسخ
→ قائمة الانجراف (مثل: shadow-md غير متسق عبر الصفحات)
-
توليد الشاشة الجديدة
Generate the new 'Settings' screen using our reconciled DNA.✓ تم النسخ
→ شاشة لا تمييز بينها وبين بقية التطبيق
النتيجة: منتج متجانس حتى عند إضافة شاشات بعد أشهر.
المزالق
- الرابط الحي خلف مصادقة — الحمض النووي من الصفحة العامة يُضلّل — استخدم لقطة شاشة بعد المصادقة لا صفحة التسويق
متى تستخدمه: تبدأ تطبيقاً وتريد نظام تصميم متماسك بسرعة.
الخطوات
-
اختيار 3 مراجع
Use design-dna. Extract DNA from 3 screenshots I admire (editorial, app, marketing).✓ تم النسخ
→ 3 كائنات حمض نووي منفصلة
-
التركيب
Synthesize a single DNA emphasizing the editorial type scale and the app's spacing.✓ تم النسخ
→ حمض نووي مدموج
-
إخراج نظام البداية
Generate tailwind.config, CSS vars, and a Button + Card + Input set using the merged DNA.✓ تم النسخ
→ نظام تصميم ابتدائي في المستودع
النتيجة: خط أساس متجانس يمكنك التكرار منه بدلاً من البدء من Tailwind الافتراضي.
المزالق
- تركيب جماليات متباينة كلياً ينتج فوضى — اختر مراجع تشترك في 'عائلة' — تنويعات ضمن أسلوب واحد لا أضداد
التركيبات
اجمعها مع خوادم MCP أخرى لتحقيق نتائج x10
حفظ الحمض النووي + المكونات المولّدة في المستودع
Save design.dna.json under /design/ and check in; treat it as design source-of-truth.✓ تم النسخ
توليد عروض شرائح تطابق جماليات منتجك
Use design-dna to capture our brand; pass to frontend-slides-skill for matching deck templates.✓ تم النسخ
التكلفة والحدود
تكلفة التشغيل
- حصة API
- يعتمد على LLM للرؤية
- الرموز لكل استدعاء
- الاستخراج ~3000–8000 رمز (إدخال صورة + خرج JSON)
- التكلفة المالية
- مجاني؛ تدفع لمزود LLM
- نصيحة
- خزّن الحمض النووي لكل مشروع؛ أعد الاستخراج فقط عند تجديد العلامة التجارية الفعلي
الأمان
الصلاحيات والأسرار ونطاق الأثر
الحد الأدنى من الصلاحيات: filesystem-read (images) Outbound HTTPS (URL refs)
تخزين بيانات الاعتماد: لا يوجد (مصادقة LLM للرؤية عبر متغير البيئة)
نقل البيانات الخارجي: مزود LLM للرؤية؛ جالب URL (إن استُخدم)
- لا تستخرج الحمض النووي من أصول محمية بحقوق الطبع ليس لديك حق استخدامها كمرجع؛ الخرج قد يحمل سمات مميزة
استكشاف الأخطاء
الأخطاء الشائعة وحلولها
الاستخراج يفوّت التدرجات
استخدم --fidelity high؛ الإعداد الافتراضي يتجاوز التدرجات الخفية لتوفير الرموز
رموز الحمض النووي تختلف من تشغيل لآخر
نماذج الرؤية عشوائية — عيّن seed إن أمكن؛ أو استخرج مرتين وخذ القيم الوسطى
الكود المولّد يستخدم أنماط مضمّنة بدلاً من رموز التصميم
مرّر --token-mode strict؛ المهارة سترفض تضمين القيم الموجودة كرموز
استخراج الرابط الحي فارغ
الموقع يتطلب JS؛ استخدم لقطة شاشة مُصيَّرة بالكامل بدلاً من جلب الرابط
البدائل
design-dna مقابل البدائل
| البديل | متى تستخدمها | المقايضة |
|---|
| design-extract (Manavarya09) | تريد تصدير رموز تصميم كاملة بما فيها DTCG + محولات متعددة المنصات | أثقل؛ خط أنابيب نظام تصميم كامل مقابل حمض نووي خفيف الوزن |
| Manual style guide curation | لديك مصمم ومكتبة أنماط | أبطأ؛ أكثر موثوقية |