apple-ui-design
تصميم واجهات مستوحاة من Apple
بناء واجهات متميزة يتطلب فهم التسلسل الهرمي للطباعة، وإيقاع التباعد، والرسوم المتحركة الدقيقة. توفر هذه المهارة مبادئ تصميم Apple لإنشاء واجهات نظيفة وبسيطة وسهلة الاستخدام تبدو أصلية على منصات Apple.
下载技能 ZIP
在 Claude 中上传
前往 设置 → 功能 → 技能 → 上传技能
开启并开始使用
测试它
正在使用“apple-ui-design”。 إنشاء زر أساسي باستخدام مبادئ تصميم Apple
预期结果:
- زر على شكل حبة (border-radius: 980px) لأصالة Apple
- لون تمييز أزرق (#0071e3) مع نص أبيض
- حشوة 12px عمودية / 24px أفقية لهدف لمس مريح
- انتقال سلس للحجم والسطوع عند التمرير
- وزن خط 500 للتسلسل الهرمي البصري الواضح
正在使用“apple-ui-design”。 تصميم بطاقة محتوى مع دعم الوضع الداكن
预期结果:
- خلفية بيضاء بشفافية 80% لتأثير زجاجي خفيف
- ضبابية خلفية 20px للعمق والتركيز
- نصف قطر حدود 18px لزوايا مستديرة حديثة
- ظل أسود دقيق 6% للارتفاع دون قسوة
- الوضع الداكن: خلفية سوداء مع ثانوي #1d1d1f
安全审计
安全This is a pure documentation skill containing only design guidelines and CSS examples. All 58 static findings are FALSE POSITIVES. The scanner misidentified CSS hex color codes as cryptographic algorithms and markdown backticks as shell execution. No executable code, file access, network calls, or system operations exist.
风险因素
质量评分
你能构建什么
تطوير المكونات
بناء مكونات React أو Vue أو HTML التي تتبع إرشادات تصميم Apple لتجربة مستخدم متسقة.
إنشاء نظام التصميم
إنشاء أسس الطباعة واللون والتباعد لأنظمة التصميم المستوحاة من جماليات Apple.
مراجعة الجودة
تقييم الواجهات الحالية مقابل معايير تصميم Apple لتقييم الجودة المتميزة.
试试这些提示
Design a primary button using Apple UI principles. Include pill shape, blue accent color, smooth hover transition, and proper padding.
Create a card component with backdrop blur, rounded corners, subtle shadow, and proper spacing. Include dark mode support.
Define a typography system using SF Pro with hero, title, body, and caption styles. Include line heights and font weights.
Design a landing page following Apple principles: 680px max content width, generous whitespace, one primary CTA, and smooth fade animations.
最佳实践
- استخدم خطوط النظام (-apple-system, SF Pro) للشعور الأصلي والأداء
- حافظ على إيقاع تباعد متسق باستخدام مضاعفات وحدة أساسية 4px
- حدد عرض المحتوى بحوالي ~680px لقابلية القراءة المثلى والتركيز
避免
- استخدام خطوط زخرفية تتنافس مع المحتوى
- حشر أزرار متعددة للدعوة إلى اتخاذ إجراء متنافسة
- تطبيق رسوم متحركة مزعجة تشتت الانتباه عن المحتوى