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

Поскольку ChatGPT доказал свою ценность во многих профессиях и ожидается, что в будущем он будет только улучшаться, я решил проверить его возможности и ограничения. Как человек, который перешел от проектирования к дизайну , у меня есть умеренные знания в области кодирования, но это никогда не было моей сильной стороной. Мне было любопытно посмотреть, сможет ли ChatGPT помочь кому-то вроде меня, у которого есть минимальные знания в области кодирования, в создании функционального приложения или веб-сайта .

Мозговой штурм идей

Я понимаю, что ChatGPT в настоящее время не может генерировать обширный код с несколькими функциями. Поэтому я искал простые идеи, которые можно воплотить в жизнь с помощью ChatGPT. Как дизайнер, я, естественно, тяготел к созданию плагина Figma .

Недавно я работал над проектом веб-дизайна, и мне понадобилась сетка из 12 столбцов в моем фрейме в Figma. Использование сетки из 12 столбцов для разработки веб-страниц является обычной практикой для многих дизайнеров. Это помогает в выравнивании компонентов и структурировании веб-сайта. Однако для создания сетки из 12 столбцов в Figma требуется несколько кликов и ввод определенных значений. Я хотел упростить процесс создания сетки одним щелчком мыши.

Это казалось идеальной идеей для экспериментов с ChatGPT.

Как дизайнер, я понятия не имел, с чего начать разработку плагина Figma. Я посмотрел в Интернете и нашел следующие источники, которые помогли мне в этом процессе:

Источники, которые помогли мне начать

https://medium.com/ux-planet/i-built-a-figma-plugin-with-just-chatgpt-no-coding-needed-7d94958e0ec

Время кодировать

Я начал работу с chatGPT и ввел следующую подсказку.

«Вы опытный разработчик с опытом разработки плагинов Figma.

Пожалуйста, помогите мне с кодом для плагина Figma, который включает сетку для кадра. Сетка должна состоять из 12 столбцов с отступом 20 и полем 200. Цвет сетки должен быть красным с непрозрачностью 10%. Плагин не требует никакого пользовательского интерфейса. Он должен выполняться, как только пользователь выбирает фрейм, щелкает при запуске».

ВАУ! Я был поражен тем, насколько точным оказался код с первой попытки, несмотря на то, что подсказка была не совсем понятной с множеством грамматических ошибок.

Время протестировать плагин в Figma.

К сожалению, плагин вызвал ошибку при выполнении в Figma.

Я упомянул об этой ошибке в ChatGPT и попросил перегенерировать правильный код. Однако на этот раз вновь сгенерированный код привел к другой ошибке. Я заметил, что ChatGPT создает разные версии кода для одной и той же подсказки при многократном выполнении.

После многократных переходов туда и обратно и повторной генерации кода плагин, наконец, заработал.

Но,

Результат оказался не таким, как ожидалось.

Кое-что было сделано правильно, например, цвет и желоб, но сами столбцы были очень тонкими.

Я снова попросил chatGPT изменить код, чтобы сетка динамически занимала оставшуюся часть кадра с отступом в 200 пикселей с обеих сторон.

Он снова начал генерировать неправильный код. Даже после многократной настройки подсказки и ее регенерации я получал те же ошибки, что и раньше. Я был измотан этим моментом.

Мои ограниченные навыки кодирования спешат на помощь!

Поскольку я зашел так далеко, я не хотел сдаваться. Имея некоторый опыт в программировании, я решил взять дело в свои руки.

Я поискал в сети и нашел документацию API Figma . Я изучил свойства сеток и нашел именно то, что мне было нужно.

Свойство «alignment» должно иметь значение «STRETCH» для динамического заполнения доступного пространства.

Как уже упоминалось, «sectionSize» не требуется, когда для «alignment» установлено значение «STRETCH».

Я внес соответствующие изменения и снова протестировал его.

На этот раз сработало!

Я был очень доволен результатом, но чувствовал, что есть еще возможности для улучшения.

Поскольку я задал смещение в 200 пикселей по обеим сторонам сетки, это не очень хорошо работает с фреймами всех размеров. Я хочу, чтобы сетка была динамической по размеру и занимала 75% ширины любого кадра .

Я не хотел спрашивать ChatGPT и снова проходить процесс проб и ошибок. Это было простое изменение — я просто добавил формулу для смещения вместо того, чтобы задавать постоянное значение.

Я установил формулу для смещения как (frame.width) * 0,125.

Вот как это работает:

Допустим, ширина кадра 1920 пикселей. В этом случае смещение будет 1920*0,125 = 240 пикселей по обе стороны от сетки ⇒ 240*2 = 480 пикселей.

Следовательно, смещение составляет 480 пикселей (25% от 1920) , а сетка — 1440 пикселей (75% от 1920).

Я также изменил отступ на 24 пикселя, так как он более широко используется, и цвет на Бирюзовый. Вот окончательный результат:

Публикация плагина в Figma

Я ввел необходимые данные (имя плагина, описание, значок и т. д.) и опубликовал плагин в сообществе Figma.

Я сомневался, будет ли он одобрен Figma или нет, но, к моему удивлению, он был одобрен в течение 2 часов.

Ссылка на плагин

Просто выберите кадр и нажмите «Выполнить».

Ключевые уроки и проблемы, с которыми столкнулись.

• Хотя ChatGPT чрезвычайно мощен со многими потенциальными приложениями, он по-прежнему требует ручного вмешательства для достижения лучших результатов.
• Наличие базовых знаний в различных областях и помощь ChatGPT могут помочь нам достичь результатов, которых было бы невозможно достичь в одиночку.
• ChatGPT генерирует несколько версий вывода для одного и того же приглашения, которые иногда могут включать неверные ответы. Важно тщательно просмотреть и оценить точность каждого вывода перед его использованием.
• Быстрое проектирование является жизненно важным навыком для будущего. Чем точнее ваши описания, тем лучшие результаты дает ChatGPT.

Не стесняйтесь обращаться ко мне в случае каких-либо вопросов/предложений/отзывов. Я счастлив связаться на LinkedIn.

https://www.linkedin.com/in/naren-abbaraju/