PUBLISHED ON 04.09.2024
BY Mansoor Ahmad

AI, Destinations

Whitepaper: Creating a website with AI – From web design to a functioning WordPress theme

“The integration of artificial intelligence into the web development process is revolutionizing the way websites are created. While manual intermediate steps are currently still necessary, the upcoming automation through PromptFlow in Azure opens up completely new possibilities for efficiency and personalization.”

This white paper describes a workflow for creating a website using artificial intelligence (AI), which currently involves manual intermediate steps for data transfer between different tools. The process involves using AI models to create designs and generate code, and implementing the design into a WordPress theme. In the long term, these manual steps are to be replaced by full automation using PromptFlow in Azure. Website development is made much easier by AI-powered tools. This workflow shows how AI models can be used to create web designs and generate code. Manual intermediate steps provide flexibility and control and are temporary until full automation using PromptFlow in Azure is possible.

Why this workflow?

The introduction of AI fundamentally changes the way companies work by having to rethink traditional processes. Graphic designers and developers often find it difficult to switch from familiar tools to AI models, as the idea of using and sharing AI-generated designs and codes is a major change. A key reason for this change is to protect their own know-how and competitive advantage. To ensure that valuable knowledge is not passed on to external tools or AI providers, agencies must train their AI models locally with their own data. External AI services carry the risk of sharing valuable knowledge and making the agency interchangeable. To minimize this risk, solutions should be operated directly in the corporate environment. Specialized providers such as Gosign support IT teams in setting up and operating an Artificial Intelligence Compliance Infrastructure (AICI) that builds on the existing corporate infrastructure. This allows the IT department to work in a familiar environment without having to learn new systems and protects the know-how within the agency. An example of such support is provided by Gosign, which helps IT teams to run their AI models safely and efficiently in-house, thereby maintaining control over valuable knowledge and data.

For example, many developers and freelancers work with the AI Code Editor Cursor.

Here it is clearly stated that the data will be used to train the AI models if the “Private Mode” is not activated – and this is only available in the expensive license version. It is not possible to control whether the developers’ prompts are actually not saved and used for training. The same principle applies to other SaaS tools that advertise AI promises. With their own AI infrastructure (AICI), which is much cheaper to operate (see cost comparison table), companies have full control over their prompts and data in a familiar environment.

Phases of the process

1. Web design with AI generation

The design is created by using AI models such as Midjourney, Flux1 or DALL-E, which generate visually appealing designs based on text descriptions (prompts). An example prompt could be: “Create a modern web design for the homepage and a subpage of a cafe in the Alps with warm colors and images of mountains.” After creation, the best design suggestions are selected and adjusted as needed. The designs are saved as screenshots.

Example output of the prompt

/imagine prompt: A corporate website for a law firm with a professional and traditional design. The layout is simple and straightforward, with ample white space and clear headings to facilitate easy navigation. ::4.5 natural lighting::1.5 ultra wide angle lens::1.5 Leonardo Da Vinci::1.3 professional::1.9 navy blue::1.3 –ar 4:3 –v 5

To support this step, specialized AI models from catalogs such as huggingface.co or the Azure AI catalog can be used to meet specific design requirements and generate customized visual elements. These models can be trained locally and integrated into your own AICI-compliant AI infrastructure.

2. Design-to-code transformation

The saved screenshots are uploaded to your own chat interface, which is part of your own AICI-compliant AI infrastructure. An AI model is then selected that analyzes the visual content and converts it into structured code (HTML, CSS, JavaScript). An example of this is the use of models from the Hugging Face catalog, which specialize in analyzing and converting image content. Or by training your own AI models with the data from the last WordPress projects, the design workflow can be significantly improved. These own models can be combined with other AI models to achieve even better results. The Gosign team helps to build, install and operate the AICI-compliant AI infrastructure, thereby maintaining control over valuable knowledge and data. The generated code is then manually copied from the chat interface (e.g. chatbot.companydomain.com) and pasted into a development environment or text editor.

It is important to note that using SaaS services such as teleportHQ, Webflow, Wix, Jimdo, Uizard, Figma etc. can pose a danger, as these platforms could potentially adopt important corporate design concepts and strategic data in designs from your clients. This creates the risk of the agency becoming interchangeable and valuable knowledge being lost. Here, too, your own AICI-compliant AI infrastructure can be set up and used with the help of Gosign to ensure that the entire process remains internal.

3. Implementation in WordPress

AI models are used to generate code, which convert the HTML/CSS/JavaScript code into WordPress theme files. Specialized models from the Azure AI catalog can also be used here to optimize the conversion and meet specific requirements of the WordPress ecosystem. The generated theme files are manually uploaded to the WordPress directory and activated in the WordPress dashboard. This is followed by content management, in which content is added and structured and AI models are used to generate and optimize content. These steps can also be carried out within your own AICI-compliant AI infrastructure to ensure the security and integrity of the data.

Example-Workflow

The workflow starts with web design creation, using a prompt such as “Create a modern web design for the homepage and a subpage of a café in the Alps”. The generated designs are saved as screenshots. These screenshots are uploaded to a chat interface and passed on to the AI model for processing, which generates the code. The code is manually copied and pasted into a development environment. Then another AI model is used to convert the code into WordPress theme files. The theme files are manually uploaded to the WordPress directory and activated in the dashboard. Finally, content is added and further AI models are used for optimization. In the company’s own AICI-compliant AI infrastructure, employees can switch between the different AI models and AI assistants depending on the task. Some manual steps are temporary in nature and can be replaced by full automation with PromptFlow in Azure.

The 4xTeasers can be seen, which have a zoomin effect via mouse over.

If I scroll further down, you can still see the parallax effect

Conclusion

Using AI to create websites offers numerous advantages, even with manual intermediate steps. This workflow enables flexible and controlled web development that ensures both speed and personalization. In the long term, the entire process will be automated by PromptFlow in Azure to further increase efficiency. By using the AICI-compliant AI infrastructure supported by Gosign, Agencies can ensure that their know-how remains protected and they maintain their competitive advantage. The Gosign team helps to set up, install and to operate.

back to overview

YOUR CONTACT PERSON

Mansoor Ahmad

As one of the first points of contact at Gosign, I am always in a good mood, closely networked with our tech teams and ready to help your company to lead safely and purposefully into the digital transformation and the AI age.

You might also be interested in: