Разработчики модели 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