مولّد DESIGN.md

أنشئ ملف DESIGN.md من موقع ويب حي. أدخل رابطه، فيبني المولّد الملف الذي يقرؤه وكيل البرمجة لديك: رموز الألوان والخطوط والمسافات والمكونات، مع قواعد استخدامها. جديد على هذه الصيغة؟ اقرأ ما هو ملف DESIGN.md.

كيف يبني المولّد ملف DESIGN.md

  1. أدخل رابط موقع ويب

    أي صفحة عامة تصلح: موقع تسويقي، أو موقع توثيق، أو الصفحة الرئيسية لتطبيق ويب. أنشئ حسابًا أولًا؛ فكل عملية تستهلك رصيدًا من باقة مدفوعة مسبقًا.

  2. المولّد يقرأ الموقع

    يفتح الموقع في متصفح حقيقي ويقيس الألوان والخطوط والمسافات واستدارة الحواف والمكونات التي يستخدمها فعلًا. تأخذ العملية بمستوى Pro عيّنة من نحو خمس صفحات من الموقع. وتستغرق كل عملية دقيقة واحدة على الأقل.

  3. تحصل على ملف DESIGN.md

    توضع الرموز في مقدمة YAML (front matter)، وقواعد استخدامها في نص Markdown: Overview و Colors و Typography و Layout و Elevation and Depth و Shapes و Components و Do's and Don'ts. يمكنك نسخه أو تنزيله أو تعديله في «عمليات الاستخراج».

مثال على المخرجات: ملف DESIGN.md الخاص بـ Anthropic

مقتطف من الملف الذي أنشأه المولّد من anthropic.com، مختصر إلى بضعة رموز لكل مجموعة وبداية قسم Overview. ويغطي الملف الكامل أيضًا التخطيط والارتفاع والأشكال والمكونات وما يُفعل وما يُتجنب.

DESIGN.md
---
version: alpha
name: Anthropic
colors:
  primary: "#141413"
  on-primary: "#FAF9F5"
  ink: "#141413"
  body-muted: "#5E5D59"
  surface: "#FAF9F5"
  surface-alt: "#F0EEE6"
  hairline: "#D1CFC5"
typography:
  hero-display:
    fontFamily: Anthropic Serif
    fontSize: 68.3429px
    fontWeight: 400
    lineHeight: 1.1
  body:
    fontFamily: Anthropic Serif
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 8px
  md: 12px
  lg: 16px
spacing:
  base: 4px
  section-padding-y: 48px
---

## Overview

Anthropic's site reads like a well-set research journal printed on warm
paper. The canvas is **Parchment** (`surface`, #FAF9F5), text is a
near-black **Ink** (`ink`, #141413), and there is no saturated brand hue
at all.

اطّلع على ملف DESIGN.md الكامل لـ Anthropicتصفّح المزيد من أمثلة DESIGN.md

الأسئلة الشائعة

أسئلة عن مولّد DESIGN.md

ما يُنشئه المولّد، وكم يكلّف، وكيف تستخدم الملف مع وكيل البرمجة لديك.

ملف DESIGN.md واحد يتبع مواصفات DESIGN.md من Google. تحمل مقدمة YAML (front matter) رموز الألوان والخطوط والمسافات واستدارة الحواف والمكونات الخاصة بالموقع، ويشرح نص Markdown طريقة استخدامها قسمًا بقسم، حتى يتمكن وكيل البرمجة من بناء واجهات جديدة تطابق الموقع.

ليس بالمولّد: فهو يبني الملف من موقع ويب حي وعام. إذا كنت تصمم من الصفر، فاكتب ملف DESIGN.md يدويًا وفق المواصفات، ثم تحقّق من بنيته ورموزه بأداة DESIGN.md Validator المجانية.

أي موقع ويب عام يمكن الوصول إليه عبر HTTP أو HTTPS، بما في ذلك المواقع الثابتة وتطبيقات الصفحة الواحدة والصفحات المعروضة من الخادم. لا تُدعم الصفحات التي تتطلب تسجيل الدخول أو التي على localhost أو على شبكة خاصة، وبعض المواقع تحظر المتصفحات الآلية.

تنشئ حسابًا وتشتري باقة رصيد مدفوعة مسبقًا، تبدأ من ‏5 $ مقابل رصيد 50. لا يوجد اشتراك، ولا تنتهي صلاحية الرصيد. كل عملية تستهلك رصيدًا، وتعرض صفحة الأسعار التكلفة الحالية لكل عملية. وإذا فشلت عملية بسبب خلل من جهتنا، يُسترد الرصيد.

احفظه باسم DESIGN.md في جذر مشروعك أو مجلد التوثيق، واذكره في الموجّه. يقرؤه Claude Code و Cursor و GitHub Copilot و Windsurf وغيرها من الوكلاء التي تصل إلى الملفات مرجعًا للأسلوب. ويمكن للوكلاء أيضًا تشغيل المولّد بأنفسهم عبر خادم MCP الخاص بـ Design Extractor.

نعم. كل ملف DESIGN.md تنشئه يُحفظ في «عمليات الاستخراج»، حيث يمكنك تعديله، أو تنزيله مجددًا، أو إعادة استخراج الموقع لاحقًا. وهو نص عادي، لذا يمكنك أيضًا تعديله في محررك الخاص.