As an experienced developer, I have been using GitHub Copilot, an AI-powered coding assistant that autocompletes code snippets based on the context provided. However, I wanted to explore the potential of GPT-4 (which we wrote about here), a more advanced AI language model developed by OpenAI, to build complete websites. GPT-4 differs from GitHub Copilot in that it is a more general AI model, designed to understand and generate human-like text across a wider range of topics and tasks, rather than focusing solely on code completion.

The result of this exploration is a Harry Potter-themed legal firm site called Alohomora & Associates: Wizarding Legal Services, which can be found here: https://alohomora-seven.vercel.app/

For this project, I selected a diverse tech stack that included NextJS, SCSS modules, Prismic, TypeScript, GPT-4, and DALL-E 2. Drawing inspiration from my work in the legal sector and the game Hogwarts Legacy, my goal was to create a unique and engaging website experience.

Tech Stack Breakdown:

NextJS
A popular React framework that enables server-rendering and static site generation, NextJS is the foundation of the website.

SCSS Modules
These enable modular and maintainable styling for components, making it easier to manage the site's look and feel.

Prismic
A headless CMS, Prismic allows for easy management of the site's content, such as services and text blocks, without needing to touch the code.

TypeScript
A typed superset of JavaScript, TypeScript adds static typing to the codebase, enhancing readability and maintainability.

GPT-4
A powerful AI language model, GPT-4 was employed to assist with various aspects of site development, including content generation, component creation, and error resolution.

DALL-E 2
An AI image generator, DALL-E 2 was utilised to create images for the website based on GPT-4's suggestions, adding a visual touch to the content.

Laying the Foundation: GPT-4 and Project Setup Instructions

GPT-4 played a crucial role in providing setup instructions for the project, helping to establish the necessary foundation for integrating Next.js, TypeScript, SCSS modules, and Prismic with Slice Machine. By offering step-by-step guidance, GPT-4 ensured that the project was set up correctly and efficiently from the start.

Key aspects of GPT-4's instructions included:

Creating a new Next.js project with TypeScript support: GPT-4 provided the commands to create a new Next.js project using the TypeScript template, streamlining the initial setup process and ensuring TypeScript integration from the beginning.

Installing SCSS support: GPT-4 guided the installation of SCSS support and its types, along with instructions on renaming .css files to .scss and updating their respective imports in the components.

Setting up Prismic and Slice Machine: GPT-4 offered detailed instructions for installing the necessary Prismic CLI and setting up Slice Machine, ensuring seamless integration with the project's content management system.

Installing Prismic packages: GPT-4 provided the commands to install essential packages for Prismic, laying the groundwork for fetching and displaying content from the Prismic platform.

Configuring environment variables: GPT-4 instructed the creation of a .env.local file to store the Prismic API endpoint and guided the configuration of the next.config.js file to load environment variables.

By following GPT-4's clear and concise setup instructions, the foundation was laid for a robust Next.js project that incorporated TypeScript, SCSS modules, and Prismic with Slice Machine. GPT-4's guidance facilitated a smooth setup process, allowing for a seamless transition to the development phase.

Collaborating with GPT-4 and DALL-E 2: A Journey of Guidance and Persistence

While GPT-4 was responsible for generating the service page content and DALL-E 2 created the images, the process was far from seamless. GPT-4 faced challenges with various technical aspects, necessitating my intervention or continuous prompting to improve the outcome. The AI's lack of initiative meant I had to provide constant direction throughout the entire development process.

Navigating Technical Hurdles
GPT-4 often stumbled when dealing with more advanced technical tasks, such as implementing NextJS 13's experimental app directory or correctly handling module imports. These difficulties required either my input to fix the issue or multiple attempts by GPT-4 to get it right. I eventually gave up on the app directory because GPT continuously failed.

Encountering Styling Obstacles
The AI's initial styling attempts were often generic and unimpressive. It took multiple iterations and guidance to achieve better styling, both for individual components and the overall site design.

GPT-4's Reluctance to Take the Initiative
A recurring theme during development was GPT-4's hesitance to take initiative or make decisions without explicit instructions. This required me to be hands-on and consistently provide direction for each step of the development process.

Striving for Continuous Improvement
While GPT-4 struggled with certain tasks, it did show a capacity for learning and adapting when given constructive feedback. By iterating and refining its work, GPT-4 was able to improve the site's design and functionality over time.

GPT-4's Inconsistency with Coding Standards
Another challenge encountered during the development process was GPT-4's occasional disregard for good coding practices. For example, it sometimes used the standard HTML anchor tag instead of Next.js's optimised Link component or opted for the traditional img tag instead of Next.js's performance-focused Image component. This lack of adherence to best practices necessitated further guidance and correction to ensure the website was built using modern, optimised techniques.

Creating Styles and Components: The Ups and Downs with GPT-4

Generic Styles and Lacklustre Components
GPT-4's initial approach to styling and component creation resulted in generic styles and unremarkable components that required substantial improvements. This called for further guidance to refine the design and achieve a visually appealing outcome.

A Colourful Success: Hogwarts-Inspired Palette
Despite the challenges, GPT-4 excelled in generating a creative colour palette based on the Hogwarts houses. The AI provided a well-reasoned explanation for its choices, showcasing its ability to understand the project's theme and adapt accordingly.

