use-design

Подсказка, а не закон. Знаешь способ лучше для случая перед тобой — сделай по-своему и скажи об этом. Творческая работа в этом проекте доверена тебе.

Здесь нет пересказа того, что лежит в коде: шкалу текста читай в components/ui/typography.tsx, отступы и ширины — в примитивах, нарушения ловят гейты. Здесь — рычаги: что переключается, что берётся снаружи, чего нельзя брать никогда и чем платят за выход из общего оформления.

1. 🔒 Первый рычаг: какой это сайт

Каталог блоков — стартовый пример, а не граница. Он хорош для функциональных поверхностей и никогда не был правилом «страницы собираются только из него».

🔒 Владелец обозначил личный стиль — перестань предлагать блоки. «Хочу свой дизайн», «чтобы не как у всех», «вот сайт, который мне нравится», имя дизайнера: с этой минуты страница строится целиком, и стандартные карточки после этого — не осторожность, а не тот продукт.

Что остаётся стандартным даже тогда: блог и статьи, правовые страницы, подвал, всё за ролью — там ценность и есть структура. Скажи это вслух, не решай за него.

Решение живёт в памяти проекта, а не в твоей памяти о разговоре — итог шага, а при наличии продукта его досье. Следующая сессия начинается с пустой головы.

2. 🔒 Второй рычаг: чужие дизайн-навыки — их ИЩУТ, а не изобретают

Красивый нестандартный дизайн приходит снаружи, и в проекте стоит find-skills (npx skills find <запрос>, каталог https://skills.sh/). Идти туда — обычная работа, а не крайняя мера: у верхних навыков сотни тысяч установок, и написанное вручную «своё» почти всегда хуже.

Что искать по поводу:

Порядок неизменен: нашёл → назвал владельцу, что это и зачем → поставил после его слова. Ставится в проект, не глобально: глобальный навык не уедет с репозиторием, и следующая сессия его не увидит. Установщик честно предупреждает, что навыки работают с полными правами агента, — поэтому молча не ставим. При отборе смотри установки и репутацию источника, а не только совпадение слов.

🔒 Чужой навык делает дизайн, а не архитектуру. Он не знает ни про закрытый каталог видов, ни про свободный слой, ни про токены темы. Его результат — материал, который дальше кладётся по правилам раздела 4.

3. 🔒 Третий рычаг: DESIGN-CONFIG — то, что владелец крутит сам

Цвета по ролям, шрифты, шкала, скругления, плотность — и ширина ленты страницы и первого экрана (shape.appWidth, shape.heroWidth). Правит конструктором в панели, применяется без пересборки.

Почему это работает без твоего участия: примитивы знают не цвет, а РОЛЬ. Сменил primary — разом поменялись кнопки, ссылки, активный пункт меню, цифры метрик, фокус поля. Искать и перечислять нечего.

Три вещи, на которых здесь спотыкаются:

• light и dark — разные значения одной роли; цвет, заданный один раз, на второй теме почти всегда неверен. Проверяется переключателем темы, а не воображением.
• Пусто — это ответ, а не пробел: работает тема проекта. Копировать её значения в конфиг нельзя — две палитры разойдутся молча.
• Палитра не перекрасит картинки, скриншоты и логотип (это данные) и чужой блок с вписанным цветом (а это дефект).

4. 🔒 Четвёртый рычаг: куда ложится код, пришедший снаружи

Внешний навык или сервис возвращает настоящий исходный код. Куда он ляжет — решение, и принимается оно до первой строки:

Повышение до вида — законное решение владельца, его продукт и его личность; запрещать нельзя, но цену назвать обязан. Всегда неверен только молчаливый путь: чужой код в sections/ или components/, потому что его туда вставили. Никто не решал — и никто не знает, что он чужой.

🔒 Напряжение, о котором лучше знать заранее: внешний сервис отдаёт собранный код, а виджет по правилу владельца приезжает без сборки, как контент. Собранный код так не умеет — поэтому выбор из трёх строк выше и есть работа, а не формальность.

5. 🔒 Пятый рычаг: чужой сайт как образец — граница проходит по праву

extract-design-system (npx extract-design-system <url>) снимает с публичной страницы примитивы: палитру, шкалу, отступы, скругления, тени. Не компоненты и не раскладку. Числа становятся предложением для DESIGN-CONFIG, владелец их утверждает — и с этой минуты это его токены.

Палитра и ритм — ремесло, оно переносится. Начертание и фотография — чужая собственность, и сайт клиента, несущий их, — проблема, которую клиент унаследует от нас.

🔒 Сам инструмент такого предупреждения не несёт, поэтому предупреждаешь ты. И помни его собственную оговорку: одна страница не доказывает дизайн-систему, динамический сайт даёт частичный ответ. Вывод — черновик для показа владельцу, а не готовая палитра.

6. 🔒 Во всю ширину — МОЖНО. Выйти из оболочки платформы — нельзя

Здесь стояло «холст во всю ширину блоками не сделать», и это было неверно — проверено кодом 2026-08-22. У страницы три слота, которые рисуются ВНЕ ленты (components/content-page/page-shell.tsx):

Ширину задаёт РОДИТЕЛЬ: внутри колонки секция шире неё не станет, и тянуть её отрицательными отступами ломается на каждой второй ширине экрана. Поэтому такие вещи физически стоят снаружи колонки — а не потому, что им дали особый класс.

🔒 Чего действительно нет — выхода из ОБОЛОЧКИ. Своя шапка вместо общей, страница без подвала, собственный корневой макет, чужая палитра на одной странице. Всё оформление приходит из одного корневого макета, и вырезание страницы из-под него ломает то, чем владелец пользуется каждый день: меню, подвал, палитру, согласие на cookie, установку приложения. Своего слоя руками не строим.

Что говорить владельцу. Полосу во всю ширину, свой первый экран и виджет под ним — сделаем сегодня. Полный выход из оболочки — решение об АРХИТЕКТУРЕ проекта целиком, оно принимается владельцем и платформой, а не правкой макета в шаге.

7. Движение

Правило одно, и оно про поиск, а не про вкус: страница, которую двигают целиком, отдаёт краулеру opacity: 0. Поэтому движение живёт в островке поверх статического близнеца, включается после первого действия, уважает prefers-reduced-motion и красится токенами темы. Образец — _widgets/static/security-orbit/, механика — use-widgets, готовые навыки анимации — раздел 2.

8. Владелец поправил внешность — это тоже рычаг

«Убери четвёртую», «это уродство», «так не смотрится» — чинишь, а потом спрашиваешь, что именно не так, и записываешь его ответ в карточку вида (sections/blocks/<вид>.md) его словами и с датой. Молча исправить нельзя: та же правка вернётся к следующему агенту, и владелец оплатит одну работу дважды. Что СЧИТАЕТСЯ — уходит в тип и перестаёт собираться; что СУДИТСЯ — живёт в карточке. Механика — use-sections.

9. Если просьба спорит с этим документом

Скажи одной фразой ДО кода: либо просьба — исключение, которое стоит записать сюда, либо документ устарел. Молча выбрать одно из двух нельзя.

→ use-shadcn — когда законен чужой навык shadcn и что старше него в этом проекте.