HyperBlue

A Claude Code skill for building premium, brand-aware React/Next.js frontends that feel designed by a senior UI engineer — not generated by AI.

Created by Incredible Visibility.

Features

• Interactive discovery — click-to-choose options instead of typing long descriptions. HyperBlue asks smart questions with selectable answers to nail your brand direction fast.
• Competitive research — analyzes 5-8 players in your industry to inform design decisions before writing a single line of code.
• Sitemap architecture — generates an optimal page structure (minimal, standard, or comprehensive) that maps directly to your Next.js routing.
• Brand token system — converts your assets into a complete design token set: colors, typography, spacing, shadows, and brand-specific dark mode.
• AI bias correction — 30+ rules that eliminate generic LLM design patterns (the purple gradient, the centered hero, the "John Doe" placeholder data).
• Animation personality — motion that matches your brand archetype (refined, energetic, technical, or editorial) instead of generic fade-ins.
• 3D animation support — CSS 3D effects (perspective tilts, depth layers, card flips) at high motion intensity, with opt-in React Three Fiber scenes for product showcases, particle heroes, and immersive experiences.
• Contextual asset sourcing — when you don't supply images, HyperBlue searches Unsplash and Pexels for industry-relevant photography and video that matches your brand's visual tone. No more random stock photos.
• Accessibility built in — WCAG 2.1 AA compliance, keyboard navigation, semantic HTML, and prefers-reduced-motion support in every output.
• Post-build refinement — seven targeted modes (Review, Typeset, Arrange, Palette, Animate, Harden, Accessibility) that improve existing code without re-running the full pipeline. Fix just the typography, just the colors, or just the missing states.

The Problem

AI-generated frontends all look the same. You've seen it: the centered hero with a purple gradient button, Inter font everywhere, generic 3-column card grid, "John Doe" placeholder data, and that unmistakable "AI purple" glow. It looks like a template, not a brand.

HyperBlue fixes this by injecting brand awareness, competitive research, and design engineering principles into every line of code Claude writes.

Without HyperBlue vs. With HyperBlue

| | Without | With HyperBlue | |---|---|---| | Colors | Default purple/blue AI palette | Extracted from your brand assets and calibrated to your industry | | Typography | Inter, every time | Brand-appropriate typefaces (Geist, Satoshi, Cabinet Grotesk, etc.) | | Layout | Centered hero, 3-column cards | Asymmetric grids, split-screens, zig-zag layouts based on brand personality | | Copy | "Get Started", "Unleash the power of" | Brand-voiced microcopy that sounds like your copywriter wrote it | | Placeholder data | "John Doe", "99.99%", "$1,234" | Realistic, organic data: "Marcus Reilly", "47.2%", "$1,847.30" | | Dark mode | Colors inverted | Brand-specific dark palette (warm charcoal for luxury, navy for corporate, true dark for dev tools) | | States | Happy path only | Loading skeletons, empty states, error messages — all brand-voiced | | Animations | Generic fade-in | Personality-matched motion (refined for luxury, snappy for SaaS, bouncy for consumer) | | 3D | Not supported | CSS 3D card tilts and depth layers; opt-in React Three Fiber for product showcases and immersive scenes | | Images | Random stock or broken Unsplash links | Contextually sourced from Unsplash/Pexels, matched to your industry and brand tone | | Refinement | Regenerate everything from scratch | Targeted fixes — typography, spacing, colors, motion, or states — on existing code |

How It Works

You describe your project
        |
        v
  Phase 1: DISCOVERY
  Competitive research + brand intake + content strategy + sitemap architecture
  (Interactive — you pick options, not type paragraphs)
        |
        v
  Phase 2: BRAND TOKENS
  Colors, typography, spacing, shadows, dark mode — all from YOUR brand
        |
        v
  Phase 3: CORE ENGINE
  Bias correction rules eliminate generic AI patterns
        |
        v
  Phase 4: DESIGN LAYERS
  Animation, accessibility, responsive behavior, component theming
        |
        v
  Phase 5: EXTENSIONS (optional)
  Bento grids, scroll animations, 3D scenes, creative arsenal
        |
        v
  Design system + multi-page site (not a single-page landing page)
  Foundation first → pages one by one → expandable for the future
        |
        v
  Phase 6: REFINEMENT (on existing code)
  Review, Typeset, Arrange, Palette, Animate, Harden, Accessibility
  Fix specific design dimensions without re-running the full pipeline

