Рассказываем как сделать из Sonnet 5.5 сеньора-фронтендера с 15-летним опытом — гайд из 5 пунктов
Sonnet 5.5 — первая модель, которую реально можно превратить в сеньора-фронтендера. Не потому, что она «умнее». А потому, что она умеет следовать референсам, если они правильные. Гайд - здесь
Фронтендер с пятнадцатилетним опытом не просто пишет код. Он знает, что такое хороший отступ. Чувствует, когда анимация «плоская», а когда живая. Понимает, что кнопка не должна быть просто синей — она должна быть правильной синей. Этот опыт невозможно упаковать в промпт «сделай красиво». Но можно упаковать в систему.
Что для этого нужно
Пять инструментов, которые закрывают всё: от стиля до финальной полировки. Гайд - здесь
Стиль. Два источника: Refero Styles — сайт, где собраны цвета, типографика и дизайны в готовые DESIGN.md, и awesome-design-md — коллекция из 118 тысяч звёзд на GitHub. Выбираете один, кладёте в корень проекта, добавляете @-импорт в CLAUDE.md — и Claude дальше следует его палитре, шрифтам, отступам. Не «на глаз», а по системе.
Компоненты. 21st.dev — готовые блоки на React и Tailwind. Component Gallery — 95 дизайн-систем на один и тот же компонент. Claude сначала проверяет 21st, потом смотрит, как то же самое реализовано в зрелых системах. И только потом пишет.
Анимации. Kinetics — анимации на физике пружин. Не CSS с задержками, а настоящая динамика. Можно взять готовый код или промпт для ИИ.
Демо-видео. HyperFrames — Claude пишет видео в HTML, HyperFrames рендерит. Референс разбирается на кадры, собирается в одно изображение, чтобы увидеть темп и переходы. Дальше — ролик.
Полировка. Impeccable — три команды прямо в Claude Code: bolder, distill, polish. Прогоняете результат — получаете то, что не стыдно показать.
Что меняется
Раньше вы говорили «сделай красиво» и получали то, что модель считает красивым. Часто — синие прямоугольники с закруглёнными углами. Теперь вы даёте ей словарь: конкретные палитры, проверенные компоненты, живые анимации, референсы. И она говорит на этом языке.
Вы не учите модель быть дизайнером. Вы даёте ей то, чем пользуется дизайнер. Остальное Sonnet 5.5 сделает сам.
Гайд - здесь