PLANNING & STRUCTURE
- Gathered data from the old website.
- Created a sitemap, flowchart, and
wireframe to establish the site’s
structure and user flow. →
DESIGN PHASE
Built responsive layouts in Figma for
desktop, tablet, and mobile. →
AI‑ASSITED CONVERSION
- Experimented with different AI tools
to convert Figma designs into HTML
using Bootstrap CSS, working
section by section (starting with
the header and slider). - Figma + Builder.io → Too
time‑consuming, with jerky
conversion results. - Claude → Code quality was
unsatisfactory; slider functionality
failed. - ChatGPT → Best results. Successfully
converted sections of the page
into clean HTML + Bootstrap CSS.
In the links below are the initial results
I tested:
→
FINAL OUTCOME
While not perfect, the ChatGPT‑assisted
workflow produced a full‑page HTML +
Bootstrap CSS version that closely
matched the Figma design.
This approach allowed faster iteration
and refinement compared to other tools.
Here is the full page layout
Landing Page
You may also view here the
ChatGPT Conversation
PROMPT WORKFLOW
I began by explaining to ChatGPT the type
of website I wanted to build. From that
discussion, I asked it to generate a prompt
tailored to my needs. Once I had the
prompt, I fed the exact same command
into three different platforms — Lovable,
Bolt, and Vercel — to compare the outputs.
My goal was to see how each tool
interpreted the same instructions and what
kind of results I would get across different
environments.. →
FINAL OUTCOME
I wasn’t surprised by the results themselves,
but rather by how similar the designs looked
across platforms. Each output felt like a
template, with only minor variations.
WHAT I LEARNED (via ChatGPT)
The similarity comes from the fact that
many of these tools converge on the
same foundations:
- Shared foundation models
- Modern UI patterns that dominate
current design trends - Training examples drawn from GitHub,
Dribbble, Tailwind UI etc. - Standardized Prompting techniques
KEY DIFFERENCES
- Lovable → Stronger at building
full applications and CRUD systems - Bolt → More effective for coding
and debugging workflows - v0 → Delivers better UI polish
WEB PAGE LINKS
The story centers on a Father and Son
during Father’s Day. The son eagerly
tries to greet his dad with a heartfelt
“Happy Father’s Day.” However, because
his father is hearing-impaired, he
misinterprets the words—thinking
his son is simply asking about breakfast.
What was meant to be a warm moment
turns into a gentle but painful miscommunication.
In the end, the son feels awkward and
quietly saddened, his intended message
of love left unheard.
This was my first attempt using
Google’s Veo 3 since its release.