frontend-design

무엇을 하는 플러그인인가

저장소 README는 "generic AI aesthetics"를 피하는 독창적이고 실제 서비스에 쓸 수준의 프런트엔드를 만든다고 설명합니다. 구체적으로는 뚜렷한 미적 방향, 개성 있는 타이포그래피와 색상, 눈에 띄는 애니메이션과 디테일, 맥락에 맞는 구현을 내세웁니다.

구성은 skills/frontend-design 스킬 하나입니다. 별도 명령을 외울 필요는 없고, README에 따르면 프런트엔드 작업에서 Claude가 자동으로 이 스킬을 씁니다. 정확한 발동 조건은 README에 적혀 있지 않습니다.

설치와 사용

설치 뒤 평소처럼 UI를 요청합니다. README의 예시 요청은 "음악 스트리밍 앱의 대시보드 만들어줘", "AI 보안 스타트업 랜딩 페이지 만들어줘", "다크 모드가 있는 설정 패널 디자인해줘" 같은 문장입니다.

Claude가 먼저 미적 방향을 정하고 그에 맞춰 코드를 씁니다. 방향이 마음에 안 들면 구체적으로 바꿔 달라고 요청하세요.

/plugin install frontend-design@claude-plugins-official

결과를 낫게 만드는 요청 방법

• 용도와 대상을 먼저 말합니다. "동네 병원 예약 페이지, 60대 이상 이용자 많음"처럼요.
• 피하고 싶은 것을 적습니다. 예를 들면 그라데이션 배경, 똑같은 카드 격자, 이모지 아이콘.
• 이미 있는 디자인 규칙이 있으면 알려줍니다. 색상 값, 폰트, 여백 단위 등.
• 한 번에 전체를 맡기기보다 화면 하나씩 만들고 브라우저로 확인합니다.

맞지 않는 경우

• 이미 정해진 디자인 시스템을 그대로 따라야 하는 작업. 이 스킬은 새로운 방향을 만드는 쪽이라 규칙 준수가 목적이면 규칙 문서를 우선 주세요.
• 디자인 시안 파일(Figma 등)을 코드로 옮기는 작업. 시안을 읽는 도구가 따로 필요합니다.
• 디자인이 필요 없는 백엔드나 로직 작업.

실제 예시

고양이 사료 비교 사이트의 소개 페이지를 만들어줘. 정보가 많은 편이라 읽기 편해야 하고, 흔한 보라색 그라데이션은 쓰지 마.

이 설정 화면을 다크 모드까지 고려해서 다시 디자인해줘. 기능과 필드는 그대로 둬.

흔한 실수와 쓰지 말아야 할 때

• 플러그인을 설치했다고 결과가 보장되지는 않습니다. 요청이 모호하면 결과도 모호합니다. 대상, 분위기, 금지 사항을 적으세요.
• 화면을 실제로 열어보지 않으면 깨진 레이아웃을 놓칩니다. 휴대폰 폭에서도 확인하세요.
• 스킬 이름과 설명은 켜 둔 동안 매 턴 컨텍스트에 들어갑니다. 프런트엔드 작업을 안 하는 프로젝트에서는 꺼 두세요.
• "예쁘게 해줘"만으로는 방향이 정해지지 않습니다. 참고하고 싶은 분위기를 말로 설명하세요.

자주 묻는 질문