moonshot.ai Sample

# Design Thinking
Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
Cosmic, dark, and immersive AI laboratory aesthetic. The design leverages pure black voids illuminated by sophisticated real-time WebGL shaders—god rays, lens flares, and CRT scanline effects—creating a cinematic "energy to intelligence" metaphor. The interface feels like a futuristic terminal crossed with an observatory, emphasizing depth through parallax mouse tracking and layered transparency.

## Design System
### 1. Core Style
Dark mode exclusive, shader-driven immersive backgrounds with glassmorphism UI overlays. Zero light leakage aesthetic—pure blacks dominate with luminous accents. Editorial layout with generous whitespace and asymmetric content reveals.

### 2. Color Palette
- **Background**: Pure black (#000000) to deep charcoal (#0a0a0a)
- **Primary Text**: Warm gray (#B7B7B7) to white (#FFFFFF)
- **Accent Light**: Warm white god rays (rgb(1, 0.933, 0.851) - candlelight tint)
- **UI Surfaces**: Translucent dark grays with subtle borders
- **Interactive**: White text on hover, subtle glow effects

### 3. Font Stack
- **Primary**: Noto Sans Latin (geometric sans-serif)
- **Weight**: Regular (400) for body, implied medium/bold for headers
- **Letter Spacing**: Tight (-0.07em) for display text
- **Line Height**: Generous (1.77) for readability
- **Sizing**: Relative viewport units for hero display (0.11vw scale)

### 4. Texture
- **Primary**: WebGL-generated atmospheric effects—volumetric god rays, Voronoi cell distortions, CRT pixel grids with scanline noise, radial gradient eclipses
- **Secondary**: Subtle noise overlays, glass blur backdrops for UI elements
- **Tertiary**: Abstract monochromatic imagery with high contrast

### 5. Motion Design
- **Mouse Tracking**: Parallax background shifts (trackMouse: 0.6-0.8 intensity), 3D text rotation based on cursor position
- **Scroll**: Staggered reveal animations (`.stagger-visible` classes), fade-in lifts
- **Ambient**: Continuous god ray pulsation, CRT flicker effects (uTime-based), Voronoi pattern drift
- **Interaction**: Hover lifts with soft shadow/glow transitions, magnetic button effects

## Component Guidelines
### Button
Pill-shaped or text-only ghost buttons. Minimal chrome—subtle borders (1px rgba(255,255,255,0.2)) or solid white fills. High contrast on dark backgrounds.

### Card
Dark translucent backgrounds (rgba(255,255,255,0.03) to 0.08), 12-16px border radius, subtle 1px border (rgba(255,255,255,0.1)). Hover states include y-axis translation (-4px) and box-shadow glow.

### Navigation
Fixed position, transparent background (glassmorphism on scroll optional). Horizontal layout with logo left, links center-right, language toggle far right. Language selector uses segmented pill control (EN | 中文).

### Input
Dark rounded search bars with placeholder text in muted gray. Subtle inner glow on focus.

### Typography
Display text centered, massive scale for hero (viewport relative). Body text gray (not white) to reduce eye strain on dark backgrounds. Monospace or small caps for dates/metadata.

## Distinctive Element Few-shot Examples
### 1. Hero Eclipse Shader
**Purpose:**
Immersive brand moment establishing the "Moonshot" identity through a real-time eclipse visualization with CRT distortion effects.

**Evidence:**
`section._hero_1k86s_1` containing canvas layers: gradient background, text layer with `opacity: 0.42`, god rays shader (`trackMouse: 0.61`), replicate shader for motion trails, voronoi distortion (`trackMouse: 0.8`), and retro screen CRT effects.

**Visual Rules:**
- Layout: Full viewport height (876px observed), vertically and horizontally centered content, absolute positioned canvas z-index background
- Color: Pure black canvas with warm white light sources (rgb(255, 238, 217))
- Typography: Massive centered "Moonshot AI" text (NotoSans-Latin, 0.11 relative size, -0.07 letter-spacing, #B7B7B7 fill)
- Spacing: Generous padding top (72px offset for nav), centered flex container
- Radius / border / shadow: No borders, text has soft glow via shader overlay
- Motion: 
  - God rays emit from center point tracking mouse position (uMousePos) with `mouseMomentum: 0.76`
  - Text layer rotates in 3D space based on mouse (rotateX/rotateY via vertex shader)
  - CRT scanline flicker (uTime * 20.0) and pixel grid distortion
  - Voronoi ripple distortion around mouse cursor

**Recreation Prompt:**
> Create a full-screen WebGL hero section with a pure black background. Implement a multi-layer shader pipeline: Layer 1) Radial gradient eclipse at center; Layer 2) Volumetric god rays emitting from center that track mouse position with spring physics, tinted warm white; Layer 3) Large centered "Moonshot AI" text with CRT scanline and pixel grid distortion effects; Layer 4) Voronoi noise distortion that ripples outward from mouse cursor. Add mouse parallax so text tilts in 3D space (CSS transform-style: preserve-3d). Include a muted gray tagline below and two pill-shaped CTA buttons ("Try Kimi", "Try API"). All text should use Noto Sans with tight letter-spacing.

