Which AI to try to build my web template

All Things AI
1

It looks like the old Web Developer Forums with the (former) specific sections of topics is gone, so I’ll ask here.
I am building a giant museum-like website (for me), which may have thousands of pages, so the sortation menu should be customizable. The site will be responsive, masonry, grid layout template with auto loader. Think of Artgrid, Google, or Bing images, or any other search engine that displays images in a grid or masonry form; and it has an extensive sortation menu. Sort by: latest, oldest, genre, favorite… and at the bottom of the screen is an autoloader. Since I will mess it up if I tried coding the template, I want to try to see if AI can do it for me. Which AI should I choose to try? Once it gives me a template with HTML and CSS, I may be able to modify and add menu items, and start populating the grid, and the sortation menu.

2

The forum rules don’t allow cut-and-paste posts from AI, but I think I’ll make a small exception here because it’s warranted as a result of the context of your question.

Rather than taking my word for it, I asked Google’s Bard AI if it was currently possible to upload an image of a website and have AI code it. As I expected, it gave a long answer saying that it was not yet a realistic expectation but would incrementally become more realistic in the future.

Here’s what Bard said..

[quote='Google’s BARD"]
While the idea of uploading an image and magically getting the code for a matching website is alluring, the current capabilities of AI, including Bard, have limitations in achieving this feat perfectly. However, it’s not entirely out of the realm of possibility! Here’s a breakdown:

Challenges of image-to-code for websites:

  • Complexity of website structure: A website is more than just a visual layout; it has a complex backend infrastructure and code logic that an image alone cannot capture. AI would need to understand the relationships between elements, data flows, and functionalities to accurately translate the image into working code.
  • Lack of context and intent: An image might not convey the website’s purpose, target audience, or desired user experience. AI would need additional information about the website’s goals and functionalities to generate relevant code.
  • Accessibility and responsiveness: Simply replicating the visual design might not translate to an accessible or responsive website that adapts to different screen sizes and devices. AI would need to consider these factors when generating the code.

However, there are promising advancements:

  • Image recognition and understanding: AI models are becoming increasingly adept at understanding the content and context of images. This could allow them to extract basic layout information and identify UI elements from website screenshots.
  • Code generation and adaptation: AI can already generate code for specific functionalities and adapt existing code to new layouts. This could be used to partially fulfill the requirements of the image-based website.

What you can do as a web developer:

  • Educate your clients: Explain the current limitations of AI in website development and manage their expectations. Emphasize the importance of human expertise in design, functionality, and optimization.
  • Leverage AI as a tool: Use AI-powered tools for tasks like generating mockups, suggesting layouts, or automating repetitive coding tasks. This can free up your time for more complex aspects of website development.
  • Collaborate with AI: Consider using platforms that combine AI-generated code with human design input and refinement. This can lead to faster development while maintaining control over the final product.

Remember, AI is a powerful tool, but it’s still under development. While it can’t yet magically code a website from an image, its capabilities are rapidly evolving. By understanding its limitations and using it strategically, you can leverage AI to enhance your workflow and impress your clients with innovative solutions.

Here are some additional resources that you might find helpful:

As it is today, AI can sometimes be useful for writing and debugging snippets of code, but in my opinion, it’s nowhere near being able to do what you think it can do.

The book cover you asked about in your other post would be a more realistic endeavor for AI, but even there uploading an image and expecting it to somehow create something wonderful based on someone’s iterative series of instructions and uploaded sketches is beyond AI’s current capabilities.

3

If you’re seeking an AI-powered tool that can help generate templates with HTML and CSS for your extensive museum-like website, there are a few AI-driven web design platforms that could potentially assist you in creating a responsive grid layout template with customizable sortation menus. Some platforms utilize AI and machine learning to generate code or assist in web design tasks.

Here are a couple of AI-powered platforms you might consider exploring:

Wix ADI (Artificial Design Intelligence):

Wix offers an ADI feature that uses AI algorithms to automatically design a website based on your preferences. While it might not provide an exact layout as described, it could assist in generating a responsive layout and may have customizable elements.
Bookmark:

Bookmark offers an AI-powered website builder that claims to create websites quickly using AI. It might be worth exploring to see if it can generate a layout similar to what you’re envisioning.
Figma or Adobe XD with Plugins:

While not AI-based, design tools like Figma or Adobe XD, when combined with specific plugins or extensions, might assist in creating responsive grid layouts and customizable menus. They might not generate code but can help in the visual design process.
Tailwind CSS and AI Tools:

Using Tailwind CSS, a utility-first CSS framework, in combination with AI tools like GPT-3 for code generation might be an unconventional but potentially fruitful approach. GPT-3 can assist in generating code snippets based on descriptions or prompts.
Remember, AI tools might provide a starting point, but they might not cover all the specifics or complexities of a giant museum-like website. Customization and fine-tuning might still require manual intervention and coding expertise.

It’s important to keep in mind that while these tools can aid in the design process, they might not fully automate the creation of a complex website like the one you’ve described. You may need to adapt and modify the generated code according to your specific requirements and functionalities.

Always review the generated code, understand its structure, and ensure it aligns with your project’s goals and scalability. Additionally, be prepared to invest time in learning and tweaking the generated templates to match your exact needs.

4

Thank you all. I’ve been exploring my options. I am old school designer that used to do my websites on Photoshop, and then move my elements to HTML. Of course, designing as opposed to coding I had many limitations with what I can achieve. Today, I am very disappointed in the “modern” looking templates that all look alike… as if they were built by the same uncreative coders… They are coders, what would I expect? It’s like expecting a building engineer to create the design of the architecture as opposed to the creative architect to do it.

5

If the building engineer designed the building, it probably wouldn’t have half the problems today’s modern architecture has. Same goes for website coding.

From what it sounds like you want, it’s more of along the lines of a stock photo website that is more self-contained than Google or Bing Images. Does a software like Adobe Bridge suite your purpose? Or is this a public facing website?

6

You mean exporting my Adobe Bridge gallery to HTML – to a complete web page? I haven’t tried that option, but I am moving away from Adobe… and as a result, in the conversion of my files I’m running into issues… but that’s for another thread.

8

This topic was automatically closed after 365 days. New replies are no longer allowed.