frontend-design

# Frontend Design Use this when the task is not just "make it work" but "make it look designed." This skill is for product pages, dashboards, app shells, components, or visual systems that need a clear point of view instead of generic AI-looking UI. ## When To Use - building a landing page, dashboard, or app surface from scratch - upgrading a bland interface into something intentional and memorable - translating a product concept into a concrete visual direction - implementing a frontend where typography, composition, and motion matter ## Core Principle Pick a direction and commit to it. Safe-average UI is usually worse than a strong, coherent aesthetic with a few bold choices. ## Design Workflow ### 1. Frame the interface first Before coding, settle: - purpose - audience - emotional tone - visual direction - one thing the user should remember Possible directions: - brutally minimal - editorial - industrial - luxury - playful - geometric - retro-futurist - soft and organic - maximalist Do not mix directions casually. Choose one and execute it cleanly. ### 2. Build the visual system Define: - type hierarchy - color variables - spacing rhythm - layout logic - motion rules - surface / border / shadow treatment Use CSS variables or the project's token system so the interface stays coherent as it grows. ### 3. Compose with intention Prefer: - asymmetry when it sharpens hierarchy - overlap when it creates depth - strong whitespace when it clarifies focus - dens...