frontend-design

개요

frontend-design이란?

frontend-design 스킬은 시각적으로 독창적이고 프로덕션 수준의 프런트엔드 인터페이스를 만들기 위한 전문 툴킷입니다. 일반적인 코드 생성기와 달리, 이 스킬은 창의적 방향성, 미학, 타이포그래피, 모션, 레이아웃, 인터페이스 다듬기에 중점을 둡니다. 전형적인 AI 출력물처럼 보이지 않고 의도된 느낌을 주는 웹 컴포넌트, 페이지, 애플리케이션을 제공하도록 설계되었습니다.

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

이 스킬은 웹 프로젝트의 시각적 및 인터랙티브 품질을 높이고자 하는 프런트엔드 개발자, UI/UX 디자이너, 제품 팀에 적합합니다. 다음과 같은 경우 frontend-design을 사용하세요:

• 웹 앱, 랜딩 페이지 또는 디지털 아티팩트에 고품질의 창의적인 UI 디자인이 필요할 때
• 색상, 타이포그래피, 모션, 반응형 레이아웃에 대한 지침이 필요할 때
• 일반적이고 영감 없는 AI 생성 인터페이스를 피하고 싶을 때
• 접근성과 디자인 모범 사례를 준수해야 할 때

어떤 문제를 해결하나요?

• 디자인 시작 전에 실제 프로젝트 및 브랜드 맥락을 요구하여 "AI 슬롭"을 방지합니다
• 색상, 간격, 타이포그래피, 상호작용에 대한 실행 가능한 디자인 시스템을 제공합니다
• 처음부터 접근성과 반응형 디자인을 내장합니다
• 실용적이고 프로덕션 준비가 된 코드와 디자인 패턴을 제공합니다

사용 방법

설치 단계

1. 프로젝트에 스킬 추가:
   다음 명령을 실행하세요:

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

2. 핵심 문서 검토:
   • SKILL.md에서 개요와 맥락 수집 프로토콜을 확인하세요.
   • 추가 설정 및 사용법은 README.md, AGENTS.md, metadata.json을 참고하세요.
3. 디자인 참고 자료 탐색:
   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)
   • UX 라이팅 (reference/ux-writing.md)
4. 워크플로우에 맞게 조정:
   디자인 원칙과 코드 예제를 자신의 저장소와 도구 체인에 통합하세요. 이 스킬은 그대로 복사하는 것이 아니라 적응하여 사용하는 것을 권장합니다.

주요 워크플로우 팁

• 디자인 작업을 시작하기 전에 항상 프로젝트 맥락(대상, 사용 사례, 브랜드 톤)을 수집하세요.
• 일관되고 접근 가능한 UI를 위해 제공된 색상, 간격, 타이포그래피 시스템을 사용하세요.
• 인터페이스가 다듬어지고 직관적으로 느껴지도록 모션 및 상호작용 가이드를 참고하세요.
• reference/ 파일에서 바로 사용할 수 있는 CSS 및 디자인 패턴을 확인하세요.

자주 묻는 질문

언제 frontend-design 스킬을 사용해야 하나요?

웹 컴포넌트, 페이지 또는 애플리케이션의 시각적 및 인터랙티브 품질을 만들거나 개선해야 할 때, 특히 디자인 맥락과 브랜드 개성이 중요한 경우 frontend-design을 사용하세요.

어떤 파일을 먼저 봐야 하나요?

• 개요와 맥락 요구 사항은 SKILL.md
• 색상 시스템 지침은 reference/color-and-contrast.md
• 상태 및 접근성 모범 사례는 reference/interaction-design.md
• 애니메이션 및 타이밍은 reference/motion-design.md
• 적응형 레이아웃은 reference/responsive-design.md
• 간격 및 그리드는 reference/spatial-design.md

frontend-design은 코드를 생성하나요, 아니면 가이드라인만 제공하나요?

실용적이고 프로덕션 준비가 된 코드 스니펫(주로 CSS)과 이를 효과적으로 구현할 수 있도록 상세한 디자인 가이드라인을 모두 제공합니다.

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

이 스킬은 디자인 품질, 브랜드 차별화, 접근성이 우선인 프로젝트에 가장 적합합니다. 미학이 덜 중요한 순수 기능성 또는 내부 도구에는 더 단순한 접근법이 적합할 수 있습니다.

더 자세한 내용은 어디서 찾을 수 있나요?

파일 탭에서 전체 파일 트리와 모든 중첩 참조 및 도움 스크립트를 살펴보면 심층 가이드와 예제를 확인할 수 있습니다.