К основному содержанию
скилл CX Codex

apply-aesthetic — скилл для Claude Code: дизайн-направление в токенах

Скилл выбирает визуальное направление — архетип или именную дизайн-систему — и переводит его в токены вашего проекта. Пригодится, когда нужен конкретный вид, а не «на вкус агента».

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -a claude-code
Открыть на GitHub

Что делает apply-aesthetic

Сначала скилл формулирует бриф: отрасль, аудитория, тон, одно настроение, глубину анимации и порядок лейаутов. Это обязательный шаг до любых токенов, потому что генерация без решения даёт slop.

Дальше выбирается направление из aesthetic-systems.md: архетип — high-end agency, editorial minimal, brutalist, soft-SaaS или dark-tech — либо одна из 2,144 именных систем. Список смотрится через python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py list, а спецификацию достаёт node ${CLAUDE_SKILL_DIR}/../../../scripts/library.mjs get <name> с проверкой по sha256. Скрипт печатает путь к DESIGN.md, оттуда берутся роли цветов, типографика, отступы, радиусы, тени и моушен. Применение идёт через Library Contract: semantic.* перевешиваются на роли выбранной системы.

Контраст каждой пары цветов проверяется скриптом contrast.py. Брендовое значение, которое не проходит проверку, придётся поправить — вкус не отменяет доступность. Установка через npx skills add кладёт только папку скилла, без кит-файлов: проверка на старте выдаст KIT_MISSING, и без npx ux-ui-agent-skills init или установки плагина шаги не выполнятся.

Какие задачи решает

  • перевести словесное описание настроения в конкретные токены
  • взять палитру и типографику из именной дизайн-системы
  • выбрать архетип лейаута под отрасль и аудиторию
  • проверить контраст цветовых пар после переноса бренда
  • добавить моушен, не сломав доступность

Примеры запросов агенту

  • Сделай дизайн в духе linear-app, токены переведи в наш semantic-слой
  • Хочу вид high-end agency для лендинга студии, начни с брифа
  • Возьми систему stripe и проверь контраст всех пар

Как установить apply-aesthetic

1Через Skills CLI (Vercel)

npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -a claude-code

2Вручную: положить файлы

~/.claude/skills/apply-aesthetic/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/apply-aesthetic/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о apply-aesthetic

Как установить apply-aesthetic в Claude Code?

Выполните npx skills add plugin87/ux-ui-agent-skills --skill apply-aesthetic -a claude-code. После этого файл скилла лежит по пути ~/.claude/skills/apply-aesthetic/SKILL.md.

Что делает apply-aesthetic?

Определяет визуальное направление по брифу и переносит его в токены: цветовые роли, типографику, отступы, радиусы, тени и анимацию. В конце проверяет контраст получившихся пар.

Почему скилл останавливается с KIT_MISSING?

Установка через npx skills add ставит только папку скилла. Нужны кит-файлы из npx ux-ui-agent-skills init или установки плагина — иначе читать токены и спецификации неоткуда.

Исходный текст

SKILL.md · MIT
---
name: apply-aesthetic
description: Apply a visual direction, an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 2,144 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…), by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
---

# Skill: Apply Aesthetic

> **Step 0: is the kit here?** This skill reads files from the kit. Check once:
> `ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSING`
> On `KIT_MISSING` only the skill folders were installed, which is what
> `npx skills add` does. Say so plainly, point the user at
> `npx ux-ui-agent-skills init` or the plugin install, and stop. Do not guess the
> contents of a file you could not open.

Choose and apply a design direction without breaking accessibility.

## Steps
1. **Brief Inference first (mandatory).** Before any tokens, name it: industry/domain, audience & tone, the one mood adjective the result must earn, motion depth, and the layout-family sequence (`${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md` → Brief Inference + Variance Mandate). Generating before deciding = slop.
2. Pick a direction in `${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md`:
   - An **archetype** (recipe mapped to our tokens), or
   - A **named library system**: browse with `python3 ${CLAUDE_SKILL_DIR}/../../../scripts/design_systems.py list` (or `search <term>` / `show <name>`). Then run `node ${CLAUDE_SKILL_DIR}/../../../scripts/library.mjs get <name>` and read the `DESIGN.md` at the path it prints. An npm install carries the index and no spec, so this is what fetches it (checked against the sha256 the kit ships); where the spec is already on disk it fetches nothing. If it prints `refused`, say the spec could not be fetched and pick from an archetype instead; never write a spec from memory.