**Structure Sketch:**
```html
<section class="hero">
  <canvas class="webgl-bg" data-shaders="gradient,godrays,voronoi,retro-screen"></canvas>
  <div class="content" style="transform-style: preserve-3d;">
    <h1 class="glitch-text">Moonshot AI</h1>
    <p class="tagline">Seeking the optimal conversion...</p>
    <div class="ctas">
      <a href="/kimi">Try Kimi</a>
      <a href="/api">Try API</a>
    </div>
  </div>
</section>
```

### 2. Research Publication Cards
**Purpose:**
Showcase latest AI research papers/models with date metadata in a scannable, premium editorial grid.

**Evidence:**
`div._cards_5tsj7_38.stagger-visible` containing anchor tags with class `_card_5tsj7_38._reveal_1x7ap_1`. Content shows dates (2026-04-20) and titles (Kimi K2.6, Agent Swarm, WorldVQA) over abstract grayscale imagery.

**Visual Rules:**
- Layout: 3-column CSS grid, equal width (411px each), 24px gaps, contained within 1280px max-width
- Color: Card backgrounds deep charcoal (#111), text white, dates in muted gray
- Typography: Dates in small uppercase/monospace (2026-04-20), titles in bold sans-serif (20-24px), left-aligned within card
- Spacing: 24px internal padding, image fills top 60% of card height (312px total height observed)
- Radius / border / shadow: 12px border radius, 1px solid rgba(255,255,255,0.1) border, subtle inner shadow
- Motion: Staggered fade-in on scroll (`.stagger-visible`), hover lift with y-axis translation and increased shadow glow

**Recreation Prompt:**
> Create a horizontal grid of three linked cards on a pure black background. Each card is 411px wide, 312px tall, with 12px border radius and 1px white/10% border. Top portion displays abstract black-and-white atmospheric imagery (cosmic/blurred textures). Bottom portion has left-aligned content: small gray date stamp (YYYY-MM-DD format) above a bold white title (e.g., "Kimi K2.6"). Cards sit on a 3-column grid with 24px gaps. Implement staggered reveal animation on scroll (opacity 0 to 1, y: 20px to 0). On hover, translateY(-4px) and add a soft white box-shadow glow (0 8px 32px rgba(255,255,255,0.1)).

**Structure Sketch:**
```html
<section id="research">
  <div class="cards-grid stagger-visible">
    <article class="research-card">
      <div class="image-wrap">
        <img src="abstract-bw.jpg" alt="">
      </div>
      <div class="content">
        <time>2026-04-20</time>
        <h3>Kimi K2.6</h3>
      </div>
    </article>
    <!-- Repeat for Agent Swarm, WorldVQA -->
  </div>
</section>
```

### 3. Doodle Editorial Cards
**Purpose:**
Display creative seasonal content (Google Doodle-style artwork) with high-color illustrations against dark backgrounds.

**Evidence:**
`section._doodle_1kwve_1` containing `div._cards_1kwve_35.stagger-visible` with child cards `_card_1kwve_35._reveal_1x7ap_1`. Content includes "April · Earth Day", "March · Music Release Anniversary" with colorful illustrations (Fauvist forest, vinyl record, Chinese New Year horses).

**Visual Rules:**
- Layout: 3-column grid, taller aspect ratio than research cards (352px height), 24px gaps
- Color: Dark card backgrounds (#1a1a1a), vibrant colorful illustrations (Matisse-style cutouts, vinyl records, red/gold horses)
- Typography: Month/theme header in white (18-20px), description in muted gray (14-16px), both left-aligned
- Spacing: Illustration occupies top 50%, text content below with 24px padding
- Radius / border / shadow: 16px border radius, subtle border, no shadow at rest
- Motion: Scroll reveal with stagger, subtle scale on hover (1.02)

**Recreation Prompt:**
> Create three editorial content cards featuring seasonal doodles. Each card has a dark charcoal background (#1a1a1a), 16px border radius, and 352px fixed height. Top half displays a colorful artistic illustration (Fauvist floral patterns, vinyl records, or cultural artwork). Bottom half contains a white header with month and theme ("April · Earth Day") and a gray descriptive paragraph. Use CSS Grid with 24px gaps. Cards reveal with staggered fade-in animation when scrolling into view. Hover effect scales card to 1.02 with smooth transition.

**Structure Sketch:**
```html
<section class="doodle-section">
  <div class="cards-container stagger-visible">
    <div class="doodle-card">
      <div class="artwork">
        <!-- Colorful illustration -->
      </div>
      <div class="text">
        <h3>April · Earth Day</h3>
        <p>A Fauvist forest honoring Matisse's cut-outs...</p>
      </div>
    </div>
    <!-- Repeat for Music, Spring Festival -->
  </div>
</section>
```

### 4. Minimal Navigation Bar
**Purpose:**
Wayfinding that disappears into the dark background while maintaining accessibility and language switching.

**Evidence:**
`nav._navbar_6esfl_1` containing logo, text links (Kimi, API, Research, Download, Careers), and language toggle buttons (EN, 中文).

**Visual Rules:**
- Layout: Fixed position top, full width, flexbox row with space-between. Height approximately 72px.
- Color: Transparent background (no blur initially, glassmorphism optional on scroll), white text links, pill-shaped language selector with active state highlighted (semi-transparent white bg)
- Typography: Noto Sans, 14-16px, regular weight, generous letter-spacing on links
- Spacing: 48px horizontal padding, 24px gap between nav items
- Radius / border / shadow: Language toggle has 20px+ border radius (pill shape), active button has rgba(255,255,255,0.1) background
- Motion: Links have opacity transition on hover (0.7 to 1.0), background blur activates on scroll

**Recreation Prompt:**
> Create a fixed top navigation bar with transparent background that spans full width. Left side: circular striped logo icon followed by "Moonshot AI" wordmark in white. Center-Right: horizontal text links (Kimi, API, Research, Download, Careers) in white with 24px gaps and 0.7 opacity increasing to 1 on hover. Far right: pill-shaped segmented control for language switching with "EN" (active, semi-transparent white background) and "中文" (inactive) options. Font: Noto Sans, 14px. Height: 72px. Add backdrop-filter blur when page is scrolled.

**Structure Sketch:**
```html
<nav class="navbar">
  <div class="brand">
    <div class="logo-icon"></div>
    <span>Moonshot AI</span>
  </div>
  <div class="links">
    <a href="/kimi">Kimi</a>
    <a href="/api">API</a>
    <a href="/research">Research</a>
    <a href="/download">Download</a>
    <a href="/careers">Careers</a>
  </div>
  <div class="language-toggle">
    <button class="active">EN</button>
    <button>中文</button>
  </div>
</nav>
```

### 5. Platform Download Grid
**Purpose:**
Multi-platform availability showcase with tabbed interface for APP, Plugin, and Desktop options.

**Evidence:**
`section#download._download_7hs7w_1` with text "APPScan to download Kimi APPPluginDesktopMac OSWindowsTry KimiTry Kimi right now". Contains 9 media elements suggesting platform icons and QR codes.

**Visual Rules:**
- Layout: Split layout—left side platform selector tabs, right side content area (QR code or download buttons)
- Color: Dark background consistent with page, white text, platform icons in white/light gray
- Typography: Section header large and centered ("Built for the future..."), platform labels smaller
- Spacing: Generous section padding (120px+ vertical), 48px between selector and content
- Radius / border / shadow: Platform selector buttons have pill shapes or minimal underline active states
- Motion: Tab switching transitions content with fade/slide, hover states on platform icons

**Recreation Prompt:**
> Create a dark-themed download section with a centered header "Built for the future. Available today." Use a split layout: left side has three tab options (APP, Plugin, Desktop) with icons, right side shows corresponding content—either a QR code for mobile APP, browser icon for Plugin, or OS buttons (Mac OS, Windows) for Desktop. Tabs have pill-shaped active states with white background and black text. Content area transitions smoothly between states. Include a primary CTA button "Try Kimi" below. Background remains pure black with subtle top border separator.

**Structure Sketch:**
```html
<section id="download" class="download-section">
  <h2>Built for the future. Available today.</h2>
  <div class="platform-selector">
    <div class="tabs">
      <button class="tab active" data-platform="app">
        <span>APP</span>
      </button>
      <button class="tab" data-platform="plugin">Plugin</button>
      <button class="tab" data-platform="desktop">Desktop</button>
    </div>
    <div class="content">
      <!-- QR Code or OS Buttons based on selection -->
      <div class="qr-code" data-platform="app"></div>
      <div class="os-buttons" data-platform="desktop" hidden>
        <button>Mac OS</button>
        <button>Windows</button>
      </div>
    </div>
  </div>
  <a href="/try" class="cta-primary">Try Kimi</a>
</section>
```

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** mixed

#### Color Roles
- **color.text.primary:** #ffffff (72)
- **color.text.secondary:** #ffffff (13)
- **color.surface.base:** #000000 (10)
- **color.accent:** #ffffff (65)
- **color.border.default:** #ffffff (74)
- **color.focus.ring:** #ffffff (72)

#### Typography Roles
- **font.family.primary:** PingFang SC (89)
- **font.family.secondary:** M PLUS 1 (9)
- **font.size.display:** 56px (14)
- **font.size.body:** 14px (8)
- **font.size.label:** 14px (27)
- **ratio:** display is 4.0x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 20px (30)
- **space.2:** 12px (24)
- **space.3:** 8px (18)
- **space.4:** 4px (15)
- **space.5:** 16px (12)

#### Radius Roles
- **radius.medium:** 16px (6)
- **radius.pill:** 100px (5)

#### Shadow Intent
- **level:** none
- **usage:** 0
- **note:** flat surfaces dominate

#### Motion Intent
- **level:** expressive
- **range:** 200-1050ms
- **common durations:** 200ms (41), 400ms (6), 1050ms (1)
- **easing style:** ease, ease, ease, ease (4), ease, ease (3), cubic-bezier(0.16, 1, 0.3, 1), cubic-bezier(0.16, 1, 0.3, 1) (1)

### Distinctive Implementation Signals

- Frequent pill radius (100px) creates a soft/capsule interaction language.
- Flat surfaces are preferred over decorative depth.
- Motion is expressive, centered around 200-1050ms.
- Type hierarchy is ratio-driven: display is 4.0x body.

### Extraction Diagnostics

- Sampled 98 visible elements from 268 total DOM elements.
- Confidence: medium.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.