AI i ostali alati za izradu web layouta - HTML/CSS-a

Programiranje
1

Pozdrav,

zanima me što od alata se nudi za što lakšu izradu HTML/CSS-a.

Znači cilj mi je na što jednostavniji način pretvoriti nekakvu sliku dizajna ili postojeću web stranicu u HTML/CSS.

Vjerujem da bi se dalo naći tu raznih alata, sada vjerovatno i AI tehnologija to rješava, pa nek ovo bude tema za popis istih.
Ako netko zna nešto zanimljivo, bit ću zahvalan za prijedloge.

2

Možda ovako nešto
https://10web.io/ai-website-builder/

1 Like
3

Evo baš sam neki dan naišao na ovaj site: https://uizard.io/

1 Like
4

Evo nekog mog popisa što sam onako random putem pokupio i zasad nisam ništa od ovoga isprobao. Kad isprobam, dat ću dodatni feedback.
Nije baš sve niti relevantno direktno uz temu, ali neka ga…

Figma.com → development tool čini se cool - “Figma connects everyone in the design process so teams can deliver better products, faster.”
Figma plugin Genius → AI designing with you
Figma plugin Html.to.desing → pretvara bilo koji vanjski page u Figma project

https://www.builder.io/ → Code or no code? Why not both! - Visually build with your existing design system and code components
https://durable.co/ → The AI website builder that generates an entire website with images and copy in seconds.
https://10web.io/ → Build or recreate any website in minutes with the power of AI.
https://uncody.com/ → Ready to Build the Ultimate Landing Page in Seconds with AI?
uizard.io → Turn screenshots into editable designs

Template solucije - za preuzimanje gotovih web predložaka
https://htmlrev.com/ → Download free HTML templates for websites and landing pages
https://uideck.com/ → isto template solucija
https://html5up.net/ → isto template solucija
https://templatemo.com/ → isto template solucija
https://web3templates.com/ → isto template solucija

CSS/HTML helpers
https://htmlcheatsheet.com/ → pomaže u izradi CSS pravila za transformacije, shaddow i slično
https://uiverse.io/ → free html/css
https://csspeeper.com/ - Smart CSS viewer tailored for Designers / Inspect styles in a simple, well-organized & beautiful way with our Chrome extension

https://www.shapedivider.app/ → alat za kreiranje cool animiranih background-ova
https://app.haikei.app/ → slično kao Shapedivider.app - za izradu animiranih scena
https://www.svgbackgrounds.com/ → također za izradu backgrounda
https://getwaves.io/ → wave generator

transition.css → izrada css animacija
animate.css → izrada css animacija
https://animista.net/ → izrada css animacija

CSS Loader Generator - CSS Portal → css generator for loaders

I malo ostaloga
https://looka.com/ - Use Looka’s AI-powered platform to design a logo and build a brand you love.
https://www.beautiful.ai/ - jumpstarts your presentations - AI helper za automatizaciju izrade prezentacija
https://replicate.com/ → Replicate lets you run machine learning models with a few lines of code, without needing to understand how machine learning works.

1 Like
5

Od ovoga ništa nisam baš našao sretnim rješenjem. Ili je:

  • nedovoljno fleksibilno
  • prekomplicirano
  • zavisno (želim generirati i exportati HTML/JS/CSS), a umjesto toga ti vežu ruke i žele da koristiš napravljeno preko njih (uz plaćanje naravno)
  • bugovito

Za sada mi se tako startna točka za izradu custom HTML-a čini ipak praktičnija preko gotovih template solucija:

Od navedenih bi izbacio:
uideck.com - naprosto jer ne nude ništa bolje, a plaćaju se
web3templates.com - zato jer su im čudni eksportani filevi, tj. nisu plain HTML/CSS/JS, nego se čini da zavise od C#, i također se većinom plaćaju
Ostali su top. :slight_smile: