{"skill":{"slug":"frontend-ux-v2","title":"frontend-ux-v2","preview":"Build dark, premium app-shell websites that closely follow provided reference screenshots, with restrained contrast, rounded panels, dense layout rhythm, and sp...","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"},"content":"This skill creates frontend work that follows supplied visual references closely instead of drifting into a generic house style.\n\nUse 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.\n\n## Core Goal\n\nTranslate the reference into real, responsive frontend code while preserving the image's:\n\n- layout skeleton\n- contrast level\n- component shapes\n- spacing density\n- information hierarchy\n- accent usage\n- overall product maturity\n\nDo not copy brand names or logos literally unless the user explicitly asks for that. Match the design language, not the trademark.\n\n## Default Direction For This Style\n\nFor references like the provided screenshot, design with these defaults unless the image clearly suggests otherwise:\n\n- Near-black page background with slightly lighter surfaces\n- App-shell framing, especially a thin side rail or persistent edge navigation\n- Large rounded panels with subtle 1px borders\n- Dense, calm spacing instead of airy marketing whitespace\n- Bright text on dark surfaces with muted secondary copy\n- One warm accent only, used sparingly for the brand mark, active state, or primary action\n- Real product UI energy: shipped, grounded, and slightly utilitarian\n\nThe result should feel like a premium web app or help center, not a dribbble-style concept.\n\n## Screenshot-Matching Workflow\n\nBefore coding, inspect the reference and extract:\n\n- **Frame**: app shell, side rail, centered column, footer band, content gutter sizes\n- **Rhythm**: how much space exists between repeated rows, cards, and sections\n- **Shape**: border radius, border softness, button silhouette, icon container treatment\n- **Tone**: how dark the background is, how subtle the panel contrast is, how muted the borders are\n- **Accent logic**: where the accent appears and where it does not\n- **Density**: whether the interface feels compact, medium, or spacious\n\nMirror those traits first. Add originality through polish, responsive behavior, and implementation quality rather than changing the visual direction.\n\n## Visual Rules\n\n### Layout\n\n- Prefer an app-shell composition over a floating marketing stack\n- Use a narrow or medium left rail when the reference implies product navigation\n- Keep the main content wide, but constrain inner reading width for lists, forms, or FAQs\n- Favor long horizontal bands and anchored regions over isolated floating cards\n- Let the design breathe through alignment and width discipline, not oversized empty gaps\n- On mobile, collapse the left rail into a top bar or drawer while preserving the same dark shell feel\n\n### Typography\n\n- Use a modern sans with slightly softened geometry or rounded terminals; avoid sterile default system styling\n- Keep hierarchy restrained: medium-large titles, readable body text, strong row labels\n- Favor semibold labels for repeated interactive rows\n- Use muted secondary text instead of reducing text size too aggressively\n- Avoid flashy display fonts unless the reference clearly uses them\n\n### Color\n\n- Build from layered charcoals, not pure black and not colorful gradients everywhere\n- Use CSS variables for surface, border, text, muted text, and accent\n- Keep border contrast low but always visible\n- Reserve accent color for small but important moments\n- If a gradient is used, confine it to the logo, active pill, or one CTA\n\nUseful starting tokens for this family of designs:\n\n```css\n:root {\n  --bg: #121215;\n  --surface: #1a1b20;\n  --surface-2: #202127;\n  --border: rgba(255, 255, 255, 0.08);\n  --text: #f2f2f4;\n  --muted: #9a9ca6;\n  --accent: #ff5a6b;\n  --accent-2: #ff7b45;\n}\n```\n\n### Shape And Effects\n\n- Use rounded rectangles, not pill-heavy consumer UI and not sharp-corner brutalism\n- Prefer soft shadows or no shadows; rely mostly on surface separation and borders\n- Keep glass, blur, glow, and neon effects to a minimum\n- Use subtle hover transitions: border brighten, surface lift, icon tint, or arrow rotation\n- Respect `prefers-reduced-motion`\n\n## Component Patterns To Prefer\n\n- Vertical icon rail with compact active states\n- FAQ or settings rows inside outlined rounded panels\n- Repeated list items with fixed height and right-aligned chevrons or affordances\n- Dense footer band with logo block, link columns, locale selector, and compact legal copy\n- Circular utility buttons for secondary actions like \"back to top\"\n- Panels that span width but keep content centered within them\n\n## Implementation Guidance\n\n- Start from the reference's composition before adding decorative details\n- Use CSS variables and a small spacing scale so repeated items stay consistent\n- Match repeated row heights carefully; this aesthetic depends on rhythm\n- Use real borders instead of fake separators made from shadows\n- Keep interactions subtle and product-like\n- Ensure desktop and mobile both feel intentional, not merely collapsed\n- If the reference shows a highly structured shell, preserve that shell across breakpoints in some form\n\n## Avoid\n\n- Bright multi-color gradients across the whole page\n- Generic SaaS hero sections that ignore the screenshot structure\n- Huge empty whitespace blocks\n- Oversized card stacks floating in space\n- Glossy glassmorphism, neon glow, or futuristic dashboard cliches\n- Loud typographic experiments that overpower the app-shell composition\n- Replacing dense product UI with airy marketing minimalism\n\n## Good Outcome\n\nThe finished site should feel:\n\n- dark\n- polished\n- product-like\n- compact\n- premium\n- faithful to the reference\n\nIf there is any tension between \"show creativity\" and \"follow the image,\" choose the option that keeps the reference recognizable.","document":"---\nname: frontend-ux-v2\ndescription: 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.\nlicense: MIT\ncompatibility: opencode\nmetadata:\n  audience: developers\n---\n\nThis skill creates frontend work that follows supplied visual references closely instead of drifting into a generic house style.\n\nUse 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.\n\n## Core Goal\n\nTranslate the reference into real, responsive frontend code while preserving the image's:\n\n- layout skeleton\n- contrast level\n- component shapes\n- spacing density\n- information hierarchy\n- accent usage\n- overall product maturity\n\nDo not copy brand names or logos literally unless the user explicitly asks for that. Match the design language, not the trademark.\n\n## Default Direction For This Style\n\nFor references like the provided screenshot, design with these defaults unless the image clearly suggests otherwise:\n\n- Near-black page background with slightly lighter surfaces\n- App-shell framing, especially a thin side rail or persistent edge navigation\n- Large rounded panels with subtle 1px borders\n- Dense, calm spacing instead of airy marketing whitespace\n- Bright text on dark surfaces with muted secondary copy\n- One warm accent only, used sparingly for the brand mark, active state, or primary action\n- Real product UI energy: shipped, grounded, and slightly utilitarian\n\nThe result should feel like a premium web app or help center, not a dribbble-style concept.\n\n## Screenshot-Matching Workflow\n\nBefore coding, inspect the reference and extract:\n\n- **Frame**: app shell, side rail, centered column, footer band, content gutter sizes\n- **Rhythm**: how much space exists between repeated rows, cards, and sections\n- **Shape**: border radius, border softness, button silhouette, icon container treatment\n- **Tone**: how dark the background is, how subtle the panel contrast is, how muted the borders are\n- **Accent logic**: where the accent appears and where it does not\n- **Density**: whether the interface feels compact, medium, or spacious\n\nMirror those traits first. Add originality through polish, responsive behavior, and implementation quality rather than changing the visual direction.\n\n## Visual Rules\n\n### Layout\n\n- Prefer an app-shell composition over a floating marketing stack\n- Use a narrow or medium left rail when the reference implies product navigation\n- Keep the main content wide, but constrain inner reading width for lists, forms, or FAQs\n- Favor long horizontal bands and anchored regions over isolated floating cards\n- Let the design breathe through alignment and width discipline, not oversized empty gaps\n- On mobile, collapse the left rail into a top bar or drawer while preserving the same dark shell feel\n\n### Typography\n\n- Use a modern sans with slightly softened geometry or rounded terminals; avoid sterile default system styling\n- Keep hierarchy restrained: medium-large titles, readable body text, strong row labels\n- Favor semibold labels for repeated interactive rows\n- Use muted secondary text instead of reducing text size too aggressively\n- Avoid flashy display fonts unless the reference clearly uses them\n\n### Color\n\n- Build from layered charcoals, not pure black and not colorful gradients everywhere\n- Use CSS variables for surface, border, text, muted text, and accent\n- Keep border contrast low but always visible\n- Reserve accent color for small but important moments\n- If a gradient is used, confine it to the logo, active pill, or one CTA\n\nUseful starting tokens for this family of designs:\n\n```css\n:root {\n  --bg: #121215;\n  --surface: #1a1b20;\n  --surface-2: #202127;\n  --border: rgba(255, 255, 255, 0.08);\n  --text: #f2f2f4;\n  --muted: #9a9ca6;\n  --accent: #ff5a6b;\n  --accent-2: #ff7b45;\n}\n```\n\n### Shape And Effects\n\n- Use rounded rectangles, not pill-heavy consumer UI and not sharp-corner brutalism\n- Prefer soft shadows or no shadows; rely mostly on surface separation and borders\n- Keep glass, blur, glow, and neon effects to a minimum\n- Use subtle hover transitions: border brighten, surface lift, icon tint, or arrow rotation\n- Respect `prefers-reduced-motion`\n\n## Component Patterns To Prefer\n\n- Vertical icon rail with compact active states\n- FAQ or settings rows inside outlined rounded panels\n- Repeated list items with fixed height and right-aligned chevrons or affordances\n- Dense footer band with logo block, link columns, locale selector, and compact legal copy\n- Circular utility buttons for secondary actions like \"back to top\"\n- Panels that span width but keep content centered within them\n\n## Implementation Guidance\n\n- Start from the reference's composition before adding decorative details\n- Use CSS variables and a small spacing scale so repeated items stay consistent\n- Match repeated row heights carefully; this aesthetic depends on rhythm\n- Use real borders instead of fake separators made from shadows\n- Keep interactions subtle and product-like\n- Ensure desktop and mobile both feel intentional, not merely collapsed\n- If the reference shows a highly structured shell, preserve that shell across breakpoints in some form\n\n## Avoid\n\n- Bright multi-color gradients across the whole page\n- Generic SaaS hero sections that ignore the screenshot structure\n- Huge empty whitespace blocks\n- Oversized card stacks floating in space\n- Glossy glassmorphism, neon glow, or futuristic dashboard cliches\n- Loud typographic experiments that overpower the app-shell composition\n- Replacing dense product UI with airy marketing minimalism\n\n## Good Outcome\n\nThe finished site should feel:\n\n- dark\n- polished\n- product-like\n- compact\n- premium\n- faithful to the reference\n\nIf there is any tension between \"show creativity\" and \"follow the image,\" choose the option that keeps the reference recognizable.\n","url":"https://pinky.moe/api/skills/frontend-ux-v2","rawUrl":"https://pinky.moe/api/skills/frontend-ux-v2?format=raw","pageUrl":"https://pinky.moe/skills/frontend-ux-v2"}}