---
name: frontend-ux-v2
description: Build dark, premium app-shell websites that closely follow provided reference screenshots, with restrained contrast, rounded panels, dense layout rhythm, and sparse warm accents. Use for screenshot-led marketing pages, FAQ pages, dashboards, and product surfaces.
license: MIT
compatibility: opencode
metadata:
  audience: developers
---

This skill creates frontend work that follows supplied visual references closely instead of drifting into a generic house style.

Use it when the user says things like "follow this picture", "match this screenshot", or wants a site that feels like a provided reference image. Favor structural fidelity, spacing fidelity, and tonal fidelity over invention.

## Core Goal

Translate the reference into real, responsive frontend code while preserving the image's:

- layout skeleton
- contrast level
- component shapes
- spacing density
- information hierarchy
- accent usage
- overall product maturity

Do not copy brand names or logos literally unless the user explicitly asks for that. Match the design language, not the trademark.

## Default Direction For This Style

For references like the provided screenshot, design with these defaults unless the image clearly suggests otherwise:

- Near-black page background with slightly lighter surfaces
- App-shell framing, especially a thin side rail or persistent edge navigation
- Large rounded panels with subtle 1px borders
- Dense, calm spacing instead of airy marketing whitespace
- Bright text on dark surfaces with muted secondary copy
- One warm accent only, used sparingly for the brand mark, active state, or primary action
- Real product UI energy: shipped, grounded, and slightly utilitarian

The result should feel like a premium web app or help center, not a dribbble-style concept.

## Screenshot-Matching Workflow

Before coding, inspect the reference and extract:

- **Frame**: app shell, side rail, centered column, footer band, content gutter sizes
- **Rhythm**: how much space exists between repeated rows, cards, and sections
- **Shape**: border radius, border softness, button silhouette, icon container treatment
- **Tone**: how dark the background is, how subtle the panel contrast is, how muted the borders are
- **Accent logic**: where the accent appears and where it does not
- **Density**: whether the interface feels compact, medium, or spacious

Mirror those traits first. Add originality through polish, responsive behavior, and implementation quality rather than changing the visual direction.

## Visual Rules

### Layout

- Prefer an app-shell composition over a floating marketing stack
- Use a narrow or medium left rail when the reference implies product navigation
- Keep the main content wide, but constrain inner reading width for lists, forms, or FAQs
- Favor long horizontal bands and anchored regions over isolated floating cards
- Let the design breathe through alignment and width discipline, not oversized empty gaps
- On mobile, collapse the left rail into a top bar or drawer while preserving the same dark shell feel

### Typography

- Use a modern sans with slightly softened geometry or rounded terminals; avoid sterile default system styling
- Keep hierarchy restrained: medium-large titles, readable body text, strong row labels
- Favor semibold labels for repeated interactive rows
- Use muted secondary text instead of reducing text size too aggressively
- Avoid flashy display fonts unless the reference clearly uses them

### Color

- Build from layered charcoals, not pure black and not colorful gradients everywhere
- Use CSS variables for surface, border, text, muted text, and accent
- Keep border contrast low but always visible
- Reserve accent color for small but important moments
- If a gradient is used, confine it to the logo, active pill, or one CTA

Useful starting tokens for this family of designs:

```css
:root {
  --bg: #121215;
  --surface: #1a1b20;
  --surface-2: #202127;
  --border: rgba(255, 255, 255, 0.08);
  --text: #f2f2f4;
  --muted: #9a9ca6;
  --accent: #ff5a6b;
  --accent-2: #ff7b45;
}
```

### Shape And Effects

- Use rounded rectangles, not pill-heavy consumer UI and not sharp-corner brutalism
- Prefer soft shadows or no shadows; rely mostly on surface separation and borders
- Keep glass, blur, glow, and neon effects to a minimum
- Use subtle hover transitions: border brighten, surface lift, icon tint, or arrow rotation
- Respect `prefers-reduced-motion`

## Component Patterns To Prefer

- Vertical icon rail with compact active states
- FAQ or settings rows inside outlined rounded panels
- Repeated list items with fixed height and right-aligned chevrons or affordances
- Dense footer band with logo block, link columns, locale selector, and compact legal copy
- Circular utility buttons for secondary actions like "back to top"
- Panels that span width but keep content centered within them

## Implementation Guidance

- Start from the reference's composition before adding decorative details
- Use CSS variables and a small spacing scale so repeated items stay consistent
- Match repeated row heights carefully; this aesthetic depends on rhythm
- Use real borders instead of fake separators made from shadows
- Keep interactions subtle and product-like
- Ensure desktop and mobile both feel intentional, not merely collapsed
- If the reference shows a highly structured shell, preserve that shell across breakpoints in some form

## Avoid

- Bright multi-color gradients across the whole page
- Generic SaaS hero sections that ignore the screenshot structure
- Huge empty whitespace blocks
- Oversized card stacks floating in space
- Glossy glassmorphism, neon glow, or futuristic dashboard cliches
- Loud typographic experiments that overpower the app-shell composition
- Replacing dense product UI with airy marketing minimalism

## Good Outcome

The finished site should feel:

- dark
- polished
- product-like
- compact
- premium
- faithful to the reference

If there is any tension between "show creativity" and "follow the image," choose the option that keeps the reference recognizable.