Free guide · build in 30 minutes

Custom proposal pages thatclose $10K video deals.

The exact recipe I use to build cinematic, single-link proposal sites for video clients. Claude Code, the /impeccable skill, the Higgsfield CLI, and Vercel. Free. Skim the guide. Grab the starter repo at the bottom.

Jump to the guide Just give me the starter repo

Three real proposals, three closed deals

The pages this recipe has shipped.

Training Film + LMS Proposal

Indiana Professional Management Group

$10K project. Proposal accepted, deposit invoiced.

View the live page

Recruitment Film Proposal

Kokomo Fire Department

Three-tier package presented; closed at the recommended tier.

View the live page

Brand Film Proposal

CrossFit West Lafayette

Booked production within 48 hours of sending the link.

View the live page

Why this matters

The proposal is the work.

Clients judge production quality by the way you pitch. A custom link feels like the project is already in motion. A PDF feels like you’re hoping to be picked.

PDFs are dead weight in inboxes. Most never get opened past page two

Canva templates make every videographer look like every other videographer

“Send me a quote in an email” is how $10K projects get whittled to $3K

The proposal IS the work. If it's bland, you're showing the client your ceiling

The full setup · 7 steps · 30 minutes

Everything you need, in order.

Free. Open. Copy any block. The starter repo at the bottom bundles all of this so you can clone and ship instead of typing it out.

Install Claude Code in your terminal

The CLI that runs everything. Free with an Anthropic API key. macOS / Linux / WSL.

curl -fsSL https://claude.ai/install.sh | bash
# or with npm:
npm install -g @anthropic-ai/claude-code

# verify
claude --version

Claude Code quickstart

Get a GitHub account

Free. You'll push your proposal repo here and Vercel will auto-deploy from it.

# Sign up
open https://github.com/signup

# Then install the GitHub CLI so you can create repos from the terminal
brew install gh
gh auth login

Get a Vercel account

Free. Sign in with GitHub. Every repo you push becomes a one-click deploy. Custom domains supported on the free tier.

# Sign up (use your GitHub login)
open https://vercel.com/signup

# Optional: install the CLI for local previews
npm i -g vercel
vercel login

Install the /impeccable skill

The Claude Code skill that takes a generic AI-built page and turns it into something that looks like real product design. Run it after the proposal page is built. The page goes from “fine” to “closes deals.”

# Inside any Claude Code session
/plugin install impeccable

# Or clone the repo into your skills folder
git clone https://github.com/obra/superpowers ~/.claude/skills/impeccable

# Then in any session
/impeccable

Install the Higgsfield CLI

Generates the cinematic AI imagery for your hero, scene cards, and section breaks. Default model is Nano Banana Pro 2. One prompt, one image, no Photoshop. Works straight from the terminal so you stay in flow.

# Install
npm install -g @higgsfield/cli

# Log in (browser-based device login)
higgsfield login

# Generate one image
higgsfield generate \
  --model nano-banana-pro-2 \
  --aspect 16:9 \
  --out images/hero.jpg \
  --prompt "Wide cinematic frame at golden hour: \
            firefighter silhouette against backlit smoke, \
            shot on Alexa, anamorphic flares, \
            warm orange grade, brotherhood, intensity"

Higgsfield.ai

Use the proposal prompt

The exact prompt I paste into Claude Code for every client. Fill in the bracketed fields with your project info. Client name, deliverables, price, timeline. Paste, and watch the page build itself. Then run /impeccable for the polish pass.

# Inside Claude Code
# 1. Open a new folder for the client
# 2. Copy the prompt block below
# 3. Replace the bracketed fields
# 4. Paste, hit return, and let it cook

Push to GitHub, deploy to Vercel

Vercel auto-deploys every push. The first deploy gives you a live URL like client-name.vercel.app. Send that to your client. Custom domain takes 5 minutes if you want one.

