И тут дело не только в том, что нейросети любят дефолтный 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-дефолта, потому что их делали профессиональные дизайнеры с пониманием композиции и визуальной иерархии. Если есть хорошая насмотренность - кастомизируйте глубже через дизайн-токены, экспериментируйте с типографикой, композицией и т.д.
🔥 ➕ 🔁