Skip to content
UXClaim
Design Systems

Skynet Site System

Master playbook for landing page design from 60 shipped sites with niche design tokens, conversion funnels, and client variant switchers.

View source More in Design Systems

What it does

Skynet Site System is a distilled playbook extracted from 60 actually-shipped client websites. It provides designers, agencies, and freelancers with a repeatable 8-phase build flow, vetted design tokens for 17 industry niches, and proven conversion patterns—not theory.

How it works

The system guides you through: input collection → competitor research → design token selection → 3-variant generation → stack choice → build execution → conversion guardrails → pitch delivery. Every client demo ships in three distinct visual directions (Editorial, Cinematic, Bold) with a sticky switcher letting clients preview variants before committing.

Key components

  • 17 niche design token sets with color palettes and font pairs (wedding, medical, legal, HVAC, beauty, fintech, SaaS)
  • 3-variant lock pattern ensuring design flexibility without scope creep
  • 8-section conversion funnel from hero through lead-magnet
  • Scope question templates per niche (~5-8 questions, validated 70% reply rate)
  • Competitor research agent prompts for parallel research
  • 13 hard rules covering photo sourcing, testimonials, SEO drip strategy, and metrics credibility

Use cases

Freelancers building speculative sites on Upwork/Fiverr, agencies scaling faster, AI coding agents (Claude Code, Cursor, v0) automating brief-to-demo delivery, teams learning conversion patterns from production examples.

Who benefits

Product designers moving into freelance web work, agencies standardizing process, design systems teams extracting real-world patterns, UX teams optimizing landing page flows.

Frequently asked questions

What are the 8 phases in Skynet?
1) Inputs (brief/niche/budget), 2) Research (3 parallel agents), 3) Design token lock, 3.5) 3-variant lock, 3.6) Sticky switcher, 4) Stack pick, 5) Build, 6) Premium signatures, 7) Conversion guardrails (Lighthouse ≥90, LCP ≤2.5s), 8) Ship + pitch. Total time: 2-5 hours depending on complexity.
How do the 3 design variants work?
V1 Editorial uses magazine grids and serif typography. V2 Cinematic adds animation or 3D elements with dark themes. V3 Bold/Minimal goes glassmorphic or brutalist with type-forward design. All three ship with a sticky top-right switcher that uses URL hash routing (#v1, #v2, #v3) so clients can share links to their preferred version.
Can I use this for WordPress sites?
Yes. Build a Vercel demo first following the full playbook (Phase 1-2), then in Phase 2 upsell port it to WordPress with Divi, Kadence, or custom theme. This lets clients see the design before backend work.
What are design tokens in Skynet?
Niche-specific color palettes and font pairs for 17 industries. Wedding sites use warm beige + claret + serif; medical sites use forest green + mint + modern sans. Each pairing is validated from real shipped work, not defaults. Full lookup table in design-tokens.md.
How long does a Skynet build take?
Phase 1-3 (input/research/tokens): 20 minutes. Phase 5 (build): 2-5 hours depending on custom elements. Phase 6-8 (signatures/checks/ship): 30 minutes. Static HTML builds are fastest; Next.js + R3F cinematic builds take the longer end.
What's the sticky variant switcher?
A fixed UI element (top-right, z-index 99) showing 3 pills for V1/V2/V3. On desktop it stays visible; on mobile it collapses to a floating circle that opens a modal. It uses URL hash routing so clients can share links (#v1, #v2, #v3) and disabled on production after client selection.
Does Skynet work with Claude Code and AI agents?
Yes. Clone into ~/.claude/skills/skynet-site and trigger with /skynet-site in Claude Code. Paste any client brief, Upwork JD, or Fiverr note. The master prompt and templates scale across Claude Code, Cursor, v0, and Lovable.
What are the 13 hard rules?
Key ones: build first pitch second (10× higher close), use niche-tuned design tokens, real photos only (not Picsum), unique testimonials per niche, 5-8 scope questions (not 16), noindex spec demos 90 days, drip publish 3-5/week not batch, foot credit always, first-person if solo, real metrics only, and log image rotations.

Glossary

3-Variant Lock
A design pattern where every client demo ships in three distinct visual directions (Editorial/magazine, Cinematic/animated, Bold/minimal) allowing clients to preview options before commitment without scope creep.
Design Token
A niche-specific set of colors, typography, and spacing rules. Skynet provides 17 validated token sets (wedding, medical, legal, etc.) extracted from shipped production work, replacing generic defaults.
Sticky Switcher
A fixed UI element positioned top-right that lets users toggle between the 3 design variants via clickable pills. Uses URL hash routing (#v1, #v2, #v3) for shareability and collapses to mobile-friendly format on small screens.
Spec Demo
A speculative website build created before a formal client engagement, used to showcase capability and close the sale. Skynet's framework standardizes spec demos with built-in variants and pitch flow.
Conversion Funnel
An 8-section page structure (hero, trust, services, about, process, testimonials, gallery, FAQ, lead magnet, footer) designed to move visitors from awareness to lead capture following proven pattern from 60+ shipped sites.

More in Design Systems

All →
Design Systems

Arcade Prototyper

Build interactive HTML prototypes using DevRev's production design system and Arcade components in Claude Code.

asundiev-devrev
Design Systems

Awesome Design Skill

Access 54+ brand design systems (Linear, Apple, Stripe, Vercel) for Claude Code UI development with complete design specifications.