Skynet Site — Master Website-Design System

Goal: ship a client-ready demo + pitch in one session. Not template fill. Not generic. Niche-tuned, conversion-optimized, deploy-ready, SEO-safe.

Source patterns: 9 shipped builds. See case-studies.md for full table.

INPUTS — ask if missing

1. Brief (Upwork JD / Fiverr buyer note / email / verbal)
2. Niche (wedding / wellness / medical / luxury rental / law / HVAC / etc.)
3. Client name OR placeholder OK
4. Budget signal (anchors pricing tier)
5. Timeline

If brief missing → use AskUserQuestion. Don't proceed without niche + brief.

EXECUTION FLOW (one session)

PHASE 1 — Research (parallel, 5-10 min)

Launch 3 Agent calls in ONE message:

• Agent A — Competitor teardown. 8-12 competitors in niche. Extract: palette, fonts, hero pattern, CTA style, pricing visibility, sameness gaps.
• Agent B — Niche taste signals. Wedding ≠ corporate. Healthcare ≠ SaaS. Find what BUYERS in this niche perceive as "premium". Ref Awwwards, Behance, Dribbble for niche.
• Agent C — Keyword + EEAT. Primary city + service + intent keywords. Schema markup needed (LocalBusiness / FAQPage / Organization / Service). Trust signals niche expects (license #, certifications, years, photos).

Output → docs/RESEARCH.md. Use it. Don't ignore it.

PHASE 2 — Design Token Lock

Pick palette + font pair from niche match table (see design-tokens.md). DO NOT default to navy+gold for everything — that's corporate, not luxury. Wedding = warm beige + claret + Instrument Serif. Medical = forest + mint + Cormorant Garamond. Wellness DNA = bone + sage OR cobalt + acid yellow.

Output 1 design.md w/ tokens, never 5 random variants UNLESS budget ≥$1K AND brief unclear (then ship 5 variants like Wellness DNA play).

PHASE 3 — Stack Pick

Never ship raw template clone — always niche-tune palette + fonts + copy + photos.

PHASE 3.5 — 3-Variant Lock (MANDATORY)

ALWAYS ship 3 different landing-page variants per client. No exceptions. Client picks 1 → polish + ship. Pattern validated across Pretty Potty (5 variants → V4 picked), Wellness DNA (5 variants), CPG Synergy (5 variants w/ floating switcher), Vow Sanctuary (3 iterations).

Why: Client cannot articulate taste in advance. Showing 3 cuts the back-and-forth from 5+ revisions to 1 pick + 1 polish round. Doubles close rate vs single-variant pitches.

3 variants must differ on AXIS not detail:

Pick 3 axes that span the niche's taste range. NEVER 3 variants that look ~80% the same — defeats the point.

PHASE 3.6 — Sticky Variant Switcher (MANDATORY)

Every multi-variant build = sticky variant switcher visible to client. Default placement: top-right header OR floating top-right pill (per recipes/variant-switcher.md).

Spec:

• Position: position: fixed; top: 20px; right: 20px; z-index: 99
• Three labeled pills (V1 / V2 / V3) OR grid icon → dropdown
• Active state: filled w/ accent color
• Persist via URL hash #v1 #v2 #v3 so client can share specific variant link
• Mobile: collapse to bottom-right floating button → modal sheet
• Kill on production after client picks (just delete the component, single variant remains)

Live examples:

• Pretty Potty — pretty-potty.vercel.app grid icon top-right
• Wellness DNA — skynetlabs-wellness-demo.vercel.app <VariantNav> top
• CPG Synergy — floating design-switcher toolbar

Code recipe: recipes/variant-switcher.md.

PHASE 4 — Build (locked 8-section funnel)

Order non-negotiable. Buyers expect this rhythm.

1. Hero — cinematic (R3F mesh OR MP4 loop OR Ken Burns image). H1 = niche + city + outcome. Sub-H = trust shorthand. 2 CTAs (primary form + secondary tel:). Sticky mobile call bar bottom.
2. Trust strip — logos / press / certifications / years / jobs done / 5-star. ALWAYS show.
3. Services grid — 6 cards × icon + 2 lines + mini CTA. Real services from brief, not generic.
4. About — first-person voice if solo founder, "we" only if team. Italic dropcap. Asymmetric photo stack.
5. Process timeline — 3-4 steps "How it works". Reduce decision friction.
6. Testimonials carousel — 6 cards w/ photo + city + service. NEVER reuse same testimonial across niches (Skynet 20-niche bug).
7. Photo gallery — real work, before/after where applicable. Unsplash CDN labeled per niche, NOT Picsum.
8. FAQ accordion — 6-8 niche-real Qs. JSON-LD FAQPage schema.
9. Lead-magnet block — gated PDF / waitlist / quote → email capture. Web3Forms or Formspree.
10. Footer CTA — form + tel: + map. Repeat primary CTA.

Plus: exit-intent modal (desktop, 1× session), sticky header CTA after hero scrolls past.

PHASE 5 — Premium Signatures (pick 4-6, niche-fit)

Vow Sanctuary signatures — reusable:

• 196px italic display headline w/ accent highlighter strip behind one word (skewed -3deg)
• Giant background numerals 01/02/03 at 5% opacity per section
• Ken Burns 22s slow zoom on hero + final CTA images
• Film grain SVG turbulence overlay (35% opacity, mix-blend overlay)
• Marquee scrolling brand band (38s linear, ✦ separators)
• Mouse-follow cursor orb (raf, 0.14 easing)
• Italic dropcap on About paragraph (4.6em, accent color)
• Asymmetric image stack (img2 overlaps img1, -120px offset, 8px paper border)
• Inline CTA: arrow + label + italic split (→ Inquire — begin your vows)
• Editorial pricing table w/ hairline dividers (NOT gold ribbon cards)
• Logo monogram italic Instrument Serif

Skip if niche = HVAC/plumbing (overdesigned hurts conversion). Apply heavily if niche = wedding/luxury/wellness/photography.

PHASE 6 — Conversion Guardrails

• Lighthouse mobile Perf ≥90, LCP ≤2.5s
• Hero loads <1s on fast connection (priority hint + preload)
• Tap targets ≥48px
• Form ≤6 fields
• Primary CTA visible every viewport scroll
• Phone link tel:+1... w/ click tracking
• DemoBadge sticky bottom-right: "Built by SkynetLabs ↗"

PHASE 7 — SEO + Compliance

• robots.txt + sitemap.xml + vercel.json (cache headers + security)
• Spec demo: noindex,nofollow 90 days minimum (Feb 2026 SpamBrain)
• LocalBusiness + FAQPage + Organization JSON-LD
• og:image 1200×630 (render via existing LI card pipeline if available)
• Canonical URL, meta description, twitter card
• Footer disclosure: "Demo by SkynetLabs · skynetjoe.com" (legal+SEO shield)

PHASE 8 — Ship + Pitch

# 1. Repo
gh repo create skynetlabs-<niche>-demo --public --license mit --description "..."
git init && git add . && git commit -m "feat: initial demo"
git push

# 2. Vercel
vercel --prod
# Confirm clean alias: skynetlabs-<niche>-demo.vercel.app

Send pitch using pitch-template.md. Always:

• Demo URL in first 3 lines
• Bullet list of what's built using THEIR vocabulary from brief
• 5-8 scope-unlocking questions (see scope-questions.md per niche)
• 1 bonus pricing-lever Q
• Soft close: "live on your domain inside the week"
• NO fee quoted upfront

OUTPUTS

GITHUB/skynetlabs-<niche>-demo/
├── index.html (or app/ if Next.js)
├── docs/
│   ├── RESEARCH.md         # Phase 1 output
│   ├── DESIGN-TOKENS.md    # Phase 2 output
│   ├── CLIENT-PITCH.md     # full pitch log + scope Qs
│   ├── CLIENT-MESSAGE.md