Фронтенд и UI
Impeccable
Две дюжины команд, чтобы собирать, критиковать и доводить фронтенд-интерфейсы.
Что это
Фронтенд-дизайн-скилл с командами по группам build, evaluate, refine, enhance, fix и iterate. Он читает контекст проекта и референс регистра, а затем пишет код продакшен-уровня.
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing page
Почему это важно для дизайна
- Разделение по регистру ведёт маркетинговые страницы и продуктовый UI по разным правилам дизайна.
- Абсолютные запреты отвергают градиентный текст, боковые полосы-рамки и надзаголовки над каждой секцией.
- Минимумы контраста заданы явно: 4.5:1 для основного текста, 3:1 для крупного.
Что внутри
- Setup
- Design guidance
- The AI slop test
- Commands
- Routing rules
- Hooks
Как установить
Impeccable
-
Клонируйте репозиторий.
git clone https://github.com/pbakaus/impeccable -
Укажите Codex на файл скилла.
plugin/skills/impeccable/SKILL.md -
Дальше опишите нужный интерфейс. Codex следует скиллу.
Как запустить с Codex
-
Запускайте context.mjs раз за сессию, чтобы скилл загрузил PRODUCT.md и DESIGN.md.
-
Вызовите команду вроде critique, polish или animate с целевым файлом.
-
Используйте live-режим с запущенным dev-сервером, чтобы генерировать варианты прямо в браузере.
Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.
Больше плагинов в списке codex-design ↗Следующий шаг
Проектируйте с Open Design без возни с настройкой
Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.