Alvio Tech Stack For Site Redesign
When I began my website redesign, I set out to explore what happens when curiosity meets capability. Could AI help me build something that wasn’t just functional, but expressive, a website that reflected how I think, work, and tell stories?
There are countless things that spark my interest. My backlog of hobbies alone could fill a lifetime. But curiosity often comes with a bottleneck: learning things takes time, and sometimes I lack the deep technical fluency to build what I pictured.
What I love most about AI is how it erases that boundary. It lowers the barrier to new skills and gives me just enough scaffolding to move from knowing what I want to do to actually creating it. This piece is a reflection on that process: how reasoning with AI reshapes what we build, and what we believe we’re capable of creating.
What was the tech stack?
Every system has its stack. Alvio’s site was no different. Each tool played a specific role in translating thought into form. Some structured the creative process, others extended my technical reach. Together, they formed a toolkit that shaped how I built, learned, and designed across the entire site.
How to use them in concert?
Each tool played its part, but the real shift happened in how they connected. Using AI wasn’t just about acceleration or automation. It became a new way of reasoning, a design process built on conversation, iteration, and shared structure.
I moved between design, prompts, and code as part of one workflow. Figma defined structure, Canva set visual tone, and ChatGPT turned both into logic and interaction. The result was a chain where every tool informed the next.
ChatGPT
What I used it for
Every component began as a structured conversation. I used it to write and refine HTML, CSS, and JavaScript, and to reason through structure across pages.
Example
Prompt: "Create a three-row group layout for Alvio Allies. Left column is group node, right is horizontal row of ally nodes. Each ally will have an character image, description, and embedded content."
Outcome
Cohesive, modular code that scales across pages with unified design, adaptive layouts, and reusable components.
Figma
What I used it for
Exploring layout and interaction. I mapped component relationships, annotated behaviors, and visualized transitions before handing structure to AI.
Example
Outcome
An annotated blueprint that connected visual design to system logic and acted as a reasoning anchor for code generation.
Canva
What I used it for
Where concepts found form. I prototyped typography, color balance, element design, and composition before codifying them.
Example
Outcome
A cohesive visual language for Alvio that later guided CSS styling and motion tone across sections.
The Noun Project
What I used it for
Sourcing and customizing icons to create a unified symbolic system for click cues, timeline nodes, and feature badges.
Example
.ally-badge{
position:absolute; top:4px; left:4px;
width:28px; height:28px; border-radius:50%;
background-color:currentColor; display:flex;}
Outcome
Consistent iconography that reinforces interaction logic and brand syntax.
Squarespace
What I used it for
Hosting and deployment. I integrated custom HTML, CSS, and JavaScript into a managed content framework and iterated in real time.
Example
<div class="ally-node" onclick="showPopup('Alvio','...','IMG','BADGE','theme-purple',this)">
<div class="node-img-wrapper">
<img src="ALVIO_IMAGE" alt="Alvio" />
<div class="ally-badge"
Outcome
A functional, scalable site that merges handcrafted mockups into components with CMS flexibility, and clean css, html, and javascript.
Google’s Prompting Essentials
What I used it for
Applied principles of context depth, role framing, and constraints to structure every AI dialogue. Each prompt read like a research brief.
Example
Outcome
A repeatable prompting framework that produced coherent, interpretable, and reusable outputs across code, copy, and layout.
Context: Allies page with groups and popups Role: You are my front-end pair Task: Build responsive group-row with ally nodes and popup card Constraints: no fixed heights, 600px popup max, 95vw on mobile
How to craft effective prompts?
Most people think prompting is about adding more words. In practice it is about adding more structure. The strongest prompts I wrote for my webpages shared three traits: clear context, clear intent, and clear constraints.
Good prompting does not force a model to guess. It gives the model enough structure to reason. To keep the model aligned, I treated every prompt like a small specification. This became a repeatable formula that worked across design, code, layout, and debugging.
Here is the formula I used across the entire site. This pattern comes directly from Google’s Prompting Essentials Course, adapted to design and front-end development.
How to adapt and scale your prompts.
What it is
A method that pairs text instructions with visual inputs like Figma frames or screenshots, so it understands spatial hierarchy, layout, and structure.
Why it helps
It removes ambiguity and produces layouts that match the intended design with fewer revisions. It sees the structure instead of guessing it from text.
Example
Use annotations to infer spacing and behavior. Each ally has a badge, image, and popup anchor. Translate this into HTML, CSS, and JS that matches the frame.
What it is
A stepwise process where each prompt builds on the previous output. You start with structure, then styling, then behavior, then scaling.
Why it helps
It keeps the work organized and prevents the model from merging concerns. Complex components come out cleaner, modular, and easier to maintain.
Example
Step 1: Create one Ally row with group left and allies right, no styling. Step 2: Add CSS for spacing using Alvio colors.
What it is
A technique that asks the model to compare multiple options and surface tradeoffs across performance, clarity, scalability, or maintainability.
Why it helps
It reveals reasoning the model usually hides. You make stronger decisions because each choice is justified through explicit comparison.
Example
Compare two layouts. A uses flexbox. B uses grid. Which handles variable ally counts better? Explain tradeoffs and recommend one.
What it is
A root-cause method where you ask the model to explain why something breaks before proposing a fix. The focus is on analysis, not immediate correction.
Why it helps
It produces more stable code. When the diagnosis is correct, the fix is smaller, safer, and less likely to introduce new issues across the system.
Example
The ally popup shifts layout down on desktop. Read the CSS and name the selector that overrides container height. Propose a one line fix and justify it.
What it is
A reusable format (Task, Context, References, Evaluate, Iterate) that standardizes how you request work from the model.
Why it helps
It ensures consistency across components. Tiles, popups, and cards follow the same logic, improving maintainability.
Example
Task: Build new tile. Context: Mirrors previous tile. References: Figma mockup.
What it is
A style of prompting where you set explicit boundaries such as max widths, no fixed heights, or specific color tokens the model must follow.
Why it helps
It keeps outputs aligned with your design system and prevents the model from generating code that breaks responsiveness or brand rules.
Example
Build this component with constraints: No fixed heights. Max width 600px desktop. Use only the brand palette. No inline styles except when specified.
Different parts of the site required different types of inputs and different ways of guiding ChatGPT.
Some prompts defined structure. Some paired text with screenshots. Others worked as step by step chains that carried reasoning forward.
The effectiveness came from choosing the right prompting method for the task, not from using longer or more complex instructions.
The following guide shows the six prompting modes I used across the Alvio site, with examples taken from the Allies, Experience, Playbooks, and Approach pages.
Closing thoughts.
In building this, I learned that AI mirrors your mental model. The clearer your ontology, your structure of meaning, the clearer its reasoning becomes. Prompting is design. Debugging is learning. And systems thinking is the bridge between them.
‘Til next time, I’m Bianca
