AI-Native UI demo
AI-Native UI

A futuristic, low-chrome interface style centered on conversational AI, voice assistants, and agentic workflows with ambient visuals and streaming text responses.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 13.6 KB · 1863 words
# SYSTEM PROMPT — Build a Complete "AI-Native UI" Landing Page

**ROLE:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready Landing Page in the **AI-Native UI** theme on the first attempt. Generate the final code immediately — no drafts, no outlines, no clarifying questions, no truncated output.

**OBJECTIVE:** A single Landing Page with the following sections: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, and Footer with secondary links.** All user-facing copy must be written in **English**.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
* **No Inline CSS:** The `style="..."` attribute is strictly forbidden anywhere in the HTML.
* **Class/ID Selectors Only:** All design properties, layout rules, and interactive states must be targeted via class or ID selectors inside the dedicated `style.css` file.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and agnostic of visual styling. Changing the site's entire look must only require editing `style.css`, never the markup.

### 1.2 CSS Variables (`var(--...)`) & Theme Tokens
All visual tokens must live in `:root` (and be overridden per theme scope):

* **Colors (Light Mode — default):** `--primary: #6366F1` (AI Purple); `--primary-strong: #4F46E5` (hover + small-text accent variant); `--bg-primary: #F5F5F5` (theme background — do **not** use pure white); `--bg-secondary: #fefefe` (card surfaces); `--text-primary: #17171B`; `--text-secondary: #52525B`; `--text-success: #047857` (contrast-safe text tone); `--success: #10B981` (surfaces/icons/borders); `--text-error: #DC2626`; `--border-default: #E4E4E7`; `--border-error: #DC2626`; `--border-success: #10B981`; `--accent-soft: rgba(99, 102, 241, 0.10)` (chips, hover washes, streaming highlights); `--stream-highlight` (temporary soft indigo tint applied to text while it streams, fading to transparent on completion).
* **Contrast Pairing:** Every light background token must pair with a dark text token, and every dark background token with a light text token — enforce WCAG AA contrast for every pairing in **both** themes, not just the default. Accent `#6366F1` is fine for large text, icons, and borders on light backgrounds; small accent text must use `--primary-strong`.
* **Border Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`.
* **Spacing & Transitions:** `--spacing-gap`, `--transition-fast` (~150ms), `--transition-normal` (~300ms), `--ease-standard` (e.g., `cubic-bezier(0.4, 0, 0.2, 1)`).
* **Elevation/Stacking:** `--z-dropdown` (sticky header), `--z-modal`, `--z-toast`.
* **Typography tokens:** `--font-base` and `--font-display`, bound to the Google Fonts below.

### 1.3 Mandatory Dark Mode Support
* **Implementation:** Define full dark mode token overrides under **both** `@media (prefers-color-scheme: dark)` **and** a `.dark` class on the `<html>` element. Dark tokens must include: `--bg-primary: #0C0C10` (cool near-black), `--bg-secondary: #17171E`, `--text-primary: #F5F5F5`, `--text-secondary: #A1A1AA`, `--primary: #818CF8` (lightened accent for dark-bg contrast), `--primary-strong: #6366F1`, `--text-success: #34D399`, `--border-default: #26262E`, plus adjusted (darker, subtler) shadows.
* **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.
* **Persistence:** Store the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a **visible toggle control** in the header (Material Symbols `light_mode` / `dark_mode`) with correct `aria-pressed` and `aria-label` state.
* **Exception Clause:** A minimal inline snippet in `<head>` that applies the stored theme class before first paint is the **only** permitted inline script (to prevent a light-mode flash); all other JavaScript lives in `script.js`.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures with **Flexbox** (`display: flex`).
* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an exception is explicitly justified in comments. The justified exceptions in this build: the chat message list (`align-items: flex-start`, with `align-self` used to align user vs. assistant bubbles) and step/list columns.
* **Mobile-Friendly First:** All flex rows must convert to columns on small viewports (≤768px). No horizontal scrolling at any viewport width. Use fluid `clamp()` typography.

