website-one-shot

Website One-Shot

Generate a complete, polished demo website for a business — from a URL or business name to a live Vercel link. Built for sales demos: research-driven, conversion-optimized, visually distinctive.

Overview

This skill handles everything: scraping existing sites, researching the business from public sources, running parallel AI agents for content/design/structure, assembling a complete Next.js app, letting you review it locally, and deploying to Vercel.

Tech stack: Next.js 15 (App Router) · TypeScript · Tailwind CSS v4 · ShadCN/UI · Google Fonts · Vercel

Output: A shareable https://[business-name].vercel.app URL you can send to the prospect.

---

Phase 1: Discovery

Determine which mode applies:

Mode A — Business has an existing website: If the user provides a URL, proceed here.

1. Use WebFetch to scrape the URL. Extract and record in BRIEF.md:

   • Business name, tagline
   • Services / products offered
   • Existing color palette (hex values if visible)
   • Tone: formal / casual / playful / luxury
   • Navigation structure and existing pages
   • Contact info, phone, address, social links
   • Any copy worth keeping (strong headlines, compelling descriptions)

2. Before asking the user anything, run autonomous research to fill gaps. Record all findings in BRIEF.md with [FOUND], [PARTIAL], or [MISSING] status. Read references/discovery.md for the full research checklist and search query patterns.

3. After research: identify which discovery questions remain [MISSING]. Ask only those — batched in a single message. Target ≤ 4 questions. See references/discovery.md Part 2 for the question bank.

4. Update BRIEF.md with the user's answers.

Mode B — No existing website (user provides business name + industry + location):

1. Confirm: business name, industry, city/location, and the primary goal of the site.
2. Run the same autonomous research as Mode A (see references/discovery.md).
3. Ask only unanswered questions — expect ~6–8 since no site exists to scrape.
4. Compile BRIEF.md — note clearly this is a greenfield site.

Both modes produce the same BRIEF.md format. All subsequent phases are identical.

---

Phase 2: Synthesis

1. Read BRIEF.md and references/aesthetics.md
2. Classify the business into an industry category
3. Select the appropriate aesthetic profile
4. Write PROJECT-PLAN.md in the current working directory:
   • Pages to create (Home page + 2–4 additional pages)
   • Key sections per page, in order
   • Chosen color palette (primary, secondary, accent, neutral — with hex values)
   • Typography pairing (display font + body font, both from Google Fonts)
   • Aesthetic theme name
   • Selected wow effects: leave as TBD — pending user selection in Phase 3
   • Primary CTA text and goal
   • Skill file directory path (so agents can find reference files)

---

Phase 3: Wow Effect Selection

Present the user with 5 wow-effect combinations to choose from. Each option is a complete "hero effect + scroll effect + extras" bundle — not individual effects in isolation.

How to generate the 5 options

Read references/aesthetics.md and references/wow-effects.md. Using the aesthetic profile chosen in Phase 2, build 5 distinct combos:

1. Option 1 — Profile Default: The recommended combo from aesthetics.md for this profile (e.g. for professional-authority: particle network + staggered fade-up + glassmorphism nav).
2. Option 2 — Subtle / Minimal: A toned-down version. Fewer or lighter effects — prioritizes speed and simplicity. Good for users who want polish without spectacle.
3. Option 3 — Bold / Dramatic: A more theatrical version. Pulls in effects from higher-energy profiles (e.g. GSAP text-split reveals, horizontal scroll sections, ambient glow layers).
4. Option 4 — Cross-Profile Mix: Borrows the hero effect from a different aesthetic profile that still fits the brand. Creates a unique feel that doesn't follow the standard template.
5. Option 5 — Animation Library Showcase: Uses Framer Motion or GSAP more aggressively — scroll-scrubbed parallax, staggered variant cascades, layout animations. For users who want to show off.

Presentation format

Use AskUserQuestion with a single question. Present each option with:

• A short name (2–3 words)
• A one-sentence description of the visual experience
• The specific effects included (hero / scroll / extras)

The 4 options in AskUserQuestion should be:

• Options 1–4 from the list above (pick the 4 most distinct/relevant combos)
• The user can select "Other" to access Option 5, request 5 new options, or describe a custom combination

