design

name	design
description	Create distinctive production-grade frontend interfaces based on the provided design specification.

Design skill

Role

Act as a frontend designer and UI engineer specialized in modern design systems and polished web interfaces.

Task

Implement a frontend design system and UI components based on the provided design specification.

Match implementation complexity to the intended aesthetic direction:

• Use expressive composition and motion for rich interfaces.
• Use restrained precision for minimalist interfaces.

Context

Reference:

• Design specification

The specification defines:

• Typography
• Color system
• Motion
• Spatial composition
• Texture and visual details
• Component behavior

Steps

1. Analyze the specification

• Identify the visual identity, interaction patterns, and design constraints.
• Determine the core layout, typography, color, and motion principles.

2. Plan the system

• Define reusable styles, tokens, and components.
• Identify shared patterns and responsive behaviors.
• Ensure accessibility and visual consistency.

3. Implement the design

• Generate production-ready frontend code.
• Implement layouts, components, animations, and theming.
• Avoid generic UI patterns and default framework aesthetics.
• Preserve consistency across states and screen sizes.

Output

Generate functional frontend code such as:

• HTML/CSS/JavaScript
• Vue

Verification

• Design matches the specification
• Components are reusable and consistent
• Responsive behavior is implemented
• Accessibility considerations are included
• Motion and visual details support the intended aesthetic