frontend-design

개요

frontend-design이란?

frontend-design 스킬은 에이전트가 뛰어난 디자인 품질을 갖춘 독창적이고 실무 수준의 프론트엔드 인터페이스를 제작할 수 있게 합니다. 일반적인 AI 생성 코드와 달리, 이 스킬은 실제 디자인 표준을 반영한 창의적이고 세련된 결과물을 만들어냅니다. 시각적 방향성, 미학, 타이포그래피, 모션, 레이아웃, 인터페이스 다듬기가 중요한 웹 컴포넌트, 페이지, 애플리케이션, 포스터 및 기타 디지털 아티팩트를 제작할 때 이상적입니다.

누가 frontend-design을 사용해야 하나요?

이 스킬은 기본 스타일과 일반적인 레이아웃을 넘어 UI/UX를 향상시키고자 하는 개발자, 디자이너, 팀에 적합합니다. 프로젝트에 독특한 외관, 강한 브랜드 개성, 높은 접근성 기준이 요구될 때 frontend-design을 사용하세요. 특히 "AI 슬롭"을 피하고 전문적인 프론트엔드 결과를 얻고자 하는 분들에게 매우 유용합니다.

frontend-design이 해결하는 문제

• 일반적이고 반복적인 AI 미학 회피
• 창의적이고 맥락에 맞는 디자인 결정 보장
• 접근성 높고 반응형이며 시각적으로 매력적인 인터페이스 제작
• 타이포그래피, 색상, 모션, 공간 배치, UX 라이팅 안내

사용 방법

설치 단계

1. 다음 명령어로 스킬을 설치하세요:

   npx skills add https://github.com/pbakaus/impeccable --skill frontend-design
   

2. SKILL.md 파일에서 전체 개요와 맥락 요구사항을 확인하세요.
3. 다음 지원 파일과 폴더를 검토하세요:
   • 일반 안내는 README.md
   • 에이전트별 참고 사항은 AGENTS.md
   • 메타데이터는 metadata.json
   • 색상, 상호작용, 모션, 반응형, 공간, 타이포그래피, UX 라이팅에 대한 심층 내용은 reference/ 폴더

맥락 수집 프로토콜

디자인 작업 시작 전 프로젝트 맥락을 반드시 확인하세요:

• 대상 사용자
• 사용 사례
• 브랜드 개성과 톤
  이 맥락은 코드만으로는 알 수 없으므로, 항상 제작자나 프로젝트 문서에서 수집해야 합니다.

주요 참고 파일

실용적인 디자인 지침을 위해 다음 파일들을 미리 살펴보세요:

• reference/color-and-contrast.md: 최신 색상 시스템과 팔레트 구조
• reference/interaction-design.md: 인터랙티브 상태와 접근성
• reference/motion-design.md: 애니메이션 타이밍과 이징
• reference/responsive-design.md: 모바일 우선, 입력 감지, 안전 영역
• reference/spatial-design.md: 간격, 그리드, 시각적 계층
• reference/typography.md: 글꼴 선택, 계층, 가독성
• reference/ux-writing.md: 버튼 라벨, 오류 메시지, 빈 상태

워크플로우 적응

frontend-design 원칙을 자신의 저장소와 도구에 통합하세요. 참고 자료는 복사 붙여넣기용이 아니라 실용적인 가이드로 활용하며, 브랜드, 대상, 프로젝트 제약에 맞게 조정하세요.

자주 묻는 질문

상세 디자인 가이드는 어디서 찾을 수 있나요?

색상, 상호작용, 모션, 반응형 레이아웃, 공간 디자인, 타이포그래피, UX 라이팅에 관한 전문 가이드는 reference/ 폴더를 확인하세요.

frontend-design은 어떻게 접근성을 개선하나요?

이 스킬은 적절한 포커스 링 디자인, 의미론적 색상 팔레트, 명확한 인터랙티브 상태, 읽기 쉬운 타이포그래피를 강조하여 접근성 높은 인터페이스를 만듭니다.

모든 프로젝트에 frontend-design이 적합한가요?

높은 시각 품질과 독특한 디자인 방향이 필요할 때 frontend-design을 사용하세요. 빠른 프로토타입이나 미학이 중요하지 않은 프로젝트에는 더 간단한 스킬이 적합할 수 있습니다.

전체 파일 트리를 어떻게 확인하나요?

에이전트 스킬 디렉터리의 Files 탭을 열어 frontend-design과 함께 제공되는 모든 중첩 참조 및 보조 스크립트를 확인할 수 있습니다.