leonxlnx/taste-skill

Stitch Design Taste — 시맨틱 디자인 시스템 스킬

개요

이 스킬은 Google Stitch 화면 생성에 최적화된 DESIGN.md 파일을 생성합니다. 검증된 anti-slop 프론트엔드 엔지니어링 지침을 Stitch의 기본 시맨틱 디자인 언어(자연어 규칙과 정밀한 값이 결합되어 Stitch의 AI 에이전트가 프리미엄 비제너릭 인터페이스를 제작할 수 있도록 함)로 변환합니다.

생성된 DESIGN.md는 큐레이팅된 고에이전시 디자인 언어에 부합하는 새 화면 생성을 위한 단일 진실 공급원 역할을 합니다. Stitch는 특정 색상 값, 타이포그래피 사양, 콤포넌트 동작이 포함된 "시각적 설명" 을 통해 디자인을 해석합니다.

사전 조건

• Google Stitch(labs.google/stitch) 접근 권한
• 선택 사항: Stitch MCP 서버 (Cursor, Antigravity, Gemini CLI와 프로그래밍 방식 통합용)

목표

다음을 인코딩하는 DESIGN.md 파일 생성:

1. 시각적 분위기 — 분위기, 밀도, 디자인 철학
2. 색상 보정 — 중립색, 악센트, 금지 패턴(16진수 코드 포함)
3. 타이포그래피 아키텍처 — 폰트 스택, 계층 구조, 안티패턴
4. 콤포넌트 동작 — 버튼, 카드, 입력 필드(상호작용 상태 포함)
5. 레이아웃 원칙 — 그리드 시스템, 간격 철학, 반응형 전략
6. 모션 철학 — 애니메이션 엔진 사양, 스프링 물리, 영구 마이크로 인터랙션
7. 안티패턴 — 금지된 AI 디자인 클리셰 명시 목록

분석 및 합성 지침

1. 분위기 정의

대상 프로젝트의 의도를 평가합니다. 취향 스펙트럼에서 연상 형용사를 사용합니다:

• 밀도: "갤러리 에어리" (1–3) → "데일리 앱 밸런스드" (4–7) → "콕핏 덴스" (8–10)
• 변동성: "예측 가능한 대칭" (1–3) → "오프셋 비대칭" (4–7) → "예술적 혼란" (8–10)
• 모션: "정적 절제" (1–3) → "유동적 CSS" (4–7) → "시네마틱 안무" (8–10)

기본 기준: 변동성 8, 모션 6, 밀도 4. 사용자의 분위기 설명에 따라 동적으로 조정합니다.

2. 색상 팔레트 매핑

각 색상에 대해 다음을 제공합니다: 설명적 이름 + 16진수 코드 + 기능적 역할.

필수 제약사항:

