Текст норм?
Интерфейс на 90% состоит из текста. UX-редакторов, как правило, очень мало. В нашей команде их два, но даже они физически не смогут отревьювить все наши интерфейсы. Поэтому мы-дизайнеры стараемся сами писать простой, понятный и дружелюбный текст, следуя редполитике, которую составили редакторы.
В команде дизайна взяли курс на разумную ИИ-зацию. Я решил собрать плагин для Фигмы, который будет проверять текст по редполитике и писать замечания. До этого никогда не вайбкодил :) Но опыт разработки был.
Впервые поставил Codex от ChatGPT и написал промпт:
Создай плагин для Figma, чтобы проверять тексты в макетах дизайнеров на соответствие редполитике. Редполитика лежит в приложенном файле.
Сценарий использования:
— Дизайнер запускает плагин
— Выделяет секцию или фрейм, где нужно проверить тексты
— Плагин сверяется с редполитикой и выводит список замечаний. У каждого замечания есть короткое описание, почему оно появилось. И рекомендация исправления. При нажатии на замечания происходит фокусирование на нужном фрейме.
[редполитика.pdf]
И с первого раза получился аккуратный чистый интерфейс и работающий алгоритм. Я намеренно не использовал API нейронки, чтобы не передавать наши интерфейсы хрен-пойми куда и не зависеть от лимитов. Всё работает на регулярках и простых ифчиках.
Потестил немного и сделал доработки:
— Доработал UI: добавил больше отзывчивости в кнопки, лоадеры, состояния, убрал лишние элементы, добавил группировку замечаний, привёл к нашему стилю, добавил тёмную тему.
— Добавил много исключений, чтобы убрать ложные срабатывания.
— Значительно ускорил плагин с помощью кеширования, добавлении быстрой пред-проверки, уменьшению размера первого батча (оказывается, это подход ramp-up batching).
— В конце добавил самое главное: кнопки для автоматического исправления замечаний.
Начали активно тестировать в команде. Дизайнеры в восторге; редакторы тоже рады, потому что могут прогонять макеты плагином перед своей работой. Будем продолжать тестировать и улучшать качество плагина.
А вы ИИ-зируетесь в дизайне?
