ux-design · mindrally — скилл для Claude Code: правила UX-проектирования
Скилл задаёт агенту правила UX-проектирования: от исследования пользователей до доступности и адаптивной вёрстки. Пригодится, когда проектируешь или проверяешь интерфейс.
npx skills add Mindrally/skills --skill ux-design -a claude-codeЧто делает ux-design
Скилл превращает ИИ-агента в ревьюера пользовательского опыта. Внутри — набор инструкций по исследованию пользователей, информационной архитектуре, интерактивному и визуальному дизайну, доступности, производительности, мобильной вёрстке и тестированию. Агент применяет их, когда вы просите спроектировать экран или разобрать существующий.
Практическая часть конкретна: семантический HTML для скринридеров, контраст по WCAG 2.1 AA, относительные единицы вместо фиксированных пикселей, CSS Grid и Flexbox, ленивая загрузка ресурсов, отслеживание Core Web Vitals (LCP, FID, CLS). Есть блоки про микрокопирайт, управление когнитивной нагрузкой и эмоциональный дизайн.
Скилл не подключает никаких библиотек и не запускает проверок сам — это текст с правилами, который читает агент. Поэтому результат зависит от того, насколько точно вы описали задачу: без контекста проекта советы выйдут общими. Ставится одной командой через npx skills add в шесть платформ, включая Claude, Codex и Cursor.
Какие задачи решает
- разобрать макет экрана и найти проблемы с иерархией
- проверить контраст и семантику под WCAG 2.1 AA
- спроектировать навигацию и структуру разделов
- переписать микрокопирайт и тексты кнопок
- упростить форму, разбив её на короткие шаги
Примеры запросов агенту
- проверь этот экран по правилам ux-design и перечисли проблемы
- спроектируй страницу оформления заказа с мобильного в первую очередь
- пройдись по вёрстке и скажи, где не хватает alt и семантических тегов
Как установить ux-design
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill ux-design -a claude-code2Вручную: положить файлы
~/.claude/skills/ux-design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ux-design/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill ux-design -a codex2Вручную: положить файлы
.agents/skills/ux-design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill ux-design -a cursor2Вручную: положить файлы
.cursor/skills/ux-design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install Mindrally/skills ux-design2Вручную: положить файлы
.github/skills/ux-design/SKILL.md1Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill ux-design -a gemini-cli2Командой платформы
gemini skills install https://github.com/Mindrally/skills --path ux-designВручную: положить файлы
.devin/skills/ux-design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add Mindrally/skills --skill ux-design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Из того же набора168
Другие версии ux-design
Похожие
Рядом в теме «Дизайн»
Всё по теме «Дизайн» →Вопросы о ux-design
Как установить ux-design в Claude?
Выполните npx skills add Mindrally/skills --skill ux-design -a claude-code. Скилл окажется в ~/.claude/skills/ux-design/SKILL.md.
Что делает скилл ux-design?
Задаёт агенту правила UX-проектирования: исследование пользователей, информационная архитектура, интерактивный и визуальный дизайн, доступность, производительность, мобильная вёрстка, тестирование и документация.
На каких платформах работает ux-design?
Claude, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для каждой свой флаг установки, например -a cursor или -a gemini-cli.
Исходный текст
SKILL.md · Apache-2.0
--- name: ux-design description: UX design principles for creating intuitive, accessible, and user-centered digital experiences metadata: maintainer: Mindrally source: https://github.com/Mindrally/skills --- # UX Design Best Practices You are an expert in UX design principles for software development. Apply these guidelines when designing or reviewing user experiences. ## User Research - Conduct user interviews to understand needs and pain points - Create user personas based on research data - Map user journeys to identify opportunities - Validate assumptions through usability testing - Use analytics to inform design decisions ## Information Architecture - Organize content logically to facilitate easy access - Use clear labeling and categorization for navigation - Implement effective search functionality - Create sitemaps to visualize overall structure - Conduct card sorting exercises for content organization ## Interaction Design - Create intuitive navigation patterns users can easily follow - Use familiar UI components to reduce cognitive load - Provide clear calls-to-action to guide user behavior - Implement responsive design for cross-device compatibility - Apply animations thoughtfully to enhance rather than distract ## Visual Design - Establish a clear visual hierarchy to guide user attention - Choose a cohesive color palette that reflects the brand - Leverage typography strategically for readability and emphasis - Maintain sufficient contrast for legibility (WCAG 2.1 AA standard) - Keep styling consistent throughout the application ## Accessibility - Follow WCAG guidelines for web accessibility - Use semantic HTML to enhance screen reader compatibility - Provide alternative text for images and non-text content - Ensure keyboard navigability for all interactive elements - Test with various assistive technologies ## Performance Optimization - Optimize images and assets to minimize load times - Implement lazy loading for non-critical resources - Use code splitting to improve initial load performance - Monitor and optimize Core Web Vitals (LCP, FID, CLS) ## User Feedback - Implement clear response mechanisms for user actions - Use loading indicators for asynchronous operations - Provide clear error messages and recovery options - Implement analytics to track user behavior and pain points ## Mobile-First Design - Design for mobile devices first, then scale up - Use touch-friendly interface elements - Implement gestures for common actions (swipe, pinch-to-zoom) - Consider thumb zones for important interactive elements ## Consistency - Develop and adhere to a design system - Use consistent terminology throughout the interface - Maintain consistent positioning of recurring elements - Ensure visual consistency across different sections ## Testing and Iteration - Conduct A/B testing for critical design decisions - Use heatmaps and session recordings to analyze user behavior - Regularly gather and incorporate user feedback - Continuously iterate on designs based on data and feedback ## Documentation - Maintain a comprehensive style guide - Document design patterns and component usage - Create user flow diagrams for complex interactions - Keep design assets organized and accessible to the team ## Responsive Layouts - Use relative units (%, em, rem) instead of fixed pixels - Implement CSS Grid and Flexbox for flexible layouts - Design mobile-first, then progressively enhance ## Content Strategy - Write clear, concise microcopy - Use progressive disclosure to manage complexity - Prioritize content based on user needs - Maintain consistent voice and tone ## Cognitive Load Management - Reduce number of choices when possible - Group related information together - Use whitespace effectively - Provide sensible defaults - Break complex tasks into smaller steps ## Emotional Design - Create delightful micro-interactions - Celebrate user accomplishments - Handle errors with empathy - Build trust through transparency Stay current with UX design techniques and industry standards.
© Mindrally · Apache-2.0 · Mindrally/skills