DesignCorp Docs

Appearance

Skill: Frontend AI Quality Gate ​

Статус ​

  • Canonical path: /home/admin/workspace/skills/skill-frontend-ai-quality-gate.
  • Runtime path: ~/.codex/skills/skill-frontend-ai-quality-gate.
  • Назначение: обязательный gate для AI-generated frontend после провала Impeccable Lab.

Когда использовать ​

  • Новая страница, лендинг, публичный сайт, product UI, app shell, форма, onboarding или empty state.
  • Крупный визуальный redesign или дизайн-review.
  • Создание/обновление PRODUCT.md и DESIGN.md.
  • Русский коммерческий текст, UX-copy, CTA, FAQ, сообщения ошибок.

P0 Workflow ​

  1. Создать или прочитать PRODUCT.md.
  2. Создать или прочитать DESIGN.md.
  3. Собрать 3-8 реальных референсов: Refero, Refero Styles, Figma, screenshots, live sites.
  4. Зафиксировать применяемые и rejected patterns в REFERENCES.md.
  5. Если текущий дизайн слабый или отвергнут пользователем, включить Redesign Reset.
  6. Для сильного UI: Impeccable shape до кода, critique/audit/harden после кода.
  7. Для русского текста: ru-text, при необходимости ux-writing.md, info-style.md, anti-patterns.md.
  8. Проверить screenshots 1440px и 390px.
  9. Зафиксировать визуальную проверку в UI_QA.md, если задача крупная.
  10. Запустить build/check.

P1 Quality Upgrade ​

Использовать после P0 для premium/public surfaces, repeat design work, multi-agent work или когда пользователь оценивает качество/вкус результата.

bash
bash /home/admin/workspace/skills/skill-frontend-ai-quality-gate/scripts/scaffold-p1-docs.sh .

Скрипт создаёт без перезаписи:

  • PREMIUM_SCORE.md
  • LEARNING_LOOP.md
  • SEMANTIC_SNAPSHOT.md
  • FRONTEND_GRAPH.md

Reference Intake / Refero ​

  • Workflow: /home/admin/workspace/skills/skill-frontend-ai-quality-gate/references/reference-intake-workflow.md.
  • В REFERENCES.md фиксировать source type, borrow, reject, fit, selected lane и dominant visual strategy.
  • Refero даёт screen patterns; Refero Styles даёт DESIGN.md direction.

Premium Scoring ​

  • Rubric: /home/admin/workspace/skills/skill-frontend-ai-quality-gate/references/premium-scoring-rubric.md.
  • Template: /home/admin/workspace/skills/skill-frontend-ai-quality-gate/references/premium-score-template.md.
  • Ниже 8: targeted premium pass. Ниже 7: redesign. Ниже 6: Redesign Reset.

Learning Loop ​

  • Template: /home/admin/workspace/skills/skill-frontend-ai-quality-gate/references/learning-loop-template.md.
  • После проекта фиксировать what worked, what failed, reference lane, prompt/process notes, rules to keep/change.
  • Durable lessons записывать в MCP memory по startup memory policy.

Semantic Snapshot ​

  • Workflow: /home/admin/workspace/skills/skill-frontend-ai-quality-gate/references/semantic-snapshot-workflow.md.
  • Template: /home/admin/workspace/skills/skill-frontend-ai-quality-gate/references/semantic-snapshot-template.md.
  • Цель: найти похожие docs/memory и превратить их в 5-10 решений для текущей задачи.

Graph Lite ​

  • Workflow: /home/admin/workspace/skills/skill-frontend-ai-quality-gate/references/graph-lite-workflow.md.
  • Template: /home/admin/workspace/skills/skill-frontend-ai-quality-gate/references/frontend-graph-template.md.
  • Использовать при конфликте skills/памяти/проектных правил.
  • Приоритет: current user directive -> project docs -> P0 gate -> visual doctrine -> generic skills -> old memory.

Automated UI QA ​

Если доступен Playwright, запускать:

bash
node /home/admin/workspace/skills/skill-frontend-ai-quality-gate/scripts/run-ui-qa.mjs <url>

Скрипт проверяет:

  • screenshots 1440px и 390px;
  • page-level horizontal overflow;
  • clipped interactive elements;
  • CTA-like controls in first viewport;
  • text overflow heuristic;
  • 44px touch target heuristic;
  • unlabeled interactive heuristic;
  • наличие крупного image/canvas/video visual в первом экране.

Артефакты:

  • .ui-qa/desktop-1440.png
  • .ui-qa/mobile-390.png
  • .ui-qa/ui-qa-report.json
  • .ui-qa/UI_QA.generated.md

При P0-проблемах скрипт возвращает exit code 1. Для перезаписи корневого UI_QA.md использовать --write-ui-qa.

Scaffold ​

Если в проекте нет базовых quality docs:

bash
bash /home/admin/workspace/skills/skill-frontend-ai-quality-gate/scripts/scaffold-quality-docs.sh .

Скрипт создаёт без перезаписи:

  • PRODUCT.md
  • DESIGN.md
  • REFERENCES.md
  • UI_QA.md

Шаблоны лежат в /home/admin/workspace/skills/skill-frontend-ai-quality-gate/references.

Redesign Reset ​

Использовать, когда пользователь явно недоволен текущим дизайном, называет результат слабым/шаблонным/AI-slop, просит переделать заново или текущий UI проваливает визуальный QA.

Правила:

  • Текущий UI — evidence/anti-reference, а не style source.
  • Сохранять только product facts, полезный контент, маршруты, интеграции и рабочую функциональность.
  • Не сохранять палитру, hero composition, card model, gradients, blobs, spacing rhythm, radii, shadows и decorative motifs.
  • В REFERENCES.md записать, что именно из текущего UI запрещено переносить.
  • До кода обновить DESIGN.md под новую visual direction.
  • В финальном ответе указать RESET: old style rejected.

Premium Public Surface Rule ​

Если задача про premium landing, public website, brand surface, studio/product page, contest page или high-end redesign:

  • Использовать skill-designcorp-visual-doctrine как primary style source.
  • Не использовать skill-designer-core как style source; его Catalyst rules подходят product/admin UI, а не premium landing.
  • До кода назвать aesthetic lane и 3-5 реальных reference sources.
  • В DESIGN.md зафиксировать visual direction, dominant visual strategy, typography, material quality и anti-references.
  • Не считать Balanced Conversion, “clean SaaS”, dark dashboard, fake QA board или generic screen wall премиальным стилем.
  • Если пользователь даёт PageArt как пример, трактовать это как PageArt-like immersive agency hero: full-bleed premium visual, strong brand layer, early proof, crafted rhythm. Не копировать 1:1.

Hard Bans ​

  • Generic left-text/right-card hero для брендинговых лендингов.
  • DESIGN.md, созданный только после реализации без причины.
  • Фиолетово-синий SaaS-gradient без брендинговой причины.
  • Blobs/orbs/glassmorphism вместо арт-дирекшна.
  • Nested cards и одинаковые icon-card grids.
  • Redesign, который сохраняет провальную visual direction после явного негативного feedback.
  • Финал без mobile 390px QA для визуальной задачи.
text
Refero / real references
-> PRODUCT.md
-> DESIGN.md / Refero Styles direction
-> Impeccable shape
-> implementation
-> screenshot QA 1440 + 390
-> Impeccable critique/audit/harden
-> ru-text for Russian copy
-> build

Источники ​