ui-designer · daniel-dan-conrad — скилл для Claude Code: вёрстка без шаблонного вида
Скилл для сборки фронтенда с осознанным визуальным направлением: типографика, цвет, движение и композиция вместо дефолтных решений.
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a claude-codeЧто делает ui-designer
Скилл включается, когда вы просите собрать компонент, страницу, дашборд или лендинг. Сначала он разбирает четыре вопроса: задача интерфейса, тон, технические ограничения и чем результат запомнится. Только после этого пишется код.
Внутри есть скрипт scripts/find-relevant-image.py. Он подбирает картинку из каталога assets/images.csv по совпадению тегов с вашим описанием, проверяет файл через file и кладёт результат в scripts/outputs/. Имя выходного файла задаёт метаданные изображения, не вы. Запуск: python scripts/find-relevant-image.py "<description>".
Скилл требует Python для скрипта подбора картинок. Отдельно он перечисляет, чего делать не стоит: шрифтовые стеки вроде Inter, Roboto и Arial, фиолетовые градиенты на белом, предсказуемые сетки. Если ваш проект уже держится на такой дизайн-системе, скилл будет тянуть в другую сторону — это повод проверить, готовы ли вы к смене визуального языка.
Какие задачи решает
- собрать лендинг с внятной визуальной идеей, а не дефолтной сеткой
- подобрать шрифтовую пару вместо системного стека
- настроить анимацию появления секций через
animation-delay - найти тематическое изображение под контекст страницы
- собрать дашборд с асимметричной композицией
Примеры запросов агенту
- Собери лендинг для кофейни: тёмная тема, крупная акцидентная типографика, плавное появление секций
- Сделай React-компонент карточки товара в брутальном стиле, без Inter и системных шрифтов
- Подбери фоновое изображение для страницы о японских храмах через
scripts/find-relevant-image.py
Как установить ui-designer
1Через Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a claude-code2Вручную: положить файлы
~/.claude/skills/ui-designer/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/ui-designer/
1Через Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a codex2Вручную: положить файлы
.agents/skills/ui-designer/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a cursor2Вручную: положить файлы
.cursor/skills/ui-designer/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install daniel-dan-conrad/ui-designer-skill ui-designer2Вручную: положить файлы
.github/skills/ui-designer/SKILL.md1Через Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a gemini-cli2Командой платформы
gemini skills install https://github.com/daniel-dan-conrad/ui-designer-skillВручную: положить файлы
.devin/skills/ui-designer/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о ui-designer
Как установить ui-designer в Claude?
Выполните npx skills add daniel-dan-conrad/ui-designer-skill --skill ui-designer -a claude-code. Скилл встанет в ~/.claude/skills/ui-designer/SKILL.md.
Что делает ui-designer?
Задаёт визуальное направление до начала кода и собирает фронтенд под него: типографика, цветовая схема на CSS-переменных, анимации, композиция. Отдельно подбирает изображения из встроенного каталога.
Что нужно для работы скрипта подбора картинок?
Python. Скрипт scripts/find-relevant-image.py читает assets/images.csv, сверяет теги с вашим описанием и сохраняет выбранный файл в scripts/outputs/.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — ui-designer от других авторов.
