🎨 uxowy.dev #68: narzędzie AI, które tworzy kod widoków + świetne art z HTMHell

Mikołaj Waśkowski -

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™L 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™L - o pisaniu H™L, 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: