16 Website Mockups in One Afternoon — Without a Designer

The Problem

PyratzLabs needed a new website. The old one was fine. "Fine" is the worst thing a venture studio's site can be.

The standard path: hire a design agency, brief them, wait 2-3 weeks for a first mockup round, give feedback, wait another week, iterate. Budget: $5,000-15,000 for mockups alone. Before a single pixel hits Webflow.

I didn't want to wait 3 weeks to see if an agency understood my vision. I wanted to see my vision today. Then decide.

The bottleneck was never the build. It was the design direction. We needed to answer one question: corporate-polished or dark-mode-bold? Two very different identities. And I wanted to see both fully realized before committing.

The Solution

Gemini image generation for high-fidelity website mockup concepts. Two complete design directions, 8 page types each. One afternoon.

Direction V1: Corporate Navy — navy + teal + gold, clean typography, institutional feel. The kind of site that whispers "we manage $500M."

Direction V2: Dark Mode Hexa-Inspired — pure dark backgrounds, electric accents, data-forward. The kind of site that says "we build the future."

The Process (with code/config snippets)

I briefed the agent with two mood boards described in text:

DIRECTION V1 — "Corporate Navy"
Colors: deep navy (#0a1628), teal (#2dd4bf), gold (#d4a843), white text
Vibe: institutional, trustworthy, premium. Think Goldman Sachs meets tech.
Typography: serif headings, clean sans-serif body
Imagery: abstract geometric patterns, subtle gradients

DIRECTION V2 — "Dark Mode Bold"
Colors: near-black (#0d0d0d), electric blue (#3b82f6), neon green (#22c55e)
Vibe: futuristic, technical, developer-adjacent. Think Vercel meets Bloomberg Terminal.
Typography: mono headings, sharp sans-serif body
Imagery: grid patterns, code snippets, terminal aesthetics

For each direction, I specified 8 page types:

pages:
  - homepage_hero
  - about_team
  - portfolio_grid
  - portfolio_detail
  - investor_relations
  - blog_listing
  - blog_post
  - contact

The generation prompt for each followed this structure:

Website mockup: [page_type] page for a venture studio.
Design direction: [V1 or V2 description]
Layout: [specific layout notes — hero section, 3-column grid, etc.]
Content hints: [what text/data would appear]
Full-page screenshot style, browser chrome visible, 1440x900 viewport.
High-fidelity UI mockup, Figma-quality, pixel-perfect.

16 prompts. Batched. Results in about 3 hours including prompt refinement cycles.

The trick was being extremely specific about layout. Vague prompts produce vague mockups. I described grid structures, section ordering, and content hierarchy — not just colors and vibes.

The Results

Important caveat: these aren't production mockups. They're directional. They answer "does this feel right?" not "is this pixel-perfect?" We still used a Webflow developer for the final build. But the design conversation that usually takes 3 weeks took 3 hours.

We went with a hybrid: V2's dark aesthetic with V1's typography approach. Something I never would have discovered without seeing both directions fully rendered.

Try It Yourself

1. Define 2-3 design directions in text (colors, vibe, references)
2. List every page type your site needs
3. Write layout descriptions, not just aesthetic descriptions
4. Generate all combinations — the cross-pollination between directions is where the gold is
5. Use outputs as design briefs for your developer, not as final designs

The design agency's real value isn't mockups — it's taste. But you need to see the options to know your own taste.