ui-design-aesthetics — скилл для Claude Code: дизайн интерфейсов
Скилл задаёт агенту правила типографики, цвета и анимации, чтобы интерфейсы не выглядели как типовые поделки ИИ. Пригодится при проектировании новых экранов и переделке существующих.
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a claude-codeЧто делает ui-design-aesthetics
Скилл подключает к агенту набор инструкций по визуальному дизайну и производительности. Внутри три справочника: правила эстетики (типографика, цвет, движение), прогрессивное раскрытие с динамической загрузкой и проверка контрактов API. Агент читает их, когда вы просите спроектировать фичу или переработать интерфейс.
Рабочий процесс разбит на шаги. Сначала выбирается цельная тема — например, швейцарский стиль или нео-брутализм — и отклоняются дефолтные решения. Потом помечаются тяжёлые компоненты для ленивой загрузки через React.lazy и динамические импорты, планируются поэтапные появления элементов, описываются TypeScript-интерфейсы или Zod-схемы для ответов API. В конце код пишется на утилитарных классах Tailwind.
Есть требования к производительности: на критическом пути только нужные CSS и JS, второстепенные компоненты грузятся по взаимодействию или видимости через IntersectionObserver, для откликов дольше 100ms предусмотрены оптимистичные состояния. Скилл жёстко давит на стек — Tailwind, React и TypeScript названы прямо, поэтому в проекте на другом фреймворке советы придётся перекладывать самому.
Какие задачи решает
- уйти от типового вида интерфейсов, которые генерирует ИИ
- выбрать цельную визуальную тему вместо набора случайных решений
- сократить начальную нагрузку за счёт ленивой загрузки компонентов
- спроектировать раскрытие сложных панелей по мере надобности
- сверить фронтенд-компоненты с реальной структурой ответов API
Примеры запросов агенту
- Спроектируй экран настроек: выбери тему, опиши типографику и цвет, покажи, что грузить лениво
- Переработай эту таблицу — сейчас выглядит шаблонно, нужен свой визуальный язык
- Проверь, совпадают ли пропсы компонента с ответом API, и опиши схему в Zod
Как установить ui-design-aesthetics
1Через Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a claude-code2Вручную: положить файлы
~/.claude/skills/ui-design-aesthetics/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ui-design-aesthetics/
1Через Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a codex2Вручную: положить файлы
.agents/skills/ui-design-aesthetics/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a cursor2Вручную: положить файлы
.cursor/skills/ui-design-aesthetics/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install NickCrew/Claude-Cortex ui-design-aesthetics2Вручную: положить файлы
.github/skills/ui-design-aesthetics/SKILL.md1Через Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a gemini-cli2Командой платформы
gemini skills install https://github.com/NickCrew/Claude-Cortex --path skills/ui-design-aestheticsВручную: положить файлы
.devin/skills/ui-design-aesthetics/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о ui-design-aesthetics
Как установить ui-design-aesthetics в Claude?
Выполните npx skills add NickCrew/Claude-Cortex --skill ui-design-aesthetics -a claude-code. Скилл появится в ~/.claude/skills/ui-design-aesthetics/SKILL.md.
Что делает ui-design-aesthetics?
Даёт агенту правила визуального дизайна и производительности: выбор темы, типографика, цвет, ленивая загрузка компонентов и проверка контрактов API.
С какими фреймворками он работает?
В инструкциях названы React, Tailwind и TypeScript. Для другого стека шаги придётся переносить вручную.
Исходный текст
SKILL.md · MIT
--- name: ui-design-aesthetics description: Generates high-quality, non-generic UI designs with a focus on performance, progressive disclosure, and distinctive aesthetics. keywords: - design UI - visual design - aesthetic excellence - aesthetics - ui design aesthetics --- # UI Design & Aesthetics Expert guidance for designing and implementing beautiful, high-performance user interfaces. This skill enforces distinctive aesthetics while ensuring technical excellence through progressive disclosure and dynamic loading. ## Core Capabilities - **Aesthetic Direction**: avoiding "AI slop" by enforcing distinctive typography, color, and depth. - **Performance Architecture**: ensuring UI components load dynamically to minimize initial payload. - **Progressive Disclosure**: designing interfaces that reveal complexity only when needed. - **API Contract Validation**: ensuring frontend components align with backend data structures. ## Usage Use this skill when: - Designing a new feature or application from scratch. - Refactoring an existing UI to be more modern and performant. - Implementing complex dashboards or data-heavy interfaces. ## Quick Reference | Topic | Reference | | --- | --- | | Aesthetic Rules (Typography, Color, Motion) | `skills/ui-design-aesthetics/references/aesthetics.md` | | Progressive Disclosure & Dynamic Loading | `skills/ui-design-aesthetics/references/progressive-disclosure.md` | | API Contract Validation | `skills/ui-design-aesthetics/references/api-contracts.md` | ## Design Workflow 1. **Analyze & Select Aesthetic**: Choose a cohesive theme (Swiss, Neo-Brutalism, etc.) and reject generic defaults. 2. **Architect for Performance**: Identify heavy components for lazy loading (`React.lazy`, dynamic imports). 3. **Design Interaction**: Plan staggered reveals and interaction-based loading. 4. **Validate Data**: Define TypeScript interfaces or Zod schemas for API responses. 5. **Implement**: Write the code using utility classes (Tailwind) and enforcing the design system. ## Performance Requirements - **Initial Payload**: Critical path CSS/JS only. - **Dynamic Loading**: Secondary components MUST load on interaction or visibility (IntersectionObserver). - **Latency**: Design optimistic UI states for interactions > 100ms.
© NickCrew · MIT · NickCrew/Claude-Cortex
