Purpose

I wanted to create a quick landingpage for my company “Grå” that delivers product service system modular grey water management to homes. The landingpage is meant to create some interest in the product and allow potential customers to sign up for a newsletter.

I don’t have too much experience with front end development of websites and thus i decided to try using Framer AI for some quick prototypes, which potentially could be used until more interest was generated.

I hope for the AI to generate a nice generic landing page that looks professional.

Result

The AI generated landing page is pretty impressive. Although it doesn’t have everything it is a great starting point with a lot of potential. Automatically getting the program to generate semi-usable copy is a real game changer since it is often a time consuming part of front end prototyping. Having it incorporated in the program also saves time since you don’t have to jump around anymore, also since it is generating new copy based on what is already there it is a lot quicker to test out different copy.

In general the AI shuffle button that is beside every component is great to allow the designer to vary whichever section they’d like without having to regenerate the entire site.

The hosting is also nice and allows for this whole process to also function as a WYSIWYG type website creator. Although for manual stuff you have to learn how to structure components properly so they still look nice.

For basic landing pages for student projects or early startups this is great! For more experienced front end designers this is good for inspiration and can create a good starting point if you learn the tools.

Process

First thing i did was make my initial prompt to the Ai:

Input

A launch page for my startup "Grå" that delivers product service system modular grey water management to your home. We are a Danish startup that makes greywater systems easy and effective.

Output

There is no way of exporting pages as graphics in the free version. But it can host the website for you.

Reengineered the prompt and regenerated the pages. The prompt is now based on our skylab application:

Input

A launch page for my startup "Grå" that delivers product service system modular grey water management to your home. Grå is a smart greywater management system that reuses greywater for outdoor irrigation and gardening, saving customers water and money. The product includes a filtering system and tank, and can be connected to other Grå certified gardening or irrigation modules. An app allows for automation and monitoring, with installation and maintenance handled by Grå. The product line is constantly updated with new ways to utilize greywater. Grå is a Danish startup.

The prompt was longer than allowed but it still made the website.

Output

Completely new look and copy. The text copy is interesting:

It focused on the important aspects however in a very hypey way. This page is looking more like a page for a company that is already up and running. We are looking for a website that teases the product and gets people to sign up for our newsletter or follow us on LinkedIn. Lets see if it can generate that.

Input

To make this change the following input was added to the bottom og the prompt:

Grå does not have a product out yet and is looking for a landing page that can get people excited about the product and sign up for our newsletter. We want to test if people are willing to buy the product.

Output

The copy is a lot more relevant now and the addition of an FAQ is really helpful for getting new customers I think. However there is no clear call to action. Adding one from their basic sections doesn’t fit the theme and requires manual edits to work:

Manual editing

A quick manual edit later and we have this:

The text can automatically be updated based on whatever is in the field. However if pressed too many times it goes from trying out Grå to tasting grå:

Now lets try to rebrand it so it fits with our idea of the brand:

The manually added stuff doesnt update when regenerating theme colors or fonts:

Colors cannot be manually overwritten.

Added an about page with info from our skylab application copied directly from it:

Input

A simple about page describing the four co-founders and about the company:
Kristian Balsby - CEO
Kristian will ensure the project management and day-to-day activities of the project, as well as keeping the vision of the project on track.

Sam Rahbar - CTO
Sam will ensure the technical functionality and robustness of our products, especially during the development of our prototyping phase.

Lukas Andreasen - COO
Lukas will oversee the business operations of the project, ensuring the right development partnerships and business analysis.		

Emil Aarestrup - CDO
Emil will be responsible for creating a user-oriented design experience that is rooted in market analysis and user needs research.

As four strong Design and Innovation Master students, we have the ability to make lasting change. Our teamwork is efficient, and we have experience working together. We bring a unique perspective, product design and manufacturing skills, knowledge of environmental impact, and strong people skills to the table. With the help of our advisor Jason Li-Ying and professors from DTU Aqua, we aim to ensure the release of clean water and seek the addition of a marketing expert to build a strong brand identity for Grå, increasing our mission to reduce freshwater usage.

Output

The new page does not uphold the themes of the previous page:

I manually created a link from the about text in the footer to the about page and it is working in the hosted website.