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

fantasy — скилл для Claude Code: что делает и как установить

Скилл задаёт игровую фэнтезийную визуальную систему для интерфейсов: палитру, типографику, состояния компонентов и правила доступности. Пригодится для проектирования UI.

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

Что делает fantasy

fantasy превращает запрос к ИИ на дизайн интерфейса в практические правила для фэнтезийной визуальной системы. Он задаёт смелую премиальную стилистику, шкалу типографики 12/14/16/20/24/32, шрифты New Rocker и IBM Plex Mono, цветовые токены и шаг сетки 8pt.

Скилл описывает анатомию компонентов, варианты, состояния, поведение на разных экранах и обработку краевых случаев. В него также входят требования WCAG 2.2 AA, управление с клавиатуры, видимый фокус, правила текста, анти-паттерны и чек-лист для проверки кода.

Скилл доступен для Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Он задаёт New Rocker и IBM Plex Mono, поэтому это повод проверить, подходят ли эти шрифты текущему проекту.

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

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

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

  • Используй скилл fantasy, чтобы спроектировать дизайн-систему для страницы профиля игры.
  • Сформируй правила для кнопок, полей и карточек по скиллу fantasy, включая состояния клавиатуры и фокус.
  • Проверь этот интерфейс по fantasy: найди нарушения контраста, отступов и визуальной иерархии.

Как установить fantasy

1Через Skills CLI (Vercel)

npx skills add bergside/awesome-design-skills --skill fantasy -a claude-code

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

~/.claude/skills/fantasy/SKILL.md

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

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

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

retro Задаёт ретро-стиль интерфейса с контрастной палитрой, шрифтами Macondo и JetBrains Mono, а также формирует гайдлайны по стандарту WCAG 2.2 AA. CX Codex +1 2 300установок vibrant Задаёт агенту правила яркого интерфейса: палитра, шрифты, отступы и требования доступности. Пригодится, когда нужен живой визуальный стиль, а не серый дефолт. CX Codex +1 2 300установок levels Скилл для ИИ-агента: выдаёт правила дизайн-системы Levels — токены, состояния компонентов, доступность. Пригодится, когда интерфейс нужно привести к одному стилю. CX Codex +1 2 300установок dithered Задаёт правила дизайн-системы в ретро-стиле с точечными паттернами. Помогает генерировать согласованные токены, компоненты и чеклисты доступности. CX Codex +1 2 300установок mono Задаёт агенту правила дизайн-системы в стиле matrix: моноширинные шрифты, высокий контраст, компактная плотность. Пригодится, когда интерфейсу нужен вид хакерского терминала. CX Codex +1 2 300установок vintage Формирует дизайн-системы в ретро-стиле со скевоморфизмом, пиксельными шрифтами и строгими требованиями доступности для фронтенд-компонентов. CX Codex +1 2 300установок cafe Скилл задаёт дизайн-систему для интерфейсов в стиле уютного кафе. Он пригодится, когда агенту нужны правила цветов, типографики, компонентов и доступности. CX Codex +1 2 300установок flat Задаёт агенту правила плоского дизайна: токены, типографику, состояния компонентов и доступность. Пригодится, когда нужен единый стиль интерфейса без 3D-эффектов. CX Codex +1 2 300установок

Похожие

ui-ux-pro-max nextlevelbuilder Скилл подключает к агенту локальную базу из 119 UX-правил, 74 шрифтовых пар и 192 палитр. Помогает проектировать интерфейсы и проверять доступность. CX Codex +1 415 400установок better-interface jakubkrehel Проводит сквозной аудит экранов и интерфейсов по правилам доступности, вёрстки, текста, цвета и типографики. Сводит отчёты узких скиллов в единый список замечаний по приоритету. CX Codex +1 30 000установок penpot-uiux-design официальный github Скилл для создания интерфейсов в Penpot через MCP-инструменты: веб, мобайл, дашборды, дизайн-системы. Работает с API Penpot напрямую из редактора кода. 12 782установок ui-design-system samhvw8 Скилл для сборки и разбора React-интерфейсов на TailwindCSS, Radix UI и shadcn/ui. Пригодится, когда компоненты уже расползлись и нужен порядок. CX Codex +1 3 200установок rams brianlovin Проверяет компоненты интерфейса на соответствие стандарту WCAG 2.1 и находит дефекты вёрстки. Пригодится при приёмке фронтенд-кода. CX Codex +1 3 000установок shadcn-ui nexu-io Скилл помогает агенту собирать структурированные и доступные UI-компоненты с shadcn/ui. Пригодится на этапе планирования интерфейса. CX Codex +1 2 900установок

