[ C A S E S T U D Y ]

AI WEB DESIGN FRAMEWORKS & MODEL TRAINING

WHERE FRAMEWORK MEETS EXPERIMENT

— TEACHING AI TO DESIGN THE BRIEF.

PROBLEM

Traditional workflows collapse under the weight of unknowns. Designers are expected to build clarity out of placeholders — endless wireframes filled with lorem ipsum and empty boxes. You’re designing around content that doesn’t exist yet: guessing word counts, tone, image density, composition, and visual rhythm.

That uncertainty breaks creative flow. Every decision becomes hypothetical — typography, spacing, and hierarchy depend on information that isn’t real. Clients, meanwhile, can’t connect to abstractions. Without context, alignment slows, feedback becomes subjective, and iteration loops multiply.

This was the turning point. The gap between placeholder and product wasn’t just a workflow flaw — it was a design problem worth solving. To fix it, I built and trained an AI framework that could populate wireframes with believable, contextual content: copy, image prompts, even stock search keywords. Instead of designing around absence, I began designing around approximation — turning guesswork into grounded prototypes.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

LOREM

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

LOREM "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

1. Framework Training: Wireframes treated as modular inputs; GPT generated copy and image prompts specific to component type.

2. Asset Variations: Four core asset sets defined — glyph icons, brand icons, illustrations, photography — each scalable and adaptable.

3. Atomic Breakdown: Components reverse-engineered to the atomic level, tokenised in Figma + Token Studio, then rebuilt as reusable modules.

4. Visual Cohesion: MidJourney prompts and Adobe Stock keyword scaffolds created imagery aligned with brand tone.

5. Physical Thinking Time: Alongside screen work, I devoted ~20 hours per week to endurance running. These sessions became a problem‑solving zone, where deep thinking and framework refinement happened away from the desk. This physical practice was built into the methodology — a reminder that design frameworks aren’t only engineered in software, but also shaped through embodied thinking.

Ideation framework which breaks the “variables” down the relevant categories

SOLUTION

PROCESS

Rapid Adaptation in Action — Training

The Hemsley Fraser redesign wasn’t just a website delivery — it was a live experiment in building smarter systems. Under extreme deadlines and complex requirements, I engineered an AI-driven framework that turned wireframes into living prototypes, complete with real copy, visual assets, and scalable design logic.

AI FRAMEWORK

I trained a ChatGPT system to classify wireframe elements and generate content on demand:

Text blocks became headlines, body copy, CTAs.
Image assets became prompts for icons, illustrations, or stock photography.
Product SKUs were filled with descriptions, variants, and pricing.
Blog grids were populated with meaningful, structured content.

This systemised approach ensured every placeholder was replaced with purposeful, context-aware output. Wireframes became functional prototypes stakeholders could immediately understand.

Hemsley Fraser — End-to-End Web Product Design

This project was a full redesign built under extreme delivery pressure. Hemsley Fraser became the testbed for my AI-assisted end-to-end framework — from audit to launch — producing a fully tokenised, scalable design system that transformed workflow speed, clarity, and consistency.

PROCESS

Design Audit (VL/UI/UX): Clarified gaps, inconsistencies, and user pain points. Gestalt principles and UX analysis revealed where clarity and hierarchy had broken down.

Discovery Workshop: Framed insights into focus areas: grid, typography, colour, imagery. These became the foundation for a refreshed visual language.

Creative Concept: Introduced a neutral, functional colour system, expressive imagery, and a new typographic voice — striking a balance between brand equity and modernity.

Training the System to See: I built a pipeline that allowed the AI to read wireframes as templates—identifying layout hierarchies, visual intent, and tone cues. From this, it generated tailored Adobe Stock prompts and MidJourney scaffolds that aligned with each section’s structure. The system effectively designed from structure outward—bridging UX, copy, and imagery through one interpretive framework.

Atomic DS (Token Framework): Configured tokens in Figma + Token Studio. Established scalable primitives (spacing, type, colour) to align design and dev, accelerating handoff.

OUTCOME

What emerged was more than a redesign. It was a living system: modular, scalable, and AI-assisted. Content pipelines were automated, placeholder copy was generated intelligently, and high-fidelity prototypes were built directly from structured modules.

Hemsley Fraser’s platform became the proof point: a full end-to-end product experience, rebuilt with systems thinking, clarity, and speed.

IMPACT

The Framework Effect

40% faster prototyping — early phases compressed from days into hours.
70% fewer inconsistencies — token-driven system eliminated visual/UX drift.
~30% time reclaimed — automated reporting and content freed hours for creative work.
<48h turnaround on components — new modules designed, tested, and published in two days.

These weren’t shortcuts — they were amplifiers. By automating the repetitive, and integrating physical reflection into the process, I made space for deeper creative thinking.

Closing
This project showed the value of thinking future-first in the present moment. By treating every deliverable as both an output and a system, I built a framework that solved deadlines and set the stage for scalable, repeatable success.

Developed during my tenure at Huble Digital as Lead Product Designer. Quoted from Intrinsic: The Chapters — a live design memoir. A rapid, AI-driven redesign delivered through structured systems and atomic design. Live Site:. hemsleyfraser.com

AI WEB DESIGN FRAMEWORKS & MODEL TRAINING

PROBLEM

LOREM

SOLUTION

PROCESS

PROCESS

IMPACT

Visual Design Exhibit

Superbalist → "The Rest"