스킬 자체의 표현으로
이 스킬은 Google Stitch 화면 생성에 최적화된 DESIGN.md 파일을 생성합니다. anti-slop 프런트엔드 엔지니어링 지침을 Stitch의 네이티브 시맨틱 디자인 언어로 변환합니다 — Stitch의 AI 에이전트가 해석할 수 있는 정밀한 값과 짝을 이루는 서술적인 자연어 규칙입니다. 이 파일은 Stitch에게 프리미엄하고 일반적이지 않은 인터페이스를 생성하도록 프롬프트하는 단일 진실 공급원 역할을 합니다.
이 스킬은 엄격한 타이포그래피 규칙, 정밀하게 조정된 색상 팔레트, 비대칭 레이아웃, 지속적인 마이크로 모션, 하드웨어 가속 성능을 강제합니다. Inter 폰트, 네온 글로우, 중앙 정렬 히어로 섹션, 일반적인 플레이스홀더 콘텐츠와 같은 AI 디자인 클리셰를 금지하는 명시적인 안티패턴 목록을 포함합니다.
산출물
- 일곱 개의 구조화된 섹션으로 구성된 DESIGN.md 파일: 시각적 테마 & 분위기, 색상 팔레트 & 역할, 타이포그래피 규칙, 컴포넌트 스타일링, 레이아웃 원칙, 모션 & 인터랙션, 안티패턴
작동 방식
- 01분위기 정의하기
세 가지 차원에서 taste spectrum의 표현적인 형용사를 사용해 대상 프로젝트의 의도를 평가합니다: 밀도(1~10, Airy에서 Cockpit Dense까지), 변동성(1~10, Symmetric에서 Chaotic까지), 모션(1~10, Static에서 Cinematic까지).
- 02색상 팔레트 매핑하기
각 색상마다 서술적인 이름, 헥스 코드, 기능적 역할을 제공합니다. 채도 80% 미만인 강조색은 최대 하나입니다.
- 03히어로 섹션 정의하기
인라인 이미지 타이포그래피(단어 사이에 타입 높이로 삽입된 작은 사진), 변동성이 4를 초과할 때의 비대칭 구조, 최대 하나의 주요 CTA를 사용하여 강렬한 첫인상을 만듭니다.
- 04컴포넌트 스타일링 기술하기
버튼, 카드, 입력 필드, 로딩 상태, 오류 상태에 대해 형태, 색상, 그림자 깊이, 인터랙션 동작을 명시합니다.
- 05모션 철학 인코딩하기
스프링 물리 기본값(강성: 100, 감쇠: 20), 활성 컴포넌트를 위한 지속적인 마이크로 인터랙션, 리스트 노출을 위한 순차적 오케스트레이션, transform과 opacity로만 애니메이션을 제한하는 성능 제약을 정의합니다.