### 1.5 Framework Default & Tailwind CSS Integration
Use Tailwind CSS, with all component styling authored as **reusable generic classes** (`.btn`, `.card`, `.input-group`, `.chat-panel`, `.context-card`) via Tailwind's `@layer` / `@apply` directives or plain CSS — every utility/component must map back to the CSS variables above.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load **Inter** (`--font-base`) and **Space Grotesk** (`--font-display`, headings only) via Google Fonts `<link>` tags with `preconnect`.
* **Icons:** Use **Google Material Symbols (Outlined)** via the Google Fonts icon link. Raw inline SVGs and local icon files are **strictly forbidden** — including the 3-dot typing indicator, which must be built with pure CSS (divs + keyframes).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component Requirements
Style all states via CSS classes:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Minimum touch target 44×44px. Variants: `.btn--primary` (solid `--primary` → `--primary-strong` on hover, white text), `.btn--ghost` (transparent, `--border-default`), `.btn--danger` (visually distinct in **both** themes).
* **Hover:** Brightness/shadow shift with `cursor: pointer`.
* **Focus:** Distinct `:focus-visible` ring built from `--primary` (outline/box-shadow) for keyboard navigation.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading (`is-loading`):** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon — **without distorting button dimensions**.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error (`is-success` / `is-error`):** Temporary feedback styles driven by `--text-success` / `--text-error`, always paired with an icon + text change (never color alone), announced via an `aria-live` region.

### 2.2 Card Component Requirements
* **Default:** Flexible Flexbox layout, `--bg-secondary` surface, subtle `--border-default` border, `--radius-lg`, `--shadow-sm`.
* **Hover (interactive cards):** `transform: translateY(-2px)` + elevation shift to `--shadow-md` via `--transition-normal`.
* **Focus-within:** Card border highlights to `--primary` when a child link/button receives focus.
* **Loading (Skeleton):** Define `.skeleton` shimmer keyframes (animated gradient sweep) in CSS; use for the initial assistant-message placeholder on first paint to prevent layout jumps.
* **Empty State:** Define a `.card--empty` fallback layout (Google Icon + clear guidance text); use it in the chat panel before the visitor's first message.
* **Theme-Specific Card Types:** `.context-card` (3px `--primary` left border, compact fact chip); `.pricing-card` (featured tier gets `.pricing-card--featured`: `--primary` border, "Most popular" badge, stronger elevation); `.testimonial-card` (quote icon, copy, initials avatar).

### 2.3 Form & Input Requirements
* **States:** Empty, Focused (`--primary` ring), Filled, Valid (`--border-success` + check icon), Invalid (`--border-error`, red error text + error icon), Disabled, Read-only.
* **Structure:** `.input-group` flex container wrapping a `<label>`, the input field, and a dedicated error feedback container with reserved min-height (no layout shift on error).
* **Chat Input:** `.chat-panel__input` is a **sticky bottom** bar inside the chat panel — flex row of text input + send button, submits on Enter, labeled input, placeholder "Ask anything…".

### 2.4 Modal / Popup Requirements
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
* **UX Features:** Centered flex container (`align-items: center; justify-content: center`), backdrop overlay with blur, Google Icon close button, keyboard focus trapping, close via `Esc` or overlay click, correct `role="dialog"` / `aria-modal` attributes.
* Even if no modal is used on the page, the `.modal` component CSS must ship so the design system is complete.

