К основному содержанию
скилл Claude Code CX Codex Cursor GitHub Copilot

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

Набор правил и ограничений для сборки интерфейсов. Помогает агентам сохранять единый стиль, когда проект состоит из множества мелких компонентов.

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

Что делает ui-skills

Скилл задаёт чёткие рамки для вёрстки и оформления интерфейсных элементов. Когда агент пишет отдельные кнопки или карточки, они часто разъезжаются по стилю. ui-skills фиксирует подход дизайн-системы, чтобы код оставался согласованным между разными частями экрана.

В репозитории nexu-io/open-design этот скилл служит каталожной записью правил от @ibelick. Запись нужна, чтобы агент обнаружил дизайн-систему на этапе планирования. Чтобы запустить оригинальный воркфлоу с полными скриптами и референсными ассетами, придётся отдельно поставить апстрим-бандл. Без исходного репозитория агент использует только базовые ограничения из манифеста.

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

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

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

  • Примени ui constraints при создании новой карточки профиля
  • Собери форму авторизации, используя ui guide
  • Запусти ui-skills для проверки вёрстки компонентов

Как установить ui-skills

1Через Skills CLI (Vercel)

npx skills add nexu-io/open-design --skill ui-skills -a claude-code

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

~/.claude/skills/ui-skills/SKILL.md

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

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

Весь набор →
ui-ux-pro-max nexu-io Каталожная карточка для обнаружения скилла UI/UX Pro Max в репозитории OpenDesign. Помогает агенту распознавать запросы к паттернам интерфейсов и эвристикам юзабилити. Claude Code CX Codex Cursor +1 5 400установок frontend-design nexu-io Скилл для создания фронтенд-интерфейсов с продуманной типографикой, цветом и вёрсткой — от лендингов до дашбордов. Claude Code CX Codex Cursor +1 4 800установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. Claude Code CX Codex Cursor +1 3 400установок creative-director nexu-io Скилл ведёт разработку креативной концепции от брифа до презентации и проверяет идеи по трём осям. Нужен для кампаний и критики концепций. Claude Code CX Codex Cursor +1 3 400установок design-brief nexu-io Преобразует дизайн-бриф в формате I-Lang в конкретную спецификацию с палитрой, типографикой, плотностью и ограничениями. Устраняет неопределённость из фраз вроде «сделай профессионально». Claude Code CX Codex Cursor +1 3 400установок apple-hig nexu-io Подключает базу Apple Human Interface Guidelines для iOS, macOS, visionOS, watchOS и tvOS к агенту при проектировании интерфейсов. Claude Code CX Codex Cursor +1 3 200установок hatch-pet nexu-io Создаёт и упаковывает спрайтшиты анимированных питомцев для Codex в формате 8×9. Пригодится для сборки пиксельного компаньона по концепту или картинке-референсу. Claude Code CX Codex Cursor +1 3 100установок d3-visualization nexu-io Скилл учит агента создавать интерактивные графики и визуализации данных на D3.js. Подойдёт, если нужно быстро генерировать диаграммы для дашбордов, отчётов и прототипов. Claude Code CX Codex Cursor +1 3 100установок

Похожие

expo-brownfield expo Помогает внедрить React Native и Expo в существующие нативные приложения на iOS и Android. Пригодится для точечной встройки экранов в SwiftUI, UIKit или Kotlin. Claude Code CX Codex Cursor +1 27 700установок argent-screenshot-diff software-mansion Сравнивает скриншоты до и после изменений в UI: ловит сдвиги в раскладке, отступах, цвете и рендере текста. Claude Code CX Codex Cursor +1 24 900установок popular-web-designs Hermes Agent + Teknium (design systems sourced from VoltAgent/awesome-design-md) 54 готовых дизайн-систем реальных сайтов (Stripe, Linear, Vercel, Claude) с CSS-токенами, типографикой и компонентами для быстрой вёрстки в стиле известных брендов. Claude Code CX Codex Cursor +1 914установок expo-data-fetching expo Скилл настраивает сетевые запросы, кэширование и обработку ошибок в Expo. Помогает прописать состояния экранов и интеграцию с TanStack Query. Claude Code CX Codex Cursor +1 27 200установок playwright-skill lackeyjb Скилл для написания и запуска Playwright-скриптов прямо в редакторе. Автоматически находит dev-серверы, делает скриншоты, проверяет адаптивность, тестирует логины и валидирует работу сайта. Claude Code CX Codex Cursor +1 6 900установок angular-migration Seth Hobson Помогает переносить приложения с AngularJS на Angular по частям или целиком. Пригодится для гибридных приложений, замены компонентов и обновления зависимостей. Claude Code CX Codex Cursor 10 900установок frontend-design официальный anthropics Скилл задаёт осмысленное визуальное направление для новых интерфейсов и редизайна. Подойдёт, когда стандартный шаблонный UI не устраивает. Claude Code Claude.ai 1 025 790установок design-taste-frontend Leonxlnx Скилл задаёт арт-дирекцию для публичных страниц и рабочих экранов, а затем проверяет результат в браузере по скриншотам. Нужен, когда интерфейс выглядит шаблонным или недоработанным. Claude Code CX Codex Cursor +1 673 100установок

Вопросы о ui-skills

Как установить ui-skills в Claude Code?

Выполните команду npx skills add nexu-io/open-design --skill ui-skills -a claude-code. Также можно вручную сохранить файл по пути ~/.claude/skills/ui-skills/SKILL.md.

Зачем нужен скилл ui-skills?

Он задаёт агенту субъективные правила и ограничения для вёрстки. Это помогает не терять связность оформления при генерации множества небольших фрагментов интерфейса.

Что требуется для запуска полного пайплайна ui-skills?

В каталоге OpenDesign находится мета-запись для планирования. Для доступа к исходным скриптам и ассетам нужно установить оригинальный бандл из репозитория ibelick/ui-skills.

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

SKILL.md · Apache-2.0
---
name: ui-skills
description: |
  Opinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces.
triggers:
  - "ui constraints"
  - "ui guide"
  - "opinionated ui"
  - "ui rules"
od:
  mode: design-system
  category: design-systems
  upstream: "https://github.com/ibelick/ui-skills"
---

# ui-skills

> Curated from @ibelick.

## What it does

Opinionated, evolving constraints to guide agents when building interfaces. Useful for keeping output coherent across many small UI pieces.

## Source

- Upstream: https://github.com/ibelick/ui-skills
- Category: `design-systems`

## How to use

This catalogue entry advertises the skill in OpenDesign so the agent
discovers it during planning. To run the full upstream workflow with
its original assets, scripts, and references, install the upstream
bundle into your active agent's skills directory:

```bash
# Inspect the upstream README for exact paths
open https://github.com/ibelick/ui-skills
```

Then ask the agent to invoke this skill by name (`ui-skills`) or with
one of the trigger phrases listed in this skill's frontmatter.

© nexu-io · Apache-2.0 · nexu-io/open-design

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

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

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