Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 37
Не завидую тем фронтам, кто будет поддерживать код, структура которого задана нейронкой (ох, я бы ей не доверял строить базовый код )), когда придется вносить правки. Дизайнер будет разводить руками, мол, "зато мы сэкономили на тебе две недели"
Как раз-таки нейронки хороши при написании базового кода, на старте проекта, но они пока ещё забывают контекст, так что их проблемы начинаются при масштабировании старых проектов, особенно, если в проекте используется устаревший или специфический стек, хотя как по мне сейчас это практически равносильно
Нейронки хороши в базовом коде, когда его потом не нужно поддерживать и не нужно, чтобы его человек читал. POC, стартап-проекты, MVP. На этапах почти любого проекта, когда код в осноном пишут, а не читают – да, нейронки экономят время. А дальше эта экономия времени выливается в то, что никто кроме нейронки (что тоже сомнительно, потому что у неё нет долгосрочной памяти) кодом не владеет. На долгоживущих проектах время можно экономить только на дописывании тестов к коду и для каких-нибудь супер тривиальных задач, для которых код писать на 15 минут дольше, чем нагенерить.
А что значит "устаревший"? У нейронки нет такого понятия - она просто генерит код с массой контекстов по принципу "просто чтобы работало" (про масштабируемость речь не идёт вовсе). Я думаю, проблемы будут у всех кодеров, которые начнут поддерживать проект после нее (как после джуна в этом случае)
Пора валить из ВТБ что-ли?
Кидаем ссылку на GitHub с UI-китом и просим установить библиотеку
Всего-то нужен ui-кит на гитхабе, делов-то
Зачем смешивать слой дизайна и слой разбиения проекта на компоненты?
Выгоду как посчитали, вы точно уверены что это ускорение? А то может оказаться, что это быстрый старт сейчас с замедлением потом. Но ему интересно замедление потом, действительно...
Что я только что прочитал )) а главное зачем. Богдан, мне кажется ты топишь себя ещё дальше ))) Не, если цель что б тебя "выгнали" с хабра, то все Ок, ты на верном пути ))
А этот production-ready код с нами в одной комнате?
Дизайнер пишет реакт код с помощью нейронки и отдаёт его разрабу - Пейн, я тега Панорама не чувствую! А его тут и нет!
Я дважды встречал дизайнеров, которые допом вёрстку делали =)
Первый раз лет 8 назад, там html + css допом отдали, второй раз около 5 лет назад отдали вместе с вёрсткой на реакте в сторибуке.
Да, это не было полностью прод реди, во втором случае не было страниц, но всё равно было приятно)
PS. Вообще это должно было быть ответом на коммент, но из-за мисклика и неудобного интерфейса мобильного хабра отправилось отдельно.
Вопрос, как в периметре втб разрешили использование не селф-хостед ии? С безопасностью не очень, да?
Понятно, какую проблему вы пытаетесь решить и, на мой взгляд, выбрали не самое удачное решение. К сожалению, LLM, какой бы умной она ни была, не обеспечивает стабильных результатов, особенно при последующих изменениях дизайна.
Открою вам небольшой секрет: дизайн в Figma описан в понятном JSON-формате. Можно выгрузить документ по API или, даже удобнее, через самописный плагин. Этот JSON уже содержит всю необходимую информацию о токенах, автолейаутах и так далее. Остается только пара недель frontend‑разработчика, который напишет парсер этого JSON в HTML/CSS или сразу React/Vue/Svelte компоненты.
Можно пойти ещё дальше и обогащать JSON данные frontend‑логикой через тот же плагин прямо в дизайне: когда и какую кнопку показывать, запросы к бэку, обработку ответа.
И тогда вам не то что не придется писать промты для LLM, не придется даже ждать от неё ответа, приложение соберется за пару секунд.
Я это могу утверждать по собственному опыту, у меня сейчас так собирается весь фронт.
Добрый день, а есть ли такие плагины в открытом доступе ? Мне очень актуально
Добрый день! В качестве вдохновения можете посмотреть плагин Buzzy, он позволяет собрать React из дизайна в Figma, предварительно разметив сам макет через плагин, но это не открытое решение и завязано на бэк Buzzy.
Каких-то более открытых решений я не встречал
Фигма сама умеет хтмл генерить. Правда в платной версии
Таких готовых плагинов для фигмы - множество. Однажды перепробовал несколько самых популярных, но все они генерят очень очень плохой html+css.
Вы слишком обобщаете. Было время, когда низкокачественные плагины генерации HTML/CSS появлялись пачками, и это было ещё до Dev Mod в Figma. Ситуация давно изменилась, посмотрите хотя бы AutoHTML.
В парсинге JSON Figma нет ничего сверхъестественного, пример:
...
"strokeWeight": 1,
"strokeAlign": "INSIDE",
"styles": {
"stroke": "2960:51461"
},
"cornerRadius": 6,
...
"layoutMode": "VERTICAL",
"counterAxisSizingMode": "FIXED",
"itemSpacing": 4,
"layoutWrap": "NO_WRAP",
"layoutAlign": "STRETCH",
"layoutGrow": 0,
"layoutSizingHorizontal": "FILL",
"layoutSizingVertical": "HUG",
...
Этот фрагмент JSON легко интерпретировать в CSS обычной логикой. Для этого не нужна LLM, которая ломается при чуть более сложном дизайне с каким-нибудь наложением слоёв.
И я пишу не о очередном плагине-генераторе HTML/CSS, а о инструменте, который может собрать прототип или приложение из дизайна. Можете посмотреть демонстрацию из моего предыдущего комментария выше
Большая беда, что часть внутренней кухни механизма взаимодействия между фронтом и бэком ушла на сторону. Вроде и мелочь, а вот из таких мелочей будет строится стратегия атаки на систему. Лучше было обезличить организацию.
Любой не разраб на высокой должности в крупной компании
Что-то не понял. В итоге ИИ делает верстку по скриншоту? Неужели это помогает решить "проблему №2" из статьи, что разработчики верстают ни как дизайнеры? Типа ИИ по скриншоту верстает как надо, а фронтенд разработчик по фигме нет?
Я кажется понял, почему в приложении ВТБ, банка с миллионами клиентов, уже давненько плавающий баг, что при входе автоматически не обновляется баланс на карте 🤔
Народ вы не поняли, это очень эффективный менеджер на низком старте с заявлением на увольнение хочет выбить себе бабосов, а после него хоть лес гори.
А так это очень эффективный способ отстрелить себе ноги бизнесу. ВТБ просто решил стрелять себе не только в ноги, но и в спину.
Я более чем уверен что это затронет все с фразой: «смотрите как быстро и дешего!!!»
А по факту это быстро реально потом встанет в дорого, долго, неподдерживаемо и единственное решение все переделывать. Единственно что тут меня хоть как-то обнадеживает что это затронет не всю инфраструктуру, а только удобство и возможность клиентов. А банк продолжит работать в стандартном режиме, только будет в догоняющих опять с интернет банкингом из-за такого подхода.
Направление верное, спасибо за статью 👍
Заголовок и тезисы слишком кликбейтные, хейтеров набежало .
То что ИИ сократит команду разработчиков при правильной организации процессов это факт (речь про сейчас) поэтому двигайтесь в этом направлении,
успехов 🍀
Теперь можно пойти дальше и выкинуть ещё и дизайнера. Это же сколько экономии.
У нас так и сделали) мы с разрабами синхронизировали набор шаблонов страниц, на которых строится вся система, так же продумали дальнейшее масштабирование и вот я последний дизайнер, который сейчас дорабатывает последнюю неделю на проекте) оставили аналитиков, которым купили им и разрабов)
Оптимизация в деле
Короч. Вы не "сократили время создания интерфейсов react-приложений". Вы научились делать более красивые прототипы.
А вы когда генерируете смотрите что там генерируется , проводите полное тестирование и создаете документацию на то как оно работает ?
Мне все мои 20+ лет в ИТ было непонятно, почему дизайнеры сами не верстают свои дизайны.
А ведь были темные времена, когда дизайн отдавали разрабам прям из Фотошопа, в растре. И мы сутками занимались пиксельхантингом, посылая лучи поноса гордым авторам этих нарядных картинок.
Не могу в полной мере одобрить средства, но цель автора совершенно правильная и благая, т.к. UI и по сей день сжиркет львиную долю ресурсов любого проекта.
Есть ещё один подход, который сам лично пользую. Прошу figm'u подготовить мне спеку по шаблону для воспроизведения страницы на другом агенте
Так там и делать особо нечего, сплошной ui kit
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Заголовок<br>