AI-Assisted Product Design & UI Engineering

Case Study: Orchestrating AI for Rapid Frontend Deployment — LiteraryLoom

Project Type: AI-Assisted Product Design & UI Engineering

Role: End-to-End Product Designer & Frontend Prototyper

Timeline: 1 Week (Accelerated AI Lifecycle)

Live Platform: View Live Site

01. Executive Summary

This case study explores the design and development of LiteraryLoom, a modern, interactive book discovery and community ecosystem. The core purpose of this project was twofold: to design a platform addressing choice paralysis in the digital reading space, and to pioneer an accelerated Design > Refinement > AI Code Generation > Live Deployment workflowusing Google Stitch, Figma, Google AI Studio, and GitHub Pages.

By executing a "human-in-the-loop" engineering pipeline, the traditional handoff friction between design and frontend production was eliminated, compressing a multi-week lifecycle into 7 days.

02. The Problem Space & Target Audience

The Challenge

Modern readers struggle to discover books amidst overwhelming, outdated options. Traditional platforms suffer from:

• Cluttered Interfaces & Cognitive Load: Dominated by commercial banners and dense text blocks (e.g., legacy Goodreads layout).

• Static Discovery: Lack of gamified or interactive tools to guide undecided readers.

• Fragmented Communities: Review systems detached from real-time social dynamics.

Target Audience

• Avid Readers (Ages 18–45): Mobile-first users who lean heavily on social proof and visual curation to choose their next read.

03. The Hybrid Design & Refinement Stack

Instead of relying on a single design environment, I engineered a high-velocity hybrid workflow using Google Stitch for layout generation and Figma for high-fidelity refinement.

[Structure] Google Stitch: Wireframing & Responsive Blueprinting                                                  │                                                  ▼ [Refinement] Figma: High-Fidelity UI, Asset Tuning & Design Tokens                                                  │                                                  ▼ [Translation] Google AI Studio: Prompt Engineering & LLM Code Generation                                                  │                                                  ▼ [Production] GitHub Pages: Hosting & Quality Assurance Auditing

Structural Blueprinting (Google Stitch)

I initiated the platform's foundation inside Google Stitch, focusing on modular architecture. Instead of building a continuous flat layout, the platform was mapped into isolated component nodes (Hero Section, Matchmaker Card Matrix, Filtered Search Grid).

Micro-Refinement & Fine-Tuning (Figma)

To prepare the design for clean code translation, I migrated the Stitch blueprints into Figma for advanced visual calibration:

• Design Token Definition: I precision-tuned the "Literary Palette"—using Figma's color styles to establish the deep navies for the dark-mode canvas and bright accents for primary CTAs.

• Asset & Image Vectoring: I used Figma to crop, mask, and optimize the aspect ratios for the book jackets and user avatars, ensuring consistent spatial values.

• Layout Auto-Layout Audit: By running the UI through Figma’s Auto-Layout engine, I mathematically verified the flex-wrap logic and padding values before passing the specifications to AI.

04. The AI-Assisted Development Pipeline (Google AI Studio)

With the design visually perfected in Figma, I leveraged Google AI Studio to serve as my virtual frontend engineer. This wasn’t a basic layout export; it required strategic prompt engineering to ensure the final output maintained precise visual fidelity and complex interactivity.

The Interactivity Prompt Strategy

To engineer the Book Matchmaker Quiz and Interactive Review Modals without relying on bulky frontend frameworks, I built iterative system prompts using the structural specs from Stitch and the styling parameters from Figma.

System Prompt Paradigm utilized in AI Studio: "Act as an expert frontend engineer. Translate these structured component specifications into semantic HTML5 and utility-first Tailwind CSS. Implement structural vanilla JavaScript state architecture to track user quiz choices (Mood, Universe, Commitment). Upon execution of the final action click, dynamically alter the DOM target container to display the corresponding recommended book result card instantly without causing page refreshes."

05. Core Features & UX Execution

Reviewing the live deployment of LiteraryLoom highlights several high-impact UX choices refined in Figma:

1. The Hero Section & Trust Signals