GPT-4's Hogwarts-inspired colour palette embraced the essence of the Harry Potter universe by incorporating the vibrant colours associated with each of the four houses: Gryffindor, Slytherin, Ravenclaw, and Hufflepuff. The AI-generated two colours per house, creating a diverse and cohesive palette for the website.

Gryffindor

• $gryffindor-red: A bold and warm red representing the courage and bravery of Gryffindor house.
• $gryffindor-gold: A rich and bright gold symbolising the chivalry and determination of the house members.

Slytherin

• $slytherin-green: A deep and mysterious green embodying the cunning and resourcefulness of Slytherin house.
• $slytherin-silver: A sleek and elegant silver, reflecting the ambition and pride of the house members.

Ravenclaw

• $ravenclaw-blue: A sophisticated and intellectual blue, capturing the wisdom and creativity of Ravenclaw house.
• $ravenclaw-bronze: A refined and timeless bronze, denoting the intelligence and wit of the house members.

Hufflepuff

• $hufflepuff-yellow A bright and cheerful yellow, representing the loyalty and friendliness of Hufflepuff house.
• $hufflepuff-black: A strong and grounding black, symbolising the dedication and hard work of the house members.

This Hogwarts-inspired colour palette not only showcases GPT-4's ability to generate creative and contextually relevant choices but also demonstrates the potential for AI to infuse projects with unique and engaging design elements.

Logo Design Collaboration with DALL-E 2

GPT-4 also demonstrated its capability to collaborate with other AI models, such as DALL-E 2. By providing a logo design suggestion incorporating wizardly elements, GPT-4 set the stage for DALL-E 2 to create an impressive logo for the website.

Implementing Services and Prismic Integration

Encountering Initiative Roadblocks
While adding services and implementing a Prismic collection, I faced issues due to GPT-4's lack of initiative and improper handling of service pages, which required course correction to ensure proper integration of content from Prismic.

Example: GPT-4 initially suggested creating individual files for each service page, but I had to steer it towards using dynamic routes

Advanced Components: GPT-4's Performance in Complex Tasks
Drink Driving Calculator
(https://alohomora-seven.vercel.app/services/butterbeer-related-offences)

GPT-4 showcased its ability to handle more advanced components, such as the Drink Driving Calculator. It successfully generated code for different drink types, including Butter Beer, Firewhiskey, Gillywater, Pumpkin Juice, Red Currant Rum, and Tongue-Tying Tea. The calculator determined blood alcohol percentage and potential prosecutions based on the user's input, highlighting GPT-4's capability to work with complex logic and data manipulation.

However, I learnt through the process I had to be more specific with my commands.

Conveyancing Calculator
(https://alohomora-seven.vercel.app/services/conveyancing-charms)

Another example of GPT-4's proficiency in advanced components was the creation of a Conveyancing Calculator. The calculator allowed users to input a property price and receive a breakdown of stamp duty and fees associated with the transaction. GPT-4 generated a detailed fee breakdown, which included:

Stamp Duty: 

• Appraisal Charm: (Estimating the value of the property)
• Transfiguration Fee: (Changing the legal ownership of the property)
• Ward Enchantment: (Protecting the property from magical intrusions)
• Lumos Spell: (Lighting up the property during night visits)
• Protego Charm: (Protecting the property from unforeseen dangers)

GPT-4's success in creating these advanced components demonstrates its potential to assist in developing complex features when given clear instructions and context.

Working with DALL-E 2: A Mixed Experience in Image Generation

Utilising GPT-4's Suggestions for DALL-E 2

Throughout the development process, I relied on GPT-4's recommendations to request images from DALL-E 2. Generally, the AI-generated images were satisfactory and aligned with the project's theme. GPT-4's ability to collaborate with DALL-E 2 demonstrates the potential of combining multiple AI models for various aspects of website development.

Example: GPT-4 provided a text prompt for DALL-E 2 to generate an image of a wizardly scale logo, resulting in a visually appealing and contextually relevant graphic.

Struggles with Realistic Human Faces

However, GPT-4 and DALL-E 2 encountered challenges when tasked with generating images of realistic human faces. The resulting images were often distorted or lacked the desired level of detail, making them unsuitable for use on the website.

Example: When asked to create images of wizardly lawyers or staff members, DALL-E 2's outputs appeared as if the subjects had been in a boxing ring, with facial features appearing distorted.

This mixed experience with DALL-E 2 highlights the need for further improvements in AI-generated images, especially when dealing with complex or highly detailed subjects like human faces. Nonetheless, the collaboration between GPT-4 and DALL-E 2 showcases the potential for AI-powered web development, even if some areas require further refinement.

Conclusion: Harnessing GPT-4's Potential in Web Development

In summary, collaborating with GPT-4 in web development projects can be compared to pair programming with a partner who requires continuous guidance and direction. GPT-4 has the potential to offer valuable insights, suggestions, and assistance, but it is crucial to recognize its limitations and be prepared to provide clear instructions and context.

By understanding GPT-4's strengths and weaknesses, developers can effectively incorporate it into their workflow, leveraging the AI's capabilities to enhance the creative process and optimise development efficiency. As AI technology continues to advance, GPT-4 and other AI models have the potential to become increasingly valuable tools in web development and other digital domains.