design-taste-frontend
بناء واجهات متميزة معrails التصميم
تنتج مساعدو البرمجة بالذكاء الاصطناعي واجهات عامة وقابلة للتنبؤ افتراضياً. يفرض هذا الـ skill قواعد تصميم صارمة، وهندسة المكونات، ومعايير الأداء لإنتاج كود frontend احترافي.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“design-taste-frontend”。 إنشاء قسم Hero مع تخطيط غير متماثل وطباعة متميزة
预期结果:
قسم Hero محاذي لليسار باستخدام min-h-[100dvh] مع عنوان text-6xl بخط Geist، وفقرة text-gray-600 مع max-w-[65ch]، وزر دعوة للإجراء مع تغذية راجعة active scale-[0.98]. النصف الأيمن يحتوي على صورة خلفية خفيفة مع تدرج fade.
正在使用“design-taste-frontend”。 بناء bento grid بخمس بطاقات متحركة
预期结果:
شبكة متجاوبة بخمس بطاقات: قائمة مهام بالفرز التلقائي مع تبديلات layoutId، وشريط بحث مع تدوير آلة كاتبة، ولوحة حالة حية مع مؤشرات breathing، وكاروسيل بيانات لا نهائي، وعرض مستند بوضع التركيز مع إبرازات staggered. جميع البطاقات تستخدم فيزياء spring من Framer Motion وmemoized للأداء.
安全审计
安全All 161 static analysis findings were evaluated and determined to be false positives. The external_commands pattern (125 locations) is markdown inline code formatting, not shell execution. The blocker weak-crypto findings (16 locations) are misidentified hex color values in CSS. The system-reconnaissance findings (20 locations) are legitimate AI coding instructions for dependency verification. The single network finding is a placeholder image URL for UI mockups. The skill is a markdown instruction document for AI coding assistants with no executable code, no network calls, and no security risks.
质量评分
你能构建什么
تطوير لوحة تحكم SaaS احترافية
يستخدم مطور frontend هذا الـ skill مع Claude Code لإنشاء لوحة تحكم SaaS مصقولة مع تخطيطات bento-grid، وحالات تحميل صحيحة، وانتقالات تخطيط سلسة دون اتخاذ قرارات تصميم يدوية.
اتساق نظام التصميم عبر الفرق
شارك مهندس التصميم هذا الـ skill مع فريقه لضمان اتباع جميع المكونات المُنشأة بالذكاء الاصطناعي لنفس مقياس الطباعة، ومعايرة الألوان، وقواعد نقاط التوقف المتجاوبة.
صفحات هبوط تسويقية فاخرة
يستخدم مؤسس مستقل هذا الـ skill مع Codex لإنتاج قسم Hero غير متماثل، وطباعة حركية، ورسوم متحركة driven بالتمرير تتجنب الجماليات العامة للذكاء الاصطناعي.
试试这些提示
أنشئ قسم Hero لمنتج SaaS مع عنوان محاذي لليسار، وفقرة داعمة، وزر دعوة للإجراء. استخدم خط الأساس للتصميم من هذا الـ skill.
أنشئ قسم ميزات باستخدام تخطيط زيك زاك غير متماثل من عمودين. بدّل محتوى النص مع العناصر النائبة للصور. اتبع قواعد anti-center-bias وgrid-over-flex-math.
أنشئ bento grid بخمس بطاقات مع تفاعلات دقيقة دائمة. يجب أن تحتوي كل بطاقة على رسوم متحركة حلقة لا نهائية باستخدام فيزياء spring من Framer Motion.Include انتقالات التخطيط وتنسيق staggered لقائمة العناصر.
أنشئ لوحة glassmorphism مع انكسار الحدود الداخلية وظلال ملونة. ضع فلتر grain فقط على عنصر زائف ثابت. تأكد من استخدام transform وopacity حصرياً لجميع الرسوم المتحركة للتسريع بالأجهزة.
最佳实践
- تحقق دائماً من package.json قبل اقتراح أوامر تثبيت المكتبات التابعة لجهات خارجية.
- استخدم min-h-[100dvh] بدلاً من h-screen للأقسام كاملة الارتفاع لمنع قفزات التخطيط على الجوال.
- عزل المكونات التفاعلية كمكونات ورقة مع use client في الأعلى. الحفاظ على المكونات الخادم ثابتة.
- تحريك خصائص transform وopacity فقط. لا تحرك أبداً top أو left أو width أو height.
避免
- استخدام أقسام Hero المركزية مع تدرجات اللون البنفسجي. هذا هو أكثر كliché تصميمي شائع للذكاء الاصطناعي.
- بناء تخطيطات معقدة بنسبة مئوية مع رياضيات flexbox بدلاً من CSS Grid.
- وضع الرسوم المتحركة الدائمة داخل المكونات الأصلية. هذا يؤدي إلى عمليات إعادة عرض غير ضرورية وانهيار الأداء.