이 스킬은 범용적인 "AI 슬롭" 미학을 피하면서 독창적이고 프로덕션 수준의 프론트엔드 인터페이스를 만드는 방법을 안내한다. 미적 세부사항과 창의적인 선택에 탁월한 주의를 기울여 실제 작동하는 코드를 구현한다.

사용자가 프론트엔드 요구사항을 제공한다: 빌드할 컴포넌트, 페이지, 애플리케이션, 또는 인터페이스. 목적, 대상 사용자, 또는 기술적 제약에 대한 컨텍스트를 포함할 수 있다.

디자인 씽킹

코딩 전, 컨텍스트를 이해하고 대담한 미적 방향을 확정한다:

목적: 이 인터페이스가 해결하는 문제는 무엇인가? 누가 사용하는가?
톤: 극단적 선택 중 하나를 택한다: 극도로 미니멀, 맥시멀리스트 혼돈, 레트로-퓨처리스틱, 유기적/자연적, 럭셔리/정제된, 유희적/장난감 같은, 에디토리얼/매거진, 브루탈리스트/로우, 아르데코/기하학적, 소프트/파스텔, 산업적/실용적 등. 다양한 풍미 중 선택하되, 미적 방향에 충실한 디자인을 만든다.
제약: 기술 요구사항 (프레임워크, 성능, 접근성).
차별화: 이것을 잊을 수 없게 만드는 요소는 무엇인가? 사람들이 기억할 한 가지는?

중요: 명확한 개념적 방향을 선택하고 정밀하게 실행한다. 대담한 맥시멀리즘과 정제된 미니멀리즘 모두 효과적이다 - 핵심은 강도가 아닌 의도성이다.

그런 다음 다음과 같은 작동하는 코드(HTML/CSS/JS, React, Vue 등)를 구현한다:

design-frontend