🤖
Opus 5.5 на максималках - улучшаем и оптимизируемОбъясняю, как можно скормить Opus напрямую более 2000 стилей дизайна с кучи сайтов, также 12.000+ компонентов и шаблонов, 150+ анимационных эффектов и все по готовым промптам
〰
Выбор стиля: → awesome-design-md: GitHub-коллекция
DESIGN.md для 74 брендов. Открытый исходный код под лицензией MIT.
→ Refero Styles: выбирайте любой подходящий стиль, все описаны в
DESIGN.md: отсупы и типографика каждого сайта. Opus будет брать и следовать стилю.
Выбрали 1 стиль, дали задачу следовать ему и закрепить в контексте, не накидывайте сразу все тысячи стилей, чтобы не было хаоса.
〰
Апгрейд компонентов:→
21st.dev: компоненты и шаблоны на React и Tailwind. Подключаете его MCP, и Claude Code сам найдет нужное.
→ Component Gallery: находите любой компонент и смотрите, как его реализуют 95 дизайн-систем.
〰
Апгрейд анимаций:→ Kinetics: анимации на основе пружинной физики. Для каждой можно скопировать CSS, React-код или готовый промпт для ИИ.
〰
Демо видео:→ whatships: более 2 000 видео запуска продуктов. Выберите ролик из своей категории, отправьте его Opus и попросите разложить кадры в одно изображение, чтобы повторить стиль.
→ HyperFrames: Claude Code пишет видео в HTML, а HyperFrames рендерит его в MP4.
〰
Финализация команд под конкретику:→ Impeccable: набор дизайнерских команд, которые устанавливаются в Claude Code. Команды bolder, distill и polish превращают абстрактное "сделай красивее" в конкретные изменения.
«Добавь в ~/.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, навык или инструмент командной строки не установлен, спроси меня, устанавливать ли его, и не пытайся имитировать его самостоятельно.
Если ты не можешь прочитать реальное содержимое страницы, остановись и попроси меня вставить его вручную. Не подставляй ничего по памяти.
Каждый раз, когда используешь внешний референс, скажи мне, какой именно и что ты изменил.
Сначала покажи, что именно собираешься добавить, и ничего не записывай, пока я не подтвержу».
✈
AI для своих в Telegram - подписаться