Category: Engineering

We recently launched our new webpage only consisting of plain HTML, CSS and images. The creation was mainly done by Grok and Copilot.

Plain HTML & CSS

We decided to create the page with plain HTML and CSS and waived the usage of a Content Management System (CMS).

While a CMS still has many advantages for dynamic content like a blog (this one uses WordPress) a static company web page is much simpler and an ideal candidate to test the capabilities of Conversational AIs.

Step #1: Corporate Identity (CI)

CI is a must have to be perceived as a professional company. The main CI topics to get started are corporate colors.

We asked Grok to provide a color schema for an automotive, mobility and tech related consulting company with a black background, a blueish main color and signaling traffic light 🚦 colors.

The proposals needed some adjustments regarding the contrast ratio, but finally we got a result.

To simplify our design work, we also used the color schema for the logo. But unfortunately, Grok did not perform in the logo generation no matter what we prompted. So we finally decided to craft it manually.

Step #2: HTML structure and CSS

Creating basic structures that are fully operational is the parade discipline of Grok. Asking him to provide a basic HTML and CSS structure for a one page company web presence, he provided the structure that you can see in the final page consisting of the following elements:

• The basic HTML page structure
• The linked CSS file considering the CI including
• A JavaScript for the animation site navigation with a mouse over drop down

Using the created structure, we created the first version of the page content on our own.

Step #3: Images

We asked Grok to provide images that underline the key areas of competence. Grok also prepared some placeholder links to add the images. Here’s the requesting prompt:

Can you create the icons for me you proposed to insert. Here's the color schema of the company:
Dark: #333333
Grey: #CCCCCC
Lila: #6600CC
Red: #FF0033
Green: #00CC33
Yellow: #FFCC00

The result was really disappointing. Grok said that he’s not capable of creating images (that’s not true) and provided SVG source code instead that we could potentially embed. Here’s one example:

<!-- Save as automated_driving_icon.svg -->
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
    <!-- Car body -->
    <rect x="10" y="20" width="30" height="15" rx="3" fill="#CCCCCC" stroke="#333333" stroke-width="2"/>
    <!-- Wheels -->
    <circle cx="15" cy="35" r="3" fill="#333333"/>
    <circle cx="35" cy="35" r="3" fill="#333333"/>
    <!-- Radar arc -->
    <path d="M40 15 C45 15 45 10 40 10" stroke="#6600CC" stroke-width="3" stroke-linecap="round"/>
    <path d="M40 18 C48 18 48 10 40 10" stroke="#6600CC" stroke-width="3" stroke-linecap="round" opacity="0.5"/>
</svg>

The picture shows a car body as a simple rectangle and wheels with only one circle without any decorations.

We stopped using Grok at this point for image generation and switched to CoPilot.

Here’s the first prompt:

Can you create an icon for me that represents automated driving.

Here's the color Schema to be used:
Dark: #333333
Grey: #CCCCCC
Lila: #6600CC
Red: #FF0033
Green: #00CC33
Yellow: #FFCC00

The background color shall be black.

After a few seconds of waiting, we got this result:

This result was overwhelming for us. It worked the same way for all other images. The only requests we could not tech CoPilot:

• To use the right colors. The shown colors are close but do not fit to the provided CI
• To change the form factor of image. He acknowledges to change it but finally does not.

Step #4: Search Engine Optimization (SEO)

Especially for small companies, more than 99% of all potential customers get lost at the search engine because they don’t even reach the website. SEO tries to get the best fit for the search engines to get found .

We switched to Grok again, because Grok performs much better with code than CoPilot does. Here’s the final SEO prompt:

Please have a look at the latest version of my html page.
Please do the following enhancements:

Check the whole text for typographic errors and fix them

Check all texts, if the wording is appropriate and attractive. Fix all major issues.

Check the complete metadata and make it consistent with the page.

Additionally, we provided the updated webpage, so that the finish could be directly done in this version.

The following updates were done by Grok:

• Fixing of typos and grammar mistakes
• Wording appropriateness and attractiveness
• Metadata Consistency

The metadata consistency is the most impressive topic because it saves a lot of time: The keyword list was automatically updated, the page title was adjusted and social media enhancements were done.

Also some JSON scripts were added to list the company and the services directly in the search engine.

The following image shows some details.

Step #5: GDPR

Every webpage must be compliant to GDPR. If the page uses cookies (what we do with Google GA4), it must ask the reader to consent and otherwise don’t store cookies. Additionally a privacy page is needed.

We asked Grok to create the JavaScript for the customer question and the privacy HTML file

After a few seconds, we got both. The script was successfully tested and worked well after only one shot.

Conclusion

The capabilities of Conversational AIs for webpage generation work with high quality and reliably support content creators with formal work.

The results are amazing and saved a lot of time and money for the creation.

Of course, the picture will look different for bigger projects and a webpage design house is still needed.

But these design houses must disrupt themselves and go for massive usage of Conversational AIs, even if the revenues per project will massively drop down with this approach.