$Frontend Design

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications.

View Source
Views:
Rating:
Tags
#design#frontend#ui#web-components#production-grade
Version
1.0.0
Category
Design
Source
repo: anthropics/skills
path: skills/frontend-design
Install
clawd add anthropics/frontend-design

Frontend Design

A comprehensive skill for creating visually striking, intentional web interfaces with production-grade design quality. This skill emphasizes bold design direction, meticulous attention to detail, and avoiding generic or clichéd design patterns.

Design Principles

  • Distinctive Aesthetics - Create unique, memorable interfaces that stand out
  • Production-Grade Quality - Build interfaces ready for professional use
  • Bold Design Direction - Take intentional design choices with clear visual purpose
  • Meticulous Attention - Focus on typography, color, motion, and spatial composition
  • Avoid Sameness - Move beyond generic, AI-generated design patterns

Use Cases

  • Building custom web components
  • Designing complete pages and layouts
  • Creating visual posters and artifacts
  • Developing full-featured applications
  • Building interactive interfaces with high design quality

Focus Areas

  • Typography and font selection
  • Color theory and palette development
  • Motion and animation design
  • Spatial composition and layout
  • Visual hierarchy and design consistency

This skill helps create web interfaces that are both functionally excellent and visually distinctive.

← cd ~