KHOIJBEP.SE
Exploring a designer-led AI workflow from client brief to live website
Project Overview
KhoijBep.se is a responsive WordPress website created for a Vietnamese restaurant preparing to open. It brings the menu, opening hours, location, and ordering information into one clear customer experience. The project demonstrates how product design judgment and AI-assisted development can turn a loosely defined brief into a live digital product.
My role
I owned the project end to end—from clarifying requirements and structuring the content to designing the responsive experience and making final product decisions. AI supported WordPress theme development and troubleshooting, while I reviewed, tested, refined, and launched the website.
Product Walkthrough
A short process video showing how KhoijBep.se evolved from a client brief and Figma designs into a fully functional WordPress restaurant website.
Starting Point
KhoijBep started with a phone call from the owner of a Vietnamese restaurant preparing to open. Her initial request was straightforward: create a landing page to introduce the restaurant to potential customers. Rather than treating it as a design-only project, I used the opportunity to explore a designer-led AI workflow—from understanding the client’s needs and researching the context to designing in Figma, building with AI assistance, and launching the live website.
I need a landing page to introduce my restaurant, which is opening soon.
The Process
Research & Structure
- Restaurant website research
- Content hierarchy
- Visual direction
Design in Figma
- Responsive UI design
- Client feedback and refinement
Build with AI
- Custom WordPress theme
- AI-assisted coding
- Debugging and refinement
Test & Launch
- Responsive testing
- Content and WordPress setup
- Domain, hosting, and launch
Research & Structure
To understand the landscape of local Vietnamese restaurants, I collected screenshots of several competitors. Instead of manually auditing each one, I used AI to quickly synthesize their content structure, common visual styles, and repeated layouts. This AI-assisted analysis not only provided a baseline for our new landing page but also generated targeted questions to clarify the client's specific needs.
Prompting AI with competitor screenshots
AI-generated synthesized layouts & client questions
Human Judgment over AI Outputs
While AI is great at generating possibilities, it doesn't know the client's business. The core product work happened when I evaluated those AI outputs against the client's actual goals and constraints.
By filtering out generic restaurant conventions and eliminating options that didn't fit the operating model, I was able to translate AI suggestions into confirmed design directions. I made the product decisions; AI just accelerated the execution.
| AI-Observed Pattern | Client Constraints & My Evaluation | My Design Decision |
|---|---|---|
| Food-led first impression Competitors prominently use food or atmosphere in the hero. | The restaurant needed to communicate its food offer and atmosphere immediately. | Use a strong food-led hero with a concise value proposition and direct access to the menu. |
| Prominent menu access Menu content is consistently visible or easy to reach. | Dishes and prices are central to customers deciding whether to visit or order. | Make the menu a primary part of the page hierarchy and organise it into scannable categories. |
| Visible practical information Address, opening hours, contact details and maps appear repeatedly. | As a local physical restaurant, customers need practical information to plan their visit. | Give opening hours, address and directions a prominent position, supported by a dedicated location section. |
| Clear customer actions Competitors highlight reservations, online ordering, calling or directions. | Khoijbep's actual service model determined which actions were relevant. | Prioritise menu viewing, ordering and directions while removing unsupported or unnecessary actions. |
| Restaurant story and authenticity Many competitors use heritage or cuisine stories to establish identity. | The website needed enough context to introduce Khoijbep without distracting from food discovery. | Use a concise restaurant introduction, supported by dish names, descriptions and photography rather than long-form storytelling. |
| Food imagery throughout the page Photography appears across hero, menus and gallery sections. | The available food imagery was more valuable than adding decorative or generic content sections. | Reuse selected food images strategically to support the menu and maintain visual continuity. |
| Bilingual support Many local competitors rely on single-language sites or basic browser translation. | Khoijbep operates in Stockholm with a diverse customer base of locals and expats who need to read the menu clearly. | Implement a native language toggle (Swedish/English) to ensure all customers can comfortably browse the site. |
Defining the Page Structure
Based on the confirmed design directions, I translated the research into a focused content hierarchy for Khoijbep. The structure prioritised food discovery, menu access, practical visit information and actions the restaurant could realistically support.
Navigation
Give quick access to the menu, location and primary action.
Prominent menu access and clear customer actions
Language switcher
Allow users to toggle between languages seamlessly across the site.
Client requirement for a bilingual audience
Hero
Introduce Khoijbep through strong food imagery, a concise message and immediate actions.
Food-led first impression
Restaurant introduction
Provide enough context to communicate the restaurant’s identity without long-form storytelling.
Restaurant story and authenticity
Menu
Help visitors browse dishes, categories, descriptions and prices.
Menu as a primary task
Food highlights
Reinforce appetite and visual continuity through selected dishes.
Food imagery throughout the page
Location & opening hours
Help visitors quickly understand where and when to visit.
Visible practical information
Order / directions CTA
Support the most relevant next actions for customers.
Confirmed service model
Footer
Provide contact details, links and secondary information.
Common restaurant information
Exploring Layout Possibilities with AI
Once the content priorities were confirmed, I used the page architecture as a controlled input for AI-assisted layout exploration. Rather than asking AI to design the website freely, I constrained the exploration around the confirmed sections, content hierarchy and customer actions.
AI-generated layout options based on confirmed page structure
Bringing the Experience to Life in Figma
With the structure set, I designed the high-fidelity UI in Figma using a premium dark theme to let the food photography stand out. It features clear bilingual typography, an intuitive menu grid, and an interactive detail modal with video to create an engaging digital experience.
High-fidelity UI and Interactive Detail Modal designed in Figma
Translating Visuals into AI Context via Design.md
Before AI-assisted coding, I had the AI synthesize all Figma visual decisions into a Design.md file. This centralized source of truth gave the AI a more consistent design reference during implementation, helping to reduce visual drift across colors, typography, and spacing.
Establishing a Design.md file as a single source of truth for AI-assisted coding
Iterative Development with Antigravity
To transition from design to a live product, I leveraged Antigravity as my AI coding partner. By referencing the Design.md file throughout the process, the AI consistently maintained the correct styles, fonts, and layout structures established in Figma.
Building a custom WordPress theme with AI isn't a "one-shot" magical prompt. It requires a highly iterative process—adjusting prompts, reviewing code, debugging layouts, and collaborating with the AI to refine the UI to a production-ready state. To make the site easily manageable for the restaurant owner, we integrated ACF (Advanced Custom Fields) for dynamic menu updates and a translation plugin to handle the bilingual (Swedish/English) requirements.
Iterative collaboration with Antigravity
Ensuring design fidelity and implementing dynamic content
Output & Impact
Since the restaurant recently opened, the new website has been crucial in driving initial foot traffic and establishing a digital presence. The client was highly satisfied with the premium feel of the site, its seamless bilingual capabilities, and the ease of managing the menu via ACF.
per month
Learnings
This project was a deep dive into integrating AI into the product design workflow. While using AI drastically accelerated the development phase, it is still very much an exploration.
There are still challenges—like maintaining strict visual consistency across complex layouts or dealing with occasional code hallucinations. However, by establishing a strong foundation (like a Design.md system) and treating AI as a collaborative, iterative partner rather than a magic wand, it proves to be an incredibly powerful tool that bridges the gap between design and production.