Фронтенд и 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
Из исходного SKILL.md

Почему это важно для дизайна

  • Разделение по регистру ведёт маркетинговые страницы и продуктовый UI по разным правилам дизайна.
  • Абсолютные запреты отвергают градиентный текст, боковые полосы-рамки и надзаголовки над каждой секцией.
  • Минимумы контраста заданы явно: 4.5:1 для основного текста, 3:1 для крупного.

Что внутри

  • Setup
  • Design guidance
  • The AI slop test
  • Commands
  • Routing rules
  • Hooks

Как установить

Impeccable

  1. Клонируйте репозиторий.

    git clone https://github.com/pbakaus/impeccable
  2. Укажите Codex на файл скилла.

    plugin/skills/impeccable/SKILL.md
  3. Дальше опишите нужный интерфейс. Codex следует скиллу.

Как запустить с Codex

  1. Запускайте context.mjs раз за сессию, чтобы скилл загрузил PRODUCT.md и DESIGN.md.

  2. Вызовите команду вроде critique, polish или animate с целевым файлом.

  3. Используйте live-режим с запущенным dev-сервером, чтобы генерировать варианты прямо в браузере.

Каждый плагин здесь бесплатный, с открытым кодом и ссылкой на реальный исходник.

Больше плагинов в списке codex-design ↗

Следующий шаг

Проектируйте с Open Design без возни с настройкой

Поставьте этот плагин сами или разверните вокруг Codex целый кураторский дизайн-слой в Open Design. Свой ключ, свой результат.