馃帹 uxowy.dev #68: narz臋dzie AI, kt贸re tworzy kod widok贸w + 艣wietne art z HTMHell
3 min czytania

馃帹 uxowy.dev #68: narz臋dzie AI, kt贸re tworzy kod widok贸w + 艣wietne art z HTMHell

Sezon 艣wi膮teczny w pe艂ni, dlatego dzi艣 b臋dzie kr贸ciutko. A w przysz艂ym tygodniu tylko 偶yczonka 馃巺 馃し鈥嶁檪锔

Dzisiaj:

  • v0 - narz臋dzie AI, kt贸re tworzy gotowy kod widok贸w
  • 艢wietne artyku艂y z tegorocznego HTMHell Advent

 

Zapraszam 猬囷笍 猬囷笍 猬囷笍 猬囷笍


v0 - AI, kt贸re tworzy gotowy kod widok贸w

Resources | 藕r贸d艂o

v0 to projekt AI od Vercel, dzi臋ki kt贸remu wygenerujemy gotowy kod w React lub H鈩 z wykorzystaniem shadcn/ui i Tailwind CSS.

  • Trwa prywatna beta tego narz臋dzia
  • Podajemy prompta i narz臋dzie generuje nam kod widoku
  • Najwi臋ksz膮 zalet膮 i baz膮 tego narz臋dzia jest to, 偶e mo偶emy ulepsza膰 otrzymany wynik wpisuj膮c nast臋pne prompty - tworzy膰 nast臋pne wersje
  • Poklika艂em troch臋 i... jest ok, ale na razie sza艂u nie ma
  • Ale patrz膮c na to jak wszystkie narz臋dzia AI si臋 szybko rozwijaj膮, wygl膮da obiecuj膮co (wyobra藕my sobie np. mo偶liwo艣膰 wskazania naszego Design Systemu jako 藕r贸d艂a kodu / designu / sposobu pisania kodu)
  • Narz臋dzie generuje tylko UI, nie wypluje nam 偶adnej logiki
  • Aktualnie nadaje si臋 do tego, aby nie zaczyna膰 z pust膮 kartk膮 lub mie膰 szybki boilerplate
  • Ca艂kiem fajnie dobiera ikonki 馃槃

Na stronie g艂贸wnej jest multum przyk艂ad贸w i mo偶na zapisa膰 si臋 na waitlist臋: https://v0.dev/

Moje dwie pr贸by wygenerowania UI

  1. Strona "Ustawienia" z podanymi grupami:
Prompt: A SaaS settings page with General, Device and User sections for mobile app. Link: https://v0.dev/t/6hZtzX54JNu
  1. Appka mobilna z bottom menu:
Prompt: Mobile app skeleton with three Modules: Create photo, Gallery & Settings. Use bottom menu. Show Create active module with several options and call to action: "Take photo". Takie into condition good UX & usability. Link: https://v0.dev/t/dgvyZIKbQ6v

艢wietne artyku艂y z tegorocznego HTMHell Advent

Development | 藕r贸d艂o

Po艂owa grudnia za nami i w HTMHell mamy ju偶 par臋 艣wietnych artyku艂贸w.

Szczeg贸lnie polecam:

  1. Web Components FTW! - podstawy Web Component贸w
  2. The UX of H鈩 - o pisaniu H鈩, kt贸ry ma dobry UX, czyli ...semantycznego
  3. You don't need JavaScript for that - dzia艂aj膮cy: switch, autosuggest inputa, color picker, accordion i dialog bez u偶ycia JS? Tak, to mo偶liwe!
  4. The hidden depths of the input element - na pewno nie znasz wszystkich mo偶liwo艣ci jakie oferuje input. Ciekawe!
  5. Getting started with Web Performance 馃殌 - najwa偶niejsze rzeczy dot. performance na froncie, z praktycznego punktu widzenia. Polecam!!!

I czekam na wi臋cej! 馃檪

Pe艂na lista:
www.htmhell.dev/adventcalendar


馃ス
馃毃
Je艣li podoba Ci si臋 ten mail, to jest du偶a szansa, 偶e spodoba si臋 on innym developerom. Zapodaj im linka do webowej wersji newslettera, bed膮 Ci wdzi臋czni! Poni偶ej gotowiec do skopiowania 馃憞
Dzi艣 na moj膮 skrzynk臋 wpad艂o 68. wydanie 馃帹 uxowy.dev, a w nim: narz臋dzie AI, kt贸re tworzy gotowy kod widok贸w + 艣wietne artyku艂y z tegorocznego HTMHell. Link do wersji webowej: https://uxowy.dev/email/68. Polecam!

Za wszelk膮 pomoc - dzi臋kuj臋!


To wszystko na dzi艣!

Pozdrawiam i dobrego weekendu!

Miko艂aj Wa艣kowski
uxowy.dev


Przegapi艂e艣 kt贸re艣 wydanie?

Lista ostatnich wysy艂ek 馃帹 uxowy.dev:

Je艣li jeszcze nie ma Ci臋 na li艣cie 馃

Wysy艂amy jeden email tygodniowo, w ka偶dy pi膮tek, o godz. 12:00.
Warto艣ciowa wiedza o UI/UX dla developera mo偶e wyl膮dowa膰 do Twojej skrzynki.