Narzędzia AI są teraz w modzie. Trudno jest otworzyć jakąkolwiek platformę mediów społecznościowych bez znalezienia wiadomości o nowym narzędziu AI, które zostało uruchomione lub o tym, jak sztuczna inteligencja zabierze miliony miejsc pracy.

Ponieważ ChatGPT okazał się wartościowy w wielu zawodach i oczekuje się, że będzie się poprawiał w przyszłości, postanowiłem przetestować jego możliwości i ograniczenia. Jako ktoś, kto przeszedł od inżynierii do projektowania , mam umiarkowaną wiedzę na temat kodowania, ale nigdy nie było to moją mocną stroną. Byłem ciekawy, czy ChatGPT może pomóc komuś takiemu jak ja, który ma minimalną wiedzę na temat kodowania, w zbudowaniu funkcjonalnej aplikacji lub strony internetowej .

Pomysły burzy mózgów

Rozumiem, że ChatGPT obecnie nie może generować rozbudowanego kodu z wieloma funkcjami. Dlatego szukałem prostych pomysłów, które można urzeczywistnić za pomocą ChatGPT. Jako projektant naturalnie skłaniałem się ku zbudowaniu wtyczki Figma .

Niedawno pracowałem nad projektem strony internetowej i potrzebowałem 12-kolumnowej siatki w mojej ramce w Figmie. Używanie 12-kolumnowej siatki do projektowania stron internetowych jest powszechną praktyką wielu projektantów. Pomaga w dopasowywaniu komponentów i strukturyzacji strony internetowej. Jednak utworzenie 12-kolumnowej siatki w Figma wymaga wielu kliknięć i wprowadzenia określonych wartości. Chciałem uprościć proces tworzenia siatki za pomocą jednego kliknięcia.

Wydawało się, że to idealny pomysł na eksperymentowanie z ChatGPT.

Jako projektant nie miałem pojęcia, jak zacząć tworzenie wtyczki Figma. Poszukałem w Internecie i znalazłem poniższe źródła, które pomogły mi w tym procesie:

Źródła, które pomogły mi zacząć

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

Czas na kodowanie

Zacząłem korzystać z chatGPT i wprowadziłem poniższy monit.

„Jesteś doświadczonym programistą, który ma doświadczenie w tworzeniu wtyczek Figma.

Pomóż mi z kodem wtyczki Figma, która włącza siatkę dla ramki. Siatka powinna mieć 12 kolumn z odstępem 20 i marginesem 200. Kolor siatki powinien być czerwony z kryciem 10%. Wtyczka nie wymaga żadnego interfejsu użytkownika. Powinien zostać wykonany, gdy użytkownik wybierze ramkę i kliknie podczas uruchamiania”.

WOW! Byłem zdumiony, jak dokładny był kod za pierwszym razem, mimo że monit nie był całkowicie jasny z wieloma błędami gramatycznymi.

Czas przetestować wtyczkę w Figma.

Niestety, wtyczka spowodowała błąd podczas wykonywania w Figma.

Wspomniałem o tym błędzie w ChatGPT i poprosiłem o ponowne wygenerowanie poprawnego kodu. Jednak nowo wygenerowany kod spowodował tym razem inny błąd. Zauważyłem, że ChatGPT tworzy różne wersje kodu dla tego samego monitu, gdy jest wykonywany wiele razy.

Po kilkukrotnym przejściu w tę iz powrotem i ponownym wygenerowaniu kodu wtyczka w końcu została uruchomiona.

Ale,

Wynik nie był zgodny z oczekiwaniami.

Poprawiło się kilka rzeczy, takich jak kolor i rynna, ale same kolumny były bardzo cienkie.

Ponownie poprosiłem chatGPT o zmodyfikowanie kodu, aby siatka dynamicznie zajmowała pozostały obszar ramki, z marginesem 200px po obu stronach.

Znowu zaczął generować zły kod. Nawet po kilkukrotnym poprawieniu monitu i jego ponownej regeneracji otrzymywałem te same błędy, które otrzymałem wcześniej. Byłam wykończona tym punktem.

Moje ograniczone umiejętności kodowania na ratunek!

Odkąd zaszedłem tak daleko, nie chciałem się poddać. Mając już pewne doświadczenie w kodowaniu, postanowiłem wziąć sprawy w swoje ręce.

Szukałem w Internecie i znalazłem dokumentację API Figma . Zbadałem właściwości siatek i znalazłem dokładnie to, czego potrzebowałem.

Właściwość „alignment” powinna mieć wartość „STRETCH”, aby dynamicznie wypełniać dostępne miejsce.

Jak wspomniano, „sectionSize” nie jest wymagane, gdy „alignment” jest ustawione na „STRETCH”.

Wprowadziłem odpowiednie zmiany i przetestowałem to ponownie.

Tym razem się udało!

Byłem bardzo zadowolony z wyniku, ale czułem, że wciąż jest miejsce na poprawę.

Ponieważ podałem przesunięcie 200 pikseli po obu stronach siatki, nie działa ono dobrze z ramkami wszystkich rozmiarów. Chcę, aby siatka miała dynamiczny rozmiar i zajmowała 75% szerokości dowolnej ramki .

Nie chciałem pytać ChatGPT i ponownie przechodzić przez proces prób i błędów. To była prosta zmiana — po prostu dodałem formułę offsetu zamiast podawania stałej wartości.

Ustawiłem formułę przesunięcia jako (szerokość ramki) * 0,125.

Oto jak to działa:

Powiedzmy, że szerokość ramki to 1920 pikseli. W tym przypadku przesunięcie wyniesie 1920*0,125 = 240 pikseli po obu stronach siatki ⇒ 240*2 = 480 pikseli

Dlatego przesunięcie wynosi 480 pikseli (25% z 1920) , a siatka to 1440 pikseli (75% z 1920).

Zmieniłem również rynnę na 24px, ponieważ jest ona szerzej stosowana, a kolor na turkusowy. Oto ostateczny wynik:

Publikowanie wtyczki do Figma

Wprowadziłem wymagane dane (nazwa wtyczki, opis, ikona itp.) i opublikowałem wtyczkę w Społeczności Figma.

Byłem sceptyczny, czy zostanie to zatwierdzone przez Figmę, czy nie, ale ku mojemu zaskoczeniu zostało zatwierdzone w ciągu 2 godzin.

Link do wtyczki

Po prostu wybierz ramkę i kliknij „uruchom”.

Kluczowe wnioski i wyzwania.

• Chociaż ChatGPT jest niezwykle potężny w przypadku wielu potencjalnych aplikacji, nadal wymaga ręcznej interwencji, aby osiągnąć lepsze wyniki.
• Posiadanie podstawowej wiedzy z różnych dziedzin i skorzystanie z pomocy ChatGPT może pomóc nam osiągnąć wyniki, które nie byłyby możliwe do osiągnięcia w pojedynkę.
• ChatGPT generuje wiele wersji danych wyjściowych dla tego samego monitu, które czasami mogą zawierać nieprawidłowe odpowiedzi. Ważne jest, aby dokładnie przejrzeć i rozważyć dokładność każdego wyjścia przed jego użyciem.
• Szybka inżynieria to kluczowa umiejętność na przyszłość. Im dokładniejsze są Twoje opisy, tym lepsze wyniki daje ChatGPT.

Zapraszam do kontaktu ze mną w przypadku jakichkolwiek pytań / sugestii / opinii. Cieszę się, że mogę połączyć się na LinkedIn.

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