Sumi — плагин
Команда из четырех агентов для дизайна в Claude Code: берет свежие образцы с отмеченных сайтов, замеряет их и строит интерфейс.
- 59 ★ репозитория
- Последний коммит
- Apache-2.0
Расширенный доступ
Почему такой уровень
- Скрипт съемки открывает чужие сайты в браузере и сохраняет их снимки.
- Плагин пишет файлы дизайна и меняет код интерфейса проекта.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/sumiОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Скрипт съемки открывает чужие сайты в браузере и сохраняет их снимки.
- Плагин пишет файлы дизайна и меняет код интерфейса проекта.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Sumi ставит в Claude Code команду из четырех агентов и 45 скиллов о дизайне. `scout` собирает актуальные образцы: победителей Awwwards с оценками жюри, экраны Mobbin, рецепты анимации MotionSites. `art-director` берет по одной яркой черте из каждого образца и записывает направление цифрами. `ux-architect` проектирует сценарии по тому, как их решают готовые приложения. `critic` снимает вашу сборку так же, как образцы, и сравнивает. Команды: `/sumi:start` спрашивает, над чем вы работаете, и выбирает сценарий; `/sumi:inspo` собирает доску образцов; `/sumi:style`, `/sumi:page` и `/sumi:screen` строят интерфейс; `/sumi:fix` чинит типовые следы ИИ, `/sumi:grade` и `/sumi:roast` оценивают, `/sumi:a11y` проверяет доступность. Скрипт съемки измеряет шрифты, палитру, кривые анимации и сетку на живой странице.
Для кого. Дизайнерам и разработчикам, которые делают лендинги и приложения с агентом и хотят избежать типового вида сгенерированных страниц.
Подходит, если
- Лендинг от Claude выглядит как все: фиолетовый градиент и три кнопки в первом экране.
- Нужна доска образцов с реальных награжденных сайтов, а не пересказ по памяти.
- Готовая сборка требует честной оценки в сравнении с сильными образцами.
- Перед выпуском нужно проверить доступность интерфейса.
Не подходит, если
- Нужен готовый дизайн-макет в Figma.
- Нет доступа в интернет для съемки живых образцов.
- Требуются точные цифры конверсии без проверки: в README отмечены непроверенные утверждения.
Пример запроса к агенту
Запусти /sumi:inspo для лендинга обжарщика кофе, громкого, но теплого, и покажи доску образцов.Ограничения
Образцы подтягиваются с чужих сайтов, поэтому нужен доступ в сеть, а скрипт съемки открывает страницы в браузере. Автор отмечает: 54 из 84 выделенных утверждений пока не проверены, больше всего вопросов к скиллу `conversion-optimization-patterns`, его цифры стоит сверять перед тем, как называть клиенту. Принцип «брать черту, а не копировать» не отменяет ответственности за чужие работы, лицензии и права на образцы проверяет пользователь. Плагин рассчитан только на Claude Code.
Как отключить. Удалите плагин командой `/plugin uninstall sumi@sumi-marketplace` и маркетплейс из `/plugin`. Файлы досок образцов остаются в проекте.
Частые вопросы
С чего начать?
С `/sumi:start`: команда спрашивает простыми словами, что вы делаете, и выбирает сценарий. Названия 45 скиллов учить не нужно.
Что входит в команду агентов?
Четыре роли: `scout` ищет образцы, `art-director` пишет направление, `ux-architect` проектирует сценарии, `critic` сравнивает сборку с образцами.
Как исправить интерфейс, который выглядит сгенерированным?
Запустите `/sumi:fix` с файлом, например `/sumi:fix DashboardCard.tsx`. Он заменяет типовые следы вроде пяти начертаний шрифта и фиолетового градиента.
Как оценить готовую страницу?
Для балла используйте `/sumi:grade`, для быстрой версии `/sumi:roast`, а для поиска неясной проблемы `/sumi:audit`.
Копирует ли Sumi чужие сайты?
Нет, по заявлению автора принцип «брать черту»: из каждого образца берется одна идея и переделывается. Ответственность за итог остается на пользователе.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныНабор для моушн-дизайна с агентом: правила с цифрами, самопроверка по кадрам и синтез звука, плюс веб-симуляции в 60 к/с
Плагин Claude Code с 17 скиллами: размер задачи, дизайн-ревью, TDD, свежие субагенты и PR после трех решений человека.
Бесплатный скилл для Claude: пишет ТЗ, подбирает видео и 3D, собирает кинематографичный лендинг и проверяет его скриншотами
Набор скиллов, токенов и правил, который делает из Claude дизайн-архитектора: DTCG-токены, компоненты, доступность и объективные проверки качества
Навык /awwwards для Claude Code: арт-дирекшен фронтенда по критериям Awwwards, с типографикой, цветом, движением и WebGL.
Команда /fireworks-design в Claude Code параллельно пробует 6–8 стилей, судит по шести критериям и доводит лучший до страницы.
Коротко о README
Плагин с командой дизайн-агентов, 45 скиллами и скриптом съемки живых страниц. Строит интерфейс по замерам образцов и сравнивает результат с ними.