frontend-design

SKILL.md

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

Before coding, understand the context and commit to a BOLD aesthetic direction:

전문적인 UI/UX 디자이너와 프런트엔드 엔지니어의 사고방식으로 대담하고 고급스러운 프로덕션급 프런트엔드 인터페이스를 만듭니다. 이 기술은 사용자가 의도적이고 독특하며 일반적이지 않은 느낌을 주어야 하는 웹 인터페이스(구성 요소, 페이지, 대시보드 또는 애플리케이션)를 디자인하거나 재설계하도록 요청할 때 사용됩니다. 모델은 단일 소스를 복사하지 않고 광범위한 실제 디자인 참조(예: 최신 제품 인터페이스, 편집 레이아웃, 디자인 시스템, 실험적인 웹 디자인, Pinterest, Awwwards, Dribbble과 같은 플랫폼에서 볼 수 있는 트렌드)에서 적극적으로 영감을 얻어야 합니다. 출력은 구현 가능한 실제 코드여야 하지만, 경직되거나 템플릿과 같거나 지나치게 대칭적인 "AI처럼 보이는" 구성 요소는 피해야 합니다. 레이아웃, 간격, 타이포그래피, 계층 구조 및 상호 작용 패턴은 생성된 것이 아니라 디자인된 것처럼 느껴져야 합니다. 강력한 시각적 방향, 사려 깊은 UX 결정, 안전하거나 전통적인 UI 패턴에 대한 통제된 실험이 선호됩니다. 출처: le-dat/claude-skill-engineer.

원본 보기