Вы наверное замечали что почти все AI-generated фронтенды выглядят как близнецы.

И тут дело не только в том, что нейросети любят дефолтный Tailwind и ShadCN. Сами промпты редко учитывают дизайн.

Понятно, что ничто не заменит насмотренность и работу профессионального дизайнера. Но есть куча низко-висящих фруктов, которые AI-driven разработчик может сорвать относительно малой кровью и сильно улучшить результат. Давайте посмотрим что можно сделать.

1. Собери референсы и используй reverse-дизайн - я писал об этом подробно, по сути: скриншоты → AI agent → дизайн токены

2. Создай свою цветовую схему через CSS-переменные:
- UI Colors - генерация полных палитр 50-950 из одного цвета
- TweakCN - визуальный редактор ShadCN тем, экспорт CSS-переменных
- Tailwind Color Generator - HSL-совместимые палитры

3. Типографика:
- Fontjoy - автоматический подбор шрифтовой пары
- Font Combinations - проверенные комбинации шрифтов

4. Промптить для лучших результатов надо иначе

"Сделай красиво" заменяется структурированными техническими требованиями с указанием конкретики, референсов и дизайн-компонентов. Несколько простых примеров:

// типографика

Design clear typography hierarchy using modern sans-serif font.
Large heading, medium subheading, readable body text.
Ensure good line spacing and visual rhythm throughout the page.

// UI-компоненты

Create card components with contemporary styling - subtle shadows,
rounded corners, clean white background. Add hover effects
and make them feel interactive and polished.

// цвета

Use professional color palette - primary brand color, neutral grays,
success/error states. Ensure good contrast for accessibility
and maintain consistent color usage across all components.

А вот пример того, что можно добавить в проектные правила (cursor rules, claude md)

## Design Principles
- Generous spacing: Use plenty of whitespace, avoid cramped layouts
- Cards: Subtle elevation, consistent padding, avoid heavy borders
- Modern aesthetics: Subtle shadows, rounded corners, clean typography
- Interactive states: Smooth hover effects, button feedback, loading states
- Visual hierarchy: Clear information structure with proper heading levels
- Accessibility: Good color contrast, readable fonts, proper focus states
- Consistent system: Reusable components, unified spacing scale
- Use consistent spacing units(8px, 16px, 24px, 32px) throughout your design system
- Test colors in both light and dark modes
- Implement consistent iconography from a single icon family

5. Еще несколько полезных ресурсов на тему Tw / ShadCN

- Magic UI - премиум компоненты с анимациями
- Aceternity UI - сложные интерактивные элементы
- Awesome ShadCN - кастомные компоненты, ресурсы, хелперы - 🔥


Подход может быть разный в зависимости от навыков, тут получается интересный парадокс: чем меньше у вас насмотренности в дизайне, тем больше стоит полагаться на качественные готовые блоки и даже шаблоны, которые часто будут круче AI-дефолта, потому что их делали профессиональные дизайнеры с пониманием композиции и визуальной иерархии. Если есть хорошая насмотренность - кастомизируйте глубже через дизайн-токены, экспериментируйте с типографикой, композицией и т.д.

🔥 ➕ 🔁

💛 Идеальная структура промпта по версии Claude (Anthropic)

Команда Anthropic выпустила видео с разбором промпта для конкретной бизнес-задачи - анализа протокола ДТП и определения виновника.

Рекомендую посмотреть тем, кто только начинает внедрять ИИ в бизнес. Показывают, как обогащать контекст и бороться с галлюцинациями.

Anthropic активно продвигает идею использования XML-тегов в промптах. В примере они разбивают задачу на подзадачи через теги, которые ссылаются друг на друга (смотрите на 18-й минуте). Получается сложная вложенная структура:

<task id=3>...
<summary>создай саммари</summary>
<form_details>...</form_details>
</task id=3>

<task id=4>
используй саммари <summary>
</task id=4>

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

В рекомендациях от Антропика есть интересный нюанс - исходные данные у них в начале промпта идут (перед задачей), хотя в основном я встречал рекомендации размещать данные практически в самом конце промпта. Запутали меня этим. Есть кому распутать?


Ссылка на переведенную версию видео (ютуб). 30 минут просмотра и вы - всамделишный промпт-инженер!
Оригинал - для тех, кто хочет стать всамделишным промпт-инженером, но со знанием английского😄

⚡️Бум MCP!

Я немного отвлекся и зазевался, а тут MCP развивается семимильными шагами. Теперь LLM все больше и больше могут взаимодействовать со сторонними сервисами!

Зацените подборку существующих решений https://mcpmarket.com/server и обратите внимание на количество звезд! Звезды - это оценки пользователей на Гитхабе. Чем больше звезд, тем популярнее и круче решение.

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

Вообще, я углубился в тему MCP, т.к. возникла очередная острая потребность в фиксации задач. Ну реально надоело, что часть их них пропадает и заветривается.

Сейчас я настроил связку Клод-Asana (трекер задач и сервис для совместной работы). Все заводится без шаманств, т.к. у Клода уже преднастроена интеграция. Теперь Клод за меня управляет задачами: ставит их, дополняет, перемещает по доске. Посмотрим, насколько по факту это окажется рабочей связкой. Может быть придется вытащить Асану в телеграм, чтобы голосовыми кидать задачи без всяких впн.

В ходе ресёча встретил следующие популярные решения, которые попроще Асаны: todoist.com , ticktick.com , weeek.net (РФ) - но интеграция напрямую с Клодом у них отсутствует, надо или свое поднимать, либо на Асане останавливаться.

Делитесь, кто как РЕАЛЬНО облегчает жизнь с MCP!