AI-Build Client Sites: Design, CMS, Vercel Host & SEO Upsell
Prompt Claude Code to generate design variants from client refs, build full site with Supabase/Clerk CMS for self-edits, deploy on Vercel previews, and upsell $40/mo SEO via Arval automated blogs.
Generate & Iterate Design Variants for Fast Client Buy-In
Start in a fresh folder opened in Claude Code (via Cursor extension or desktop app). Prompt with client site assets, logo, copy, reference images, and constraints like light mode, sans-serif fonts (avoid Roboto/Inter), no gradients, subtle animations. Bypass permissions for one-shot outputs. Result: Hero with CTAs, project cards using exact images, services grid, footer—all matching brand in minutes.
Iterate by:
- Linking Untitled UI components (copy install code, paste into prompt) for polished buttons/inputs.
- Redesign logo via ChatGPT (DALL-E 3): Upload old logo + site screenshot, request black variant matching new style; Claude Code removes white backgrounds.
- Reference Pinterest screenshots (e.g., hero layouts, bento grids) dragged into prompts: "Redesign hero to match attached image."
- Request 3 variants on new branches/ports, push to Vercel previews via CLI (connect once, auto-deploys).
Use Magic Path extension to capture elements, generate layout/style variants. Or Impeccable's 23 design commands for more. Client picks one (e.g., #2 with Untitled UI)—power lies in 3+ options to avoid AI-looking layouts.
Build Multi-Page Site + Custom CMS Without Overengineering
Extend chosen variant: Prompt to replicate existing sitemap pages (about, projects, publications, contact) using same copy/images. Creates real routes: About lists founders; projects have detail pages (e.g., Watermark); publications grid.
For CMS (/admin): Prompt for non-technical dashboard matching site design. Features:
- Edit page copy/SEO (title, description, OG images).
- Drag-drop image swaps.
- Blog (journal) with drafts/publish/preview. No roles/workflows except blog drafts.
Stack:
- Clerk (free Google auth) + Supabase (storage/Postgres) via Vercel Marketplace: Install, link accounts, add env vars (Postgres URL, R/O key, secret).
- Run provided SQL schema in Supabase editor.
- Auth via email/Google; edit home/studio/services inline.
Outcome: Client updates without code access; blog integrates seamlessly (rich text preserves styles).
Upsell SEO Service via Automated Content Pipeline
Post-launch, pitch monthly SEO: Use Arval solo ($40/mo) to generate articles from keywords/YouTube/news. Link client site for internal links; auto-adds images (3-4/article with alt text), YouTube embeds.
Prep: Prompt Claude Code for 100 keywords + LLM prompts grouped by intent (brand, services, geo-projects like Miami/Puerto Rico).
Workflow: Input keyword → Arval generates title/keywords/article → Copy-paste to CMS journal → Publish. Scale to 100 posts/week. Arval case studies prove traffic gains; bundle into client pricing for recurring revenue.