متى تستخدمه: طلبت من Claude صفحة هبوط وحصلت على نموذج أولي بتدرج أرجواني وبطاقات مستديرة.
الخطوات
-
تسمية الجماليات
استخدم cc-frontend-skills. بناء صفحة هبوط لكتابي بنمط أغلفة كتب Penguin بدون الغلاف من منتصف القرن — طباعة متحفظة، لون تمييز واحد، مساحة بيضاء سخية.✓ تم النسخ
→ مسودة التخطيط مع خيارات طباعة محددة، وليس نموذج shadcn
-
التكرار على الشبكة والطباعة
شدّد مقياس الطباعة إلى مقياس معياري 1.333؛ استخدم Charter أو serif مشابهة.✓ تم النسخ
→ CSS ملموس مع خطوط مسماة، وليس 'sans-serif'
-
إزالة علامات الذكاء الاصطناعي
تدقيق لعلامات تصميم الذكاء الاصطناعي: رؤوس emoji، shadow-lg مفرط، نص تدرج، تخطيطات بطاقات متطابقة. احذفها.✓ تم النسخ
→ الفرق يزيل المشبوهين المعتادين
النتيجة: صفحة هبوط تبدو كأن شخصاً اهتم بها.
المزالق
- يعود Claude إلى الإعدادات الافتراضية بعد عدة تكرارات — ثبّت المرجع الأسلوبي في كل موجه متابعة — لا تعتمد على السياق لحمله
متى تستخدمه: لوحتك تعمل لكن تبدو مثل كل تطبيق آخر يعتمد على shadcn.
الخطوات
-
التشخيص
استخدم cc-frontend-skills. انظر إلى /app/dashboard. ما علامات التصميم الخاصة بالذكاء الاصطناعي هنا؟✓ تم النسخ
→ قائمة ملموسة: 'كل شيء lg-rounded، ظلال على كل بطاقة، تدرج CTA، الشبكة دائماً 3-col'
-
اقترح بديلاً
اقترح اتجاهاً جمالياً مرتكزاً على مرجع تصميم كثيف البيانات (Bloomberg terminal, Figma's inspector panel).✓ تم النسخ
→ مراجع مسماة مع تطبيقات ملموسة
-
التطبيق بشكل تدريجي
ابدأ بالطباعة فقط — أصلح التسلسل الهرمي دون لمس التخطيط.✓ تم النسخ
→ الفرق يغير font-size, letter-spacing, weight فقط
النتيجة: لوحة معلومات برأي واضح.
المزالق
- الإفراط في التصميم وكسر إمكانية الوصول — حافظ على تباين AA؛ الهوية البصرية لا تتطلب رمادي فاتح على أبيض
متى تستخدمه: تم إنشاء الأزرار والبطاقات والمدخلات الخاصة بك بشكل مستقل والآن تتضارب.
الخطوات
-
الجرد
استخدم cc-frontend-skills. راجع components/ وحدد عدم التسقية في border-radius, shadow, spacing.✓ تم النسخ
→ جدول التباين لكل رمز
-
اقترح الرموز
اقترح مجموعة رموز تصميم موحدة برمز نصف قطر واحد، رمز ظل واحد، رمز تباعد واحد.✓ تم النسخ
→ Token JSON / Tailwind config
النتيجة: مجموعة رموز تجعل المكتبة تبدو كشيء واحد.