### 2.5 AI-Native Component Requirements (Theme-Specific)
* **Chat Panel (`.chat-panel`):** `flex-direction: column`; contains a scrolling message list + the sticky bottom input. Bubbles: `.chat-bubble--user` (aligned right, `--primary` background, white text) and `.chat-bubble--assistant` (aligned left, `--bg-secondary`, border, `--text-primary`); max-width ~75%.
* **Typing Indicator (`.typing-indicator`):** Three dots pulsing with staggered keyframe delays (0 / .15s / .3s), rendered inside an assistant-styled bubble. Pure CSS — no SVG, no images.
* **Streaming Text (`.streaming-text`):** Reveal animation using `overflow: hidden` + a width/clip-path/typewriter keyframe (or JS character streaming), with the `--stream-highlight` tint fading out once the text lands. During streaming, mark the region `aria-busy="true"` and announce the **final** text once via `aria-live="polite"` (never announce character-by-character).
* **Context Cards:** `border-left: 3px solid var(--primary)` per the theme spec; used to show "what the assistant knows."
* **Pulse / Ambient Effects:** A soft infinite pulse (box-shadow ripple) on a status dot / ambient orb in the hero; disabled under `prefers-reduced-motion`.
* **Simulated Assistant (script.js):** On chat submit → append user bubble → show typing indicator (~900ms) → stream one of 2–3 predefined English responses relevant to the product pitch → clear input, maintain focus. Every submission must produce visible feedback.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing and breakpoints; zero horizontal overflow at any width.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; smooth section reveals via an IntersectionObserver adding `.is-visible` (fade + slight translate). Content must be fully visible without JS.
* **Reduced Motion:** Under `prefers-reduced-motion`, disable streaming, typing pulses, ambient pulses, and reveals — render final states instantly.
* **Accessibility (a11y):** AA contrast in both Light and Dark modes; never rely on color alone (pair with icons + text); semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, correct `h1`→`h3` hierarchy); correct ARIA roles/labels on custom widgets; logical DOM/focus order; full keyboard operability; `aria-live` regions for chat responses, form errors, and toasts.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Toast:** Define a `.toast` component (`--z-toast`, fixed bottom, auto-dismiss) used to confirm CTA/pricing success actions.

---

## 4. THEME & LANDING PAGE SPECIFICATION — "AI-NATIVE UI"

### 4.1 Design Language
* **Name:** AI-Native UI · **Type:** Intelligent, Adaptive, Conversational, Modern · **Era:** 2020s AI-Era · **Modes:** Full Light + Full Dark.
* **Mood:** Minimal chrome, generous whitespace, quiet neutrals with one decisive accent (`#6366F1`), ambient and alive. Secondary tokens: status indicators (pulsing green "Online" dot), streaming highlights, context-card tints, subtle accent variations at 5–10% alpha.

### 4.2 Required Sections (author realistic English copy for a fictional AI assistant product — invent a fitting product name; no lorem ipsum)
1. **Header (minimal chrome):** Sticky, blurred `--bg-primary` backdrop, wordmark logo, anchor links, and the dark-mode toggle.
2. **Hero:** Conversational layout — H1 with a streaming-text effect on one key phrase, subheadline, two CTAs (primary + ghost), and the working `.chat-panel` demo (welcome bubble → typing indicator → context card → streamed answer → sticky input). Status dot with pulse.
3. **Features:** 3 `.card--feature` cards, each with a Material Symbol icon in a tinted container, title, and 1–2 sentences (e.g., Conversational by default / Context-aware / Agentic actions).
4. **How It Works:** 3 numbered steps with connecting line on desktop, stacked column on mobile.
5. **Testimonials:** 3 `.testimonial-card` cards with attributed quotes, initials avatars, and varied copy lengths.
6. **Pricing:** 3 tiers (Free / Pro — featured / Team), each with price, feature list with check icons, and a CTA that demonstrates the full button state machine (loading ≥1s → success + toast).
7. **FAQ:** 5–6 real questions as native `<details>`/`<summary>` accordions with a rotating `expand_more` Material Symbol marker — no JS required.
8. **Final CTA:** Full-width accent-tinted panel (soft indigo wash that works in both themes), H2, one-line pitch, primary button.
9. **Footer:** Secondary links grouped in 3–4 flex columns (collapsing to one column on mobile), tagline, copyright, hover + focus-visible link states.

---

## 5. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond the single permitted theme-bootstrap exception (Section 1.3) and one deferred entry-point reference.
* **Naming Convention:** One consistent convention across the entire deliverable — BEM (`.chat-bubble--user`, `.pricing-card--featured`) with `.is-*` state classes. Never mix conventions.
* **First-Attempt Completeness:** Output the full, final code for all three files in one response. No TODOs, no "rest of the code" truncation, no unrequested placeholders.
* **Copy:** All user-facing copy in English, fully authored. Placeholder attributes are allowed only inside the chat input.