Web Building Guide - SpeedMobi
← Back to Web Building HQ
🚀
Complete Guide

Web Building Guide

Your complete reference for transforming UWQs into production-ready websites using SpeedMobi Site Builder.

What Site Builder Does

Turns UWQs into Complete Websites

SpeedMobi Site Builder is a Claude project that takes a completed UWQ (Unique Website Questionnaire) and generates a professional, production-ready website following the StoryBrand framework.

  • ✓
    First Run Delivers 4 Files
    Header with full navigation, footer, homepage with 15+ sections, and complete style guide with build queue
  • ✓
    StoryBrand Structure
    Every homepage tells a complete narrative: problem, guide, plan, call-to-action, success vision, and social proof
  • ✓
    Mobile-First & Accessible
    Built for 375px first with responsive scaling, skip links, focus states, and WCAG AA compliance
  • ✓
    Paste-Ready HTML
    All styles inline, no external dependencies, copy-paste directly into Duda's Custom HTML widgets

The 8-Step Workflow

UWQ to production site in 8 steps

  1. 1
    Open SpeedMobi Site Builder
    Start in the Claude project and begin a new conversation
  2. 2
    Provide the UWQ
    Upload or paste the completed Unique Website Questionnaire
  3. 3
    Review Analysis
    Check Big Idea, StoryBrand elements, and planned sections
  4. 4
    Download 4 Files
    Header, footer, homepage, and style guide - first run only
  5. 5
    Save to Google Drive
    Client Code folder → Create company subfolder → Save 4 files
  6. 6
    Paste into Editor
    Each file goes into Custom HTML widgets in SpeedMobi Editor
  7. 7
    Request Next Page
    Follow build queue in style guide for additional pages
  8. 8
    Update & Add Content
    Replace header with updated navigation, add new page content

What You Get

First Run Package (4 Files)

  • 1
    [company]-header.html
    Skip link, complete navigation for all planned pages, mobile menu, proper accessibility attributes
  • 2
    [company]-footer.html
    Full navigation, contact info, social links, legal links (Privacy, Terms), copyright
  • 3
    [company]-homepage.html
    15+ sections following StoryBrand narrative, mobile-first responsive, all inline styles
  • 4
    [company]-style-guide.md
    Complete site wireframe, build queue, Big Idea, StoryBrand framework, design system, image specs

Subsequent Pages (1 File Each)

After the first run, each new page is a single file: [company]-[pagename].html

The header and footer remain unchanged unless you add pages not in the original wireframe. Just update the aria-current="page" attribute when publishing.

File Management

💡 Critical Rule
ONLY save the first run (4 files) to Google Drive. Subsequent pages don't need Drive backups because you have triple redundancy: Claude conversation history, Editor backups, and the initial Google Drive package.

Google Drive Organization

Location: Client Code folder in shared Drive

Structure:

  • Client Code/
  • └─ [Company Name]/
  • ├─ [company]-header.html
  • ├─ [company]-footer.html
  • ├─ [company]-homepage.html
  • └─ [company]-style-guide.md
⚠️ Common Mistake
Don't save every page to Drive. This creates clutter and wastes time. The first 4 files are your backup—everything else lives in Claude history and the Editor.

Quality Checks Before Delivery

⚠️ Always Review the Analysis First
Before downloading files, read the Big Idea and StoryBrand elements Claude extracted from the UWQ. If something feels off, ask for adjustments. It's easier to revise the strategy before building than to rebuild pages later.
  • ✓
    Test on Mobile First
    Open preview on your phone or use browser DevTools at 375px width. Everything should work perfectly.
  • ✓
    Verify All Links
    Phone numbers should be tap-to-call, navigation should be complete, external links should open in new tabs
  • ✓
    Check Image Specs
    The style guide lists exact dimensions needed for each image type. Source or generate images before going live.
  • ✓
    Read Build Notes
    The style guide includes design decisions, personality notes, and signature elements. Understand why choices were made.

Quick Reference

Tool
SpeedMobi Site Builder →
Input
Completed UWQ (Unique Website Questionnaire)
First Run
4 files (header, footer, homepage, style guide)
Backup
Save first 4 files to Google Drive → Client Code folder
Next Pages
Follow build queue in style guide, 1 file per page
Deployment
Paste into Duda Custom HTML widgets
Framework
StoryBrand (customer = hero, business = guide)
Sections
15+ on homepage, 800+ words per service page
🚀

Ready to Build?

Open the SpeedMobi Site Builder and start transforming UWQs into exceptional websites.

Open Site Builder → Back to Web Building HQ