Hibakes is a fully online bakery that delivers on demand and caters events in Quebec, run from its Instagram account. The business had been going for a few years without a website, but requests were starting to grow: it needed a more upscale way to get its name out.
Brief and goal
A website true to the bakery’s look, to promote it in a more upscale way than Instagram alone.
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 images and the logo come from Hibakes, and I refined its visual identity for the web. The design and the building of the site are my work.
Use of AI
I used Claude Code to program, debug and deploy the site, then to add this sheet to the portfolio, and an AI for the ideation and the mood board of the design system. My personal contribution includes the visual identity, the visual direction, gathering content with the owner, my prompt and AI project templates, validation and deployment.
Production steps
-
Step 1: Getting to know the brand
I first explored the bakery’s visual identity so the site would keep the same style as what already exists.
-
Step 2: Creating a design system for the website
I gave an artificial intelligence her images, her logo and Pinterest images, describing the look I wanted in detail until I got the right style. Since AI does the programming, this step gives me a lot of control over the visuals. 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 so the visuals and information met her needs. Her images guided me in building the sections and pages.
-
Step 4: Engineering the right prompts
With my prompt template for new websites, my AI project folder template (the skills and instructions for meeting industry standards) and everything I had gathered, 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
I put the site online with Firebase and an automated process, so nothing has to be redone by hand. I choose Firebase because back-end tools can be added later, 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
I had to make something close enough to a style that already existed, but adapted for the web. I also wanted lots of animations and a very interactive site, to keep the brand’s « Fun » image. I had a very precise idea of the result, and the challenge was finding the right technologies and explaining it clearly to the AI.
Solutions
I reworked the design system with the AI until I got the look I wanted, then built the site with AI agents from my prompt template and my AI project folder.
Final result
A static website online, hibakes.web.app; orders go through a direct message on Instagram.