UI/UX Design Plugin
插件 已验证 活跃Comprehensive UI/UX design plugin for mobile (iOS, Android, React Native) and web applications with design systems, accessibility, and modern patterns
To empower developers and designers with a comprehensive toolkit for creating consistent, accessible, and visually appealing user interfaces across web and mobile platforms.
功能
- Design system token architecture and implementation
- WCAG compliant accessibility auditing and remediation
- Cross-platform UI component creation (React, Vue, Svelte, Swift, Kotlin)
- Responsive layout implementation for web and mobile
- Interactive animations and microinteraction design
- Visual design foundation principles (typography, color, spacing, icons)
使用场景
- Setting up a new design system with tokens and theming
- Auditing and fixing accessibility issues in existing UI code
- Creating new UI components following best practices
- Designing and implementing responsive layouts for various screen sizes
- Adding polish and delight through microinteractions and animations
非目标
- Backend development or API design
- General-purpose code generation outside of UI/UX
- Cloud infrastructure management
- Data analysis or machine learning model training
工作流
- Initialize project setup (design system, components)
- Create or audit UI components and layouts
- Implement visual design, accessibility, and responsiveness
- Generate code, documentation, and reports
- Iterate based on review and feedback
实践
- Design Systems
- Accessibility
- Responsive Design
- Interaction Design
- Component Architecture
- Visual Design
先决条件
- Claude Code CLI
- Node.js 18+
安装
请先添加 Marketplace
/plugin marketplace add wshobson/agents/plugin install ui-design@claude-code-workflows包含 9 个扩展
Skill (9)
Implement WCAG 2.2 compliant interfaces with mobile accessibility, inclusive design patterns, and assistive technology support. Use when auditing accessibility, implementing ARIA patterns, building for screen readers, or ensuring inclusive user experiences.
Build scalable design systems with design tokens, theming infrastructure, and component architecture patterns. Use when creating design tokens, implementing theme switching, building component libraries, or establishing design system foundations.
Design and implement microinteractions, motion design, transitions, and user feedback patterns. Use when adding polish to UI interactions, implementing loading states, or creating delightful user experiences.
Master Material Design 3 and Jetpack Compose patterns for building native Android apps. Use when designing Android interfaces, implementing Compose UI, or following Google's Material Design guidelines.
Master iOS Human Interface Guidelines and SwiftUI patterns for building native iOS apps. Use when designing iOS interfaces, implementing SwiftUI views, or ensuring apps follow Apple's design principles.
Master React Native styling, navigation, and Reanimated animations for cross-platform mobile development. Use when building React Native apps, implementing navigation patterns, or creating performant animations.
Implement modern responsive layouts using container queries, fluid typography, CSS Grid, and mobile-first breakpoint strategies. Use when building adaptive interfaces, implementing fluid layouts, or creating component-level responsive behavior.
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.
质量评分
已验证类似扩展
Agents Design Experience
99Agents for UI/UX design, accessibility, and user experience optimization
Gsap Skills
99Claude、Cursor 及其他 AI 代理的官方 GSAP 技能 — 动画、时间轴、ScrollTrigger、插件、工具、React 和性能
Frontend Design Pro
95Advanced frontend design plugin with interactive wizard, trend research, moodboard creation, color/typography selection, and browser-based inspiration analysis
Accessibility Compliance
99WCAG accessibility auditing, compliance validation, UI testing for screen readers, keyboard navigation, and inclusive design
Shadcn
99UI 组件和设计系统框架。搜索注册表,将组件安装为源代码,并审核你的项目。
Build with Claude Svelte Commands
99Specialized commands for Svelte and SvelteKit development