Frontend Design

Overview

This skill bridges the gap between visual design and frontend implementation. It produces precise, developer-ready specifications for UI components, responsive layouts, and design systems—including CSS custom properties, layout logic, spacing scales, component states, and interaction behaviors. Whether you are designing a single button component or specifying an entire design system, the output is implementation-ready: exact values, not vague descriptions. This skill is for designing and specifying the frontend; for writing the actual code, pair it with a coding skill.

When to Use

• Specifying a UI component with all states (default, hover, focus, disabled, error)
• Designing a responsive page layout with breakpoints and grid logic
• Building or extending a design system with tokens, components, and patterns
• Converting a visual design brief into developer-ready CSS specifications
• Defining spacing, typography, and elevation scales for a product
• Designing interactive component behavior (animations, transitions, state changes)

When NOT to Use

• Backend API design or server-side logic (use api-designer skill instead)
• Data engineering, databases, or infrastructure
• Writing actual production code (pair with a coding assistant for implementation)
• Marketing design or print layout
• Mobile native UI (iOS/Android have platform-specific patterns; this skill targets web)