프론트엔드 디자인은(는) 무엇을 하나요?
개요
이 공개 복사본은 https://github.com/tech-leads-club/agent-skills의 packages/skills-catalog/skills/(design)/frontend-design 패키지를 네이티브 Omni Skills 편집 형식으로 변환하며, 원본 출처를 숨기지 않습니다.
Operator가 upstream 워크플로우, 지원 파일 및 저장소 컨텍스트를 온전히 유지해야 하는 동시에, 공개 검증자와 비공식 개선자가 정상적인 downstream 흐름을 계속 수행할 수 있도록 할 때 사용하십시오.
이 복사본은 복사된 upstream 파일을 그대로 유지하며, metadata.json의 external_source 블록과 ORIGIN.md를 출처 확인을 위한 앵커로 사용합니다.
이 스킬은 일반적인 "AI 슬롭" 미학을 피하고, 독특하고 프로덕션 수준의 프론트엔드 인터페이스를 만드는 것을 안내합니다. 미학적 세부 사항과 창의적인 선택에 탁월한 주의를 기울여 실제 작동하는 코드를 구현하십시오.
공개 제목에 명확하게 매핑되지 않은 가져온 소스 섹션은 아래 또는 지원 파일에 그대로 보존됩니다. 주목할 만한 가져온 섹션: 디자인 방향, AI Slop 테스트.
이 스킬을 사용해야 할 때
이 섹션을 트리거 필터로 사용하십시오. Operator가 파일을 로드하거나, 명령을 실행하거나, 풀 리퀘스트를 열기 전에 활성화 경계를 명확히 해야 합니다.
- 요청이 가져온 소스의 의도와 명확히 일치할 때 사용: 독특하고 프로덕션 수준의 프론트엔드 인터페이스를 높은 디자인 품질로 만듭니다. 사용자가 웹 컴포넌트, 페이지, 아티팩트, 포스터 또는 애플리케이션을 구축해 달라고 요청할 때 이 스킬을 사용하십시오. 창의적이고 세련된 코드를 생성합니다.
- Operator가 처음부터 프로세스를 다시 작성하지 않고 upstream 워크플로우 세부 사항을 유지해야 할 때 사용합니다.
- 답변, PR 또는 검토 패킷에서 출처 추적성이 유지되어야 할 때 사용합니다.
- 복사된 upstream 참조, 예제 또는 스크립트가 답변을 실질적으로 개선할 때 사용합니다.
- 비공식 개선자가 인수하기 전에 워크플로우가 공개 복사 저장소에서 검토 가능한 상태로 유지되어야 할 때 사용합니다.
운영 테이블
| 상황 | 시작 위치 | 중요한 이유 |
|---|---|---|
| 첫 사용 | metadata.json | 복사된 워크플로우를 건드리기 전에 external_source 블록을 통해 저장소, 브랜치, 커밋 및 가져온 경로를 확인합니다. |
| 출처 검토 | ORIGIN.md | 검토자에게 가져온 소스에 대한 일반 언어 감사 추적(audit trail)을 제공합니다. |
| 워크플로우 실행 | references/color-and-contrast.md | 실행을 실질적으로 변경하는 가장 작은 복사 파일부터 시작합니다. |
| 지원 컨텍스트 | references/interaction-design.md | 전체 패키지를 로드하지 않고 다음으로 가장 관련성 높은 복사 소스 파일을 추가합니다. |
| 인계 결정 | ## 관련 스킬 | 작업이 표류할 때 Operator가 더 강력한 네이티브 스킬로 전환하도록 돕습니다. |
워크플로우
이 워크플로우는 의도적으로 편집과 운영을 동시에 수행합니다. 가져온 소스를 Operator에게 유용하게 유지하면서도 downstream 개선자 흐름에 공급되는 공개 복사 기준을 충족시킵니다.
- 사용자 목표, 가져온 워크플로우의 범위 및 이 스킬이 여전히 작업에 적합한 라우터인지 확인합니다.
- 복사된 upstream 지원 파일을 로드하기 전에 개요 및 출처 파일을 읽습니다.
- 현재 요청의 결과를 실질적으로 변경하는 참조, 예제, 프롬프트 또는 스크립트만 로드합니다.
- 작업 노트에 출처 및 소스 경계를 명시적으로 유지하면서 upstream 워크플로우를 실행합니다.
- upstream 기대치와 복사 파일에서 지적할 수 있는 증거에 대해 결과를 검증합니다.
- 작업이 이 가져온 워크플로우의 중심 범위를 벗어나면 관련 스킬로 에스컬레이션하거나 인계합니다.
- 병합 또는 마감 전에 사용된 항목, 변경된 사항 및 검토자가 여전히 확인해야 할 사항을 기록합니다.
가져온 워크플로우 노트
가져온 항목: 디자인 방향
대담한 미학적 방향으로 확실히 결정하십시오:
- 목적: 이 인터페이스는 어떤 문제를 해결합니까? 누가 사용합니까?
- 분위기: 극단을 선택하십시오: 극단적 미니멀리즘, 맥시멀리스트 혼돈, 레트로-미래주의, 유기적/자연적, 럭셔리/세련됨, 장난기/장난감 스타일, 에디토리얼/매거진, 브루탈리스트/로우, 아르데코/기하학적, 소프트/파스텔, 인더스트리얼/실용적 등. 선택할 수 있는 많은 스타일이 있습니다. 영감을 위해 이것들을 사용하되, 미학적 방향에 충실한 디자인을 만드십시오.
- 제약 조건: 기술적 요구 사항(프레임워크, 성능, 접근성).
- 차별화: 이 인터페이스를 잊을 수 없게 만드는 것은 무엇입니까? 누군가가 기억할 한 가지는 무엇입니까?
중요: 명확한 개념적 방향을 선택하고 정밀하게 실행하십시오. 대담한 맥시멀리즘과 정제된 미니멀리즘 모두 효과적입니다. 핵심은 강도가 아니라 의도성입니다.
그런 다음 다음과 같은 작동하는 코드를 구현하십시오:
- 프로덕션 수준이고 기능적
- 시각적으로 인상적이고 기억에 남을 것
- 명확한 미학적 관점으로 일관성 있을 것
- 모든 세부 사항에서 세심하게 정제될 것
예제
예제 1: upstream 워크플로우 직접 요청
<작업>을 처리하기 위해 @frontend-design을 사용하십시오. 복사된 upstream 워크플로우부터 시작하고, 결과를 변경하는 파일만 로드하며, 출처를 답변에 명시적으로 유지하십시오.
설명: Operator가 가져온 워크플로우는 필요하지만 전체 저장소가 필요하지 않을 때 가장 안전한 시작점입니다.
예제 2: 출처 기반 검토 요청
metadata.json과 ORIGIN.md에 대해 @frontend-design을 검토하고, 어떤 복사된 upstream 파일을 먼저 로드할지와 그 이유를 설명하십시오.
설명: 검토 또는 문제 해결 전에 출처와 파일 선택에 대한 정확하고 감사 가능한 설명이 필요할 때 사용합니다.
예제 3: 실행 전 복사된 지원 파일 좁히기
<작업>을 위해 @frontend-design을 사용하십시오. 결과를 변경하는 복사된 참조, 예제 또는 스크립트만 로드하고, 진행하기 전에 파일 이름을 명시적으로 지정하십시오.
설명: 기본적으로 전체 복사 패키지를 로드하는 대신 점진적 공개(progressive disclosure)에 스킬을 맞추는 데 도움이 됩니다.
예제 4: 검토자 패킷 작성
복사된 upstream 파일과 출처를 사용하여 @frontend-design을 검토하고, 병합 전에 간극(gap)을 요약하십시오.
설명: PR이 인간 검토를 기다리고 있고 반복 가능한 감사 패킷을 원할 때 유용합니다.
가져온 사용법 노트
가져온 항목: 예제
예제 1: 강한 미학을 가진 랜딩 페이지
사용자 말: "개발자 도구 제품을 위한 랜딩 페이지를 만들어 주세요. 다른 모든 SaaS처럼 보이지 않는 것으로요." 작업: 대담한 방향(예: 브루탈리스트 또는 에디토리얼)을 선택합니다. 독특한 서체 조합과 일관된 팔레트를 선택합니다. 유동적인 간격과 하나의 명확한 초점으로 구현합니다. 카드 속 카드(카드 인셉션)와 히어로 메트릭 클리셰를 피합니다. 결과: 명확한 계층 구조, 기억에 남는 타이포그래피, 일반적인 AI 특징(보라색 그라데이션, 두꺼운 테두리가 있는 둥근 카드 없음)이 없는 단일 페이지 레이아웃.
예제 2: 대시보드 또는 앱 UI
사용자 말: "다크 테마로 분석 데이터를 볼 수 있는 대시보드를 만들어 주세요." 작업: 특정 다크 미학(예: 기본 glow-on-black이 아닌, 색조가 있는 중립 색상의 정제된 다크)으로 확정합니다. 패널에 컨테이너 쿼리를 사용합니다. 하나의 신중한 모션 모먼트(예: 계단식 목록 로드)를 추가합니다. 빈 상태가 유용하도록 합니다. 결과: 의도적으로 디자인된 느낌의 기능적인 대시보드—독특한 팔레트, 청록/보라색 글로우 없음, 명확한 데이터 계층 구조 및 반응형 동작.
예제 3: 포스터 또는 마케팅 아티팩트
사용자 말: "프론트엔드 성능에 관한 컨퍼런스 발표용 포스터를 만들어 주세요." 작업: 강력한 타이포그래피 또는 시각적 컨셉을 선택합니다. 모듈식 타입 스케일과 제한된 팔레트를 사용합니다. 일반적인 스톡 사진 + 헤드라인 레이아웃을 피합니다. 결과: 독립적인 디자인 아티팩트로 설 수 있는 포스터—기억에 남는 타입과 구성, 템플릿 채우기가 아님.
모범 사례
생성된 공개 스킬을 upstream 저장소 주변의 검토 가능한 패키징 레이어로 취급하십시오. 목표는 출처를 명시적으로 유지하고 실행을 실질적으로 개선하는 복사된 소스 자료만 로드하는 것입니다.
-
타이포그래피 → 스케일, 페어링 및 로딩 전략에 대한 타이포그래피 참조를 참고하십시오.
- 아름답고 독특하며 흥미로운 폰트를 선택하십시오.
- 독특한 디스플레이 폰트와 정제된 본문 폰트를 페어링하십시오.
- DO: 유동적 크기 조정(clamp)이 포함된 모듈식 타입 스케일 사용 DO: 다양한 폰트 두께와 크기를 사용하여 명확한 시각적 계층 구조 생성 DON'T: 과도하게 사용된 폰트 사용 금지—Inter, Roboto, Arial, Open Sans, 시스템 기본값 DON'T: 기술/개발자 분위기를 위한 게으른 약칭으로 모노스페이스 타이포그래피 사용 금지 DON'T: 모든 헤딩 위에 둥근 모서리의 큰 아이콘 배치 금지—가치를 거의 더하지 못하고 사이트를 템플릿처럼 보이게 함 ### 색상 및 테마 → OKLCH, 팔레트 및 다크 모드에 대한 색상 참조를 참고하십시오.
- 일관된 팔레트를 확정하십시오.
- 선명한 악센트가 있는 지배적인 색상은 소심하고 고르게 분포된 팔레트보다 성능이 좋습니다.
- DO: 지각적으로 균일하고 유지 관리 가능한 팔레트를 위해 최신 CSS 색상 함수(oklch, color-mix, light-dark) 사용 DO: 중립 색상을 브랜드 색조로 물들이기—미묘한 힌트조차 무의식적인 응집력을 만듦 DON'T: 색상 배경에 회색 텍스트 사용 금지—흐릿해 보임; 대신 배경색의 음영 사용 DON'T: 순수 검정(#000) 또는 순수 흰색(#fff) 사용 금지—항상 색조를 추가; 순수 흑백은 자연에 존재하지 않음 DON'T: AI 색상 팔레트 사용 금지: 어두운 배경의 시안, 보라색에서 파란색 그라데이션, 어두운 배경의 네온 악센트 DON'T: "임팩트"를 위한 그라데이션 텍스트 사용 금지—특히 지표나 헤딩에; 의미보다는 장식적임 DON'T: 글로우 악센트가 있는 다크 모드 기본 설정 금지—실제 디자인 결정 없이 "멋져" 보임 ### 레이아웃 및 공간 → 그리드, 리듬 및 컨테이너 쿼리에 대한 공간 참조를 참고하십시오.
가져온 운영 노트
가져온 항목: 프론트엔드 미학 가이드라인
타이포그래피
→ 스케일, 페어링 및 로딩 전략에 대한 타이포그래피 참조를 참고하십시오.
아름답고 독특하며 흥미로운 폰트를 선택하십시오. 독특한 디스플레이 폰트와 정제된 본문 폰트를 페어링하십시오.
DO: 유동적 크기 조정(clamp)이 포함된 모듈식 타입 스케일 사용 DO: 다양한 폰트 두께와 크기를 사용하여 명확한 시각적 계층 구조 생성 DON'T: 과도하게 사용된 폰트 사용 금지—Inter, Roboto, Arial, Open Sans, 시스템 기본값 DON'T: 기술/개발자 분위기를 위한 게으른 약칭으로 모노스페이스 타이포그래피 사용 금지 DON'T: 모든 헤딩 위에 둥근 모서리의 큰 아이콘 배치 금지—가치를 거의 더하지 못하고 사이트를 템플릿처럼 보이게 함
색상 및 테마
→ OKLCH, 팔레트 및 다크 모드에 대한 색상 참조를 참고하십시오.
일관된 팔레트를 확정하십시오. 선명한 악센트가 있는 지배적인 색상은 소심하고 고르게 분포된 팔레트보다 성능이 좋습니다.
DO: 지각적으로 균일하고 유지 관리 가능한 팔레트를 위해 최신 CSS 색상 함수(oklch, color-mix, light-dark) 사용 DO: 중립 색상을 브랜드 색조로 물들이기—미묘한 힌트조차 무의식적인 응집력을 만듦 DON'T: 색상 배경에 회색 텍스트 사용 금지—흐릿해 보임; 대신 배경색의 음영 사용 DON'T: 순수 검정(#000) 또는 순수 흰색(#fff) 사용 금지—항상 색조를 추가; 순수 흑백은 자연에 존재하지 않음 DON'T: AI 색상 팔레트 사용 금지: 어두운 배경의 시안, 보라색에서 파란색 그라데이션, 어두운 배경의 네온 악센트 DON'T: "임팩트"를 위한 그라데이션 텍스트 사용 금지—특히 지표나 헤딩에; 의미보다는 장식적임 DON'T: 글로우 악센트가 있는 다크 모드 기본 설정 금지—실제 디자인 결정 없이 "멋져" 보임
레이아웃 및 공간
→ 그리드, 리듬 및 컨테이너 쿼리에 대한 공간 참조를 참고하십시오.
다양한 간격을 통해 시각적 리듬을 만드십시오—모든 곳에 동일한 패딩을 사용하지 마십시오. 비대칭성과 예상치 못한 구성을 수용하십시오. 강조를 위해 의도적으로 그리드를 깨십시오.
DO: 다양한 간격을 통해 시각적 리듬 생성—좁은 그룹화, 넉넉한 분리 DO: 더 큰 화면에서 숨 쉴 수 있는 clamp()를 사용한 유동적 간격 사용 DO: 비대칭성과 예상치 못한 구성 사용; 강조를 위해 의도적으로 그리드를 깨기 DON'T: 모든 것을 카드로 감싸기—모든 것에 컨테이너가 필요한 것은 아님 DON'T: 카드 안에 카드 중첩 금지—시각적 소음, 계층 구조 평탄화 DON'T: 동일한 카드 그리드 사용 금지—동일한 크기의 카드에 아이콘 + 헤딩 + 텍스트가 끝없이 반복됨 DON'T: 히어로 메트릭 레이아웃 템플릿 사용 금지—큰 숫자, 작은 레이블, 지원 통계, 그라데이션 악센트 DON'T: 모든 것을 가운데 정렬 금지—왼쪽 정렬 텍스트와 비대칭 레이아웃이 더 디자인된 느낌을 줌 DON'T: 모든 곳에 동일한 간격 사용 금지—리듬이 없으면 레이아웃이 단조로워짐
시각적 세부 사항
DO: 브랜드를 강화하는 의도적이고 목적 있는 장식 요소 사용 DON'T: 모든 곳에 글라스모피즘 사용 금지—블러 효과, 유리 카드, 글로우 테두리를 목적보다 장식적으로 사용 DON'T: 한쪽에 두꺼운 색상 테두리가 있는 둥근 요소 사용 금지—의도적으로 보이지 않는 게으른 악센트 DON'T: 장식으로 스파크라인 사용 금지—정교해 보이지만 의미 있는 것을 전달하지 못하는 작은 차트 DON'T: 일반적인 그림자가 있는 둥근 직사각형 사용 금지—안전하고, 잊혀지며, 어떤 AI 출력물처럼 보일 수 있음 DON'T: 진정한 대안이 없는 경우가 아니라면 모달 사용 금지—모달은 게으름의 표시
모션
→ 타이밍, 이징 및 축소 모션에 대한 모션 참조를 참고하십시오.
영향력이 큰 순간에 집중하십시오: 계단식 공개가 있는 잘 조율된 페이지 로드 한 번이 흩어진 마이크로 인터랙션보다 더 많은 즐거움을 만듭니다.
DO: 상태 변경(진입, 종료, 피드백)을 전달하기 위해 모션 사용 DO: 자연스러운 감속을 위해 지수 이징(ease-out-quart/quint/expo) 사용 DO: 높이 애니메이션의 경우 높이를 직접 애니메이션하는 대신 grid-template-rows 전환 사용 DON'T: 레이아웃 속성(width, height, padding, margin) 애니메이션 금지—transform과 opacity만 사용 DON'T: 바운스 또는 탄성 이징 사용 금지—날짜가 지나고 싸구려처럼 느껴짐; 실제 물체는 부드럽게 감속함
상호작용
→ 폼, 포커스 및 로딩 패턴에 대한 상호작용 참조를 참고하십시오.
상호작용이 빠르게 느껴지도록 만드십시오. 낙관적 UI를 사용하십시오—즉시 업데이트하고 나중에 동기화하십시오.
DO: 점진적 공개 사용—간단하게 시작하고 상호작용을 통해 정교함을 드러내십시오(기본 옵션 먼저, 확장 가능한 섹션 뒤에 고급 옵션 배치)
…
[원문이 잘렸습니다; 전체 번역을 위해서는 전체 SKILL.md 텍스트가 필요합니다]