ForgetMe Design Harness

Один управляемый процесс для создания аккуратных веб-интерфейсов в Codex и Claude Code: интервью → контекст → дизайн → сборка → обратная связь → независимое ревью → ОТК.

Это не ещё один «сделай красиво» prompt и не свалка из одновременно активных Skills. Impeccable отвечает за дизайн и производство, Jakub Krehel — за отдельное read-only ревью, а браузерные проверки — за факты, которые не должны зависеть от вкуса модели. Опциональные carriers и каталоги включаются только под конкретную утверждённую задачу и не становятся дополнительными арт-директорами.

Документация соответствует workflow v0.2.0.

Что получает пользователь

После одного запуска workflow:

1. проверяет проект и уже установленный контекст;
2. задаёт короткие адаптивные вопросы;
3. принимает положительные и отрицательные референсы как скриншоты или ссылки;
4. при отсутствии референсов предлагает 2–3 направления на выбор;
5. показывает одну карточку понимания и ждёт подтверждение;
6. создаёт пользовательские PRODUCT.md, REFERENCES.md, DESIGN.md, ACCEPTANCE.md и brief поверхности;
7. передаёт производство Impeccable;
8. при необходимости проводит dev-only раунд пользовательских аннотаций через Agentation и исправляет подтверждённые замечания;
9. запускает независимый аудит Jakub;
10. проверяет результат detector, Playwright, axe и Lighthouse;
11. выдаёт честный вердикт с визуальными доказательствами и незакрытыми пробелами.

Ни один intent-файл не заполняется молча. Если пользователь хочет делегировать решение, он прямо говорит «выбери сам» и подтверждает предложенное направление.

Быстрый старт

Требуется Node.js 22.20 или новее.

Публичная установка из GitHub Release v0.2.0:

npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.0/forgetme-design-harness-0.2.0.tgz forgetme-design-harness install

После публикации в npm та же команда станет короче:

npx forgetme-design-harness install

Команда по умолчанию устанавливает project-local entry skill для Codex и Claude Code, затем запускает официальные установщики Impeccable и полного набора Jakub. Jakub-набор загружается из неизменяемого GitHub archive на commit a67333399dabbc71d7778962cb9c4fb9b86a00d0; успешный код внешнего установщика дополнительно проверяется по SHA-256 закреплённых core-файлов всех восьми skills на каждом выбранном хосте. Неожиданный upstream drift считается ошибкой и требует осознанного обновления Harness. Для компактных Jakub skills проверяется точное дерево: лишний файл тоже считается drift. Для более крупного Impeccable проверяются host-specific инструкция, связанные guidance-файлы, detector, hook entry points и их локальная import-цепочка; отчёт честно помечает этот режим как pinned-sentinels, а не как хэш всего дерева. Перед каждым внешним шагом Harness сохраняет затрагиваемые skill-каталоги и известные hook-конфиги. Ненулевой exit либо несовпадение хэшей откатывает этот ограниченный набор изменений и не советует запускать upstream-команду отдельно, потому что это обошло бы повторную проверку. Сторонние проекты не копируются внутрь Design Harness. Agentation, transitions.dev, Border Beam, Thinking Orbs, AICSS, Beautiful UI, Originkit, Canvas UI и Metal FX входят только в каталог маршрутизации: обычная установка Harness их не устанавливает.

Для локальной проверки checkout без изменения открытого проекта:

npm ci
npm run validate
npm run pack:check

Запуск в Codex:

Используй $design-harness и собери сайт-визитку.

Codex ищет project skills в .agents/skills от текущей папки до корня Git- репозитория — это соответствует официальному руководству по Codex skills. После установки skill обычно обнаруживается автоматически. Если он не появился в $ или /skills, откройте новую задачу из корня нужного проекта; если это не помогло — перезапустите Codex и выполните check. В отчёте должны быть отдельно installation: ready и QA tooling/config: ready; отсутствие Impeccable или любого из семи Jakub skills теперь считается ошибкой, а не успешной установкой. Project QA tooling/config считается готовым только при реально установленном локальном node_modules, наличии Playwright/axe/Lighthouse и соответствующих Playwright и Lighthouse конфигов. Один Vitest/Jest-конфиг или только записи в package.json не дают ложный зелёный статус. Для --scope user команда проверяет установку; QA проверяется отдельным project-scope запуском из корня проекта.

Запуск standalone-установки в Claude Code:

/design-harness Собери сайт-визитку.

При установке Claude-плагина через marketplace стабильное namespaced-имя:

/design-harness:design-harness Собери сайт-визитку.

После установки Impeccable в Codex откройте /hooks и одобрите его project hook.

Установка без сторонних зависимостей

Чтобы поставить только orchestrator и сначала всё осмотреть:

npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.0/forgetme-design-harness-0.2.0.tgz forgetme-design-harness install --skip-upstreams

Полезные параметры:

--host codex|claude|both   Куда установить; по умолчанию both
--scope project|user      Область; по умолчанию project
--target <path>           Корень project-установки
--dry-run                 Показать изменения, ничего не записывая
--force                   Заменить только существующий design-harness
--skip-upstreams          Не запускать установщики Impeccable и Jakub
--installation-only      Только для check: проверить core без project QA gate
--json                    Машиночитаемый результат

Проверить состояние без изменений:

npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.0/forgetme-design-harness-0.2.0.tgz forgetme-design-harness check

check сама не обращается к сети. Показанная команда npx скачает пакет, если его ещё нет в локальном кэше; уже установленный CLI можно запустить напрямую как forgetme-design-harness check.