3. Apply the **Library Contract** (in `aesthetic-systems.md`): re-point `semantic.*` tokens to the chosen system's color roles; map typography/spacing/radius/shadow/motion to `${CLAUDE_SKILL_DIR}/../../../tokens/*.json`.
4. **Verify contrast** of every mapped color pair (`${CLAUDE_SKILL_DIR}/../../../scripts/contrast.py` / `a11y-audit`). A brand value that fails must be adjusted. Taste never overrides POUR.
5. Add motion per `${CLAUDE_SKILL_DIR}/../../../taste/motion-choreography.md`; run the pre-flight aesthetic check in `design-taste.md`.

## Output
Updated/overridden semantic tokens + notes on type/space/motion, then render via `design-code`. Confirm the result passes both the aesthetic check and accessibility.

© plugin87 · MIT · plugin87/ux-ui-agent-skills

Похожие скиллы

Всё по теме «Дизайн» →
uncodixfy cyxzdev Учит агента не генерировать типичный «кодексовый» интерфейс: без градиентов, плавающих панелей и декоративных заголовков. Пригодится, когда фронтенд от ИИ выглядит слишком шаблонно. CX Codex +1 5 600установок awesome-design-md wearescientist Подбирает стиль интерфейса из библиотеки DESIGN.md и применяет его к вёрстке: layout, цвет, типографика, отступы. CX Codex +1 666установок ui-ux-polish oakoss Скилл для итеративной доводки интерфейса веб-приложения: отдельно десктоп и мобильные, паттерны вроде glassmorphism и проверка доступности. CX Codex +1 539установок popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) 54 готовых дизайн-систем реальных сайтов (Stripe, Linear, Vercel, Claude) с CSS-токенами, типографикой и компонентами для быстрой вёрстки в стиле известных брендов. CX Codex +1 918установок critique-typography Owl-Listener Проверяет типографику отрендеренного экрана: шкалу, читаемость, единообразие и использование токенов. Пригодится на ревью интерфейса. CX Codex +1 2 000установок linear-ui-skills design-skills Задаёт агенту жёсткие правила тёмного интерфейса: палитра, Inter, сетка 4px. Пригодится, когда верстаешь UI в стиле Linear и не хочешь каждый раз объяснять детали. CX Codex +1 393установок

Из того же набора16

design-review Скилл оценивает интерфейс по шести взвешенным критериям, прогоняет эвристики Нильсена и выдаёт таблицу находок по приоритету. CX Codex +1 594установок a11y-audit Проверяет интерфейс на соответствие стандартам WCAG 2.2 и ARIA. Пригодится при аудите контрастности, навигации с клавиатуры и доступности для скринридеров. CX Codex +1 550установок design-tokens Скилл создаёт и проверяет дизайн-токены в формате DTCG. Пригодится для палитр, типографики, темизации и других системных значений интерфейса. CX Codex +1 538установок redesign Скилл проверяет существующий интерфейс и поэтапно обновляет его, сохраняя работающие функции. Подходит, когда нужно освежить дизайн сайта или приложения. CX Codex +1 535установок design-code Скилл помогает агенту собирать код компонентов и экранов под выбранный фреймворк. Он пригодится, когда нужен готовый UI с токенами и проверками доступности. CX Codex +1 525установок design-component Создаёт спецификацию UI-компонента с анатомией, 8 состояниями, токенами и доступностью. Пригодится при проектировании контролов в дизайн-системе до написания кода. CX Codex +1 522установок ux-writing Скилл пишет и проверяет кнопки, ошибки, пустые состояния и другие тексты интерфейса. Пригодится, когда нужно привести микрокопирайтинг к голосу проекта. CX Codex +1 517установок design-qa Скилл настраивает проверки токенов, контраста, доступности и визуальных регрессий. Запускайте его перед релизом компонента или экрана. CX Codex +1 516установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой