Overview

---

Description

My recent work in the Pratt Institute's Certificate Course in AI Design has inspired me to explore the use of AI-based tools for web development and digital product design (UX/UI). Because of all the recent attention given to "vibe coding," I decided to experiment with using LLMs to help design small business landing page prototypes, as well as perform fully automated conversions of Figma UX mockups into production-ready code using a number of popular open-source web development frameworks, such as Bootstrap, Foundation, Tailwind CSS, Alpine.js and jQuery.

Goals

Develop streamlined full-stack web development workflows that take advantage of the capabilities of new AI-based tools to help accelerate the development of websites and CMS-based applications.

Design Assets

---

Landing Page Prototypes

My first project involved using ChatGPT to help scaffold and design a series of coded low-fidelity landing page wireframes for two fictitious businesses, a maple syrup farm and a fianancial consulting firm. The best UX elements from the wireframes were extracted and refined by me to create the final polished, high-fidelity landing pages.

"Shushan Sugar Shack" Maple Syrup Farm Landing Page

This exercise involved the creation of a landing page for "Shushan Sugar Shack," a fictitous maple sugar farm in Washington County, New York.

A series of low-fidelity coded wireframes were scaffolded in Foundation 6 with custom utility classes for spacing and padding, and Alpine.js for interactivity. The best UX elements from the wireframes were extracted and refined by me to create a final, production-ready landing page. Much of the AI-generated text was replaced with my own custom advertising copy.

View Final "Shushan Sugar Shack" Landing Page

"Kaydeross Advisory Group" Financial Consulting Firm Landing Page

This exercise involved the creation of a landing page for "Kaydeross Advisory Group," a fictitous financial consulting firm in Saratoga Springs, New York.

A series of low-fidelity coded wireframes were scaffolded in Bootstrap 5 with custom utility classes for spacing and padding, and Alpine.js for interactivity. The best UX elements from the wireframes were extracted and refined by me to create a final, production-ready landing page. Much of the AI-generated text was replaced with my own custom advertising copy.

View Final "Kaydeross Advisory Group" Landing Page

Automated Figma Design-To-Code Conversions

The second project involved full automated design-to-development conversions of two high-fidelity Figma UX prototypes I designed during coursework that was taken through the Pratt Institute.

"Taste of Upstate" Agri-Tourism Website

The first automation involved converting the "Taste of Upstate" agri-tourism UX prototype that I developed in the Pratt Figma for UX/UI course (see case study) into production-ready front-end code. Two variations were developed; one which utilitzes the Foundation 6 CSS framework with Alpine.js for interactivity for more advanced, modern custom stacks, while the second variation uses Foundation 6 with jQuery for interactivity for more traditional, CMS-based stacks in platforms such as WordPress and Drupal.

View Coded Prototype 1 (Foundation 6 + Alpine.js) View Coded Prototype 2 (Foundation 6 + jQuery)

"iEnrich" Adult Continuing Education Website

The second automation involved converting the "iEnrich" adult continuing education UX prototype that I developed in the Pratt Certificate in Human-Centered Design course (see case study) over to production-ready front-end code that utilizes Tailwind CSS with the TW Elements component library and Alpine.js for interactivity.

View Coded Prototype (Tailwind CSS + TW Elements + Alpine.js)

Progressive Web Apps (PWAs)

The third project involved a full automated design-to-development conversion of a high-fidelity Figma UX prototype of an interactive coffee shop ordering app into a fully functional Progressive Web App (PWA).

In recent years, progressive web apps (PWAs) have become an increasingly popular alternative to traditional, native mobile apps. This is largely because PWAs provide the experience of a native mobile app on a standard web browser using traditional web technologies (HTML, CSS, JavaScript) without the need for app store approval or platform-specific development.

Many major businesses and multinational corporations are now using PWAs including Starbucks, Uber, Alibaba, Trivago, Forbes, Spotify and Pinterest.

"New Brews" Coffee Shop Interactive PWA

This automation involved converting the "New Brews" interactive cofee shop ordering app UX prototype that I developed in the Champlain College Usability in Website and Software Design course (see case study) over to a production-ready PWA. Two variations were developed; the first one which is an almost pixel-perfect replica of my original UX wireframe, while the second one features a modified and enhanced user interface that is based on my original workflow.

View Coded Prototype 1 Based On Original Hi-Fi Wireframes (Foundation 6 + Alpine.js) View Coded Prototype 2 With Modified & Enhanced User Interface (Foundation 6 + Alpine.js)

Reflections

---

Through my recent projects and experiments, AI-based tools are really about to become a major game changer for web development and digital product design. In the future, instead of almost all of the emphasis and focus being placed on writing redundant, procedural code, now human critical thinking and creativity can be redirected to where it often matters the most to end users; more time can now be spent on research and development, usability testing, accessibility evaluation and designing more polished, refined digitial assets.

My "Taste of Upstate," "iEnrich" and "New Brews" projects are perfect demonstrations of this shift in focus. There certainly was no shortage of human critical thinking involved. Each of these examples involved twelve weeks and countless hours of planning, research, interviews, developing personas and desigining custom high-fidelity UX prototypes which then went through an automated conversion process to generate full, production-ready front-end code. These projects were true examples of how Hybrid Human-AI Workflows dramatically increase productivity and often achieve better results than traditional, manual workflows.

The UX projects also showcase what may very well become the full-stack enterprise web development workflow of the 2030s; a UX engineer or digital product designer creates a series of detailed high-fidelity UX prototypes in Figma, which are then converted to production-ready front-end code in ChatGPT, Claude or Copilot. A back-end developer then translates the automated code into a custom theme for a content management system like WordPress or Drupal.

According to Bryan Zmijewski, the Founder & CEO of ZURB, a major digital product design firm that originally designed the Foundation framework (that was used in the "Shushan Sugar Shack" and "Taste of Upstate" projects), "The mobile shift in the early 2010s felt different. When we built Foundation to help teams design responsively, we mostly took what we knew and figured out what really needed to fit on a smaller screen...You had to be brutal about what you removed. AI asks something different. The work moves fast. Staying critical of it, and having conviction about where you're taking it, is the real problem."

Conclusion

AI is about to dramatically change how we build websites, mobile apps and digital assets. However, human creativity and crticial thinking are now more crucial than ever. AI can only produce results that are as good as the direction that we give it.

As advertising legend David Ogilvy once stated, "Encourage innovation. Change is our lifeblood, stagnation our death knell.”