OJO Design Skills
Два скилла по UI и UX учат агента дизайн-решениям: выбор дорожки, токены, рецепты компонентов и защита от шаблонного вида.
- 177 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скиллы дают инструкции для генерации кода интерфейса, а установщик скачивается и запускается из сети.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add skills/ojo-design-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скиллы дают инструкции для генерации кода интерфейса, а установщик скачивается и запускается из сети.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
OJO Design Skills — набор из двух скиллов, который дает агенту методику вместо типового вида «как у ИИ». Скилл `app-ui-ux-best-practices` выбирает дорожку по ценности продукта. Дорожка Convention берет проверенный язык дизайна, как у Notion, Linear, Stripe или Things 3, для SaaS и утилит. Дорожка Innovation строит фирменный образ через материальную метафору, архетип, нарратив или культурную семиотику. К скиллу приложены 9 справочных файлов: антипаттерны, визуальные токены, рецепты компонентов, система движения, аудит дизайна. Второй скилл, `pixel-paper-editorial`, собирает адаптивные сайты на белом точечном фоне с оригинальными пиксельными стикерами и ретро-интерфейсом. Правила жесткие: запрещены сочетания вроде сине-фиолетовых градиентов и серых заглушек, а на экранах с картинками нужны реальные ресурсы по теме. Компоненты выдаются как строки классов Tailwind с моделью из восьми состояний, анимация строится на пружинной физике.
Для кого. Фронтенд-разработчикам и дизайнерам-одиночкам, которые хотят получать от агента макеты с внятной системой, а не усредненные страницы.
Подходит, если
- Для SaaS-продукта нужен интерфейс в духе Linear или Notion с токенами и рецептами компонентов.
- У бренда должен быть собственный образ, и его строят через архетип или нарратив.
- Готовую страницу нужно проверить на шаблонные приемы: градиенты, серые блоки, декоративные заглушки.
- Портфолио или лендинг делают в стиле пиксельной бумаги с точечным фоном и коллажем из вырезок.
Не подходит, если
- Нужен готовый UI-кит с компонентами для React: скиллы описывают методику и спецификации, библиотеку они не поставляют.
- Проект работает на другом стеке стилей, и классы Tailwind в нем не подойдут.
- Задача чисто серверная, и интерфейса в ней нет.
Пример запроса к агенту
Используй `app-ui-ux-best-practices`: выбери дорожку для приложения учета кофе и выдай токены, рецепты компонентов и спецификацию движения.Ограничения
Скиллы дают спецификации и правила. Готовой библиотеки компонентов в них нет, код собирает агент по вашему стеку. Результат в классах Tailwind, для другой системы стилей его придется переводить. Строгие запреты на градиенты и серые заглушки могут не подойти нейтральным корпоративным интерфейсам. Установщик скачивается и запускается из сети, поэтому прочитайте `scripts/install.sh` перед стартом. Нужны Bash, `curl` и `tar`, после установки клиент иногда требует перезапуска.
Как отключить. Удалите папки `app-ui-ux-best-practices` и `pixel-paper-editorial` из каталога скиллов клиента, например `~/.claude/skills`. Служебных процессов набор не оставляет.
Частые вопросы
Как установить OJO Design Skills?
Выполните скрипт установки с нужным клиентом: `curl -fsSL https://raw.githubusercontent.com/touchine-ojo/OJO-Design-Skills/main/scripts/install.sh | bash -s -- --target claude-code`. Для Codex укажите `--target codex`. Клиент после установки лучше перезапустить.
Какие агенты поддерживаются?
Семь целей установки: Codex, Claude Code, ZCode, DeepCode, WorkBuddy, OpenCode и универсальный агент `generic`. Каталог скиллов у каждого свой, например `~/.claude/skills` у Claude Code.
Чем различаются дорожки Convention и Innovation?
Convention берет проверенный язык дизайна для SaaS и утилит. Innovation строит фирменный образ из материальной метафоры, архетипа, нарратива или культурной семиотики. Дорожку выбирает сам скилл по ценности продукта.
Что запрещают правила против шаблонного вида?
Жестко запрещены сине-фиолетовые градиенты, серые блоки-заглушки и однотонные палитры. Экраны с картинками требуют реальных ресурсов по теме без декоративных заглушек и фальшивых улыбок.
Можно ли поставить из локальной копии?
Да, из клона запускается `./scripts/install.sh`. Среди расширенных вариантов есть `--force` для замены без резервных копий, `--dest` для своей папки и переменные вроде `CLAUDE_HOME`.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
СкиллыСкиллы для дизайн-инженеров: быстрая чистка интерфейса, доступность, метаданные и производительность анимаций
Скилл для агента с базой из 107 стилей, 127 палитр и 107 шрифтовых пар: генерирует дизайн-систему и проверяет код интерфейса
Скиллы против шаблонных интерфейсов: сетка, типографика, анимация и отступы, плюс генерация референсов для веба и мобильных
Реестр устанавливаемых дизайн-скиллов: готовые файлы SKILL.md и DESIGN.md с токенами, правилами компонентов и доступностью под разные стили
Скилл для интерфейсов без шаблонного ИИ-вида: типографика, цвет, движение, состояния компонентов и критика готового.
Скилл с базой стилей, палитр, шрифтовых пар и UX-правил, который генерирует дизайн-систему под тип продукта
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| OJO Design Skills (эта карточка) | нет | 177 | |
| Impeccable | нет | 108 873 | набор команд для проверки и полировки готового интерфейса; OJO дает методику выбора дорожки и пиксельный редакционный стиль |
| UI UX Pro Max | нет | 148 331 | база стилей, палитр и шрифтов для поиска; OJO связывает выбор с дорожками Convention и Innovation |
Коротко о README
Набор ставится одним установщиком в каталог скиллов выбранного клиента. В репозитории есть переводы README на китайский, японский, корейский и испанский языки.