Stylepack
مجانًا: 3 حزم يوميًا، و10 مع حساب مجاني

حوّل أي موقع إلى حزمة تصميم يبني منها الذكاء الاصطناعي

الصق رابطًا. يقيس Stylepack الصفحة كما تُعرض (الألوان والخطوط والمسافات والاستدارات والظلال والمكونات) وكيف تتصرف: hover والتركيز، والقوائم والتلميحات، والسمة الأخرى وأربعة عروض للشاشة. تحصل على DESIGN.md وBEHAVIOR.md وdesign tokens وسمة Tailwind وSKILL.md ولقطات شاشة في ملف zip واحد.

قياس فعلي، لا تخمين

كل قيمة تأتي من الصفحة الحية، مرجّحة بما يظهر فعلًا على الشاشة. لا تخمين من لقطة شاشة، ولا نموذج يخترع لونًا بصيغة hex.

السلوك، لا الألوان فقط

حالات hover والتركيز، وموضع التلميحات وتوقيت تلاشيها، والقوائم، والظهور عند التمرير، والعناصر الثابتة، والجداول، والنماذج، والتفاف النص، والوضع الداكن وكل نقطة توقف.

صيغ جاهزة للوكلاء

DESIGN.md من Google، وSKILL.md، وW3C tokens، ومتغيرات CSS، وسمة Tailwind v4. ضع المجلد في مشروعك ووجّه وكيلك إليه.

استخراج نظام التصميم من أي موقع

  1. الصق رابطًا

    أي موقع عام، مثل stripe.com. النطاقات الفرعية مثل docs.stripe.com تُعدّ موقعًا مستقلًا.

  2. اطلب قياس الموقع

    تُفتح الصفحة في متصفح حقيقي بأربعة عروض للشاشة وفي السمتين. وبعد أقل من دقيقة تصبح الحزمة جاهزة.

  3. سلّمها للذكاء الاصطناعي

    نزّل ملف zip، وضع المجلد في مشروعك، واطلب من وكيلك قراءة DESIGN.md وBEHAVIOR.md قبل أن يكتب أي كود.

ماذا تحتوي الحزمة

مجلد واحد، جاهز لأي وكيل برمجة بالذكاء الاصطناعي أو تطبيق دردشة.

DESIGN.md
نظام التصميم بصيغة DESIGN.md من Google: الألوان والخطوط والمسافات والاستدارات والظلال والمكونات.
BEHAVIOR.md
حالات hover والتركيز، والتلميحات، والقوائم، والحركة، والتمرير، والجداول، والنماذج، والتفاف النص، وقواعد التجاوب، والوضع الداكن.
SKILL.md
مهارة (skill) لـ Claude Code وCursor ترشد الوكيل عبر الحزمة بالترتيب الصحيح.
tokens.json
W3C design tokens (DTCG) لـ Style Dictionary وإضافات tokens في Figma.
tokens.css
كل القيم كخصائص CSS مخصصة.
tailwind.css
القيم نفسها ككتلة @theme في Tailwind v4.
screenshots/
الموقع بعرض 1440 و1024 و768 و390 بكسل، إضافة إلى السمة الأخرى إن وُجدت.
README.md, PROMPT.md
كيفية تسليم الحزمة لكل أداة ذكاء اصطناعي، والـ prompt الجاهز للصق.

يعمل مع أدوات الذكاء الاصطناعي التي تستخدمها

دليل خطوة بخطوة لكل أداة:

أمثلة على حزم التصميم

شاهد المعرض كاملًا
الصفحة الرئيسية لـ stripe.com
stripe.com
sohne-var
التقنية الماليةفاتح
الصفحة الرئيسية لـ linear.app
linear.app
Inter Variable + Berkeley Mono
SaaS والإنتاجيةداكن + فاتح
الصفحة الرئيسية لـ resend.com
resend.com
domaine + aBCFavorit
أدوات المطورينداكن + فاتح
الصفحة الرئيسية لـ supabase.com
supabase.com
Manrope + Inter
أدوات المطورينفاتح + داكن
الصفحة الرئيسية لـ figma.com
figma.com
figmaSans + figmaMono
أدوات التصميمفاتح
الصفحة الرئيسية لـ framer.com
framer.com
GT Walsheim Medium + Inter Variable
أدوات التصميمداكن
الصفحة الرئيسية لـ apple.com
apple.com
SF Pro Text + SF Pro Display
تقنيات المستهلكداكن + فاتح
الصفحة الرئيسية لـ arc.net
arc.net
Marlin Soft SQ + -apple-system
تقنيات المستهلكفاتح

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

ما هو Stylepack؟

Stylepack (stylepack.ai) أداة ويب مجانية تحوّل أي موقع عام إلى حزمة تصميم لوكلاء البرمجة بالذكاء الاصطناعي: DESIGN.md وBEHAVIOR.md وSKILL.md وdesign tokens وسمة Tailwind ولقطات شاشة، في ملف zip واحد.

كيف أنسخ تصميم موقع إلى Cursor أو Claude Code؟

الصق عنوان الموقع في Stylepack ونزّل الحزمة. ضع المجلد في مشروعك، ثم اطلب من الوكيل قراءة DESIGN.md وBEHAVIOR.md والنظر في لقطات الشاشة قبل أن يبني أي شيء. تحتوي صفحة كل حزمة على الخطوات الدقيقة وعلى prompt جاهز للنسخ.

ما هو DESIGN.md؟

DESIGN.md صيغة مفتوحة من Google لوصف الهوية البصرية لوكلاء البرمجة في ملف Markdown واحد: الألوان والخطوط والمسافات والاستدارات والظلال والمكونات. ينشئ Stylepack واحدًا لأي موقع عام.

كيف أستخرج design tokens من موقع؟

الصق عنوانه في Stylepack. تتضمن الحزمة الملف tokens.json بصيغة W3C design tokens (DTCG)، والقيم نفسها كخصائص CSS مخصصة في tokens.css، وسمة Tailwind v4 في tailwind.css.

ماذا يغطي BEHAVIOR.md؟

كيف يتصرف الموقع، لا كيف يبدو فقط: حالات hover والتركيز، والتلميحات، والقوائم، والحركة، والتمرير، والجداول، والنماذج، والتفاف النص، والتخطيط بعرض 1440 و1024 و768 و390 بكسل، والوضع الداكن.

هل هو مجاني؟

نعم. تحصل على 3 حزم يوميًا بدون حساب و10 حزم يوميًا مع حساب مجاني. الحزم الموجودة أصلًا في المعرض لا تُحتسب.

مع أي أدوات ذكاء اصطناعي يعمل؟

Claude Code وCursor وCodex وGitHub Copilot وWindsurf وGemini CLI وChatGPT وClaude وGemini وv0 وLovable وBolt، أو أي أداة أخرى تقرأ Markdown وCSS.

هل يرتبط Stylepack بالمواقع الموجودة في المعرض؟

لا. تصف الحزمة التصميم العام للموقع كمرجع. الشعارات والخطوط والصور والنصوص مملوكة لأصحابها، والتحقق من تراخيص الخطوط يقع على عاتقك.