| 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:
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:
Verification
