Define design intent and direction before frontend coding

This skill establishes direction and intent for frontend design before coding begins, applied alongside a companion design skill on every task. It works through purpose, meaning what problem the interface solves and who uses it, tone, meaning committing to one bold extreme with intention such as brutally minimal, maximalist, retro-futuristic, organic, luxury, playful, editorial, brutalist, art deco, or industrial, rather than hedging, constraints covering framework, performance, and accessibility, and differentiation, meaning one unforgettable element, all emphasizing intentionality over intensity. It reserves high-impact devices like full-bleed media, dramatic motion, oversized type, a saturated accent, or parallax for one or two deliberate punctuation moments rather than defaulting to them everywhere, since constant intensity reads as flat - the same restraint applies to scale, color, where one accent beats five, and motion, where one signature move beats constant animation. Domain and color work requires naming five or more concrete concepts or metaphors from the product's world and five or more actual named colors that belong in that world rather than vague temperature words, plus one signature element that could only exist for this specific product. The review bar asks whether you would put your name on this, judging craft and intentionality rather than just function, with two non-negotiable craft invariants that fail the review on a single violation: no font pop-in ever, gating display text on fonts being ready and fading it in, and prioritizing whatever's in the opening viewport to paint complete and correct before anything below the fold loads.

It applies a cross-domain lens, selecting two to three principles from whichever disciplines fit the product, such as UX plus automotive for a dashboard or cinema plus marketing for a brand campaign. Cinema contributes framing and composition, treating the viewport as a frame with depth layering, pacing through a well-orchestrated sequence of reveals over scattered motion, color grading as mood, and focus and depth for visual hierarchy. Architecture contributes human-scale proportion and grid rhythm, wayfinding so users always know where they are, material and light for depth, negative space as structure rather than leftover, and deliberate threshold transition moments. Marketing contributes a single hero message above the fold, a deliberate emotional-versus-rational first beat, unmistakable primary CTA prominence, audience-specific tone and imagery, and consistent brand voice. UX contributes goal-driven task reduction, clear information architecture with minimal cognitive load, visible feedback for every action and state, accessibility covering contrast, focus order, and honoring reduced-motion preferences on public projects, and progressive disclosure. Automotive design contributes a recognizable silhouette, continuous surface language without arbitrary bumps, balanced content-to-chrome proportion, deliberate material and trim hierarchy, and driver-centric primary-control placement. Industrial design contributes form-follows-function, material honesty, obvious affordances, tactile pressable controls, one consistent product personality, and simplifying until it breaks.

Use it alongside the design skill on every frontend design task, before writing any code, to define purpose, tone, domain, color world, and the review bar.

Given a product or design brief, it produces a committed tone direction, a named domain vocabulary and color world, a signature differentiator, and cross-domain design principles to apply, checked against the craft-invariant review bar.

Pairs directly with a companion design skill for execution and a design-system reference for the font-pop-in and loading-order invariants.

Designers and frontend developers who need a structured pre-coding direction-setting process, committing to one bold, intentional aesthetic and cross-disciplinary principles rather than a generic, unconsidered interface.