The project is to build an AI website builder that helps designers quickly translate client's ideas and project description into a complete website wireframe with copywriting.
MVP: 1-line prompt into website wireframe
Initially, I went with the most basic implementation, which is a 1 line prompt into a fully made website wireframe with copywriting. It works, but the result is far from ideal.
Problem #1: The copywriting & layout isn't great
-
The LLM doesn't have enough context to select a comprehensive list of sections
-
Since every section's copywriting is run individually, they're are not cohesive and information gets repeated
Problem #2: Users have no control on what they're building
-
When dumped into a fully built wireframe, it's hard to modify and users would have to start over
-
Users need to review the draft first and make changes before getting a full website
In this case, both human and AI need steps in-between to create a better result.
Final Version: Step-by-step approach
Step 1: Allow users to paste call notes / product description
This allows users to enter more information about the product or service and helps the LLM have a more comprehensive understanding of the website it's building.
Step 2: AI confirms if they understand the business well
This allows users to review and make changes as necessary before moving on to the next step.
Step 3: AI generates a website outline with copywriting & keywords
The AI would draft out the website outline in writing first, allowing users to easily check if the list of sections, the flow of information, and the copywriting is to their liking.
-
This allows the AI to generate a comprehensive copywriting and flow of information because it generates the whole thing with 1 call.
-
This allows users to review and ask for changes before getting a complete website
Step 4: AI generates website wireframe according to the outline
Once the draft website outline looks great, the AI would use that to define what sections need to be generated and fill out the copywriting for each section in the wireframe.
Giving choices vs. generating the best website
After talking to designers, I realized that Design is subjective, there isn't a one-truth objectively good design. Designers often try out different looks to see what fits best. We want to empower them with their workflow.
So instead of focusing on training the AI to give the most perfect outcome, we focused on allowing designers to try out different layout quickly so they can iterate fast.
