Дизайн с AI для Frontend-а без дизайнера
На новых проектах я сталкиваюсь с вопросом: как сделать красиво, если дизайна нет и в помине?
🤓 Начнём с того, что вместо бесконечного CSS с padding-bottom: 10px; удобнее использовать Tailwind и писать просто pb-10.
Вроде бы мелочь, но это упрощает задачу даже для LLM: такие классы сокращают контекст, позволяя нейросетям точнее выдавать компоненты и структуры.
🤔 Хорошо, но как сделать «красиво»? Во-первых, красота — штука субъективная.
Мне, например, нравятся кнопки в виде ромашек 🌼, но пользователь, привыкший к другим сайтам, не сразу поймет, что это кнопка.
😎 Потому в 80% случаев красиво в вебе — это прежде всего функционально и удобно.
Чтобы достичь такой «технической красоты», нужно использовать дизайн-токены: цвета, отступы, размеры шрифтов, радиусы и тени.
👨💻 На практике достаточно цветов и отступов. Палитру лучше брать простую, на 3-5 цветов, и тут нам поможет сервис https://coolors.co/.
С отступами ещё проще: используем 8pt Grid System, т.е. 8px, 16px, 24px, 32px, 40px и т.д.
Вот минимальный пример main.css:
:root {
/* Синий */
--color-primary: #007aff;
/* Оранжевый */
--color-secondary: #ff9500;
/* Белый */
--color-background: #ffffff;
/* Темно-серый */
--color-text: #333333;
/* 📏 8pt Grid System */
--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--spacing-lg: 32px;
--spacing-xl: 40px;
}
🥄 Теперь просто отдаём этот CSS-файл в качестве контекста для LLM вместе с описанием хотелок, данных и сервиса.
На выходе получаем готовый, органично вписанный UI-компонент.
Увы, без свителок и пирделок, зато быстро и нормально — я называю такой подход «фастфуд-дизайн». 🍔
🛞 Идеально подходит для MVP и позволяет пилить фичи со скоростью света!
Кстати, по схожему принципу работает https://v0.dev, а для сложных кейсов (типо календаря) отлично подходит daisyui.com
📊 #статистика День 1191 == 2668 час в IT
На новых проектах я сталкиваюсь с вопросом: как сделать красиво, если дизайна нет и в помине?
🤓 Начнём с того, что вместо бесконечного CSS с padding-bottom: 10px; удобнее использовать Tailwind и писать просто pb-10.
Вроде бы мелочь, но это упрощает задачу даже для LLM: такие классы сокращают контекст, позволяя нейросетям точнее выдавать компоненты и структуры.
🤔 Хорошо, но как сделать «красиво»? Во-первых, красота — штука субъективная.
Мне, например, нравятся кнопки в виде ромашек 🌼, но пользователь, привыкший к другим сайтам, не сразу поймет, что это кнопка.
😎 Потому в 80% случаев красиво в вебе — это прежде всего функционально и удобно.
Чтобы достичь такой «технической красоты», нужно использовать дизайн-токены: цвета, отступы, размеры шрифтов, радиусы и тени.
👨💻 На практике достаточно цветов и отступов. Палитру лучше брать простую, на 3-5 цветов, и тут нам поможет сервис https://coolors.co/.
С отступами ещё проще: используем 8pt Grid System, т.е. 8px, 16px, 24px, 32px, 40px и т.д.
Вот минимальный пример main.css:
:root {
/* Синий */
--color-primary: #007aff;
/* Оранжевый */
--color-secondary: #ff9500;
/* Белый */
--color-background: #ffffff;
/* Темно-серый */
--color-text: #333333;
/* 📏 8pt Grid System */
--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--spacing-lg: 32px;
--spacing-xl: 40px;
}
🥄 Теперь просто отдаём этот CSS-файл в качестве контекста для LLM вместе с описанием хотелок, данных и сервиса.
На выходе получаем готовый, органично вписанный UI-компонент.
Увы, без свителок и пирделок, зато быстро и нормально — я называю такой подход «фастфуд-дизайн». 🍔
🛞 Идеально подходит для MVP и позволяет пилить фичи со скоростью света!
Кстати, по схожему принципу работает https://v0.dev, а для сложных кейсов (типо календаря) отлично подходит daisyui.com
📊 #статистика День 1191 == 2668 час в IT