Ui Design System
ui-design-system
UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
كيف تركّبه؟
- ١حمّل ملف ZIP من الزر فوق.
- ٢فكّ الضغط وحطّ المجلد داخل
.claude/skills/في مشروعك (أو~/.claude/skills/لو تبيه في كل مشاريعك). - ٣شغّل Claude Code من جديد — بيلقط السكِل تلقائياً ويستدعيه وقت ما تحتاجه المهمة.
UI Design System
Professional toolkit for creating and maintaining scalable design systems.
Core Capabilities
- Design token generation (colors, typography, spacing)
- Component system architecture
- Responsive design calculations
- Accessibility compliance
- Developer handoff documentation
Key Scripts
design_token_generator.py
Generates complete design system tokens from brand colors.
Usage: python scripts/design_token_generator.py [brand_color] [style] [format]
- Styles: modern, classic, playful
- Formats: json, css, scss
Features:
- Complete color palette generation
- Modular typography scale
- 8pt spacing grid system
- Shadow and animation tokens
- Responsive breakpoints
- Multiple export formats
سكِلات في نفس المجال
3d Web Experience
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. C…
Accessibility Auditor
Web accessibility specialist for WCAG compliance, ARIA implementation, and inclusive design. Use when auditing websites …
Accessibility Compliance
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology s…
Api Design Principles
Master REST and GraphQL API design principles to build intuitive, scalable, and maintainable APIs that delight developer…
C4 Architecture
Generate architecture documentation using C4 model Mermaid diagrams. Use when asked to create architecture diagrams, doc…
D3 Viz
Creating interactive data visualisations using d3.js. This skill should be used when creating custom charts, graphs, net…
تبي سكِل مفصّل على شغلك أنت؟
نبني لك سكِلات ووكلاء ذكاء اصطناعي يفهمون نظامك ويشتغلون عليه.