check — это проверка целостности установки и наличия QA-инструментов с конфигурацией, а не качества готового интерфейса. Она ничего не запускает и не заменяет свежие Playwright/axe/Lighthouse/detector-отчёты. После --skip-upstreams она намеренно вернёт ненулевой статус и перечислит отсутствующие core skills и QA-возможности.

Rollback внешнего шага также не является sandbox: npm/GitHub installer уже был явно авторизован и теоретически способен менять произвольные файлы или внешнее состояние. Harness восстанавливает только выбранные upstream skill-каталоги, новые записи в соответствующих skills-root и известные Impeccable hook sidecars; любой неполный rollback выводится как отдельная ошибка с сохранённым backup.

Установка как Claude Code plugin

Плагин содержит orchestrator, но не распространяет сторонние Impeccable/Jakub sources. Для полностью проверяемой project-local установки сначала выполните bootstrap; он также создаст standalone-команду /design-harness:

npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.0/forgetme-design-harness-0.2.0.tgz forgetme-design-harness install --host claude --target .
npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.0/forgetme-design-harness-0.2.0.tgz forgetme-design-harness check --installation-only --host claude --target .

На чистом проекте до создания QA-конфигурации используйте для bootstrap-проверки check --installation-only --host claude --target .: команда требует installation: ready, явно пишет, что QA пропущена, и не выдаёт её за пройденную. После успешной installation-only проверки установите plugin, если нужна namespaced-команда:

/plugin marketplace add ForgetMeAI/design-harness
/plugin install design-harness@forgetme-design-harness
/reload-plugins
/design-harness:design-harness

Локальная разработка:

claude plugin validate adapters/claude-code --strict
claude --plugin-dir adapters/claude-code

Принцип разделения ролей

• PRODUCT.md отвечает: для кого, зачем, какой голос и чего избегать.
• REFERENCES.md фиксирует не только ссылки, но и конкретно что брать/не брать.
• DESIGN.md — визуальный контракт в совместимом с Impeccable формате.
• Impeccable — единственный главный дизайн-контур.
• better-interface — независимый технадзор после реализации.
• Detector и browser QA — автоматический ОТК.

Два широких дизайн-контура намеренно не смешиваются в одном production-проходе: это создаёт конфликт вместо качества и делает результат неаудируемым.

Полный договор фаз, полномочий и результатов: docs/WORKFLOW.md.

Автоматическая приёмка

Workflow умеет подготовить project-local QA scaffold для:

• Playwright screenshots на mobile/tablet/desktop;
• axe accessibility scan;
• reduced-motion режима;
• Lighthouse CI без публичной загрузки отчётов;
• Impeccable detector.

Loading, empty, error и long-copy состояния зависят от приложения. Если для них нет воспроизводимого route/fixture, итог будет Not reviewed, а не выдуманный зелёный статус. Screenshot mismatch никогда не принимается автоматически.

Опциональные carriers и каталоги

• Human feedback: Agentation — dev-only мост между первой сборкой и независимым ревью. По умолчанию используются ручные локальные аннотации; Agentation MCP включается только после отдельного явного согласия пользователя на способ запуска и хранения данных. Agentation исключается из production bundle.
• Product motion: transitions.dev — узкий method carrier для обычных переходов интерфейса. Сначала запускается read-only review, refine или polish; изменение кода через apply требует подтверждения. GSAP остаётся вариантом только для действительно сложного motion и имеет собственную, не OSI open-source лицензию.
• Contextual primitives: Border Beam допускается только как семантический акцент состояния active/live/processing либо одного приоритетного CTA; Thinking Orbs — только для реальных AI-состояний с видимым текстом, accessibility-семантикой и статическим reduced-motion fallback.
• AI-interface catalogs: AICSS можно рассматривать только для утверждённых agent/chat-сценариев и после проверки доступа к конкретному компоненту; Beautiful UI используется как каталог паттернов и референсов, а не как источник кода без подтверждённой лицензии.
• Effects and inspiration lab: Originkit, Canvas UI и Metal FX используются только для одного явно утверждённого эффекта с проверенными условиями, browser/performance budget, reduced-motion и обычным fallback без WebGL.
• Existing narrow routes: shadcn — только для подходящего React/product UI; Storybook — когда проекту действительно нужна компонентная система; image generation — когда утверждённому направлению нужны оригинальные assets.

Ни один carrier, primitive, каталог или effects-инструмент не устанавливается по умолчанию. До подключения Harness фиксирует назначение, точный источник и версию, лицензионный режим, fallback и явное одобрение пользователя.

Разработка и проверка

npm run sync:claude
npm test
npm run validate
npm pack --dry-run

Skill хранится в skills/design-harness/. Claude-версия генерируется в adapters/claude-code/, потому что Claude Code использует дополнительное поле ручного invocation, которого нет в стандартном Codex frontmatter. Не редактируйте сгенерированную копию вручную.

Приватность

Design Harness не требует API-ключей и не хранит историю чата. Машинное состояние содержит только фазу, пути и минимальные checkpoint-данные. Никогда не помещайте credentials в PRODUCT.md, DESIGN.md, reference-файлы или отчёты.

Аннотации Agentation могут содержать текст интерфейса, селекторы и технический контекст страницы. Harness использует их только локально в dev-среде; MCP и любой персистентный способ хранения требуют отдельного opt-in и не включаются на страницах с credentials или чувствительными пользовательскими данными.

Лицензии

Собственный код — MIT. Impeccable, Jakub, Playwright, axe, Lighthouse и опциональные carriers сохраняют собственные условия. См. THIRD_PARTY.md.