Visual Upgrade Skill

Transform any generic/template website into a premium, distinctive visual experience. This skill codifies the process used on BankPro (fintech globe) and PolyShark (arcade shark) — applicable to any brand.

When to Use

• Client has a plain/template website that needs a premium facelift
• Converting a static HTML site to a modern React/Next.js app
• Adding 3D elements, glassmorphism, and animation to an existing site

Process

Phase 1: Brand Direction & ASCII Mockup (Cheap Approval Gate)

Always start here. Never skip to implementation.

1. Fetch the deployed site — extract all content (sections, copy, features, pricing)
2. Define brand direction — pick a visual metaphor that matches the product:
   • BankPro → "Global Finance" → gold/teal, 3D globe
   • PolyShark → "Deep Ocean Predator" → electric blue/cyan, arcade wireframe shark
   • Pattern: [Product Domain] → [Visual Metaphor] → [Color Palette + 3D Element]
3. Propose color palette as CSS custom properties:
   • Backgrounds: --abyss, --deep, --surface (dark gradient progression)
   • Primary accent, secondary accent, warning
   • Bull/bear or success/error states
   • Glass tokens: --glass, --glass-h, --glass-b, --glass-bh
4. Propose typography — always 3 fonts, never generic:
   • Display: aggressive/distinctive (Clash Display, Sora, Space Grotesk)
   • Body: clean readable (DM Sans, Inter is OK for body only)
   • Mono: for data (JetBrains Mono, IBM Plex Mono, Fira Code)
5. Present 2 options for 3D hero element in ASCII:
   • Option A: Literal/representational (shark, globe, product screenshot)
   • Option B: Abstract/geometric (wireframe, particles, orb)
6. Output full ASCII wireframe showing all sections
7. Wait for user approval before proceeding

Phase 2: Single-File HTML Prototype

Create a self-contained HTML file with everything inline.

Required design system (CSS variables):

:root {
  /* Backgrounds */
  --abyss: #0X0X0X;  --deep: #0X0X0X;  --surface: #0X0X0X;
  /* Accents */
  --primary: #XXXXXX;  --secondary: #XXXXXX;  --warning: #XXXXXX;
  /* States */
  --bullish: #00E676;  --bearish: #FF5252;
  /* Text */
  --text-hero: #fff;  --text-pri: #E0E0F0;  --text-sec: #7A7A9A;  --text-mute: #44445A;
  /* Glass */
  --glass: rgba(255,255,255,.035);  --glass-h: rgba(255,255,255,.06);
  --glass-b: rgba(255,255,255,.07);  --glass-bh: rgba(255,255,255,.12);
  /* Radius */
  --r-sm: 8px;  --r-md: 12px;  --r-lg: 16px;  --r-xl: 24px;  --r-pill: 100px;
  /* Fonts */
  --f-display: 'XXX', sans-serif;  --f-body: 'XXX', sans-serif;  --f-mono: 'XXX', monospace;
}

Required elements:

• Fixed nav with backdrop-blur glass
• CSS particle layer (40+ particles, rising animation)
• 3 animated fog/blur orbs (different sizes, colors, drift speeds)
• CRT scanline overlay (subtle, ~0.4 opacity)
• Hero section: split layout (text left, 3D canvas right)
• Three.js WebGL canvas with chosen 3D element
• Live data ticker (scrolling marquee, duplicated for infinite loop)
• Glass cards for features/tools
• Scroll reveal system (IntersectionObserver + translateY + stagger delays)
• Button system: .btn-primary (glow), .btn-glass (translucent), .btn-ghost (border)
• Pricing section with featured tier highlight
• FAQ in 2-column glass grid
• Multi-column footer
• Responsive breakpoints (1060px, 640px)

File location: automations/output/[ProjectName]-v2.html

Phase 3: Blender 3D Assets (Optional)

If Blender MCP is available:

1. Branded orb (PNG + MP4) — glass/holographic material
2. Hero asset render — for fallback/loading state
3. Background textures — caustics, gradients, patterns

Export to: automations/output/

Phase 4: Next.js Migration

Convert HTML prototype to modular React/Next.js.

Required structure:

[project]/website-next/
├── src/
│   ├── app/
│   │   ├── layout.tsx          (next/font setup, metadata)
│   │   ├── page.tsx            (compose all sections)
│   │   └── globals.css         (minimal resets + font import)
│   ├── components/Landing/
│   │   ├── WebGL[Element].tsx  (Three.js, 'use client')
│   │   ├── HeroSection.tsx     ('use client' for dynamic import)
│   │   ├── [Section]Section.tsx (one per section)
│   │   ├── LandingNav.tsx
│   │   ├── LandingFooter.tsx
│   │   ├── Particles.tsx       ('use client')
│   │   ├── ScrollReveal.tsx    ('use client')
│   │   ├── landing.module.css  (ALL styles)
│   │   ├── fonts.ts            (next/font exports)
│   │   └── data/
│   │       └── [section]Data.ts (typed data arrays)

Key patterns:

• CSS Modules (not Tailwind/Emotion)
• next/font for Google Fonts, CSS @import for Fontshare
• dynamic(() => import(...), { ssr: false }) for Three.js — component must be 'use client'
• Proper Three.js cleanup: cancelAnimationFrame, renderer.dispose(), scene.clear()
• Device pixel ratio: Math.min(window.devicePixelRatio, 2)
• IntersectionObserver scroll reveal with staggered delay classes

Phase 5: Verification Checklist

• HTML prototype opens in browser with all sections rendering
• 3D element animates (auto + mouse parallax)
• Particles float, fog drifts, scanlines visible
• Scroll reveals trigger on scroll
• Ticker scrolls infinitely
• Pricing toggle works
• npm run build succeeds with zero errors
• npm run dev serves correctly
• Responsive: 1440px / 768px / 375px
• No generic fonts (Inter headings, system fonts)
• Glassmorphism on all cards
• Button hover states have glow/lift

Anti-Patterns to Avoid

• Using Inter/system fonts for display headings
• Flat cards without glass/blur effects
• Static pages without any animation
• Three.js without cleanup on unmount
• ssr: false in a Server Component (must be 'use client')
• Tailwind when the project uses CSS Modules
• Hardcoding content instead of data arrays