Requirements

• Claude Code CLI installed and authenticated
• A Claude Pro, Team, or Enterprise plan

Installation

Option 1: Copy the skill file into your Claude Code skills directory:

# Project-level (applies to one project)
mkdir -p .claude/skills
cp skills/skill.md /path/to/your/project/.claude/skills/hyperblue.md

# Global (available in all projects)
mkdir -p ~/.claude/skills
cp skills/skill.md ~/.claude/skills/hyperblue.md

Option 2: Reference it from your CLAUDE.md by adding a pointer to the skill file in your project's CLAUDE.md.

HyperBlue activates automatically when Claude detects frontend/UI work — no slash command needed.

How a Full Build Works

HyperBlue follows a strict phase-gate workflow. Each phase produces a deliverable that you confirm before it moves on. Here's what a full conversation looks like:

YOU:  Build a website for a luxury perfume e-commerce brand based in Dubai.
      Here's our logo and brand colors: #1A1A2E, #C9A96E, #F5F0E8.

┌─ PHASE 1A: COMPETITIVE RESEARCH ─────────────────────────────────────┐
│                                                                       │
│  CLAUDE: I researched the luxury fragrance market. Here are the top   │
│  players and their visual signatures:                                 │
│                                                                       │
│  → [Option 1] Le Labo — minimal, apothecary aesthetic                │
│  → [Option 2] Byredo — clean editorial, lots of whitespace           │
│  → [Option 3] Amouage — ornate, gold accents, rich photography       │
│  → [Option 4] Initio — dark, bold, modern luxury                     │
│                                                                       │
│  Which feel closest to your desired positioning? (pick 1-3)          │
│                                                                       │
│  YOU: 2 and 3                                                        │
│                                                                       │
│  ✓ Phase 1A complete — design anchors locked.                        │
└───────────────────────────────────────────────────────────────────────┘

┌─ PHASE 1B: BRAND INTAKE ─────────────────────────────────────────────┐
│                                                                       │
│  CLAUDE: Based on your logo and colors, here's what I'm seeing:      │
│  deep navy base, warm gold accent, cream surface. The logo has        │
│  geometric character — I'll use sharper radii and structured layouts. │
│                                                                       │
│  Brand personality — which fits best?                                │
│  → [Option 1] Minimal & Clean                                        │
│  → [Option 2] Rich & Ornate                                          │
│  → [Option 3] Bold & Expressive                                      │
│                                                                       │
│  YOU: Minimal & Clean                                                │
│                                                                       │
│  ✓ Phase 1B complete — brand direction confirmed.                    │
└───────────────────────────────────────────────────────────────────────┘

┌─ PHASE 1C: CONTENT STRATEGY ─────────────────────────────────────────┐
│                                                                       │
│  CLAUDE: For a luxury perfume brand, I'd recommend the Luxury voice: │
│  minimal, evocative copy. Here's how it sounds:                      │
│                                                                       │
│  CTA button: "Discover" (not "Shop Now")                             │
│  Empty cart: "Your collection awaits" (not "Your cart is empty")     │
│  Error: "We couldn't reach our atelier" (not "Server error")        │
│                                                                       │
│  Does this voice feel right?                                         │
│                                                                       │
│  YOU: Yes, perfect.                                                  │
│                                                                       │
│  ✓ Phase 1C complete — brand voice locked.                           │
└───────────────────────────────────────────────────────────────────────┘

┌─ PHASE 1D: SITEMAP ──────────────────────────────────────────────────┐
│                                                                       │
│  CLAUDE: Here are three sitemap options:                             │
│                                                                       │
│  → [Minimal] Home, Shop, About, Contact                             │
│  → [Standard] Home, Collections, Product pages, About, Journal,     │
│    Contact                                                            │
│  → [Comprehensive] Home, Collections, Products, About/Story,        │
│    Journal/Blog, Gifting, Store Locator, Contact, Account            │
│