# From the new client folder
git init
git add .
git commit -m "feat: [client] proposal"
gh repo create [client]-proposal --public --source=. --push

# Then import the repo at vercel.com/new
# Or from the CLI:
vercel --prod

The prompt

Paste this into Claude Code.

Fill in the bracketed fields with your client’s project info, paste it in a fresh Claude Code session, and let it build the page. Then run /impeccable for the polish pass.

You are helping me build a custom one-page proposal site for a video client. I am a working videographer. The site needs to look like a $10K-grade pitch — cinematic, confident, custom — not a Canva PDF. Match this Twenty1 Media pattern: vanilla HTML/CSS/JS, single-file, Inter from Google Fonts, full-bleed hero image, scroll-triggered reveals on every section.

## Client brief

- Client name: [CLIENT NAME]
- Project title: [PROJECT TITLE]
- One-sentence vision: [WHAT WE'RE MAKING AND WHY]
- Deliverables: [LIST]
- Production days: [#]
- Total price: [$ X,XXX]
- Timeline: [pre-pro / production / post / delivery]
- Tone keywords: [3-5 words]
- Target slug for filename: [client-shortname-projecttype]

## What to produce

Create a folder named [target slug]/ with these files:
1. index.html — full single page
2. styles.css — all styles
3. app.js — IntersectionObserver reveal animations + comment-form toggles
4. vercel.json — { "cleanUrls": true }
5. README.md — one-paragraph project note + deploy instructions
6. images/.gitkeep — empty so the folder commits

Include <meta name="robots" content="noindex, nofollow"> in <head>.

## Page anatomy (use these sections, in order)

1. Hero — full-bleed image (images/hero.jpg) + Twenty One Media wordmark + h1 client name + tagline + animated scroll cue
2. The Vision — section label + h2 + 3-5 sentence pitch in first-person plural
3. Storyboard — 5-7 scene cards (image, time range, shot list, audio note, optional pull quote, "Leave a note" button toggling a comment form)
4. Interview Plan (optional) — voices + sample questions
5. Investment — single-tier card or three-tier (Starter / Recommended / Premium) with the recommended tier elevated
6. Timeline — vertical timeline nodes: Pre-Production, Production, Post-Production, Delivery
7. About + CTA — Twenty1 bio + Schedule a Call button (Calendly placeholder) + mailto

## Visual rules

- Background #0a0a0a, text #f5f5f5, accent #ff6b35
- Inter 400 / 600 / 700 / 900
- Section padding 8rem vertical, container max-width 960px
- Reveal: opacity 0→1 + translateY(40px)→0, threshold 0.15
- Hero image gets a 60% darkening gradient overlay
- Mobile-first; everything must look right at 375px wide

## Image generation

Do not write image-fetching code. After the HTML/CSS/JS is done, output a numbered list of Higgsfield CLI commands I can run to generate each image. Use Nano Banana Pro 2, 16:9 for hero and scenes, with vivid cinematic prompts grounded in this project's tone keywords.

## Polish

After the page is built, invoke /impeccable for a design review and apply every recommendation that doesn't change the page anatomy.

## Output

Give me:
1. The folder ready to push (git init + commit + GitHub repo create + push)
2. The Higgsfield commands for each image
3. The Vercel deploy command
4. The expected live URL pattern

Build it.

Skip the typing

Get the starter repo.

Same recipe, pre-wired. The repo bundles the page skeleton, the prompt, a Deploy-to-Vercel button, and a 6-step quickstart. Drop your email and I’ll send it.

index.html / styles.css / app.js skeleton
prompt.md ready to paste into Claude Code
vercel.json + Deploy-to-Vercel button
Sample Higgsfield prompts for hero + scene images
README quickstart you can ship to your team

Want me to build yours?

If you’d rather skip the build entirely and have a Twenty1-grade proposal page made for your next pitch, book a 30-minute call. I’ll scope it on the call and turn it around in a week.

Book a call