If the user asks for 5 more options, generate 5 completely new combos (mix profiles, swap hero/scroll pairings, try different animation libraries) and present again in the same format. Repeat until the user is satisfied.

If the user describes a custom combination, validate that it's implementable with the effects in wow-effects.md and confirm back to them.

After selection

Update PROJECT-PLAN.md:

• Replace the TBD wow effects field with the user's chosen combo
• Include: hero effect name, scroll effect name, extras, and which animation library to use (if any beyond CSS)

Noise texture overlay and micro-interactions are always included regardless of selection (except dependable-local skips noise texture). Do not present these as choices — they're automatic.

---

Phase 4: Parallel Agent Generation

Spawn 3 Task agents in a single message (all 3 tool calls in one response for true parallelism):

Agent 1 — Content (references/agents/content-agent.md):

• Reads: BRIEF.md + PROJECT-PLAN.md + skill's references/landing-page-principles.md
• Produces: CONTENT.md — all page copy, headlines, CTAs, testimonials, section by section

Agent 2 — Design (references/agents/design-agent.md):

• Reads: BRIEF.md + PROJECT-PLAN.md + skill's references/wow-effects.md + skill's references/landing-page-principles.md
• Produces: DESIGN.md — Tailwind config, CSS variables, font imports, component styles, selected wow effect specs

Agent 3 — Structure (references/agents/structure-agent.md):

• Reads: BRIEF.md + PROJECT-PLAN.md + skill's references/wow-effects.md
• Produces: STRUCTURE.md — Next.js App Router file tree, component inventory with TypeScript props, interactive component specs

Do NOT pause or wait here — the agents run in the background and the orchestrator should immediately proceed to Phase 5 once all three agents have returned their results.

---

Phase 5: Assembly

Spawn 1 Task agent (references/agents/merger-agent.md):

• Reads: BRIEF.md + CONTENT.md + DESIGN.md + STRUCTURE.md
• Creates the complete Next.js project in ./[business-name-slug]/
• No TODOs, no placeholder content — the output must be demo-ready

---

Phase 6: Proofread & QA

Spawn 1 Task agent (references/agents/proofread-agent.md):

• Reads: BRIEF.md + PROJECT-PLAN.md + CONTENT.md + DESIGN.md + STRUCTURE.md
• Runs npm run build inside ./[business-name-slug]/ to catch compile errors
• Reviews all generated source files for: broken imports, missing components, TypeScript errors, hardcoded placeholder text, color mismatches vs DESIGN.md, inconsistent spacing/layout, accessibility issues, and visual glitches (e.g. text-on-text contrast, overlapping elements, missing responsive breakpoints)
• Fixes all issues directly — no TODOs, no "fix later" comments
• Runs npm run build again after fixes to confirm a clean build

Do NOT pause here. Proceed immediately to Phase 7 once the proofread agent finishes.

---

Phase 7: Dev Build & Local Preview

cd [business-name-slug] && npm run dev

The build was already verified by the proofread agent. Start the dev server immediately and tell the user: "Your site is running at http://localhost:3000 — take a look and let me know if you'd like any changes, or give me the go-ahead to deploy."

Apply any requested changes and re-verify the build passes before moving on.

---

Phase 8: Deploy to Vercel

Once the user confirms they're happy with the local preview:

1. Show a brief summary: pages created, aesthetic profile used, wow effects implemented, Google Fonts used
2. Deploy:

   vercel --prod
   

3. Output the live URL prominently — this is the shareable link for the sales demo

---

Reference Files

All reference files are relative to this skill's directory:

• references/discovery.md — research checklist + gap-filling question bank
• references/aesthetics.md — industry profiles with color systems, typography, wow effect recommendations
• references/wow-effects.md — interactive effect catalogue (particle network, scroll reveals, glassmorphism, etc.)
• references/landing-page-principles.md — conversion design best practices (section order, CTA rules, visual hierarchy, mobile-first)
• references/agents/content-agent.md — content generation agent prompt
• references/agents/design-agent.md — design system agent prompt
• references/agents/structure-agent.md — app structure agent prompt
• references/agents/merger-agent.md — final assembly agent prompt
• references/agents/proofread-agent.md — QA / proofread agent prompt

When spawning agents, pass the full path to the relevant agent reference file in the Task prompt so the agent knows where to find its instructions.