الواجهات والتصميم مميز

Better UI

بواسطة Julien Thibeaut (ui-skills.com) 3.7k نجوم GitHub

مبادئ هندسة التصميم اللي بتخلي الكومبوننتس تحس إنها متقنة — الظلال والحدود وحالات الـ hover والتفاعلات الصغيرة والمحاذاة البصرية.

#polish#micro-interactions#craft#css

Claude Code Codex

نظرة عامة

Better UI بيكوّد القرارات الصغيرة في الحرفة اللي بتفرق بين الواجهة المتقنة والعادية: الـ border radius والـ box shadows والمحاذاة البصرية وتوقيت الـ stagger وحركات الدخول والخروج وحالات الـ hover. بيشتغل ساعة ما الـ UI يبقى حاسس إنه 'مش مظبوط' ومحتاج شغل على التفاصيل. مثالي للـ 10% الأخيرة من اللمسة على أي كومبوننت.

بتنفع في إيه

إصلاح كومبوننت حاسس إنه 'مش مظبوط'
ضبط أنظمة الـ shadow والـ border-radius
إضافة hover وتفاعلات صغيرة بذوق
تصحيح مشاكل المحاذاة البصرية

التثبيت

التثبيت في Claude Code

# ضيف الـ marketplace وبعدين ثبّت المهارة في Claude Code:
/plugin marketplace add ibelick/ui-skills
/plugin install better-ui

# أو ثبّتها يدويًا في ~/.claude/skills:
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/better-ui ~/.claude/skills/better-ui

التثبيت في Codex

# Codex بيقرأ مهارات SKILL.md من ~/.codex/skills (اكتشاف تلقائي):
git clone https://github.com/ibelick/ui-skills.git
cp -r ui-skills/better-ui ~/.codex/skills/better-ui

# وبعدين استخدم المهارة في Codex — بتتحمّل وقت الحاجة.

زيارة المصدر (GitHub)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Frontend Design

عمل واجهات frontend مميزة بمستوى إنتاجي بعيداً عن جمالية الـ AI العامة — صفحات وكومبوننتس وartifacts وبوسترات.

Claude Code Codex

الواجهات والتصميم

Web Artifacts Builder

بناء artifacts HTML معقدة ومتعددة الكومبوننتس لـ Claude.ai باستخدام React وTailwind.

Claude Code Codex

الواجهات والتصميم

Animation Systems

حركة ويب بمستوى المنتجات زي Stripe وLinear وApple وVercel — إعدادات الـ easing والمدة والتناسق والأداء ووضع تقليل الحركة.

Claude Code Codex