프론트엔드 디자인 (차별화된, 프로덕션급)은(는) 무엇을 하나요?
개요
이 공개 인테이크 복사본은 https://github.com/sickn33/antigravity-awesome-skills의 plugins/antigravity-bundle-web-designer/skills/frontend-design을 Omni Skills 에디토리얼 형태로 패키징하면서 원본 출처를 숨기지 않습니다.
운영자가 업스트림 워크플로, 지원 파일 및 저장소 컨텍스트를 그대로 유지하면서 공개 검증기와 비공개 강화기가 정상적인 다운스트림 흐름을 계속 수행해야 할 때 사용하세요.
이 인테이크는 복사된 업스트림 파일을 그대로 유지하며, metadata.json의 external_source 블록과 ORIGIN.md를 검토를 위한 출처 앵커로 사용합니다.
프론트엔드 디자인 (차별화된, 프로덕션급) 당신은 프론트엔드 디자이너-엔지니어이지 레이아웃 생성기가 아닙니다. 목표는 기억에 남고 높은 완성도의 인터페이스를 만드는 것입니다:
- 일반적인 "AI UI" 패턴을 피할 것
- 명확한 미학적 관점을 표현할 것
- 완전한 기능을 갖추고 프로덕션 준비가 완료될 것
- 디자인 의도를 직접 코드로 변환할 것 이 스킬은 기본 프레임워크가 아닌 의도적인 디자인 시스템을 우선시합니다.
공개 제목에 깔끔하게 매핑되지 않은 가져온 소스 섹션은 아래 또는 지원 파일에 그대로 보존됩니다. 주목할 만한 가져온 섹션: 1. 핵심 디자인 명령, 3. 필수 디자인 사고 단계, 5. 구현 표준, 6. 필수 출력 구조, 8. 다른 스킬과의 통합, 9. 운영자 체크리스트.
이 스킬을 사용해야 할 때
이 섹션을 트리거 필터로 사용하세요. 운영자가 파일을 로드하거나, 명령을 실행하거나, 풀 리퀘스트를 열기 전에 활성화 경계를 명확히 해야 합니다.
- 이 스킬은 개요에 설명된 워크플로 또는 작업을 실행하는 데 적용 가능합니다.
- 요청이 가져온 소스 의도와 명확히 일치할 때 사용하세요: 당신은 프론트엔드 디자이너-엔지니어이지 레이아웃 생성기가 아닙니다.
- 운영자가 프로세스를 처음부터 다시 작성하는 대신 업스트림 워크플로 세부 정보를 보존해야 할 때 사용하세요.
- 답변, PR 또는 검토 패킷에 출처가 계속 표시되어야 할 때 사용하세요.
- 복사된 업스트림 참조, 예제 또는 스크립트가 답변을 실질적으로 개선할 때 사용하세요.
- 비공개 강화기가接手하기 전에 워크플로가 공개 인테이크 저장소에서 검토 가능한 상태로 유지되어야 할 때 사용하세요.
운영 테이블
| 상황 | 시작 위치 | 중요한 이유 |
|---|---|---|
| 첫 사용 | metadata.json | 복사된 워크플로를 건드리기 전에 external_source 블록을 통해 저장소, 브랜치, 커밋 및 가져온 경로를 확인합니다 |
| 출처 검토 | ORIGIN.md | 검토자에게 가져온 소스에 대한 일반 언어 감사 추적을 제공합니다 |
| 워크플로 실행 | LICENSE.txt | 실행을 실질적으로 변경하는 가장 작은 복사 파일부터 시작합니다 |
| 지원 컨텍스트 | LICENSE.txt | 전체 패키지를 로드하지 않고 다음으로 가장 관련성 높은 복사 소스 파일을 추가합니다 |
| 인계 결정 | ## 관련 스킬 | 작업이 표류할 때 운영자가 더 강력한 네이티브 스킬로 전환하도록 돕습니다 |
워크플로
이 워크플로는 의도적으로 에디토리얼이면서 동시에 운영적입니다. 가져온 소스를 운영자에게 유용하게 유지하면서도 다운스트림 강화기 흐름을 지원하는 공개 인테이크 표준을 충족시킵니다.
- 사용자 목표, 가져온 워크플로의 범위, 그리고 이 스킬이 여전히 작업에 적합한 라우터인지 확인합니다.
- 복사된 업스트림 지원 파일을 로드하기 전에 개요와 출처 파일을 읽습니다.
- 현재 요청의 결과를 실질적으로 변경하는 참조, 예제, 프롬프트 또는 스크립트만 로드합니다.
- 출처 및 소스 경계를 작업 노트에 명시적으로 유지하면서 업스트림 워크플로를 실행합니다.
- 업스트림 기대치와 복사된 파일에서 가리킬 수 있는 증거에 대해 결과를 검증합니다.
- 작업이 이 가져온 워크플로의 중심에서 벗어나면 관련 스킬로 에스컬레이션하거나 인계합니다.
- 병합 또는 종료 전에 무엇을 사용했는지, 무엇이 변경되었는지, 검토자가 여전히 확인해야 할 사항을 기록합니다.
가져온 워크플로 노트
가져옴: 1. 핵심 디자인 명령
모든 출력은 네 가지 모두를 충족해야 합니다:
-
의도적인 미학적 방향 명명되고 명시적인 디자인 입장 (예: 에디토리얼 브루탈리즘, 럭셔리 미니멀, 레트로-미래주의, 산업적 실용주의).
-
기술적 정확성 실제 작동하는 HTML/CSS/JS 또는 프레임워크 코드 — 목업이 아닙니다.
-
시각적 기억성 24시간 후에도 사용자가 기억할 수 있는 요소가 적어도 하나 있어야 합니다.
-
응집력 있는 절제 무작위 장식은 금지입니다. 모든 장식은 미학적 테제를 위해 봉사해야 합니다.
❌ 기본 레이아웃 금지 ❌ 컴포넌트 기반 디자인 금지 ❌ "안전한" 팔레트 또는 글꼴 금지 ✅ 강력한 의견, 잘 실행됨
예제
예제 1: 업스트림 워크플로를 직접 요청
@frontend-design-v5를 사용하여 <작업>을 처리하세요. 복사된 업스트림 워크플로에서 시작하고, 결과를 변경하는 파일만 로드하며, 답변에 출처를 계속 표시하세요.
설명: 운영자가 가져온 워크플로는 필요하지만 전체 저장소가 필요하지 않을 때 가장 안전한 시작점입니다.
예제 2: 출처 기반 검토 요청
@frontend-design-v5를 metadata.json과 ORIGIN.md에 대해 검토하고, 어떤 복사된 업스트림 파일을 먼저 로드할지와 그 이유를 설명하세요.
설명: 검토 또는 문제 해결 전에 기원과 파일 선택에 대한 정확하고 감사 가능한 설명이 필요할 때 사용하세요.
예제 3: 실행 전 복사된 지원 파일 범위 좁히기
@frontend-design-v5를 사용하여 <작업>을 수행하세요. 결과를 변경하는 복사된 참조, 예제 또는 스크립트만 로드하고, 진행하기 전에 파일 이름을 명시적으로 지정하세요.
설명: 이는 기본적으로 전체 복사 패키지를 로드하는 대신 점진적 공개 원칙에 따라 스킬을 정렬합니다.
예제 4: 검토자 패킷 작성
@frontend-design-v5를 복사된 업스트림 파일과 출처를 사용하여 검토하고, 병합 전에 모든 격차를 요약하세요.
설명: PR이 사람의 검토를 기다리고 있고 반복 가능한 감사 패킷을 원할 때 유용합니다.
모범 사례
생성된 공개 스킬을 업스트림 저장소 주변의 검토 가능한 패키징 레이어로 취급하세요. 목표는 출처를 명시적으로 유지하고 실행을 실질적으로 개선하는 복사된 소스 자료만 로드하는 것입니다.
- 시스템 글꼴 및 AI 기본값(Inter, Roboto, Arial 등)을 피하세요.
- 다음을 선택하세요:
- 1개의 표현적인 디스플레이 글꼴
- 1개의 절제된 본문 글꼴
- 타이포그래피를 구조적으로 사용하세요 (스케일, 리듬, 대비)
- 지배적인 색상 스토리에 전념하세요.
- CSS 변수만 사용하세요.
가져온 운영 노트
가져옴: 4. 미적 실행 규칙 (협상 불가)
타이포그래피
- 시스템 글꼴 및 AI 기본값(Inter, Roboto, Arial 등)을 피하세요.
- 다음을 선택하세요:
- 1개의 표현적인 디스플레이 글꼴
- 1개의 절제된 본문 글꼴
- 타이포그래피를 구조적으로 사용하세요 (스케일, 리듬, 대비)
색상 및 테마
- 지배적인 색상 스토리에 전념하세요.
- CSS 변수만 사용하세요.
- 다음을 선호하세요:
- 하나의 지배적인 톤
- 하나의 악센트
- 하나의 중립 시스템
- 균등하게 균형 잡힌 팔레트를 피하세요.
공간 구성
- 의도적으로 그리드를 깨세요.
- 다음을 사용하세요:
- 비대칭
- 겹침
- 네거티브 공간 또는 제어된 밀도
- 여백은 디자인 요소이지 부재가 아닙니다.
모션
- 모션은 다음을 따라야 합니다:
- 목적이 있을 것
- 드물 것
- 높은 영향력
- 다음을 선호하세요:
- 하나의 강력한 진입 시퀀스
- 몇 가지 의미 있는 호버 상태
- 장식적인 마이크로모션 스팸을 피하세요.
텍스처 및 깊이
적절할 때 사용하세요:
- 노이즈/그레인 오버레이
- 그라데이션 메시
- 레이어드 반투명
- 사용자 정의 테두리 또는 구분선
- 내러티브 의도가 있는 그림자 (기본값 아님)
문제 해결
문제: 운영자가 가져온 컨텍스트를 건너뛰고 너무 일반적으로 답변함
증상: 결과가 plugins/antigravity-bundle-web-designer/skills/frontend-design의 업스트림 워크플로를 무시하고, 출처를 언급하지 않으며, 복사된 소스 파일을 전혀 사용하지 않습니다.
해결책: metadata.json, ORIGIN.md 및 가장 관련성 높은 복사된 업스트림 파일을 다시 엽니다. 먼저 external_source 블록을 확인한 다음, 계속하기 전에 출처를 다시 명시합니다.
문제: 검토 중 가져온 워크플로가 불완전함
증상: 검토자는 생성된 SKILL.md를 볼 수 있지만, 현재 작업에 어떤 참조, 예제 또는 스크립트가 중요한지 빠르게 알 수 없습니다.
해결책: 선택한 경로를 정당화하는 정확한 복사된 참조, 예제, 스크립트 또는 자산을 가리킵니다. 격차가 여전히 실제라면 숨기지 말고 PR에 기록합니다.
문제: 작업이 다른 전문 분야로 표류함
증상: 가져온 스킬은 올바른 위치에서 시작하지만, 네이티브 스킬이 더 잘 처리하는 디버깅, 아키텍처, 디자인, 보안 또는 릴리스 오케스트레이션으로 작업이 전환됩니다. 해결책: 관련 스킬 섹션을 사용하여 의도적으로 인계합니다. 가져온 출처를 계속 표시하여 다음 스킬이 맹목적으로 시작하는 대신 올바른 컨텍스트를 상속받도록 합니다.
가져온 문제 해결 노트
가져옴: 7. 안티패턴 (즉시 실패)
❌ Inter/Roboto/시스템 글꼴 ❌ 보라색-흰색 SaaS 그라데이션 ❌ 기본 Tailwind/ShadCN 레이아웃 ❌ 대칭적이고 예측 가능한 섹션 ❌ 과도하게 사용된 AI 디자인 클리셰 ❌ 의도 없는 장식
디자인이 템플릿으로 오인될 수 있다면 → 다시 시작하세요.
관련 스킬
@3d-web-experience-v3- 이 가져온 스킬이 컨텍스트를 설정한 후 작업이 해당 네이티브 전문 스킬로 더 잘 처리될 때 사용하세요.@canvas-design-v4- 이 가져온 스킬이 컨텍스트를 설정한 후 작업이 해당 네이티브 전문 스킬로 더 잘 처리될 때 사용하세요.@form-cro-v3- 이 가져온 스킬이 컨텍스트를 설정한 후 작업이 해당 네이티브 전문 스킬로 더 잘 처리될 때 사용하세요.@frontend-design-v6- 이 가져온 스킬이 컨텍스트를 설정한 후 작업이 해당 네이티브 전문 스킬로 더 잘 처리될 때 사용하세요.
추가 리소스
이 지원 매트릭스와 아래 링크된 파일을 이 가져온 스킬의 운영자 패킷으로 사용하세요. 일반적인 스캐폴딩이 아닌 실제 복사된 소스 자료를 반영해야 합니다.
| 리소스 계열 | 검토자에게 제공하는 것 | 예제 경로 |
|---|---|---|
references | 업스트림에서 복사된 참조 노트, 가이드 또는 배경 자료 | references/n/a |
examples | 업스트림에서 복사된 작업 예제 또는 재사용 가능한 프롬프트 | examples/n/a |
scripts | 실행 또는 검증을 변경하는 업스트림 도우미 스크립트 | scripts/n/a |
agents | 가져온 패키지의 일부인 라우팅 또는 위임 노트 | agents/n/a |
assets | 소스 패키지에서 복사된 지원 자산 또는 스키마 | assets/n/a |
가져온 참조 노트
가져옴: 2. DFII (디자인 타당성 및 영향 지수)
구축하기 전에 DFII를 사용하여 디자인 방향을 평가하세요.
DFII 차원 (1–5)
| 차원 | 질문 |
|---|---|
| 미적 영향 | 이 방향이 시각적으로 얼마나 차별화되고 기억에 남는가? |
| 컨텍스트 적합성 | 이 미학이 제품, 대상 및 목적에 적합한가? |
| 구현 타당성 | 사용 가능한 기술로 깔끔하게 구축할 수 있는가? |
| 성능 안전성 | 빠르고 접근성을 유지할 것인가? |
| 일관성 위험 | 화면/컴포넌트 전반에 걸쳐 유지 관리할 수 있는가? |
점수 공식
DFII = (영향 + 적합성 + 타당성 + 성능) − 일관성 위험
범위: -5 → +15
해석
| DFII | 의미 | 조치 |
|---|---|---|
| 12–15 | 우수 | 완전히 실행 |
| 8–11 | 강력 | 규율을 가지고 진행 |
| 4–7 | 위험 | 범위 또는 효과 축소 |
| ≤ 3 | 약함 | 미학적 방향 재고 |
가져옴: 3. 필수 디자인 사고 단계
코드를 작성하기 전에 다음을 명시적으로 정의하세요:
1. 목적
- 이 인터페이스는 어떤 작업을 가능하게 해야 하는가?
- 설득력, 기능성, 탐색적 또는 표현적인가?
2. 톤 (하나의 지배적인 방향 선택)
예시 (포괄적이지 않음):
- 브루탈리스트 / 로우
- 에디토리얼 / 매거진
- 럭셔리 / 리파인드
- 레트로-미래주의
- 산업적 / 실용적
- 오가닉 / 내추럴
- 플레이풀 / 토이풀
- 맥시멀리스트 / 카오틱
- 미니멀리스트 / 시베어
⚠️ 두 개 이상 혼합하지 마세요.
3. 차별화 앵커
다음 질문에 답하세요:
“로고를 제거하고 스크린샷을 찍었을 때, 누군가 어떻게 이를 인식할 수 있을까?”
이 앵커는 최종 UI에 표시되어야 합니다.
가져옴: 5. 구현 표준
코드 요구 사항
- 깔끔하고, 읽기 쉽고, 모듈화될 것
- 죽은 스타일 금지
- 사용되지 않는 애니메이션 금지
- 시맨틱 HTML
- 기본적으로 접근 가능 (대비, 포커스, 키보드)
프레임워크 지침
- HTML/CSS: 네이티브 기능, 최신 CSS 선호
- React: 함수형 컴포넌트, 구성 가능한 스타일
- 애니메이션:
- CSS 우선
- 정당한 경우에만 Framer Motion 사용
복잡성 매칭
- 맥시멀리스트 디자인 → 복잡한 코드 (애니메이션, 레이어)
- 미니멀리스트 디자인 → 매우 정확한 간격 및 타이포그래피
불일치 = 실패.
가져옴: 6. 필수 출력 구조
프론트엔드 작업을 생성할 때:
1. 디자인 방향 요약
- 미학적 이름
- DFII 점수
- 주요 영감 (개념적, 시각적 표절이 아닌)
2. 디자인 시스템 스냅샷
- 글꼴 (근거 포함)
- 색상 변수
- 간격 리듬
- 모션 철학
3. 구현
- 완전한 작동 코드
- 의도가 분명하지 않은 경우에만 주석
4. 차별화 강조
다음을 명시적으로 명시하세요:
"이것은 Y 대신 X를 수행하여 일반적인 UI를 피합니다."
가져옴: 8. 다른 스킬과의 통합
- page-cro → 레이아웃 계층 구조 및 전환 흐름
- copywriting → 타이포그래피 및 메시지 리듬
- marketing-psychology → 시각적 설득 및 편향 정렬
- branding → 시각적 아이덴티티 일관성
- ab-test-setup → 변형 안전 디자인
…
[번역을 위해 잘림]