AI Website Builder

thoughts

TikTok

Twitter ->

Hi, I'm Putri

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

Problem #2: Users have no control on what they're building

both human and AI need steps in-between to create a better result

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. 

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.

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script src="//embed.typeform.com/next/embed.js"></script>

<script>
  let links = document.querySelectorAll("a[data-analytics]");
  for (var i = 0; i < links.length; i++) {
      links[i].addEventListener('click', handleLinkEvent);
      links[i].addEventListener('auxclick', handleLinkEvent);
  }

  function handleLinkEvent(event) {
      var link = event.target;
      var middle = event.type == "auxclick" && event.which == 2;
      var click = event.type == "click";
      while (link && (typeof link.tagName == 'undefined' || link.tagName.toLowerCase() != 'a' || !link.href)) {
          link = link.parentNode;
      }
      if (middle || click) {
          let attributes = link.getAttribute('data-analytics').split(/,(.+)/);
          let events = [JSON.parse(attributes[0]), JSON.parse(attributes[1] || '{}')];
          plausible(...events);
      }
      if (!link.target) {
          if (!(event.ctrlKey || event.metaKey || event.shiftKey) && click) {
              setTimeout(function () {
                  location.href = link.href;
              }, 150);
              event.preventDefault();
          }
      }
  }
</script>

<script>

  window.onload = () => {
    const collections = document.querySelectorAll("div.slate-collection");
    console.log("Col", collections)
    setTimeout(() => {
     collections.forEach((col) => {
        const divs = col.querySelectorAll('div')
        divs?.forEach((div) => {
            if (div.textContent == "Show more") {
                div.innerHTML = "Load more" + `<svg viewBox="0 0 16 16" height="18" width="18" aria-hidden="true" focusable="false" fill="currentColor" xmlns="http://www.w3.org/2000/svg" class="_1wmk2022"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"></path></svg>`
            }
        })
    })
    }, 100)
   
  }
</script>

AI Website Builder

MVP: 1-line prompt into website wireframe

Final Version: Step-by-step approach

Giving choices vs. generating the best website

Shots

Work together?

Let’s chat – [email protected]