CreatorWoCStreet →A website case by @WoCStreet created with Google Nano Banana · Next.js · Shadcn UI, including the public result, full prompt, and original source.
View original source ↗
Prompt
I literally designed the landing page for a web app using google nano banana in under 2 minutes. And its looking awesome. Prompt: "Build a modern, production-ready SaaS landing page using Next.js (App Router) and Shadcn UI, based on the rough hand-drawn wireframe provided. The wireframe represents layout and hierarchy only — transform it into a polished, premium SaaS design suitable for a real startup launch. Website Description Create a landing page for LaunchNest, a platform that helps founders validate startup ideas, build MVPs quickly, and launch faster without hiring a full team. The page should feel: Founder-focused Fast and minimal Premium but simple Conversion-optimized Think Stripe × Linear × early-stage startup energy. Page Structure (Follow the Wireframe Exactly) Sticky top navigation bar Center-aligned hero section Large headline (max 6 words) Short supporting subheadline (1–2 lines) Two CTA buttons near the hero text A central mobile phone mockup partially visible from the bottom Floating stat cards and info cards around the phone Small brand/logo text placeholders at the bottom Clean footer alignment Do not change the layout — only improve visual quality. Brand & Content (Use Exactly This Text) Brand Name: LaunchNest Navigation Bar Product How It Works Pricing Resources Login (secondary, outlined) Get Started (primary, filled) Hero Section Headline: Launch Your Startup Faster Subheadline: Validate ideas, build MVPs, and go live in weeks — not months — without hiring a full dev team. Primary CTA: Get Started Secondary CTA: View Demo Floating Stat Cards ⚡ 14 Days Average MVP Launch 🚀 3× Faster Time to Market Left Info Card Validate ideas before you build Button: Explore Ideas Right Info Card Turn concepts into real products Button: Build MVP Phone Mockup Overlay Labels Idea Validation MVP Builder Launch Dashboard Bottom Brand Placeholders Founder Studio EarlyLaunch IndieWorks MVP Labs StartupKit Color Palette Primary Black: #0F0F0F White: #FFFFFF Muted Gray Text: #6B7280 Soft Gray Background: #F4F4F5 Accent Yellow Card: #FACC15 Accent Orange Card: #FB923C Soft Purple Gradient: #E9D5FF → #F5E9FF Design Principles Large, bold hero typography Generous spacing and padding Strong visual hierarchy Rounded cards with subtle shadows Floating UI elements layered around the phone Clean grid alignment Looks great even with minimal content UI & Component Requirements Use Shadcn UI components: Button Card Badge Sticky navigation bar Primary CTA: black background, white text Secondary CTA: white background, black border Phone mockup centered and partially cut off at bottom Floating cards positioned absolutely relative to hero container Fully responsive (mobile → desktop) Technical Requirements: Next.js App Router Tailwind CSS Clean, semantic HTML Reusable components No placeholder lorem ipsum Output code only, no explanations" Will try to bring this to life using Gemini 3 next.
Reusable method
Key decisions
Check whether information hierarchy, module order, and CTA clarity all hold in the final result.
Adapt it to your subject
Extract “target result → the product name, audience, page modules, and primary button → constraints” as a reusable template for similar work.
Where it breaks
Run single-variable comparisons around module order, value proposition, and CTA placement. Record the model, cost, and failures; turn it into a Skill only after it repeats reliably.
Recommended models
Derived Skill
Skills are derived from repeated patterns in published cases. They are not a separate submission type.
Creator
WoCStreet focuses on production-ready AI interfaces and is active on X. “Nano Banana Hand-Drawn Wireframe to SaaS Landing Page” is the current representative case, built with Google Nano Banana · Next.js · Shadcn UI with its stability retest open to votes.
Keep exploring
A webpage case by @Oluwaphilemon1 using Claude Fable 5 · Three.js · Blender · GSAP, including the public result, full prompt, and original source.
Prompt
Claude Fable 5 and GPT-5.6 are powerful🥵🥵🥵 Here Is How I built with Claude 👇 Prompt: "Design an agency site where services are presented as supermarket product packaging in 3D" Use Three.js with WebGL to render al
A webpage case by @uxsweta using AI UI Builder, including the public result, full prompt, and original source.
Prompt
Few people asked for the prompt, so here it is 👇 PS: Tweak it based on your use case. Create a modern, minimal 3D Invoice Generator Machine component with a premium SaaS-style aesthetic. Visual Design - Design a wid
A webpage case by @shushant_l using AI Website Builder, including the public result, full prompt, and original source.
Prompt
Here's how to create your website in minimalist design style with AI. Use this prompt: Design a modern minimalist portfolio website for a digital creator and AI consultant. Use a clean black, white, and neutral color pa
