Гайд для малышей: как перегнать дизайн из Figma в код

[gsaw]

Код бэкенда у меня нормальный получается, структурированный, а вот UI все время такая каша выходит. Упорно пытается все одним файлом, без компонентов, без центрального стиля. Я чего только не прописывал. Если жестко вайбкодить и бюджет не ограничен, или просто протип, то может и так сойдет, но если хочется, что то поддерживаемое, что ты сам поймешь потом и в ручную сможешь поправить. А не делая каждый раз запрос "сделай отступ 5px, вместо 3px у рамочки заголовка", что стоит часто многа времени, токенов, денег и стертых пальцев. Дешевле все же поправить css файл самому, вместо того, что бы слать на сервер кучу файлов. Как бы симбиоз человек-машина, а не одноразовое уг. Вообщем UI у меня не сильно хорошо выходит.

[alixa]

Все сложные программы просто кишат недоделками и багами.
Браузеры — очень сложные продукты, которые реализуют непомерно раздутые стандарты (CSS — около 1000 свойств).

Даже базовые, относительно простые вещи в разных браузерах могут не работать.
Например, Firefox не умеет при локальном открытии архива HTML-файлов использовать LocalStorage в пределах папки с документами (прямо со смеху падаю, детский сад...)

Как-то помню, Oracle не умел правильно ANSI-синтаксис JOIN поддерживать, только свой кривой с плюсиками

Спустя 10 лет, опять столкнувшись с Oracle, похудел от ошибок в кешировании — полная дичь.

ИМХЛ
Поэтому очень хороший UI на веб не сделать, все одни компрамисы и сегодня работает, завтра ломается после обновления очередного браузера...

Ладно, пойду в своей сложной программе бесконечные баги править )

[makstorch]

Мне кажется, сегодня веб в целом выглядит как одна из самых простых сред для вёрстки. Это всё-таки не C++, не виджеты Qt и не Swift с Kotlin, где порог входа и сложность разработки заметно выше. Верстать стало реально проще, особенно через агентов и AI-инструменты, для многих задач это уже почти изи-тема.

Я вообще недавно кайфовал от Framer с его no-code средой: можно было очень быстро собирать страницы с хорошей оптимизацией загрузки контента. Жаль, что сейчас он недоступен в РФ, и мой личный сайт буквально превратился в тыкву :)

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

[udinhtml]

Изначально же идея состоит в том, чтобы быстрее делать дизайн и верстку? Просто я вижу что предварительной подготовки макетов стало еще больше чем, когда дизайн передавался бы фронту на верстку. И все это ради простейшего лендинга с незамысловатым лэйаутом.

Если уж так хочется самому верстку делать, можно базовый css html по скриншоту генерить, а остальное руками + ии сразу на фронте в идеал выводить.

[Alexumn]

Я кстати к такому тоже пришёл, но мне это надоело. Когда надо например делать 3-5 лендингов в месяц, отрисовка и вёрстка. Хочется максимально упростить и автоматизировать процесс.

Мне ИИ посоветовал сделать повторяемые компоненты и сделать шаблонизатор на ASTRO.

Благо приходит подробный контент с текстом как тз, который можно перегнать в json, в нем ии для каждого блока подберёт шаблон. И заверстает.

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

[makstorch]

На самом деле предварительная подготовка у меня не сильно выросла — тут у каждого свои стандарты. Если сравнивать, то 80% от текущего объёма я и так делал, когда передавал макеты в разработку, но понимаю, что это не среднестатистический уровень качества у дизайнеров.

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

Я изначально тоже думал, что мне проще руками сверстать, местами подтянуть знания JS, но даже такой простой принцип генерации описанный в гайде, в разы быстрее и качественнее (лично для меня).

[mi_ch_ae_l]

Стрельба по воробьям из пушки

[makstorch]

Утро вечера мудренее

[m0rfy]

Вот вроде прочитал, а как готовый код на фигме сделанный, через аи и выгрузить к себе, не понял. Тема точно об этом?

[makstorch]

Вроде бы человек взрослый, а вдумчиво прочитать не смог. Есть дизайн в фигме, он подготовлен по определенному принципу, далее этот дизайн прогоняем этапами через ai.