Jako projektant produktów zawsze fascynowało mnie tworzenie narzędzi, które usprawniają pracę i wprowadzają porządek w chaosie procesu rozwoju. Jednak jedna umiejętność była mi obca: kodowanie. Pisanie choćby jednej linijki JavaScriptu wydawało mi się tak trudne, jak opanowanie nowego języka w ciągu jednej nocy. Do niedawna wydawało mi się to niemożliwe. Przecież żeby zacząć programować, trzeba nauczyć się podstaw, składni i wybrać odpowiedni język spośród wielu dostępnych. A jednak, jestem tutaj, by podzielić się historią o tym, jak stworzyłem swoją pierwszą wtyczkę do Figmy – Summary Sprint – dzięki wsparciu dużych modeli językowych (LLM), takich jak Cloude Sonnet 3.5 i ChatGPT. Wtyczka ta upraszcza planowanie sprintów, automatycznie podsumowując punkty przypisane do zadań, bez konieczności ręcznych obliczeń czy korzystania z zewnętrznych narzędzi.
W naszym zespole spędzamy piątkowe popołudnia na zamykaniu tygodniowych sprintów. W teorii do tego momentu wszystkie zadania powinny być ukończone. W praktyce często dopiero w piątek grupujemy „zbłąkane” taski i spotkanie się przedłuża. Zliczanie punktów, grupowanie zadań i podsumowywanie postępów jest kluczowe – pozwala zweryfikować działania i lepiej zaplanować kolejny sprint. Jednak zliczanie punktów bywa nużące. Zadania się piętrzą, karteczki mnożą, a Ty toniesz w ręcznych kalkulacjach, starając się nie pomylić, zwłaszcza przy większej liczbie zadań. Było jasne, że ten proces da się zautomatyzować. Nasz zespół potrzebował rozwiązania, a ja jako osoba bez umiejętności programistycznych musiałem znaleźć sposób, by je wdrożyć. Więc rozpocznijmy nasz eksperyment: Tworzenie wtyczki za pomocą Cloude i „gptsów”
Zacząłem od przestudiowania dokumentacji Figmy dotyczącej widgetów i pluginów, a następnie „nakarmiłem” nią dwa modele: Cloude Sonnet 3.5 oraz ChatGPT, zapewniając im potrzebny kontekst technologiczny. Dodatkowo, ChatGPT zaoferował mi coś, co nazwałem „gptsy” – specjalne role nadawane mu za pomocą odpowiednich promptów oraz danych (np. z PDF-ów czy notatek). Pozwoliło mi to przypisać różne specjalizacje w ramach ChatGPT:
Jeden „gpts” do rozdzielenia funkcjonalności wtyczki na mniejsze elementy.
Kolejny „gpts” do wsparcia przy implementacji i debugowaniu. Dzięki temu najpierw rozbiłem wtyczkę na drobne moduły, a następnie CloudE Sonnet 3.5 mógł po kolei dodawać kolejne elementy. Inny „gpts” wspierał mnie przy rozwiązywaniu problemów z kodem.
Spróbujcie sami, prompt poniżej :)
You are Developer GPT, a professional programming assistant who helps UX/UI
designers in writing code for plugins and widgets for Figma. You are an expert
in writing clean, efficient code for figma plugin and providing implementation
advice. Occasionally, you also offer UX/UI tips when relevant.
GOAL: Today, you will become my virtual programming assistant. Your task is to
help me write code for a plugin by offering suggestions, solutions, and code
examples. You will be responsible for supporting me in implementation and
providing practical advice.
CRITERIA FOR THE BEST PROGRAMMING ASSISTANT:
- You are specific and practical.
- You avoid generalities and lengthy sentences.
- You help me in writing code by providing examples and explanations.
- You suggest better solutions in terms of implementation and code optimization.
- Occasionally, you provide UX/UI advice when it's pertinent.
- You make task execution easier for me, knowing that I might not be an expert
in programming.
- You assist me with valuable tips and comprehensive checklists.
STRUCTURE OF OUR SESSION:
- I will set the context of our work. I will choose one challenge to focus on.
You will generate specific solutions or code snippets/whole code to solve it.
You will give me a practical action plan with key steps and code if necessary.
- You will share best practices and common mistakes to help me with the
implementation.
FORMAT OF OUR INTERACTION:
- I will inform you when we can proceed to the next step. Do not move forward
without my command.
- You will rely on the context of this session at every stage.
INFORMATION ABOUT ME:
- My project: I am creating plugins for Figma that streamline designers
workflows. We are building a sprint summary tool in Figjam.
- My value proposition: Figjam users can work more efficiently and creatively
thanks to these tools.
- My target audience: people using Figjam who are looking for tools to
facilitate their workflow and sprints.
- My current stage: I have several ideas and prototypes but need help refining
them and effectively implementing the code.
Cloude Sonnet 3.5 stał się moim głównym narzędziem do generowania bazowego kodu. Pozwoliło mi to skupić się na tym, co robię najlepiej – projektowaniu doświadczeń użytkowników i definiowaniu celu wtyczki – podczas gdy model zajmował się logiką programistyczną. Początkowo próbowałem wygenerować całą wtyczkę za jednym podejściem. Nie był to dobry pomysł. Po kilku nieudanych próbach zdecydowałem się działać iteracyjnie, korzystając z pomocy gptsa do podziału prac na mniejsze kroki: Iteracyjne podejście obejmowało m.in.
Gdy miałem już wstępny kod, natrafiłem na problem: interfejs wtyczki się nie ładował. Tu wkroczył kolejny „gpts”, wyspecjalizowany w debugowaniu. Dzięki niemu, przy użyciu odpowiednich promptów i fragmentów kodu, w krótkim czasie uzyskałem:
ChatGPT z „gptsem” nie tylko dał mi rozwiązania, ale wytłumaczył również, dlaczego działają. Dzięki temu mogłem myśleć bardziej jak programista – choć na chwilę.
Po wielu testach i udoskonaleniach powstała Summary Sprint. Oto jej kluczowe funkcje:
Projektanci Nie Muszą Kodować Od Zera: Dzięki narzędziom takim jak CloudE Sonnet 3.5, ChatGPT oraz „gptsy” osoby nietechniczne mogą tworzyć wartościowe narzędzia. Kluczem jest iteracyjne podejście, zaczynanie od MVP i skupienie się na potrzebach użytkowników.
Moc Jasnej Informacji Zwrotnej - proces recenzji w Figmie zwrócił uwagę na problem: wtyczka „nigdy się nie ładuje”, jeśli użytkownik nie wybierze sekcji. Dodałem więc komunikat: „Nie wybrano sekcji. Proszę pogrupować zadania w sekcji, aby kontynuować.” Drobna poprawka, a znaczna poprawa użyteczności.
Jeden Krok od Błędu Podczas rozwoju wtyczka przeszła przez dziesiątki wersji. Łatwo było o „fatal error”. LLM-y pełnią rolę mentora, doradcy, a nawet asystenta od burzy mózgów, lecz trzeba nimi zarządzać świadomie. To narzędzia, a nie automatyczne rozwiązanie każdego problemu.
Wtyczka jest już dostępna w społeczności Figmy, wraz z materiałami demonstrującymi jej działanie. Każda zmiana z mojej perspektywy była tak naprawdę o krok od niedziałającego kodu – doszlifowywanie wyglądu wtyczki zajęło mi zbliżoną ilość czasu co stworzenie jednej funkcjonalności. Ciężkie, złożone zadania programistyczne pozostawię jednak mojemu doświadczonemu zespołowi, który poradzi sobie z każdym problemem. Mimo to, jako ktoś, kto od lat projektuje interfejsy, miło było stworzyć coś samemu. (Wybacz, AI, za zabranie wszystkich zasług!)
Narzędzia AI pozwalają nam przekraczać własne ograniczenia. Nie trzeba być inżynierem, by stworzyć coś wartościowego – wystarczą odpowiednie nastawienie, wiedza oraz narzędzia, w tym specjalnie przystosowane „gptsy”.
W Blues Brackets zajmujemy się rozwiązywaniem prawdziwych problemów za pomocą najnowszych technologii.
Usługi Rozwoju Aplikacji React
Usługi rozwoju systemów wbudowanych
Tworzenie aplikacji mobilnych na Androida i iOS
Profesjonalny rozwój projektów Arduino
Rozwiązania embedded z RTOS
Usługi rozwoju MVP | Firma tworząca MVP dla startupów
Usługi tworzenia oprogramowania metodą Agile
Usługi Rozwoju Aplikacji Flutter
Usługi Proof of Concept i Proof of Principle
Rozwój aplikacji cross-platform (wieloplatformowych)
Software House Polska | Tworzenie Aplikacji i Systemów Wbudowanych
Staff Augmentation | Rozszerzenie zespołu IT
Tworzenie aplikacji PWA | iOS i Android
Animowane Strony Internetowe | Profesjonalne Usługi
Profesjonalne usługi UX/UI design
Tworzenie oprogramowania zgodnego z EAA
Business Intelligence dla firm | bluesBrackets
Zatrudnij dedykowany zespół IT w Polsce
Ekspercka firma projektowa sprzętu | Własna elektronika
Usługi inżynierii danych i wizualizacji
Utrzymanie oprogramowania i modernizacja | bluesBrackets
Zdalne wsparcie IT i utrzymanie aplikacji
Usługi rozwoju IoT | Internet rzeczy IoT
Usługi Tworzenia Chatbotów AI
Usługi Next.js i WordPress
Usługi tworzenia aplikacji webowych od bluesBrackets
Firma konsultingowa DevOps | bluesBrackets
DevOps jako Usługa | Doradztwo AWS Cloud
Rozwój oprogramowania SaaS: chmura zgodna z RODO
NB-IoT, systemy wbudowane i zwinne IT
Mikroserwisy czy Monolit: Ekspercka Architektura
Oprogramowanie IoT i Smart City | bluesBrackets
Rozwój produktów IoT i dedykowane oprogramowanie
Oprogramowanie SLA & usługi zarządzane Polska
IIoT i Przemysł 4.0 – oprogramowanie na miarę
Outsourcing Python – Polska firma offshore
Rozwiązania IT dla magazynowania energii i IoT
Platforma zarządzania IoT i dedykowane rozwiązania
Usługi backend i JavaScript | bluesBrackets
Rozwój oprogramowania SaaS: chmura zgodna z RODO
Tworzenie oprogramowania dla branży turystycznej
Rozwój IoT i Wearable | bluesBrackets
Expert Software Migration Services | bluesBrackets
Ekspercka migracja oprogramowania | bluesBrackets
Migracje Data Center i IT – Bezpieczne Usługi
Profesjonalne prototypowanie oprogramowania
Języki i usługi tworzenia aplikacji mobilnych
Eksperci IoT i Embedded | bluesBrackets
Usługi testowania jakości | bluesBrackets
Testy i integracja systemów IT end-to-end
Polski Software House: Agile & UI/UX
Tworzenie oprogramowania medycznego
Outsourcing IT i AI dla branży medycznej
Uczenie maszynowe w analizie predykcyjnej
Rozwiązania ML dla łańcucha dostaw
IT Nearshoring i rozwój oprogramowania Polska
Rozliczenie ryczałtowe czy T&M – co wybrać?
Modernizacja aplikacji legacy dla firm
Modernizacja systemów IT i dedykowane oprogramowanie
Nowoczesny software house: Dyrektor IT jako usługa (CTO as a Service), DevOps, UX/UI
Skalowanie aplikacji dla startupów — rozwiązania skalowalne
Usługi inżynierii oprogramowania embedded | bluesBrackets
Tworzenie aplikacji webowych ReactJS
Skalowalne aplikacje desktopowe i embedded – bluesBrackets
Node.js, React i Next.js Polska – bluesBrackets
Tworzenie aplikacji Flutter | bluesBrackets
Liderzy Java w Polsce – zatrudnij ekspertów
Konsultacje Machine Learning i Rozwój Oprogramowania | UI/UX, Fullstack, Mobile, Embedded
Usługi tworzenia oprogramowania na zamówienie — bluesBrackets
Oprogramowanie Embedded i IoT | bluesBrackets
Firmy programistyczne | Rozwiązania na miarę
Eksperckie usługi hardware | bluesBrackets
Rozwiązania AI Chatbot dla Firm
Tworzenie PWA na iOS – Aplikacje mobilne
Ekspercka firma tworząca aplikacje iOS w Polsce
Eksperci w Embedded Android i Bluetooth
Outsourcing inżynierii oprogramowania Polska
Specjalistyczne usługi inżynierii oprogramowania
Tworzenie dedykowanych aplikacji webowych | bluesBrackets
Tworzenie progresywnych aplikacji webowych | bluesBrackets Polska
Aplikacje webowe vs desktopowe | bluesBrackets
Aplikacje webowe czy mobilne? Fullstack & UX/UI
Agile Software Development Polska
Firma outsourcingowa IT — Polska
Polska firma outsourcingu IT
Zaufana firma offshore software development w Polsce
Tworzenie oprogramowania IoT dla przemysłu
Polski Software House | Rozwiązania IoT i Embedded
Oprogramowanie IoT dla handlu, wearables, nieruchomości
Usługi rozwoju oprogramowania | bluesBrackets
Tworzenie produktów IoT | Embedded & Fullstack Software House
Aplikacje mobilne dla biznesu | bluesBrackets
IoT MQTT Dashboardy i rozwiązania embedded
Dedykowane MVP i oprogramowanie szyte na miarę
Dedykowane oprogramowanie na zamówienie
Firma Node.js – zaufane usługi i rozwój
Eksperci embedded i bare metal | bluesBrackets
Aplikacje webowe & AI szyte na miarę
Dedykowane CMS i oprogramowanie na miarę
Dedykowane usługi IT i outsourcing w Polsce
Eksperci white label dla aplikacji i IoT
Konsulting migracji do chmury – bluesBrackets
Integracje systemów i wdrożenia ChatGPT
Bezpieczne testy systemowe i integracja
Usługi integracji systemów IT
Dedykowane rozwiązania IT dla firm i startupów
Rozwój aplikacji chmurowych | Polska firma IT
Usługi chmury i transformacji cyfrowej
Zatrudnij dedykowany zespół IT w Polsce
Dedykowane zespoły programistyczne w Europie