스킬 frontend-design
📦

frontend-design

안전

تصميم واجهات أمامية مميزة

또한 다음에서 사용할 수 있습니다: AdamAugustinsky,AgentWorkforce,AJV009,DennisLiuCk,anthropics,92Bilal26,YYH211,1bertogit,7Spade,7Spade,92Bilal26,1bertogit,CesarAugustusGroB,davila7,AI-Vibe-Prompts,Azeem-2

العديد من الواجهات التي يولدها الذكاء الاصطناعي تبدو عادية وتفتقر إلى الطابع الإبداعي. توجه هذه المهارة كلود كود لإنشاء واجهات ويب من فئة الإنتاج بجودة جمالية استثنائية وهوية بصرية مميزة وقرارات تصميم مدروسة تتجنب أنماط الذكاء الاصطناعي الشائعة.

지원: Claude Codex Code(CC)
📊 70 적절함
1

스킬 ZIP 다운로드

2

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

3

토글을 켜고 사용 시작

테스트해 보기

"frontend-design" 사용 중입니다. إنشاء مكون بطاقة تسعير مع جمالية فاخرة

예상 결과:

تولد المهارة مكون React مع تايبوغرافيا مصقولة ورسوم متحركة دقيقة وتدرجات لونية متطورة وتأثيرات تحويم أنيقة ومسافات مفصلة تخلق شعوراً مميزاً.

"frontend-design" 사용 중입니다. بناء رأس مقالة مدونة مع نهج تصميم برتالي

예상 결과:

تخلق المهارة HTML وCSS تتميز خطوط نظام جريئة وألوان الأسود والأبيض عالية التباين وتخطيطات غير متماثلة وحدود خام وعناصر بصرية بسيطة لكنها مؤثرة.

"frontend-design" 사용 중입니다. undefined

예상 결과:

تنفذ المهارة قائمة مع انتقالات مرحة وحالات تحوم ملونة ورسوم متحركة أيقونات إبداعية وتفاعلات صغيرة تجعل التنقل ممتعاً ومشوقاً.

보안 감사

안전
v5 • 1/21/2026

This skill contains only instructional markdown content with no executable code. All 28 high-severity static findings for weak cryptographic algorithms are false positives from pattern matching on common English words. The 3 system reconnaissance detections are also false positives. The skill provides design guidance for creating frontend interfaces and poses no security risk.

2
스캔된 파일
392
분석된 줄 수
0
발견 사항
5
총 감사 수
보안 문제를 찾지 못했습니다
감사자: claude 감사 이력 보기 →

품질 점수

38
아키텍처
100
유지보수성
87
콘텐츠
22
커뮤니티
100
보안
91
사양 준수

만들 수 있는 것

صفحة هبوط المنتج

إنشاء صفحة هبوط جذابة بصرياً لمنتج جديد مع تايبوغرافيا جريئة ورسوم متحية مشوقة ولوحة ألوان مميزة تجسد هوية العلامة التجارية.

واجهة لوحة المعلومات

بناء لوحة معلومات لتصور البيانات مع تخطيطات إبداعية ومسافات مدروسة وعناصر بصرية لا تُنسى تجعل المعلومات المعقدة سهلة الوصول ومشوقة.

موقع الملف الشخصي

تصميم موقع ملف شخصي مع اتجاه جمالي فريد انتقالات متقدمة وأنماط مكونات إبداعية تعرض الأسلوب الفردي.

이 프롬프트를 사용해 보세요

طلب مكون بسيط
إنشاء مكون نموذج اتصال مع حقلي البريد الإلكتروني والرسالة
قسم هبوط مصمم
بناء قسم رئيسي لعلامة أزياء مستدامة مع جمالية عضوية طبيعية باستخدام ألوان أرضية ورسوم متحركة سلسة
لوحة معلومات تفاعلية
تصميم لوحة معلومات مقاييس لمنصة برمجيات كخدمة مع جمالية برتالية مميزة، تتميز تايبوغرافيا جريئة وألوان عالية التباين وتخطيطات قائمة على الشبكة
تطبيق كامل
إنشاء تطبيق إدارة مهام في React مع تصميم ريترو-فيوتوريستي، بما في ذلك بطاقات مهام متحركة وخلفية متدرجة الخطوط وصفحات انتقالات سلسة

모범 사례

  • توفير سياق واضح حول الغرض والجمهور وهوية العلامة التجارية عند طلب التصميمات للمساعدة في توجيه الخيارات الجمالية
  • تحديد إطار العمل التقني المفضل مثل React أو Vue أو HTML/CSS العادي لضمان توافق الكود المتولد
  • وصف اتجاه الجمالية المطلوب باستخدام مصطلحات محددة مثل البسيط أو البرتالي أو ريترو-فيوتوريستي أو العضوي للحصول على نتائج أكثر تميزاً

피하기

  • طلب تصاميم عامة بدون اتجاه جمالي يؤدي إلى نتائج أقل تميزاً
  • طلب مكونات متعددة غير ذات صلة في طلب واحد يضعف التركيز الإبداعي والتماسك
  • توفير متطلبات وظيفية فقط بدون سياق التصميم يحد من الإمكانات الإبداعية للمخرجات

자주 묻는 질문

ما الأطر التي تدعمها هذه المهارة؟
يمكن للمهارة توليد كود لـ HTML/CSS/JavaScript العادي وReact وVue وأطر الواجهة الأمامية الحديثة الأخرى. حدد تفضيلك في طلبك.
هل يمكن لهذه المهارة إنشاء واجهات متاحة؟
نعم، تتبع المهارة ممارسات HTML الدلالية وتتضمن تسميات ARIA عند الاقتضاء. ومع ذلك، يجب إجراء تدقيقات إمكانية الوصول بشكل منفصل.
كيف أحصل على تصاميم أكثر إبداعاً أو تميزاً؟
توفير اتجاه جمالي محدد مثل البرتالي أو آرت ديكو أو العضوي أو ماكسيماليست. وصف الحالة المزاجية والجمهور والغرض للمساعدة في توجيه خيارات إبداعية مميزة.
هل سيعمل الكود المتولد في الإنتاج؟
نعم، تنشئ المهارة كوداً جاهزاً للإنتاج مع بنية صحيحة وأفضل الممارسات. راجع واختبر الكود في بيئتك المحددة قبل النشر.
هل يمكنني طلب خطوط أو ألوان محددة؟
نعم، يمكنك تحديد عائلات الخطوط أو لوحات الألوان أو رموز التصميم. ستنفذها المهارة باستخدام متغيرات CSS للاتساق وقابلية الصيانة.
هل تتعامل هذه المهارة مع التصميم المتجاوب؟
نعم، تنشئ المهارة تخطيطات متجاوبة باستخدام تقنيات CSS الحديثة مثل flexbox وgrid واستعلامات الوسائط للتأكد من عمل التصاميم عبر أحجام الشاشة المختلفة.

개발자 세부 정보

작성자

anthropics

라이선스

Complete terms in LICENSE.txt

참조

main

파일 구조

📄 SKILL.md