Frontend Design Toolkit

## نظرة عامة

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

- **frontend-design** — حدد الهوية البصرية: الأسلوب، ولوحة الألوان، والطباعة، وكود المكونات جاهز للإنتاج
- **canvas-design** — أنشئ نماذج بصرية: الملصقات، وصور البطاقات، والخطط الفنية بصيغة PNG/PDF
- **page-builder** — اجمع صفحات الهبوط باستخدام مكونات Tailark مع أقسام منظمة

## البدء السريع

1. ثبّت الإضافة: `npx skillstore add @frontend-design-toolkit`
2. صِف مشروعك والجمهور المستهدف لـ **frontend-design** → احصل على اتجاه الأسلوب، ولوحة الألوان، وكود المكونات
3. استخدم **canvas-design** لإنتاج صور البطاقات، واللافتات، أو الأصول البصرية التي تتناسب مع الأسلوب
4. سلّم رموز التصميم والمحتوى إلى **page-builder** → احصل على صفحة هبوط كاملة

## دليل تفصيلي: بناء صفحة إطلاق منتج

**الخطوة الأولى — التوجيه التصميمي**
> "أنشئ نظام تصميم لأدوات SaaS للمطورين. أسلوب حديث، موضوع داكن، مع لمسات زرقاء وبنفسجية."

يُرجع frontend-design: لوحة الألوان، مقياس الطباعة، ومكونات الأزرار/البطاقات بكود جاهز للإنتاج.

**الخطوة الثانية — الأصول البصرية**
> "أنشئ لافتة بطاقة لصفحة الهبوط. أشكال هندسية تجريدية، خلفية داكنة، تدرج أزرق."

يُنتج canvas-design صورة بطاقة بصيغة PNG تتطابق مع اللوحة المحددة.

**الخطوة الثالثة — تجميع الصفحة**
> "أنشئ صفحة هبوط تتضمن: قسم البطاقة، شبكة الميزات المكونة من 3 أعمدة، جدول التسعير، وتذيل الدعوة للعمل."

يُولّد page-builder صفحة كاملة باستخدام مكونات Tailark، مع دمج رموز التصميم من الخطوة الأولى.

## النطاق والحدود

**هذه الأدوات مصممة لـ:**
- صفحات الهبوط الجديدة، وصفحات التسويق، وصفحات الحملات
- صفحات إطلاق المنتجات والمواقع الترويجية الصغيرة
- النماذج الأولية واستكشافات التصميم
- صفحات المحفظة والمواقع الشخصية

**ليست مصممة لـ:**
-接管 تطبيقات الويب المعقدة الموجودة
- استبدال نظام تصميم كامل قيد الإنتاج
- تدفقات الدفع الإلكتروني أو النماذج متعددة الخطوات
- العرض من جانب الخادم أو التكامل الخلفي

## معالجة الفشل

- **التصميم لا يتطابق مع العلامة التجارية** → عُد إلى الخطوة الأولى (frontend-design) وعَزز التوجيه التصميمي. اضبط لوحة الألوان، أو الطباعة، أو المزاج قبل إعادة إنشاء الأصول اللاحقة
- **النموذج البصري غير دقيق** → أعد تشغيل canvas-design مع قيود أكثر تحديداً. راجع رموز التصميم من الخطوة الأولى بشكل صريح
- **بنية الصفحة غير صحيحة** → عدّل موجه page-builder بتعليمات على مستوى القسم. الإخراج هو HTML/Tailwind القياسي — التعديلات اليدوية ممكنة دائماً
- **لا يتم النشر تلقائياً للإنتاج** — جميع المخرجات هي ملفات محلية. تراجع وتنشر يدوياً
- **احتفظ بالأصول المُنشأة بإصدارات** — احفظ كل iteration，以便可以比较并回滚到之前的设计方向

## نصائح

- ابدأ واسعاً مع frontend-design، ثم ضيق.方向清晰会让另外两个工具更加有效
- canvas-design 创建原创艺术作品 — 它永远不会复制现有艺术家的作品
- page-builder 在有具体的部分描述时效果最好，而不是模糊的请求
- 所有三个工具都产生静态输出（代码、图像、HTML）— 无运行时依赖