# Frontend Design > Create distinctive, production-grade frontend interfaces with high design quality. Use when users ask to build web components, pages, or applications. Use when this capability is needed. - Skill: `tomevault-io/frontend-design-123` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/frontend-design-123` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/frontend-design-123/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/frontend-design-123 --- # Frontend Design Skill This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic aesthetics. Implement real working code with exceptional attention to typography, layout, motion, and atmosphere. ## Design Thinking Before coding, understand the context and commit to a bold aesthetic direction: - **Purpose**: What problem does this interface solve? Who uses it? - **Tone**: Pick a strong direction (brutalist, editorial, retro-futuristic, luxury, playful, utilitarian). Commit fully. - **Constraints**: Framework, performance, accessibility, brand rules. - **Differentiation**: Identify the one unforgettable visual idea. ## Execution Guidelines - **Typography**: Use distinctive fonts. Avoid generic system stacks (Inter, Roboto, Arial). Pair display and body type. - **Color**: Define CSS variables. Choose dominant colors with sharp accents. Avoid default purple gradients on white. - **Motion**: Favor a few high-impact moments (page-load, staggered reveals). Use CSS animations when possible. - **Layout**: Break the grid when appropriate. Use asymmetry, overlap, or unexpected composition. - **Backgrounds**: Add depth with gradients, texture, or shapes. Avoid flat, empty backgrounds. ## Output Requirements Provide working code that is: - Production-grade and functional - Visually striking and cohesive - Explicit about the aesthetic direction - Matched in complexity to the design intent ## Response Checklist ```markdown Frontend Design Checklist - [ ] Clarify purpose, audience, and constraints - [ ] Declare a specific aesthetic direction - [ ] Define typography and color system - [ ] Design layout and motion moments - [ ] Implement production-grade code - [ ] Explain key visual decisions briefly ``` --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/nicholasgriffintn) — claim your Tome and manage your conversions.