Figma lover but also vibe coding and AI lover.

Midjourney and Figma x Lovable. ✨

Complete step-by-step process

A step-by-step case study documenting my learning process with vibe coding (Lovable), using Midjourney, Claude, ChatGPT, and Figma to build an AI landing page and share practical insights with the LinkedIn community.

Step 1. Generate your lookbook images with Midjourney.

Here’s are some of the prompts I’ve used: (you can use Chat GPT, Claude or Gemini)

/

editorial fashion photo of a confident male model wearing an oversized black turtleneck sweater and wide cropped pleated trousers, layered with a white undershirt, off-white high-top sneakers, standing in a minimalist studio with a textured concrete floor and muted blue-gray gradient background, cinematic lighting, clean composition, contemporary avant-garde fashion, modern silhouette, luxury streetwear aesthetic, inspired by Rick Owens and COS

/

full-body fashion editorial photo of an androgynous model wearing oversized black wide-leg pleated trousers, long black blazer with subtle stripe detail on shoulders, black sweater layered over a white t-shirt, standing in a minimalist light gray studio, relaxed pose, long natural hair, soft natural lighting, clean high-fashion aesthetic, inspired by Hyke and Homme Plissé Issey Miyake, avant-garde minimalist fashion lookbook

/

editorial fashion portrait of an East Asian female model wearing an all-white ribbed knit sweater and matching wide-leg pants, sculptural fabric, high turtleneck, standing against a white wall with dramatic natural light and curved shadows, minimalist fashion style, clean composition, sharp lighting, soft expression, architectural textures, premium modern aesthetic, inspired by Issey Miyake and The Row

Step 2. Animate the best results to have the best high-end fashion video with Midjourney (you can use Runway, Veo 3, others).

Also, you can used CapCut for bringing them together.

Step 3. Upload the result to Youtube, which will become your hero web.

Step 4. Go to Figma and create a low fidelity wiframe of how your site will be structured

Step 5. Go to ChatGPT (or Claude, or Gemini etc) to generate a Lovable-ready prompt. Remember attached your Figma wiframe

Here’s the very rudimentary prompt I used:

/

Give me a prompt for a Lovable request that would vibe-code a landing page for a high-end fashion brand called Archive. Style would be avant-garde, minimalist, modern. Leverage the attached image.

Here Claude response:

-Prompt for Lovable: Vibe-Code a Landing Page

Design and code a landing page for a high-end fashion brand called Archive.

Style: Avant-garde, minimalist, modern.

Tone: Confident, artistic, exclusive.

Brand Essence:

• Archive is a luxury fashion label for tastemakers and style-forward minimalists.

• Think Céline (Phoebe Philo era) meets Rick Owens — architectural, stripped back, intentional.

• It’s not for everyone. It’s for the discerning few.

Page Structure:

1. Hero Section

   • Full-bleed still image or subtle video loop

   • Minimal text: "ARCHIVE" + single tagline (e.g. "Disruption in its purest form.")

   • Clean navigation (Menu, Shop, Lookbook, Journal)

2. Featured Drop

   • Highlight the latest collection or capsule

   • Hover interactions on product cards (just name + price)

3. Lookbook Carousel

   • Scrollable visual gallery with editorial-style photography

   • Minimal captions, whitespace-heavy

4. Manifesto Block

   • Bold typographic quote or brand philosophy in fullscreen

   • Example: "Less as a statement. Form as resistance."

5. Newsletter Sign-Up

   • Subtle, with a call to “Join the Archive”

6. Footer

   • Ultra-minimalist: Monochrome palette, no social clutter

Design Notes:

• Typography is everything — play with modern serif + grotesk combo

• Black/white/gray monochrome palette only, with bold use of negative space

• Avoid ecommerce clichés. Prioritize mood, elegance, and structure.

• Subtle transitions (fade, slow scale) to feel cinematic

• 
  

Refine what you consider .

Step 6. Generate + refine the landing page in Lovable until the layout, tone, branding, and UX feel right. Don’t forget to add the youtube video.

Step 7. Share this with the community ( you can see the publication on Linkedin) and have fun!