Hibakes is a fully online bakery that delivers on demand and caters events in Quebec. The bakery was run entirely from its Instagram account. The business had been running for a few years without a website, but requests were starting to grow, hence the need for a more upscale way to promote it.
Brief and goal
Give the bakery, run until then from its Instagram account, a more upscale way to promote itself: a website that carries over its existing visual identity.
Role and responsibilities
Refining the visual identity for the web, design and building the site, gathering images and information with the owner, programming with AI agents and deployment on Firebase.
Credits
Client contract. The visual identity already existed as inspiration to follow, but I refined it to make it better suited to a website. The images and the logo were all supplied by Hibakes. The design and the building of the site are my work.
Use of AI
I used Claude Code to program and debug the site and automate its deployment, and an AI for the ideation and the mood board of the design system; I also used Claude Code to add this sheet, written in my Figma mock-up, to the portfolio. My personal contribution includes refining the visual identity, the visual direction, gathering content with the owner, my prompt and AI project folder templates, validation and deployment.
Production steps
-
Step 1: Getting to know the brand
I first explored the bakery’s existing visual identity to make sure the site matches what already exists. The goal was for the client to keep a consistent visual style.
-
Step 2: Creating a design system for the website
I gave an artificial intelligence her images and logo, along with Pinterest images in the style I wanted, explaining the look I wanted in detail until I got the desired style. This step gives me a very high level of control over the visual style, since the programming is done with AI. It is worth redoing several times if needed, because it affects the whole structure of the site.
-
Step 3: Gathering relevant images and information
I worked closely with the owner to make sure the visuals and information matched her needs. The images guided me in designing the different sections and pages.
-
Step 4: Engineering the right prompts
Using a prompt template I made for creating new websites, an AI project folder template that holds all the skills and instructions needed for the project to meet industry standards, and all the information and visuals gathered in the previous steps, I built the entire site with AI agents, debugging included. These templates keep a mistake from happening twice, because I fix it in my system.
-
Step 5: Deployment
Once it was complete, I put the site online with Firebase using an automated process, so no step has to be redone by hand. I choose Firebase because it makes adding future back-end tools much simpler, since everything is in the same system.
Technologies
-
The site is entirely static and built entirely in code, without a CMS.
-
A single JavaScript file, without a framework, handles the page’s interactions.
-
The site is hosted on Firebase Hosting and deployed with an automated process, which makes adding back-end tools simpler later on.
-
Programming and debugging were done with the Claude Code agent, from my prompt and instruction templates.
-
All orders go through a direct message on the bakery’s Instagram account, @hibakes.co.
Challenges
One of the challenges of this project was creating something close enough to a style that already existed, while adapting it into a website. I also wanted to put a lot of emphasis on animations and make the site very dynamic and interactive, to keep the brand’s « Fun » image. I had a very specific idea of how I wanted to do it, and it was a challenge to find the right technologies and describe it clearly to the AI.
Solutions
I gave the AI the images, the logo and visual references, describing the look I wanted in detail, and reworked the design system until I got the desired style. I then built the site with AI agents from my prompt template and my AI project folder, which hold the instructions for meeting industry standards.
Final result
A static website online, hibakes.web.app, deployed with an automated process; orders go through a direct message on the bakery’s Instagram account.