العربية

→ العودة إلى القائمة

48K Star Repository: 66 design systems to stop AI writing frontends

itadol5j

الهندسة المعمارية

of حل مشكلة كتابة AI الكتابة المقدمة UI قبيحة: العينين في مكان معين

ما المشكلة في النهاية الأمامية؟يو آي قبيحلا أعلم وكثيراً ما يفتقر الواجهة الأمامية التي يولدها وكيل الوكالة إلى إحساس بالتصميم، والخلط بين اللونين، وعدم تنسيق التصميم.

هذا المستودعلقد انتهىمنظمات أخرى 66 ملف DESIGN.mاجعل عميلك المسؤول يولد مباشرةالدقة على مستوى البكسللا أعلم

ما هو ديسيغين؟

DESIGN.md The new concept introduced by Google Stitch:

  • نظام تصميم النصوص النقية: Markdown file definition UI design specifications
  • LLM هو أسهل من يفهم.: Markdown is the best format for LLM
  • لا حاجة، فيغما.: No export of design files, no need of JSON schema
  • Insert: ضعه في الدليل الجذري عميل "آي آي" يفهم على الفور

مقارنة:

الوثائق من سيقرأها؟ تعريف ماذا؟
الوكالة الأقسام How to Build Project
DESIGN.md قوانين التصميم How the project should be presented

66 نظام تصميم

إنها متاحة66 ملفا متاحا بسهولةفي جميع المجالات:

AI Corporation

  • Claude, OpenAI, Cohere, Eleven Labs, Mistral AI, XAI, etc.
  • Google Gemini, Together AI, VoltAgent, etc.

أداة تطوير

  • Vercel, Cursor, Raycast, Warp, Loveable, Expo
  • Supabese, Stanley, Linear, PostHog, Sanity, etc.

التكنولوجيا المالية

  • Stripe, Coinbase, Binance, Revolut, Wise
  • Kraken, Airtable, etc.

موقع براند

  • Apple, Tesla, Nike, BMW, Ferrari, Lamborghini
  • Spotify, Airbnb, Pinterst, Uber, The Verge, etc.

أداة التصميم

  • Figma, Framer, Miro, Webflow, Notion, etc.

أساليب الاستخدام

ثلاث خطوات:

# 1. 复制 DESIGN.md 到项目根目录
# 比如：复制 vercel/DESIGN.md 到你的项目

# 2. 告诉 AI Agent 使用这个设计
"用 DESIGN.md 的设计规范，帮我生成一个首页"

# 3. AI Agent 生成像素级精确的 UI

هذا هو! العميل الآي:

  • اقرأي التعليمات الملونة
  • تطبيق العناصر والشخصيات الصحيحة
  • استخدام المباعدة والمخطط الصحيح
  • المكونات الجينية التي تناسب نظام التصميم

ماذا يحتوي ديسيغين؟

يحتوي كل ديسيجين.9 فصول كاملة لرمز التصميم:

الفصل المحتويات
المواضيع الافتراضية الغلاف الجوي، الكثافة، تصميم الفلسفة.
2 - قواعد العقيدة الاسم الرمزي + Hex + Function Role
3- قواعد الاشتباك الأسرة النابضة، التسلسل الهرمي الكامل
4 - الإطارات المكونة Buttons, cards, input frames, navigation, etc.
5- مبدأ الشباب نسبة المباعدة، شبكة، فلسفة فارغة
6. Depth level نظام الظلال، المستوى السطحي
7- التوجيه المعياري أعمدة التصميم والطريقة العكسية
الرد نقاط، لمس الأهداف، استراتيجيات مطوية
الوكيل هنت إشارة لون سريع، تلميح جاهز

كل موقع يحتوي

  • DESIGN.mdوثيقة نظام التصميم (يقرأ وكيل الأمين العام)
  • أنا آسف.الرؤية الافتراضية (الكول، الفونت، المكونات)
  • لا أعلم: دارك مودي بريفيو

نظام تصميم النماذج

عدة أمثلة كلاسيكية:

فيركل

  • Black " White Precision, Geist Font
  • البساطة القصوى، الأولوية الرمزية

تفاح

  • عدد كبير من ابيض اف بي اي
  • صور على مستوى الأفلام، حواس متطورة

تعري

  • التدرج الأرجواني اللامع
  • الوزن 300

تيسلا

  • التصميم المخفض للغاية
  • التصوير الفوتوغرافي الكامل على مستوى الأفلام

موجز

لا أعرف ماذا أقول غيّر تماماً الطريقة التي يكتب بها (آي آي):

  • 66 ملفا متاحا بسهولة
  • تغطية شركات مكافحة الإرهاب، المطورون الأدوات، التمويل، العلامات التجارية، إلخ.
  • النموذج الحصري للعلامات، من الأفضل فهمها
  • ثلاث خطوات كافية: ترجمة:
  • مفهوم غوغل ستيتش، المدعوم رسميا

منذ ذلك الحين، كتبت منظمة العفو الدولية النهاية الأمامية لم تعد قبيحة.

GitHub:https://github.com/VoltAgent/awasome-design-md

Google Stitch:https://stitch.withgoogle.com/docs/design-md/overview/