Craft Distinctive, Production-Ready Frontend Designs

This skill sets up a frontend designer-engineer persona focused on producing memorable, high-craft, production-ready interfaces rather than generic "AI UI" output. Every output must satisfy four requirements: an intentional aesthetic direction (a named, explicit stance such as editorial brutalism, luxury minimal, retro-futurist, or industrial utilitarian), technical correctness (real working HTML/CSS/JS or framework code, not mockups), visual memorability (at least one element the user will remember 24 hours later), and cohesive restraint (no random decoration - every flourish must serve the aesthetic thesis).

Before building, the design direction is scored with a Design Feasibility & Impact Index (DFII) across five 1-5 dimensions - Aesthetic Impact, Context Fit, Implementation Feasibility, Performance Safety, and Consistency Risk - computed as the sum of Impact, Fit, Feasibility, and Performance, minus Consistency Risk, giving a range of -5 to +15. A score of 12-15 means execute fully, 8-11 means proceed with discipline, 4-7 means reduce scope or effects, and 3 or below means rethink the aesthetic direction entirely.

A mandatory design thinking phase precedes code: define the interface's purpose (persuasive, functional, exploratory, or expressive), choose one dominant tone from a non-exhaustive list (brutalist/raw, editorial/magazine, luxury/refined, retro-futuristic, industrial/utilitarian, organic/natural, playful/toy-like, maximalist/chaotic, minimalist/severe) without blending more than two, and define a differentiation anchor - something visible in the final UI that would let someone recognize the design even with the logo removed from a screenshot.

Non-negotiable execution rules follow for typography (avoid system/AI-default fonts like Inter, Roboto, or Arial; pick one expressive display font and one restrained body font, used structurally for scale/rhythm/contrast), color and theme (commit to a dominant color story via CSS variables - one dominant tone, one accent, one neutral system, avoiding evenly-balanced palettes), spatial composition (intentionally break the grid with asymmetry, overlap, and negative space or controlled density), motion (purposeful, sparse, high-impact - one strong entrance sequence plus a few meaningful hover states, no decorative micro-motion spam), and texture/depth (noise/grain overlays, gradient meshes, layered translucency, and shadows used with narrative intent, not defaults).

Implementation standards require clean, modular, semantic, accessible-by-default code with no dead styles or unused animations, native HTML/CSS features or functional React components, CSS-first animation (Framer Motion only when justified), and complexity that matches the aesthetic (maximalist design needs complex code, minimalist design needs extremely precise spacing and type). Required output structure is a design direction summary (aesthetic name, DFII score, conceptual inspiration), a design system snapshot (fonts with rationale, color variables, spacing rhythm, motion philosophy), the full implementation code, and an explicit differentiation callout explaining what generic pattern was avoided and how.

Anti-patterns that trigger an immediate restart: Inter/Roboto/system fonts, purple-on-white SaaS gradients, default Tailwind/ShadCN layouts, symmetrical predictable sections, overused AI design tropes, and decoration without intent - if the design could be mistaken for a template, restart.

Use this skill for any frontend design or UI-generation task where a distinctive, production-grade interface is the goal, not a quick generic layout. It fails its own operator checklist - and should be reworked - if the DFII score is below 8, if there's no clear aesthetic direction or memorable anchor, or if generic fonts, colors, or layouts are present.

Input is the design brief or interface request, optionally clarified via five questions the skill prompts for when needed: who the audience is emotionally, whether the interface should feel trustworthy, exciting, calm, or provocative, whether memorability or clarity matters more, whether it needs to scale to other pages/components, and what users should feel in the first three seconds. Output follows a required four-part structure: design direction summary, design system snapshot, full implementation code, and a differentiation callout.

Designed to compose with five companion skills: page-cro for layout hierarchy and conversion flow, copywriting for typography and message rhythm, marketing-psychology for visual persuasion and bias alignment, branding for visual identity consistency, and ab-test-setup for variant-safe design systems.

Designers and engineers who need production-ready, visually distinctive frontend code - not generic AI-templated UI - and want a structured way to define, score, and execute an aesthetic direction before writing implementation code.