60-Minute Site Speedrun: From prompt to deploy (warts and wins)

/ Prime / By

60-Minute Site Speedrun: From prompt to deploy (warts and wins)

This timed build documents a complete path from idea to production in under an hour. The goal: ship a modern gradient-style SaaS landing page selected from the Modern & Trendy category, refine the output with the prompt builder, and deploy. Along the way, we note layout quirks, image optimization strategies, SEO essentials, and final Core Web Vitals. If you’re new to this workflow, see the concise how it works overview.

Stopwatch timeline (60 minutes)

  • 00:00–05:00 Pick style and prompt: choose Modern & Trendy and load the Gradient Modern SaaS prompt.
  • 05:00–15:00 Generate first pass in an AI coding tool. Produce HTML/CSS/JS. Save as index.html, styles.css, app.js.
  • 15:00–25:00 Refine structure with the prompt builder: improve headings, add accessible labels, and tune color contrast.
  • 25:00–35:00 Fix layout quirks: clamp hero height, prevent overflow on mobile, establish grid for features.
  • 35:00–45:00 Image optimization: convert hero PNG → WebP; add explicit width/height; apply loading="lazy" to non-critical images.
  • 45:00–50:00 SEO pass: set titles, meta descriptions, canonical, and basic Open Graph; ensure a logical heading hierarchy.
  • 50:00–55:00 Deployment: initialize Git, push to a static host, set cache headers for static assets.
  • 55:00–60:00 Core Web Vitals check with lab tools; note results and a short tuning backlog.

Rapid prototyping

Rapid prototyping begins with a strong prompt and constraints. Selecting a visual direction from Modern & Trendy reduces decision fatigue and focuses iteration on content and performance. The Gradient Modern SaaS prompt produced a hero, trust bar, feature grid, pricing, and FAQ on the first pass. To maintain velocity, edits were issued conversationally to the AI: “replace hero image with a gradient canvas,” “swap icon set to inline SVG,” and “tighten spacing on mobile.” This keeps code generation aligned with design intent while minimizing manual rewrite.

SaaS landing page

The SaaS landing page emphasizes a clear value proposition, social proof, scannable features, and a primary CTA. Initial warts: the hero image caused a layout shift on load, pricing cards overflowed on smaller devices, and the gradient banding looked harsh on some screens. Wins: semantic HTML was mostly correct, and the generated feature grid matched the intended style. Fixes included setting explicit image dimensions to stabilize layout, adding clamp()-based spacing to adapt across breakpoints, and applying a subtle noise overlay to reduce gradient banding.

Prompt builder

Using the Prompt builder, the refinement focused on structure and accessibility: enforce an h1–h2–h3 hierarchy, add aria-labels to navigation, and request responsive typography with clamp(). With smaller, directed prompts, it became trivial to regenerate just the feature grid or the pricing section without losing global styles. For more inspiration and patterns, browse other styles like Bento Grid Portfolio or Dark Mode App, then combine elements via the builder.

Deployment

Deployment was kept simple: a static build with cache-friendly headers for CSS, JS, and images. A short Git history ensured traceability during the speedrun. Below, representative Git diffs show fixes to layout shift and image optimization applied just before deploy.

diff --git a/index.html b/index.html
@@
-<img src="/img/hero.png" alt="Product UI">
+<img src="/img/hero.webp" alt="Product UI" width="1440" height="720" decoding="async" fetchpriority="high">
@@
-<img src="/img/logo-1.svg" alt="Customer logo">
+<img src="/img/logo-1.svg" alt="Customer logo" loading="lazy" decoding="async">

diff --git a/styles.css b/styles.css
@@
-.hero { height: 90vh; }
+.hero { min-height: clamp(56vh, 72vh, 88vh); contain: content; }
+.feature-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }

Web performance

Web performance tuning targeted the usual heavy hitters: images, layout stability, and script cost. According to the HTTP Archive Web Almanac, images comprise a significant share of total bytes on the median page, so optimizing them pays immediate dividends (source). Switching the hero from PNG to WebP and adding precise dimensions eliminated a major CLS source and trimmed transfer size. Google notes modern formats like WebP and AVIF can reduce image size by roughly 25–50% for similar quality (source; guidance). Non-critical images were lazy-loaded, and CSS was kept modular to avoid unused bloat. The result: faster Largest Contentful Paint and smoother interactions.

Core Web Vitals

Core Web Vitals target thresholds are well established—LCP ≤ 2.5s, CLS ≤ 0.1, and INP (which replaces FID) ≤ 200ms (web.dev/vitals; INP). Lab measurements after optimizations showed:

  • LCP: 1.9s (hero gradient + headline)
  • INP: 120ms (CTA and accordion interactions)
  • CLS: 0.02 (images sized; fonts loaded without shifts)
  • TBT: 110ms (minimal JS)

These are lab numbers; field data may vary. Still, they align with guidance and establish a solid baseline for ongoing iteration through A/B testing and real-user monitoring.

SEO

SEO improvements were pragmatic: a distinct, descriptive <title>, a compelling meta description, a canonical URL, and a clean heading hierarchy. Copy was tightened to reflect user intent on the hero and features. Internal linking was added to documentation and support pages (e.g., FAQ and Blog) to improve crawlability. Performance helps discovery too—Google has long signaled the role of speed and page experience in search (mobile speed update; page experience). Structured data can be layered later for richer SERP features, but the essentials already move the needle.

Prompt builder

The Prompt builder also accelerated SEO and performance refinements by generating targeted diffs: “add alt text to all decorative images and mark purely decorative ones as empty alt,” “insert a top-of-page skip to content link,” and “preload the main font with font-display: swap.” Because the builder outputs modular chunks, it’s easy to swap sections like the Corporate Professional testimonial layout into a trendier hero without breaking the overall design system.

Case study

As a case study, this sprint surfaced common pitfalls and fast fixes. Warts: an oversized hero image, ambiguous heading levels, and mobile overflow on pricing cards. Wins: quick improvements via format conversion (PNG → WebP), tighter typographic scale, and stable layout through explicit dimensions. The final build shipped within the 60-minute window, passed lab Core Web Vitals thresholds, and left a concise backlog (critical CSS extraction, image CDNs for AVIF negotiation, and adding breadcrumbs). This pattern generalizes well to other prompts such as Neomorphism Dashboard or Glassmorphism Landing Page.

Downloadable runbook

Use this compact runbook to repeat the speedrun. You can also download it as a text file.

Download the runbook

60-Minute Site Speedrun Runbook

1. Pick Style: Modern & Trendy → Gradient Modern SaaS prompt (/categories/modern-trendy, /prompts/gradient-modern-saas).
2. Generate: Create HTML/CSS/JS. Files: index.html, styles.css, app.js.
3. Refine: Prompt builder for a11y, headings, contrast.
4. Layout: Clamp spacing, grid for features, fix mobile overflow.
5. Images: Convert to WebP/AVIF, add width/height, lazy-load.
6. SEO: Title, meta description, canonical, OG basics.
7. Deploy: Static hosting, cache headers, versioned assets.
8. Measure: LCP ≤ 2.5s, CLS ≤ 0.1, INP ≤ 200ms.
9. Backlog: Critical CSS, responsive images srcset, RUM.

What to try next