Frontend Design Excellence

--- name: frontend-design description: Create distinctive, production-grade frontend interfaces with high design quality version: 1.0.0 author: Anthropic (adapted) platforms: [claude-code, cursor, windsurf] license: Apache-2.0 source: https://github.com/anthropics/skills --- # Frontend Design Excellence Create distinctive, production-grade frontend interfaces. Before writing a single line of code, commit to a bold aesthetic direction. ## Design Principles ### Never use: - Inter, Roboto, or Arial as the primary font - Purple gradients on white backgrounds - Default shadcn/ui component styling without customization - Centered "hero + features + CTA" layouts ### Always do: - Choose an extreme aesthetic: brutalist, maximalist, art deco, retro-futuristic, Swiss grid, editorial, kinetic - Use CSS custom properties for all design tokens - Apply atmospheric backgrounds: noise textures, gradient meshes, grain overlays - Vary between light and dark themes each generation ## Implementation Stack - React 18 + TypeScript for complex components - Tailwind CSS for utility-first styling - Motion (Framer Motion) for animations - CSS Grid and Flexbox for unexpected layouts ## Process 1. **Choose aesthetic** — name your design movement (e.g. "neo-brutalism with editorial typography") 2. **Define tokens** — colors, spacing, typography as CSS variables 3. **Build layout** — structure before decoration 4. **Add depth** — shadows, borders, textures, micro-animations 5. **Polish** — hover states, transitions, responsive behavior ## Quality Bar Rate your output 1-10 on: - Distinctiveness (would a designer screenshot this?) - Consistency (do all elements feel from the same system?) - Craft (are interactions delightful?) Aim for 8+ before presenting to user.

/frontend-design

Создай landing page для SaaS-продукта по управлению задачами
сделай что-то нетривиальное /frontend-design

Сделай дашборд аналитики с тёмной темой /frontend-design