ui-skills — скилл для Claude Code: что делает и как установить
Набор правил и ограничений для сборки интерфейсов. Помогает агентам сохранять единый стиль, когда проект состоит из множества мелких компонентов.
npx skills add nexu-io/open-design --skill ui-skills -a claude-codeЧто делает 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-code2Вручную: положить файлы
~/.claude/skills/ui-skills/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ui-skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill ui-skills -a codex2Вручную: положить файлы
.agents/skills/ui-skills/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill ui-skills -a cursor2Вручную: положить файлы
.cursor/skills/ui-skills/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install nexu-io/open-design ui-skills2Вручную: положить файлы
.github/skills/ui-skills/SKILL.md1Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill ui-skills -a gemini-cli2Командой платформы
gemini skills install https://github.com/nexu-io/open-design --path skills/ui-skillsВручную: положить файлы
.devin/skills/ui-skills/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add nexu-io/open-design --skill ui-skills -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора39
Весь набор →Похожие
Вопросы о 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