Один Skill для управляемого дизайна веб-интерфейсов в Codex и Claude Code.
Интервью → утверждённый контекст → Impeccable build → независимое ревью → browser QA.
Зачем · Как работает · Быстрый старт · Проверки · Опциональные инструменты · Документация
Note
Документация и команды соответствуют релизу v0.2.1. Design Harness — не
«сделай красиво»-промпт и не набор одновременно активных
арт-директоров. Пользователь владеет намерением, Impeccable отвечает за дизайн
и производство, Jakub skills проводят отдельное read-only ревью, а браузерные
проверки подтверждают измеримые свойства результата.
| Обычная генерация интерфейса | Design Harness |
|---|---|
| Агент начинает писать UI после одной расплывчатой фразы | Сначала выясняет аудиторию, цель, ограничения и визуальные предпочтения |
| Стиль дрейфует между экранами и итерациями | Утверждённый DESIGN.md становится визуальным контрактом |
| Та же модель и создаёт, и «независимо» проверяет | Производство и read-only ревью разделены |
| Наличие конфигов легко принять за пройденный QA | Pass, Fail и Not reviewed фиксируются отдельно |
| Эффекты добавляются потому, что они доступны | Любой carrier или внешний источник требует конкретной задачи и approval |
Результат — не один гарантированный стиль, а воспроизводимый процесс, который не теряет решения пользователя между вопросами, кодом, ревью и приёмкой.
flowchart LR
A["1 · Интервью<br/>цель, аудитория, вкус"] --> B["2 · Approval<br/>карточка понимания"]
B --> C["3 · Контекст<br/>PRODUCT · REFERENCES · DESIGN"]
C --> D["4 · Impeccable<br/>build + internal review"]
D --> E["5 · Jakub skills<br/>independent read-only audit"]
E --> F["6 · Browser QA<br/>detector · Playwright · axe · Lighthouse"]
F --> G["7 · Handoff<br/>evidence · gaps · verdict"]
После одного вызова Harness:
- проверяет проект, доступные инструменты и незавершённое состояние;
- задаёт короткие адаптивные вопросы;
- принимает положительные и отрицательные референсы как скриншоты или ссылки;
- если референсов нет — предлагает 2–3 направления на выбор;
- показывает одну карточку понимания и ждёт явного подтверждения;
- только после approval создаёт intent-файлы и surface briefs;
- передаёт реализацию Impeccable;
- при необходимости проводит dev-only feedback-round через Agentation;
- запускает независимое Jakub review и исправление принятых findings;
- выполняет автоматизированную приёмку и выдаёт честный handoff.
| Файл | За что отвечает |
|---|---|
PRODUCT.md |
Для кого продукт, какую задачу решает, каким голосом говорит |
REFERENCES.md |
Какие референсы одобрены и что именно из них брать или не брать |
DESIGN.md |
Визуальный контракт, токены, композиция, motion и anti-patterns |
ACCEPTANCE.md |
Проверяемые критерии готовности |
.impeccable/surfaces/*.md |
Контракт конкретной страницы или поверхности |
Ни один intent-файл не заполняется молча. Пользователь может сказать «выбери сам», но предложенное решение всё равно должно быть показано и утверждено.
| Участник | Роль | Может менять UI-код? |
|---|---|---|
| Пользователь | Владеет продуктовым и визуальным намерением | Через решения и approval |
| Design Harness | Ведёт фазы, маршрутизирует инструменты, хранит checkpoints | Только в разрешённой фазе |
| Impeccable | Единственный широкий контур дизайна и производства | Да |
| 7 Jakub skills | Независимый аудит интерфейса по узким методикам | Нет, только findings |
| Detector и browser QA | Проверяют измеримые свойства и сохраняют evidence | Только точечные fixes после verdict |
| Optional tools | Подключаются под одну утверждённую задачу | Только после отдельного approval |
Read-only набор: better-interface, better-accessibility, better-colors,
better-layout, better-typography, better-ui и better-writing.
Требуется Node.js 22.20.0 или новее. Пакет пока не опубликован в npm registry; текущий закреплённый канал распространения — GitHub Release.
Точный asset v0.2.1 прошёл чистую установку Codex на Ubuntu и macOS с
Node.js 22.20.0; публичное доказательство — run 31169086066.
npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.1/forgetme-design-harness-0.2.1.tgz forgetme-design-harness installПо умолчанию команда устанавливает project-local skill для Codex и Claude Code, затем запускает закреплённые установщики Impeccable и семи Jakub review skills.
npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.1/forgetme-design-harness-0.2.1.tgz forgetme-design-harness check --installation-onlyОжидаемый результат:
installation: ready
QA tooling/config: deliberately skipped by --installation-only
Codex ищет project skills в .agents/skills от текущей папки до корня Git-
репозитория. После установки откройте новую задачу именно из нужного проекта,
выберите $design-harness и вызовите:
Используй $design-harness и собери сайт-визитку моих проектов.
После установки Impeccable откройте /hooks и одобрите его project hook.
Tip
Если skill не появился в $ или /skills: откройте новую задачу из корня
проекта → проверьте /skills → перезапустите Codex → повторите check.
Подробнее: официальное руководство Codex skills.
Параметры CLI
| Параметр | Назначение |
|---|---|
--host codex|claude|both |
Хост установки; по умолчанию both |
--scope project|user |
Project-local или user scope |
--target <path> |
Корень project-установки |
--dry-run |
Показать действия без записи файлов |
--force |
Заменить существующий design-harness |
--skip-upstreams |
Установить только orchestrator, без Impeccable/Jakub |
--installation-only |
Только для check: проверить core без project QA gate |
--json |
Вернуть машиночитаемый отчёт |
Проверка полного project-состояния:
npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.1/forgetme-design-harness-0.2.1.tgz forgetme-design-harness checkcheck сама не обращается к сети. Однако показанная npx-команда скачивает
пакет, если его нет в локальном npm cache.
Установка только orchestrator
npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.1/forgetme-design-harness-0.2.1.tgz forgetme-design-harness install --skip-upstreamsВ чистом проекте после этого check намеренно останется красным, пока Impeccable
и все семь core review skills не будут установлены и проверены. Уже существующие
валидные upstream skills не удаляются. Частичная установка не выдаётся за готовую.
Claude Code: standalone skill и plugin
Standalone-команда после обычной project-local установки:
/design-harness Собери сайт-визитку.
Bootstrap и проверка Claude-хоста:
npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.1/forgetme-design-harness-0.2.1.tgz forgetme-design-harness install --host claude --target .
npx --yes --package=https://github.com/ForgetMeAI/design-harness/releases/download/v0.2.1/forgetme-design-harness-0.2.1.tgz forgetme-design-harness check --installation-only --host claude --target .Если нужна namespaced plugin-команда:
/plugin marketplace add ForgetMeAI/design-harness
/plugin install design-harness@forgetme-design-harness
/reload-plugins
/design-harness:design-harness
| Контур | Что подтверждает |
|---|---|
| Impeccable detector | Дизайн-антипаттерны и целостность implementation-контура |
| Playwright | Рендер маршрутов, responsive viewports и воспроизводимые состояния |
| axe | Автоматически обнаружимые accessibility-нарушения |
| Reduced motion | Наличие корректного режима с уменьшенным движением |
| Lighthouse CI | Заданные performance, accessibility, best-practices и SEO thresholds |
| Motion schema 4 | Startup probe, frame pacing, реальный scroll coverage, redirects, mocks и provenance |
Финальный handoff различает:
- Pass — проверка выполнена и gate пройден;
- Fail — проверка выполнена и gate не пройден;
- Not reviewed — для состояния нет доступного route, fixture или инструмента.
Important
forgetme-design-harness check проверяет целостность установки и наличие
QA tooling/config. Она не запускает Playwright, axe, Lighthouse или detector
и не выдаёт их наличие за выполненные тесты. Visual capture также не является
baseline pixel-diff, если проект отдельно его не настроил.
Loading, empty, error и long-copy состояния должны иметь воспроизводимый route
или fixture. Иначе они остаются Not reviewed. Screenshot mismatch никогда не
принимается автоматически.
- официальный Impeccable archive
skill-v4.0.4/universal.zipзагружается по versioned GitHub Release URL и до запуска CLI целиком проверяется по SHA-256; - семь компактных Jakub skills проверяются по точному дереву файлов;
- Impeccable проверяется расширенным набором pinned sentinels: инструкции, guidance, detector, hook entry points и локальная import-цепочка;
- ошибка скачивания, несовпадение archive SHA-256, upstream drift или неожиданный skill завершают установку ошибкой;
- перед внешним шагом Harness сохраняет затрагиваемые skill-каталоги и известные hook-конфиги для ограниченного rollback.
Rollback не является sandbox: авторизованный внешний installer теоретически может менять состояние вне сохранённого набора. Неполный rollback всегда выводится как отдельная ошибка с сохранённым backup.
Ни один из них не устанавливается автоматически и не становится дополнительным арт-директором.
Открыть opt-in registry
| Задача | Инструменты | Ограничение |
|---|---|---|
| Human feedback | Agentation | Dev-only; MCP и хранение требуют отдельного согласия |
| Product motion | transitions.dev | Сначала read-only review; применение — после approval |
| AI-state primitives | Border Beam, Thinking Orbs | Только для реального состояния, с текстом и reduced-motion fallback |
| AI-interface references | AICSS, Beautiful UI | Каталог паттернов; код — только при ясной лицензии |
| Effects lab | Originkit, Canvas UI, Metal FX | Один утверждённый эффект, no-WebGL fallback и performance budget |
| Existing narrow routes | shadcn, GSAP, Storybook, image generation | Только когда задача и стек действительно требуют этого |
Перед подключением Harness фиксирует назначение, точный источник и версию, лицензионный режим, fallback и явное одобрение пользователя.
| Документ | Содержание |
|---|---|
| Workflow contract | Фазы, полномочия, state machine и verification semantics |
| Third-party policy | Источники, лицензии и границы интеграций |
| Security | Как сообщить об уязвимости |
| Changelog | Изменения по версиям |
| Release notes v0.2.1 | Хеши, изменения и доказательство public smoke |
| Release manifest | Точные версия, asset и SHA-256 релиза |
| Verification record v0.2.1 | Два local cold install и публичная Ubuntu/macOS матрица |
| Contributing | Локальная разработка и правила PR |
| Video plan | Сценарий публичной демонстрации |
| Demo runbook | Воспроизводимая установка и запись workflow |
| Claims check | Какие формулировки подтверждены, а какие запрещены |
npm ci
npm run sync:claude
npm test
npm run validate
npm run pack:checkCanonical skill находится в skills/design-harness/. Claude-адаптер генерируется
в adapters/claude-code/ и не должен редактироваться вручную.
Design Harness не требует API-ключей и не хранит историю чата. Никогда не помещайте credentials в intent-файлы, референсы или QA-отчёты. Agentation может содержать DOM-контекст страницы, поэтому MCP и persistent storage всегда требуют отдельного opt-in и не используются на страницах с чувствительными данными.
Собственный код проекта распространяется по MIT License. Impeccable, Jakub skills, QA-инструменты и opt-in registry sources сохраняют собственные условия — см. THIRD_PARTY.md.
Не заменяет вкус пользователя. Не даёт агенту его потерять.