design · subframeapp — скилл для Claude Code: дизайн в Subframe из чата
Ведёт агента по работе с Subframe: собрать страницу или компонент, сравнить варианты на канвасе, поправить тему.
npx skills add SubframeApp/subframe --skill design -a claude-codeЧто делает design
Скилл включается, когда готовый результат должен жить в Subframe, а не в ветке репозитория. Агент сначала разбирается, что в макете оставить, а что поменять: читает содержимое существующей страницы и смотрит, как она отрисована. Для ссылки на сайт или чужой код берёт исходники и скриншоты инструментами хоста. Одного описания словами ему мало — восстанавливать интерфейс по прозе выходит криво.
Дальше выбирается минимальное действие: правка страницы или сниппета на месте, копия один в один, либо генерация с нуля. Ссылки на исходники и картинки идут в брифе вместе с пометкой, что сохранить и что изменить, потому что генератор не видит переписку с агентом. Недостающие примитивы создаются до того, как на них сошлётся страница. Сам скилл требует доступа к инструментам Subframe, без него шаги не выполнятся.
После работы агент снимает скриншот изменённого и сверяет с референсом: нижние секции, адаптив, состояния. Мелкую правку в готовом интерфейсе проще сделать прямо в коде, если проект не держит дизайн в Subframe. Токены темы скилл меняет поверх существующих, чтобы не плодить похожие дубли.
Какие задачи решает
- собрать новую страницу в Subframe по референсу
- сравнить несколько вариантов макета на одном канвасе
- поправить стили узла, не ломая соседние элементы
- свести комментарии команды к правкам конкретных элементов
- обновить токены темы, чтобы изменения подхватили готовые экраны
Примеры запросов агенту
- Собери в Subframe страницу тарифов по скриншоту
pricing.png, три колонки - Поменяй заголовок и отступы на странице онбординга в Subframe
- Сделай вторую вариацию главного экрана, но с акцентом на поиск
Как установить design
1Через Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill design -a claude-code2Вручную: положить файлы
~/.claude/skills/design/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/design/
1Через Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill design -a codex2Вручную: положить файлы
.agents/skills/design/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill design -a cursor2Вручную: положить файлы
.cursor/skills/design/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install SubframeApp/subframe design2Вручную: положить файлы
.github/skills/design/SKILL.md1Через Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill design -a gemini-cli2Командой платформы
gemini skills install https://github.com/SubframeApp/subframe --path plugins/subframe/skills/designВручную: положить файлы
.devin/skills/design/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add SubframeApp/subframe --skill design -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о design
Как установить design в Claude Code?
Выполните npx skills add SubframeApp/subframe --skill design -a claude-code. Файл скилла окажется по пути ~/.claude/skills/design/SKILL.md.
Что делает скилл design?
Проводит агента по операциям Subframe: создание и правка страниц, компонентов, сниппетов, документов и тем, а также сравнение вариантов дизайна.
Чем design отличается от develop и import?
design нужен, когда результат остаётся в Subframe. Реализацию в коде ведёт develop, а перенос готовой дизайн-системы в Subframe — import.
Похожие скиллы
Всё по теме «Дизайн» →Сначала — design от других авторов.