• UX Pattern: Instantly establishes credibility through strong, scannable quantitative social proof micro-metrics: 12K+ In-Depth Reviews | 4.8★ Average Rating | 85K Active Readers.

• Visual Balance: Clean copy juxtaposed against an evocative reading aesthetic image.

2. Gamified Discovery: The Book Matchmaker Quiz

• The Interaction Pattern: Solves choice paralysis via a 3-step conversational wizard layout (Mood > Universe > Commitment).

• Technical Execution: Managed seamlessly through native JS component state changes, instantly outputting an actionable match result complete with an associated "Read Full Review" CTA.

3. Dynamic Curated Review Grid

• Interaction Pattern: A clean search filter layout allowing readers to narrow choices instantly by categories (Fiction, Sci-Fi, Non-Fiction, Mystery) with built-in empty states to maintain a smooth user flow.

4. High-Trust Community Feeds

• Social Proof Design: Dedicated blocks showcasing active review timestamps, likes, and a localized leaderboard tracking top reviewers ("Elite", "Expert", "Avid") to gamify user contributions.

06. Technical Performance, Refinement & Accessibility

Accessibility Compliance (WCAG AA)

AI-generated code often misses nuanced accessibility standards. During the Refinement Phase, I audited the build to implement: • Keyboard Focus Accessibility: Ensuring smooth "Tab" sequencing across the Matchmaker Quiz nodes and form submission inputs.

• Semantic Integrity: Enhancing accessibility through semantic structure and descriptive image alt text for improved screen reader support.

Performance Optimization

• Visual Assets: Used optimized Unsplash images with dimensions refined in Figma to enforce layout uniformity across differing book jacket form factors.

• Hosting Architecture: Launched directly via GitHub Pages, providing a clean, version-controlled build system with swift time-to-first-byte performance.

07. Retrospective & Strategic Takeaways

The Advantages

• Speed-to-Market: Compressed the design-to-deployment production cycle by an estimated 70%.

• Fidelity Retention: Fine-tuning tokens in Figma ensured perfect 1:1 conversion from concept to live deployment.

The Challenges

• Code Overhead: AI code requires meticulous structural human oversight to eliminate layout bugs.

• Friction with Edge Cases: Complex UI logic (like aspect ratios and dynamic form validation) requires human-in-the-loop tuning.

Future Roadmap

• Phase 2 (Data Scale): Transition from static JSON-driven objects to a lightweight, headless CMS data pipeline to allow dynamic content management.

• Phase 3 (Personalization): Introduce persistent client-side data tracking via browser local storage, enabling users to save personalized reading lists and track quiz results.

08. Conclusion & Personal Growth

Final Reflection

LiteraryLoom serves as a powerful proof of concept for the future of product design. By blending traditional user-centric UX methodologies with an advanced, AI-assisted development pipeline, this project successfully compressed a multi-week design-to-production lifecycle into just seven days without compromising on responsiveness, interactivity, or visual fidelity.

The success of this platform proves that the boundaries traditionally separating design and code are dissolving. In the modern product landscape, a designer is no longer restricted to shipping static vector mockups. By leveraging tools like Google Stitch, Figma, and Google AI Studio in tandem, we can now rapidly manifest our design intentions into functional, testable web realities.

Key Competencies Demonstrated:

• End-to-End Product Ownership: Navigating a digital product through the entire lifecycle, from problem discovery and visual fine-tuning to code deployment.

• AI Tool Integration & Orchestration: Moving beyond basic prompt generation to actively direct LLMs as advanced frontend production partners.

• Technical & Strategic Agility: Balancing strict design aesthetics with functional frontend code parameters, resulting in a 1:1 conversion rate from concept to live deployment.

Ultimately, this project has transformed my perspective as a designer. It has equipped me to act not just as a visual thinker, but as a agile Design Technologist—uniquely positioned to help product teams prototype faster, reduce development friction, and ship user-validated experiences at scale.

Let's Connect!

Thank you for reading through this case study! If you are looking for a forward-thinking designer who bridges the gap between design systems and live deployment, let's chat.

• GitHub Repository: github.com/maryznivya/my-book-website

• LinkedIn: https://www.linkedin.com/in/nivyamanuel/