• 최대 1개의 악센트 색상. 채도 80% 미만
• "AI 보라색/파란색 네온" 미학은 엄격히 금지 — 보라색 버튼 글로우 금지, 네온 그라디언트 금지
• 절대 중립 베이스(아연/슬레이트) 사용, 고대비 단일 악센트 사용
• 전체 출력에 대해 하나의 팔레트 고수 — 따뜻한/차가운 회색 변동 금지
• 순수 검정(#000000)은 절대 사용 금지 — 오프블랙, 아연-950, 목탄 사용

3. 타이포그래피 규칙 설정

• 디스플레이/헤드라인: 타이트 트래킹, 제어된 스케일. 과도하게 크지 않음. 크기뿐 아니라 굵기와 색상으로 계층 구조 표현
• 본문: 여유로운 행간, 줄당 최대 65자
• 폰트 선택: Inter는 프리미엄/창의적 컨텍스트에서 금지. 독특한 캐릭터 강제: Geist, Outfit, Cabinet Grotesk, Satoshi
• 세리프 금지: 제너릭 세리프 폰트(Times New Roman, Georgia, Garamond, Palatino)는 금지. 에디토리얼/창의적 컨텍스트에서 필요한 경우에만 독특한 모던 세리프 사용: Fraunces, Gambarino, Editorial New, Instrument Serif. 대시보드나 소프트웨어 UI에서는 세리프 항상 금지
• 대시보드 제약: 산세리프 페어링만 사용(Geist + Geist Mono 또는 Satoshi + JetBrains Mono)
• 고밀도 오버라이드: 밀도가 7을 초과하면 모든 숫자에 모노스페이스 사용

4. 히어로 섹션 정의

히어로는 첫인상이며 창의적이고 강렬하며 절대 제너릭하지 않아야 합니다:

• 인라인 이미지 타이포그래피: 헤드라인의 단어나 글자 사이에 작고 맥락적인 사진이나 시각 요소를 직접 삽입합니다. 이미지는 텍스트 높이에 맞춰 인라인으로 배치되고, 둥글게 처리되며 시각적 구두점 역할을 합니다. 이것이 시그니처 창의적 기법입니다
• 겹침 금지: 텍스트는 이미지나 다른 텍스트 위에 절대 겹쳐서는 안 됩니다. 모든 요소는 자신의 깨끗한 공간 영역을 차지합니다
• 필러 텍스트 금지: "스크롤하며 탐색", "아래로 스와이프", 스크롤 화살표 아이콘, 튀는 셰브론은 금지. 콘텐츠가 자연스럽게 사용자를 끌어당겨야 합니다
• 비대칭 구조: 변동성이 4를 초과하면 중앙 정렬 히어로 레이아웃 금지
• CTA 절제: 최대 하나의 기본 CTA. 부차적인 "더 알아보기" 링크 금지

5. 콤포넌트 스타일링 설명

각 콤포넌트 유형에 대해 모양, 색상, 그림자 깊이, 상호작용 동작을 설명합니다:

• 버튼: 활성 상태에서 촉각적 푸시 피드백. 네온 외곽 글로우 금지. 커스텀 마우스 커서 금지
• 카드: 계층 구조를 전달하는 경우에만 사용. 그림자를 배경 색상에 맞게 착색. 고밀도 레이아웃에서는 카드 대신 border-top 구분선이나 음수 공간 사용
• 입력 필드/폼: 레이블은 입력 위, 도움말 텍스트는 선택 사항, 오류 텍스트는 아래에 배치. 표준 간격 유지
• 로딩 상태: 레이아웃 치수에 맞는 스켈레탈 로더 사용 — 일반 원형 스피너 금지
• 빈 상태: 데이터를 채우는 방법을 나타내는 구성된 컴포지션
• 오류 상태: 명확하고 인라인 오류 보고

6. 레이아웃 원칙 정의

• 겹치는 요소 금지 — 모든 요소는 자신의 명확한 공간 영역을 차지. 절대 위치 콘텐츠 스태킹 금지
• 변동성이 4를 초과하면 중앙 정렬 히어로 섹션 금지 — 분할 화면, 왼쪽 정렬, 비대칭 여백 강제
• 일반적인 "3개의 동일한 카드 가로 배열" 기능 행은 금지 — 2열 지그재그, 비대칭 그리드 또는 가로 스크롤 사용
• Flexbox 계산 대신 CSS Grid 사용 — calc() 백분율 해킹 금지
• 최대 너비 제약(예: 1400px 중앙 정렬)으로 레이아웃 포함
• 전체 높이 섹션은 min-h-[100dvh] 사용 — 절대 h-screen 사용 금지 (iOS Safari 치명적 점프)

7. 반응형 규칙 정의

모든 디자인은 모든 뷰포트에서 작동해야 합니다:

• 모바일 퍼스트 붕괴 (< 768px): 모든 다중 열 레이아웃은 단일 열로 붕괴. 예외 없음
• 가로 스크롤 금지: 모바일에서 가로 오버플로는 치명적 오류
• 타이포그래피 스케일링: 헤드라인은 clamp()로 스케일링. 본문 텍스트 최소 1rem/14px
• 터치 대상: 모든 상호작용 요소는 최소 44px 터치 대상
• 이미지 동작: 인라인 타이포그래피 이미지(단어 사이 사진)는 모바일에서 헤드라인 아래로 스택
• 내비게이션: 데스크톱 가로 내비게이션은 깔끔한 모바일 메뉴로 붕괴
• 간격: 수직 섹션 간격은 비례적으로 감소 (clamp(3rem, 8vw, 6rem))

8. 모션 철학 인코딩

• 스프링 물리 기본값: stiffness: 100, damping: 20 — 프리미엄, 무게감 있는 느낌. 선형 이징 금지
• 영구 마이크로 인터랙션: 모든 활성 콤포넌트는 무한 루프 상태(펄스, 타자기, 플로트, 샤이머)를 가져야 함
• 계단식 오케스트레이션: 목록을 즉시 마운트하지 말고 캐스케이드 지연으로 폭포식 나타내기
• 성능: transform과 opacity로만 애니메이션. top, left, width, height는 절대 애니메이션 금지. 그레인/노이즈 필터는 고정 의사 요소에만 사용

9. 안티패턴 나열 (AI 특징)

DESIGN.md에 명시적인 "절대 하지 말 것" 규칙으로 인코딩:

• 어디에도 이모지 사용 금지
• Inter 폰트 금지
• 제너릭 세리프 폰트(Times New Roman, Georgia, Garamond) 금지 — 필요시 독특한 모던 세리프만 허용
• 순수 검정(#000000) 금지
• 네온/외곽 글로우 그림자 금지
• 과포화 악센트 금지
• 큰 헤더에 과도한 그라디언트 텍스트 금지
• 커스텀 마우스 커서 금지
• 겹치는 요소 금지 — 항상 깨끗한 공간 분리 유지
• 3열 동일 카드 레이아웃 금지
• 제너릭 이름("John Doe", "Acme", "Nexus") 금지
• 가짜 반올림 숫자(99.99%, 50%) 금지
• AI 카피라이팅 클리셰("Elevate", "Seamless", "Unleash", "Next-Gen") 금지
• 필러 UI 텍스트: "스크롤하며 탐색", "아래로 스와이프", 스크롤 화살표, 튀는 셰브론 금지
• 깨진 Unsplash 링크 금지 — picsum.photos 또는 SVG 아바타 사용
• 중앙 정렬 히어로 섹션 금지 (높은 변동성 프로젝트의 경우)

출력 형식 (DESIGN.md 구조)

# 디자인 시스템: [프로젝트 제목]

## 1. 시각적 테마 및 분위기
(분위기, 밀도, 변동성, 모션 강도에 대한 연상 설명.
예: "자신감 있는 비대칭 레이아웃과 유동적인 스프링 물리 모션을 갖춘 절제되고 갤러리처럼 여유로운 인터페이스. 분위기는 임상적이면서도 따뜻합니다. 마치 잘 조명된 건축 스튜디오처럼.")

## 2. 색상 팔레트 및 역할
- **캔버스 화이트** (#F9FAFB) — 기본 배경 표면
- **순수 표면** (#FFFFFF) — 카드 및 컨테이너 채우기
- **목탄 잉크** (#18181B) — 기본 텍스트, 아연-950 깊이
- **뮤트 스틸** (#71717A) — 보조 텍스트, 설명, 메타데이터
- **속삭임 테두리** (rgba(226,232,240,0.5)) — 카드 테두리, 1px 구조적 선
- **[악센트 이름]** (#XXXXXX) — CTA, 활성 상태, 포커스 링을 위한 단일 악센트
(최대 1개 악센트. 채도 < 80%. 보라색/네온 금지.)

## 3. 타이포그래피 규칙
- **디스플레이:** [폰트 이름] — 타이트 트래킹, 제어된 스케일, 무게 중심 계층
- **본문:** [폰트 이름] — 여유로운 행간, 65ch 최대 너비, 중립 보조 색상
- **모노:** [폰트 이름] — 코드, 메타데이터, 타임스탬프, 고밀도 숫자용
- **금지:** Inter, 프리미엄 컨텍스트의 제너릭 시스템 폰트. 대시보드에서 세리프 폰트 금지.

## 4. 콤포넌트 스타일링
* **버튼:** 평면, 외부 글로우 없음. 활성 시 촉각적 -1px 이동. 기본은 악센트 채우기, 보조는 고스트/아웃라인.
* **카드:** 넉넉하게 둥근 모서리 (2.5rem). 확산된 속삭임 그림자. 계층 전달 시에만 사용. 고밀도: border-top 구분선으로 대체.
* **입력 필드:** 레이블 위, 오류 아래. 포커스 링은 악센트 색상. 플로팅 레이블 금지.
* **로더:** 정확한 레이아웃 치수에 맞는 스켈레탈 샤이머. 원형 스피너 금지.
* **빈 상태:** 구성된 일러스트레이션 컴포지션 — 단순히 "데이터 없음" 텍스트가 아님.

## 5. 레이아웃 원칙
(그리드 우선 반응형 아키텍처. 히어로 섹션의 비대칭 분할.
768px 미만에서 엄격한 단일 열 붕괴. 최대 너비 포함.
Flexbox 백분율 수학 없음. 넉넉한 내부 패딩.)

## 6. 모션 및 상호작용
(모든 상호작용 요소에 스프링 물리. 계단식 캐스케이드 나타내기.
활성 대시보드 콤포넌트의 영구 마이크로 루프. 하드웨어 가속 변환만 사용.
CPU 집약 애니메이션을 위한 격리된 클라이언트 콤포넌트.)

## 7. 안티패턴 (금지)
(금지 패턴의 명시적 목록: 이모지 금지, Inter 금지, 순수 검정 금지,
네온 글로우 금지, 3열 균등 그리드 금지, AI 카피라이팅 클리셰 금지,
제너릭 플레이스홀더 이름 금지, 깨진 이미지 링크 금지.)

모범 사례

• 설명적으로 작성: "어두운 텍스트"가 아닌 "딥 차콜 잉크 (#18181B)"
• 기능적으로 작성: 각 요소가 무엇에 사용되는지 설명
• 일관성 유지: 문서 전체에서 동일한 용어 사용
• 정밀하게 작성: 정확한 16진수 코드, rem 값, 픽셀 값(괄호 안) 포함
• 의견을 담아 작성: 이것은 중립 템플릿이 아닙니다 — 특정 프리미엄 미학을 강제합니다

성공을 위한 팁

1. 분위기부터 시작하세요 — 토큰을 상세히 설명하기 전에 분위기를 이해하세요
2. 패턴을 찾으세요 — 일관된 간격, 크기, 스타일을 식별하세요
3. 시맨틱하게 생각하세요 — 색상 이름을 모양이 아닌 목적으로 지정하세요
4. 계층을 고려하세요 — 시각적 무게가 중요도를 어떻게 전달하는지 문서화하세요
5. 금지 사항을 인코딩하세요 — 안티패턴은 규칙 자체만큼 중요합니다

피해야 할 일반적인 함정

• 기술 용어를 번역 없이 사용("넉넉하게 둥근 모서리" 대신 "rounded-xl")
• 16진수 코드를 생략하거나 설명적 이름만 사용
• 디자인 요소의 기능적 역할을 잊음
• 분위기 설명이 너무 모호함
• 안티패턴 목록 무시 — 이것이 출력물을 프리미엄으로 만드는 요소입니다
• 큐레이팅된 미학을 강제하는 대신 기본 "안전한" 디자인에 의존