Когнитивная нагрузка Майка Новикова

Что в голове у нейросети, когда она делает дизайн? Разработчики модели Claude открыто публикуют системные «навыки» — текстовые инструкции, которые под капотом выполняет нейронка, про них писал раньше в канале. Сегодня обнаружил, что для вебдизайна у Claude тоже есть отдельный навык. Он его использует каждый раз, когда просишь сделать отчет, сайт-визитку или лендинг. Очень любопытно, что упор делают на «вау‑решения» с максимальным контрастом. По сути в промпт зашит рецепт смелой дизайн‑концепции. Привожу перевод навыка, за исключением технических указаний: Дизайн-мышление Прежде чем писать код, разберись в контексте и выбери смелое визуальное направление: • Цель: какую задачу решает интерфейс? Кто им пользуется? • Тональность: выбери крайность и придерживайся её. Например: радикальный минимализм или хаотичный максимализм, ретрофутуризм, органика, строгий люкс, игрушечный или журнальный стиль, брутализм. Используй это для вдохновения, чтобы создать аутентичный продукт. • Ограничения: учитывай технические требования (фреймворк, производительность, доступность). • Уникальность: что сделает проект незабываемым? Какую одну деталь пользователь точно запомнит? ГЛАВНОЕ: выбери четкую концепцию и безупречно её реализуй. И смелый максимализм, и изысканный минимализм работают хорошо, если за ними стоит осознанность, а не просто желание сделать «поярче». Гайдлайны по эстетике фронтенда 1. Типографика Выбирай характерные шрифты. Откажись от приевшихся Arial или Inter. Ищи решения, которые подчеркивают индивидуальность. Удачный прием — сочетать необычный акцидентный шрифт в заголовках с выверенным текстовым шрифтом в основном блоке. 2. Цвет и тема Создавай целостную палитру. Используй CSS-переменные для единообразия. Доминирующий цвет с резкими акцентами выглядит лучше, чем робкая, равномерно распределенная гамма. 3. Моушн-дизайн Используй анимацию для микро-взаимодействий: — Для чистого HTML отдавай приоритет CSS-решениям. — В React используй библиотеку Motion. — Делай ставку на ключевые моменты: один эффектный экран загрузки с каскадным появлением элементов создает больше восторга, чем россыпь мелких случайных анимаций. Добавляй неожиданные ховер-эффекты и анимации по скроллу. 4. Композиция и пространство Экспериментируй с версткой: используй асимметрию, наслоения, диагонали и элементы, которые ломают сетку. Работай с пространством: либо обилие «воздуха», либо контролируемая плотность. 5. Фоны и детали Создавай атмосферу и глубину. Вместо однотонных заливок используй градиентные сетки (mesh), шум, геометрические паттерны, слоистую прозрачность, драматичные тени или зернистость. Никогда не используй шаблонные «нейросетевые» решения: • Стандартные шрифты (Inter, Roboto, Arial, системные шрифты). • Стереотипные цвета (особенно фиолетовые градиенты на белом фоне). • Предсказуемую верстку и стандартные компоненты из библиотек. • Шаблонный дизайн без характера. Твори и делай неожиданный выбор. Каждый проект должен быть уникальным. Чередуй темы, меняй шрифтовые пары и стилистику. Никогда не копируй одни и те же изъезженные приемы из проекта в проект (например Space Grotesk) ВАЖНО: сложность реализации должна соответствовать эстетике. Максимализм требует сложного кода с обилием эффектов. Минимализм — сдержанности, идеальных отступов и безупречной типографики. Элегантность — это всегда вопрос качественного исполнения. Конкуренты тоже не отстают — у OpenAI на этой неделе вышла статья как делать вебдизайн через модель ChatGPT 5.4. Они в своих инструкциях наоборот напирают на минимализм и лаконичность в стиле Linear. Дополнительно прописывают структуру страницы, правила хорошего копирайта и ключевых иллюстраций. А в конце явно пишут чего не должно быть: карточек (бенто получается все?), бессмысленных каруселей и пестрой палитры — её ограничивают одним акцентным цветом и двумя шрифтами Вот полный перевод навыка front end design от OpenAI 👀 С вас 30 000 ₽ за прохождение интенсива «Стань веб‑дизайнером за три минуты» 🤭 🎤Ссылки на утро — второй канал ⏲Устойчивый VPN за звезду #дурьвсякая@cogload#text2web@cogload