⚡️ ИМБА: делаем из Sonnet 5.5 сеньора-фронтендера с 15-летним опытом — гайд из 5️⃣ пунктов

1️⃣ Выбираем стиль:

• Refero Styles — сайт со всеми цветами, типографикой, дизайнами. Всё собрано в DESIGN.md, просто закидываете в Claude, и он всё сделает сам.

• awesome-design-md — коллекция DESIGN.md со 118 тысячами звёзд на GitHub.

Как правильно использовать: выберите один DESIGN.md и работайте через Claude с ним, так получится консистентный и цельный визуал.

2️⃣ Компоненты выглядят сыро:

• 21st.dev — компоненты и шаблоны на React и Tailwind.

• Component Gallery — выбирайте компонент и увидите, как его реализуют 95 дизайн-систем.

3️⃣ Анимации выглядят плоско:

• Kinetics — анимации на основе физики пружин. Можно скопировать CSS, React-код или готовый промпт для ИИ.

4️⃣ Нужно демо-видео:

• HyperFrames — Claude напишет видео в HTML, а HyperFrames отрендерит.

5️⃣ Финальная полировка:

• Impeccable — устанавливаем набор дизайнерских команд прямо в Claude Code. Команды bolder, distill и polish сделают за вас красиво.

Важно: вот этот текст скопируйте и пришлите Claude, чтобы он запомнил список и вы работали по нему.

Добавь в ~/.claude/CLAUDE.md раздел Frontend references.

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

- Стиль: выбери DESIGN.md, который подходит продукту, с styles.refero.design или из VoltAgent/awesome-design-md на GitHub. Положи его в корень проекта и добавь на него @-импорт в CLAUDE.md проекта, чтобы дальше всё следовало его цветам, типографике и отступам.

- Компоненты: сначала проверяй 21st.dev и напрямую вызывай его MCP, если он установлен. Там есть бесплатный лимит использования, поэтому перед вызовом скажи мне, что именно собираешься искать. Затем проверь component.gallery, чтобы посмотреть, как такой же компонент реализован в зрелых дизайн-системах.

- Анимации: возьми готовый промпт или React-код с kinetics.colorion.co.

- Демо-видео: я сам выберу референсные ролики на whatships.com и отправлю их тебе. Разложи кадры ролика в одно изображение, чтобы увидеть темп и переходы, а затем собери видео через HyperFrames — hyperframes.dev.

- Если после завершения всё ещё что-то выглядит не так: прогони результат через polish и distill из Impeccable — impeccable.style.

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

Если нужный MCP, навык или инструмент командной строки не установлен, спроси меня, устанавливать ли его, и не пытайся имитировать его самостоятельно.

Если ты не можешь прочитать реальное содержимое страницы, остановись и попроси меня вставить его вручную. Не подставляй ничего по памяти.

Каждый раз, когда используешь внешний референс, скажи мне, какой именно и что ты изменил.

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

Сохраняем, не раздумывая.

👍 Бэкдор