How This Website Was Built With a Generative AI Assistant

🎯 The Problem

We needed to create a new website for Dangentic.ai from scratch. The goal was to build a functional, visually appealing, and maintainable site to showcase our AI guides as quickly as possible, without a dedicated front-end development team.

"We have a great idea for a website and a lot of content to share, but we need to go from zero to a live site in record time. How can we leverage AI to act as our development partner?"

💡 The Solution

We used a generative AI coding assistant (Gemini Code Assist) as a pair programmer. The entire process was a conversation, where we provided instructions and the AI generated the code, which we then refined together. Here's how it went:

Step 1: Create the dangentic.ai home page

• Tool: Gemini
• Prompt:

  You are a web developer for a startup called Dangentic. Dangentic.ai is a site that showcases uses of AI. Areas include LLMs for generating text, video, sound, Agents, integration between agents, ADK, MCP and similar things. The website will have a collection of howtos on these topics. Please create a simple website for dangentic.ai.

Step 2: Create a template for guides

• Tool: Gemini
• Prompt:

  I'll be placing guides in a folder called guides. Please prepare a template html file for a guide. A guide would have the following sections: the problem the solution and the conclusion. Consistent navigation matching index.html above.

Step 3: Generate the guides.html page

• Tool: Gemini
• Prompt:

  Please draft the basic structure for the How-To Guides index page (guides.html) next, so users can browse and link to these templates.

Step 4: Harmonize the stylesheets

• Tool: VSCode
• Prompts:

  please take the stylesheets out of the individual HTML files and place them in a new file in the root folder called style.css
                  

  thanks, could you please go ahead and update each of the html files to use this new style.css file instead of inline styles
                  

  the navigation bar is not showing because the text is a similar colour to the background, and the text is all squished to the right of the screen. Can you fix that?
                  

  On the guides.html page I'd like a card-based layout, but that's not working right after centralizing the styles. Could you fix that?

Step 5: Theme updates

• Tool: VSCode
• Prompt:

  This colour scheme is really boring. Could you suggest a modern, fun colour scheme for me please? Also, I like the use of emojis in the text, but I'm concerned about interoperability - could you suggest some alternative fonts that match the fun theme, but are safe for emojis.

Step 6: Dark and light theme

• Tool: VSCode
• Prompt:

  that's an awesome theme for a dark mode. please create a version of the theme for light mode, and create a switcher in the html to move between light and dark mode.

Step 7: A bug in the title across pages

• Tool: VSCode
• Prompt:

  The "Dangentic.ai" heading text is smaller in guides.html and guides/template.html than in index.html. Could you fix that please

Step 8: A logo

• Tool: Gemini
• Prompts:

  I need a cool logo for Dangentic.ai. Can you make some suggestions?
                  

  please generate a sample image for each of your suggestions above
                  

  The Interconnected Brainwave is great. Can you create me a couple of versions of that...
                  

  can you make the background transparent please
                  

  My website has a backgroud with rgb code #1a1a2e. Please make the image background as close to that as possible.
                  

  also create one with a background that is #f4f7f9
                  

  in this one, please make the text color rgb(26, 26, 46)
                                  

  oh wait, the text looks odd, please remove the text other than "Dangentic.ai" in that image.

• Notes:This was a fiddly part of the process.
  • Gemini created the images nicely - generating suggestions and letting me choose them
  • It could not create SVG images
  • It could not make the image background transparent - it insisted (even after I challenged it) that a checkered checkered (grey and white squares) is actually transparent. This is interesting because usually transparent backgrounds are depicted as checkered in image tools, but it was in fact convinced that drawing the checkered image was the same as transparent. It wasn't.
  • It couldn't crop the image.
  • It added random text to the image, but could remove it when I asked it to remove the extra text.

Step 9: Add the logo to the theme

• Tool: in VSCode
• Prompts:

  I've added 2 images into the images/ folder. They are to be used as logos instead of the "Dangentic.ai" header text...
                  

  the images are broken on the website - it seems like you didn't use the actual file names, please update with the correct file names as found in the images/ folder
                  

  the logo is quite small right now, could you make it 128px by 128px please

Step 10: Update the image

• Tool: Gemini
• Prompts:

  please make the background #ffffff
                  

  oh wait, the text looks odd, please remove the text other than "Dangentic.ai" in that image

• Notes:Image issues again
  • It added random text to the image again
  • It didn't get to a precisely white background, but it got close

Step 11: Remove some pages

• Tool: VSCode
• Prompt:

  we don't need the "about" page or "contact" page right now, please remove them from the navigation bar across files

Step 12: Filter should be dynamic

• Tool: VSCode
• Prompt:

  please make the category filter list dynamically generated from the content

Step 13: Create a guide using this as content

• Tool: VSCode
• Prompts:

  Using the guides/template.html file as a template, and using prompts.md as the set of instructions, create a new file guides/generating-a-website.html showing how we used generative AI to create this website.
                  

  I've updated prompts.md with exact instructions, please update guides/generating-a-website.html with all of the content, showing all of the steps taken. Each heading in prompts.md is a step, and each item in the list below the heading is a sub-step. Please represent it in the same way in the html file.

• Notes:
  • I needed to be more direct and specific in the prompt to get what I wanted, and the output was pretty close to what you're reading now.
  • I only annotated this file with notes - the meta part of the experience.

Step 14: Link the new guide

• Tool: VSCode
• Prompts:

  in guides.html, remove the other guide cards, and create a new card for this newly generated guide
                  

  change the tag of the card to "AI Web Development"

Step 15: Code snippets as cards

• Tool: VSCode
• Prompt:

  across the html files, when I'm showing code in <pre> tags, I'd like those to appear as cards

• Notes:
  • Code Assist also asked me if I wanted a "Copy" link to copy the code snippers. I said yes. Neat!

✅ Conclusion

By treating the AI as a development partner, we were able to rapidly prototype, refactor, and add features to this website. The key to success was an iterative workflow: start with a broad request, then provide specific feedback and instructions to refine the output.

This conversational approach to coding allowed us to build the entire site you're using now, demonstrating that generative AI is a powerful tool for accelerating software development.

What's Next?

• Explore all our How-To Guides