Check it out: “AI Coded This Website From My Drawing” is a captivating video by Matty McTech that explores the fascinating world of website design using artificial intelligence (AI). In the video, Matty shares his experience of asking Google Bard to create HTML and Javascript code for a website based solely on his hand-drawn mock-up. The idea behind this experiment is to examine whether AI could potentially revolutionize the field of website design and software development, allowing inexperienced programmers to easily generate professional code. If you’re curious about this innovative concept, join Matty on his journey as he walks you through the steps of creating a website using nothing more than a piece of paper.

To begin, you’ll need to draw a mock-up of your desired website on a piece of paper. In the video, Matty opts for a riddle-themed website with two riddles and reveal buttons below each of them. Once your mock-up is complete, take a picture of it and upload it to your computer. From there, you can access a specific website and upload your image to the AI system. By providing a brief description of your intentions, such as wanting HTML and JavaScript code to convert your mock-up into a functional website, the AI generates the necessary code for you. Copy and paste the resulting code into a notepad, save it as a .html file, and voila! Open the file, and you’ll have your very own website, coded by AI. The possibilities and potential applications of this technology are sure to spark your curiosity and inspire you to explore the future of software development.

AI Coded This Website From My Drawing

AI Coded This Website From My Drawing


Technology continues to advance at an unprecedented pace, revolutionizing various industries. One such industry is website design, which has recently seen the emergence of artificial intelligence (AI) as a powerful tool. In this article, we will explore the process of using AI to convert a hand-drawn mock-up of a website into functional HTML code. We will discuss the steps involved, the benefits of AI in website design, and the future implications of this technology.

Creating a Mock-up

Before diving into the world of AI-powered website design, you must first create a mock-up of the website design you have in mind. Grab a piece of paper and start sketching out your desired layout and the elements you want to include. This step allows you to visualize your idea and ensure that the final website aligns with your vision.

Uploading the Mock-up

Once you have created the paper mock-up, it’s time to digitize it by taking a picture of it using a smartphone or a digital camera. After capturing a clear image, transfer it to your computer using a USB cable or any other preferred method. Now that your mock-up is in a digital format, you are ready to proceed to the next step.

Instructing the AI

To convert your mock-up into code, you need the help of an AI-powered website design platform. Access the AI website and navigate to the interface specifically designed for this purpose. Once you are on the interface, locate the ‘Plus’ button and click on it to begin the process. The AI platform will prompt you to select the image file containing your mock-up, so choose the file you uploaded earlier.

AI Coded This Website From My Drawing

Generating HTML Code

With the image of your mock-up uploaded and the instructions provided to the AI platform, it’s time for the AI to work its magic. The platform will process the image and analyze it using computer vision algorithms. Using advanced pattern recognition and understanding of website design principles, the AI will convert your hand-drawn mock-up into HTML and JavaScript code. It will ensure that the layout and elements are accurately translated from the image to the code.

Saving the Code

Once the AI has finished generating the HTML code, it’s time to save it for future use. Copy the code provided by the AI platform and paste it into a text editor, such as Notepad, on your computer. It is crucial to save the file with the appropriate name and extension, typically something like “index.html” or “website.html”. This step ensures that you can easily access and modify the code in the future.

AI Coded This Website From My Drawing


Now that you have saved the HTML code, it’s time to see the fruits of your labor. Open the saved HTML file in a web browser, and you will witness the website that the AI has generated based on your initial hand-drawn mock-up. Evaluate the accuracy of the AI’s interpretation by comparing it to your original vision. In most cases, you will be pleasantly surprised by how closely the AI has translated your design into a functional website.

The Future of Website Design

The use of AI in website design holds immense potential, and its impact on the industry is expected to be significant. One of the key benefits of AI is its ability to empower inexperienced programmers. With AI algorithms doing the heavy lifting in converting mock-ups into code, individuals with limited coding knowledge can easily bring their website ideas to life.

Automation is another advantage that AI brings to website design. By automating the process of coding, AI reduces the time and effort required to create a website from scratch. This opens up new avenues for developers and designers to channel their creativity and focus on more complex aspects of web development.

Furthermore, the optimization of development processes is a notable benefit of AI in website design. By streamlining repetitive tasks, AI frees up developers’ time and allows them to focus on more strategic and creative aspects of their work. This ultimately leads to faster and more efficient development cycles.

AI Coded This Website From My Drawing

Benefits of AI in Website Design

The utilization of AI in website design brings a multitude of benefits. Firstly, it significantly reduces the barriers to entry for individuals wanting to create their own websites. With AI, no longer do they have to learn complex coding languages or spend months mastering web development techniques. The ease of use and accessibility of AI tools democratize the process and make it inclusive for everyone.

Secondly, AI streamlines the website design process by automating repetitive tasks. This results in increased efficiency and productivity, allowing designers and developers to focus on the more creative and strategic aspects of their work. With AI taking care of mundane coding tasks, professionals can allocate their time and resources more effectively.

Furthermore, AI-powered website design platforms enhance collaboration and communication among teams. By providing a visual representation of designs, AI tools facilitate clearer communication and ensure that everyone involved in the process is on the same page. This leads to better teamwork, improved efficiency, and ultimately, higher-quality end products.


In conclusion, AI has revolutionized website design by offering a powerful and efficient solution to convert hand-drawn mock-ups into functional code. With the help of AI-powered platforms, individuals can bring their website ideas to life without the need for extensive coding knowledge. The use of AI also brings numerous benefits, such as automation of coding tasks, optimization of development processes, and increased accessibility for beginners.

As the technology continues to evolve, we can expect AI to play an even more prominent role in the future of website design. Its potential impact is not limited to the creation of websites but extends to various other aspects of the industry. The combination of human creativity and AI-powered automation promises a bright future where website design becomes more accessible, efficient, and innovative. So, whether you’re an aspiring web designer or an experienced professional, embrace the power of AI and discover the endless possibilities it presents.

AI Coded This Website From My Drawing


Hi there! I'm, the author behind Chip Chick Tech. Welcome to your tech playground, elevated. Here, I provide comprehensive coverage on all things tech and gadgets, from insightful reviews to thought-provoking articles. Whether you're a seasoned tech enthusiast or just starting your quirky journey, my mission is to empower you with knowledge and a passion for innovation. With a diverse team by my side, we offer unbiased coverage on electronics, software, and more. Let's embrace the geek in us and dive into the boundless world of technology together. Join me at Chip Chick Tech, where technology is for everyone!