Back to catalog
Skill Resource

frontend-ux-v2

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.

Markdown/frontend-ux-v2.md

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:

: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.