Вопросы о fantasy

Как установить fantasy в Claude Code?

Выполните npx skills add bergside/awesome-design-skills --skill fantasy -a claude-code, повторите эту команду ещё раз, затем откройте файл ~/.claude/skills/fantasy/SKILL.md.

Что делает скилл fantasy?

Он задаёт правила для фэнтезийного UI: визуальный стиль, токены, типографику, компоненты, состояния, адаптивное поведение и доступность. Результат оформляется как практическое руководство для дизайнеров и разработчиков.

Какие требования к доступности есть в fantasy?

Скилл ориентируется на WCAG 2.2 AA, keyboard-first взаимодействия и видимые состояния фокуса. Он также требует проверяемых критериев при реализации.

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

SKILL.md · MIT
---
name: fantasy
description: Game-inspired fantasy aesthetic with bold, premium visuals, rich color palettes, and immersive thematic elements.
license: MIT
metadata:
  author: typeui.sh
---

<!-- TYPEUI_SH_MANAGED_START -->
# Fantasy Design System Skill (Universal)

## Mission
You are an expert design-system guideline author for fantasy.
Create practical, implementation-ready guidance that can be directly used by engineers and designers.

## Brand
the best game in the world

## Style Foundations
- Visual style: bold, premium
- Typography scale: 12/14/16/20/24/32 | Fonts: primary=New Rocker, display=New Rocker, mono=IBM Plex Mono | weights=100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary, secondary, success, warning, danger, info | Tokens: primary=#0250CC, secondary=#FDC800, success=#16A34A, warning=#D97706, danger=#DC2626, surface=#FFFFFF, text=#111827
- Spacing scale: 8pt baseline grid


## Accessibility
WCAG 2.2 AA, keyboard-first interactions, visible focus states

## Writing Tone
concise, confident, helpful

## Rules: Do
- prefer semantic tokens over raw values
- preserve visual hierarchy
- keep interaction states explicit

## Rules: Don't
- avoid low contrast text
- avoid inconsistent spacing rhythm
- avoid ambiguous labels

## Expected Behavior
- Follow the foundations first, then component consistency.
- When uncertain, prioritize accessibility and clarity over novelty.
- Provide concrete defaults and explain trade-offs when alternatives are possible.
- Keep guidance opinionated, concise, and implementation-focused.

## Guideline Authoring Workflow
1. Restate the design intent in one sentence before proposing rules.
2. Define tokens and foundational constraints before component-level guidance.
3. Specify component anatomy, states, variants, and interaction behavior.
4. Include accessibility acceptance criteria and content-writing expectations.
5. Add anti-patterns and migration notes for existing inconsistent UI.
6. End with a QA checklist that can be executed in code review.

## Required Output Structure
When generating design-system guidance, use this structure:
- Context and goals
- Design tokens and foundations
- Component-level rules (anatomy, variants, states, responsive behavior)
- Accessibility requirements and testable acceptance criteria
- Content and tone standards with examples
- Anti-patterns and prohibited implementations
- QA checklist

## Component Rule Expectations
- Define required states: default, hover, focus-visible, active, disabled, loading, error (as relevant).
- Describe interaction behavior for keyboard, pointer, and touch.
- State spacing, typography, and color-token usage explicitly.
- Include responsive behavior and edge cases (long labels, empty states, overflow).

## Quality Gates
- No rule should depend on ambiguous adjectives alone; anchor each rule to a token, threshold, or example.
- Every accessibility statement must be testable in implementation.
- Prefer system consistency over one-off local optimizations.
- Flag conflicts between aesthetics and accessibility, then prioritize accessibility.

## Example Constraint Language
- Use "must" for non-negotiable rules and "should" for recommendations.
- Pair every do-rule with at least one concrete don't-example.
- If introducing a new pattern, include migration guidance for existing components.

<!-- TYPEUI_SH_MANAGED_END -->

© typeui.sh · MIT · bergside/awesome-design-skills

Смотрите также

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

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