DesignCorp Docs

Appearance

Skill: DesignCorp Visual Doctrine ​

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

  • Нужно спроектировать или переделать landing page, website, product page или публичный marketing surface.
  • Нужно понять, почему страница выглядит шаблонно или слабо.
  • Нужно собрать сильные library sections до сборки template.
  • Нужно провести дизайн-review не по вкусу, а по качественным критериям DesignCorp.

P0: Quality Gate ​

  • Для любой реализации или крупного редизайна сначала использовать skill-frontend-ai-quality-gate.
  • PRODUCT.md и DESIGN.md должны быть созданы или прочитаны до кода.
  • Референсы должны быть реальными: скриншоты, Refero, Refero Styles, Figma, живые сайты.
  • Impeccable используется как внешний critique/audit/harden слой, но не заменяет доктрину DesignCorp.
  • skill-designer-core не является style source для premium/public landing. Его Catalyst-минимализм применим к product/admin UI, но не к brand art direction.

Premium Landing Mode ​

Включать для публичного лендинга, сайта студии/продукта, pitch page, конкурса, portfolio или redesign после негативного feedback.

  1. Выбрать named aesthetic lane до кода: reference-led editorial, cinematic product launch, gallery/work-led agency, PageArt-like immersive agency hero, luxury service brochure, product evidence wall или bespoke lane from real references.
  2. Зафиксировать в DESIGN.md, от каких 3-5 референсов берётся композиция, typography, imagery, rhythm и mood.
  3. Не использовать house style по умолчанию. Premium direction рождается из продукта, аудитории и референсов.
  4. Не подменять premium визуал самодельной “screen wall” или dashboard-мокапом, если это не реальный продуктовый proof.
  5. First viewport должен иметь один dominant visual: реальное фото, сгенерированный bitmap, настоящий product screenshot, motion/canvas scene или work-led composition.
  6. Premium не равно “темный фон + огромный шрифт + несколько панелей”. Нужны material quality, image quality, negative space, art-directed hierarchy, memorable composition.

PageArt-like Immersive Agency Hero ​

Использовать как reference lane, когда пользователь показывает PageArt или просит “премиальный агентский сайт”.

  • Суть: full-bleed hero с качественным bitmap/real/generated visual asset, крупный brand-scale слой, уверенная навигация, CTA и proof прямо в первом экране.
  • Визуальный сигнал: не dashboard, не карточки, не QA board, а дорогая сцена/материал/пространство, вокруг которого строится типографика.
  • Proof: client logos, project previews, ratings, numbers или реальная работа должны быть видны рано, но не превращаться в одинаковую card grid.
  • Motion/interaction допустимы, если усиливают сцену и не мешают readability.
  • Нельзя копировать PageArt 1:1; брать принцип: immersive premium hero + business proof + crafted agency rhythm.

Канон DesignCorp ​

1. Сначала секции, потом шаблоны ​

  • Не строить template раньше, чем есть сильные library sections.
  • Сначала делаются section primitives и visual language секции.
  • Шаблон собирается только из уже качественных секций.

2. Hero должен быть image-led ​

  • Один сильный hero image важнее, чем отдельный декоративный правый promo-block.
  • Header и навигация обязаны быть уже на первом экране.
  • Hero обязан сразу объяснять: что это, для кого, зачем.

3. Страница должна ощущаться continuous flow ​

  • Не делать стопку отдельных карточек.
  • Не дробить страницу на множество белых box-блоков.
  • Соединять секции воздухом, типографикой, палитрой и ритмом.

4. Палитра рождается из hero image ​

  • Следующие секции должны наследовать hero palette.
  • Использовать 1 главный акцент и спокойные нейтрали.
  • Избегать случайных неоновых, фиолетовых и “генерик SaaS” цветов.

5. Реальные изображения лучше абстракции ​

  • Для premium landings использовать real photography или product-led visuals.
  • SVG-заглушки и абстрактные blobs допустимы только как временные placeholders.

6. Display typography должна быть сильной, но чистой ​

  • Предпочитать clean display sans, а не декоративный serif.
  • Силу давать через scale, spacing и hierarchy.
  • Заголовки не душить случайными узкими max-width.

7. Меньше UI-шума ​

  • Тени: либо нет, либо минимальные.
  • Бордеры: тонкие и редкие.
  • Радиусы: сдержанные.
  • Карточные подложки использовать только когда они реально нужны.

8. Асимметрия лучше равной сетки ​

  • Один доминирующий блок + поддерживающие блоки чаще выглядят сильнее, чем три одинаковые карточки.
  • Не делать все элементы одинаковой важности.

Антипаттерны ​

  • giant abstract art без смысла;
  • стек одинаковых карточек;
  • отсутствие menu/header above the fold;
  • три равных CTA одновременно;
  • случайные акценты, не связанные с hero image;
  • шаблонная SaaS-эстетика без product clarity;
  • попытка “спасти” слабый layout декоративными эффектами.
  • Catalyst/product-admin minimalism на публичном premium landing.
  • Самодельный fake dashboard/screen wall как главный premium visual без настоящего product proof.
  • Balanced Conversion как visual direction для страницы, где пользователь просит premium.
  • Большой текст на тёмном фоне без качественного visual asset и material depth, выдаваемый за premium.

Дизайн-review чеклист ​

  1. Понятно ли за 5 секунд, что это и зачем.
  2. Есть ли header, nav и один главный CTA.
  3. Работает ли hero за счёт image + copy, а не декоративного шума.
  4. Продолжает ли страница единый visual flow после hero.
  5. Не превратилась ли страница в стек блоков.
  6. Есть ли real visual hierarchy.
  7. Нет ли лишних card backgrounds, теней и бордеров.
  8. Не душат ли headline узкие width limits.
  9. Не проваливается ли mobile.

Как работать ​

  1. Зафиксировать цель страницы и аудиторию.
  2. Выбрать канонический section flow.
  3. Сначала спроектировать Hero + Header.
  4. Потом строить Proof -> Offer -> Process -> CTA.
  5. Проверить, что палитра и typography продолжают hero.
  6. Только после этого собирать template.

Связанные каноны ​

Definition of Done ​

  • Страница не выглядит шаблонной.
  • Секции работают как одна система.
  • Hero задаёт palette, hierarchy и tempo всей странице.
  • Visual decisions объяснимы и повторяемы.