ComeOnOliver/skillshub

FD

프론트엔드 디자인 및 다듬기 모드로 사용하세요. 목표는 모든 UI를 더 화려하게 만드는 것이 아니라, 의도적으로 디자인된 느낌을 주는 것입니다.

Claude 우선 모드

로컬 claude CLI를 사용할 수 있다면, Codex의 미적 감각에만 의존하지 말고 프론트엔드 작업을 위한 디자인 전문가로 취급하세요.

• 단일 기본 워크플로우를 사용하세요. claude-design-bridge fd --apply로 첫 번째 패스를 위임한 다음, Claude의 diff를 검사하고 통합 문제를 수정한 후 직접 검증을 실행합니다.
• 사용자가 명시적으로 편집 없이 비평만을 원하거나, apply 모드가 작업에 명백히 안전하지 않은 경우에만 claude-design-bridge fd --plan을 사용하세요.
• 위임된 프롬프트에 사용자 요청, 관련 경로, 제약 조건 및 기존 디자인 언어를 포함하세요.
• Claude의 시각적 방향과 구현 선택을 기본 디자인 권위자로 취급한 다음, Codex를 사용하여 검사, 통합, 테스트 및 정리합니다.
• 브릿지를 사용할 수 없거나, 인증되지 않았거나, 명백히 실패한 경우에만 Codex 고유의 디자인 작업으로 대체하세요.

Claude 후 검토

Claude가 첫 번째 구현 패스를 처리한 경우, Codex는 최종 통합 품질에 대한 책임을 져야 합니다.

• 시각적 패스를 맹목적으로 신뢰하지 말고 실제 diff를 검토하세요.
• 잘림, 오버플로, 줄바꿈, 밀도, 간격 충돌 및 어색한 반응형 중단점을 수정하세요.
• 관련된 경우 키보드/포커스 상태, aria 상태 무결성, 축소 모션 또는 대비 회귀를 확인하세요.
• 사용자가 명시적으로 동작 변경을 요청하지 않는 한 필터링, 라우팅, 데이터 흐름 및 기존 상호 작용 로직을 유지하세요.
• 디자인 우선 패스에서 놓칠 수 있는 SSR, hydration, 타입, 린트 및 작지만 중요한 유지 관리 문제를 잡아내세요.
• 디자인 의도는 유지하되 엔지니어링 마감을 개선하세요.

기본 취향

사용자가 명시적으로 다른 방향을 요청하지 않는 한, 디자인을 다음 쪽으로 편향시키세요:

• Apple HIG 스타일의 명확성과 절제
• Jony Ive 스타일의 제품 사고: 단순함, 정교함, 현대적, 절제됨, 차분함
• 선명한 계층 구조, 넉넉한 간격, 세심한 재료, 미묘한 움직임 및 높은 가독성
• 장식이 아닌 축소를 통한 우아함

핵심 규칙

맥락에 맞는 명확한 시각적 방향을 선택한 다음, 결과물이 생성된 것처럼 느껴지지 않도록 충분한 장인 정신을 발휘하여 구현하세요.

첫 번째 패스

코드를 변경하기 전에:

• 기존 제품, 코드베이스, 토큰, 컴포넌트, 레이아웃 및 시각적 언어를 검사하세요.
• 이것이 기존 시스템 개선 작업인지 새로운 표면 디자인 작업인지 결정하세요.
• 사용자 중심 목표, 주요 대상, 주요 제약 조건 및 기억할 만한 하나의 시각적 아이디어를 식별하세요.

제품에 이미 강력한 디자인 시스템이 있다면, 사용자가 명시적으로 더 큰 변화를 요청하지 않는 한 이를 유지하고 그 안에서 개선하세요.

표면에 맞게 조정

인터페이스 유형에 따라 디자인을 조정하세요:

• 마케팅 또는 랜딩 페이지: 개념, 타이포그래피, 내러티브 및 기억에 남는 히어로 순간을 강조하세요.
• 제품 UI 또는 대시보드: 계층 구조, 밀도 제어, 어포던스, 가독성 및 빠른 스캔을 화려함보다 우선시하세요.
• 양식, 설정 및 CRUD 표면: 명확성을 최우선으로 하세요. 다듬기는 마찰을 줄여야 하며 작업과 경쟁해서는 안 됩니다.
• 모바일 중심 뷰: 구성을 단순화하고 간격 로직을 강화하며 기본 작업을 명확하게 만드세요.
• 데이터 중심 뷰: 장식을 추가하기 전에 타이포그래피, 간격, 그룹화 및 강조를 사용하여 정보를 읽기 쉽게 만드세요.

브리프가 모호하다면, 효과를 쌓는 것보다 하나의 강력한 시각적 아이디어로 명확성을 추구하세요.

디자인 방향

약한 아이디어를 혼합하는 대신 하나의 방향을 선택하고 고수하세요:

• 한 문장으로 된 시각적 테제
• 타이포그래피 접근법
• 색상 및 대비 전략
• 레이아웃 리듬 및 간격
• 모션 스타일
• 하나의 시그니처 디테일

좋은 방향은 절제되거나 대담할 수 있습니다: 에디토리얼, 조용한 럭셔리, 인더스트리얼, 유쾌함, 날카로운 엔터프라이즈, 촉각적 유틸리티, 시네마틱, 브루탈리스트, 부드러운 물리적, 레트로-미래주의 등. 중요한 것은 일관성과 의도입니다.

실행 규칙

• 타이포그래피: 표면이 디자인 중심일 때 일반적인 기본값을 피하세요. 의도적인 글꼴 페어링과 계층 구조를 사용하세요. 제품이 이미 하우스 스타일을 사용하고 있다면, 함부로 교체하지 말고 개선하세요.
• 색상: 의미론적 토큰 또는 CSS 변수를 사용하세요. 명확한 지배적인 톤과 몇 가지 강력한 악센트가 있는 규율 있는 팔레트를 진흙탕 같은 균형보다 선호하세요.
• 레이아웃: 간격, 스케일, 정렬 및 대비로 리듬을 만드세요. 개념에 도움이 될 때 비대칭, 오버랩, 밀도 변화 또는 넉넉한 네거티브 공간을 사용하세요.
• 모션: 많은 약한 애니메이션보다 몇 가지 의미 있는 애니메이션을 추가하세요. 페이지 로드 스테이징, 호버 의도, 공개 타이밍 및 인터페이스를 지원하는 상태 전환을 선호하세요.
• 배경 및 디테일: 적절할 때 그라데이션, 텍스처, 패턴, 테두리, 조명, 그림자 또는 레이어드 표면으로 분위기를 만드세요. 페이지에 개성이 필요할 때 평범한 기본 캔버스를 피하세요.
• 상태: 비어 있음, 로딩 중, 호버, 활성, 선택됨, 비활성화됨 및 오류 상태도 디자인되어야 합니다.
• 접근성: 대비, 포커스 가시성, 키보드 동작, 읽기 가능한 크기 및 축소 모션 고려 사항을 유지하세요.

기존 시스템 우선 순위

기존 앱 또는 디자인 시스템 내에서 작업할 때:

• 사용자 정의 마크업을 발명하기 전에 기존 컴포넌트를 사용하세요.
• 기존 간격 스케일, 토큰 및 상호 작용 패턴을 유지하세요.
• 시각적 드리프트를 만들지 않고 계층 구조, 밀도, 어포던스 및 다듬기를 개선하세요.
• shadcn 또는 다른 컴포넌트 시스템이 있다면, 그것과 싸우지 말고 잘 구성하세요.

Shadcn 모드

표면이 shadcn 기반인 경우, fd가 직접 처리합니다.

• 먼저 설치된 shadcn 프리미티브, 토큰, CSS 변수 및 일반적인 레이아웃 패턴을 검사하세요.
• 사용자 정의 마크업을 만들기 전에 기존 프리미티브를 구성하는 것을 선호하세요.
• 장식 효과를 추가하기 전에 타이포그래피, 간격, 밀도 및 계층 구조를 강화하세요.
• 컴포넌트 API, 토큰 규율 및 제품 일관성을 유지하세요.
• 디자인이 필요하고 컴포넌트 레이어가 깔끔하게 표현할 수 없는 경우에만 원시 사용자 정의 CSS를 사용하세요.
• 기존 프리미티브가 적합할 때 시각적 드리프트, 임시 간격 및 모든 것을 처음부터 스타일링하는 것을 피하세요.

새 표면 우선 순위

새 페이지나 주요 새 표면을 디자인할 때:

• 초기에 하나의 강력한 개념을 선택하세요.
• 히어로 섹션 또는 기본 상호 작용을 기억에 남게 만드세요.
• 지원 섹션이 동일한 디자인 로직을 반복하도록 하세요.
• 브리프가 정말로 요구하지 않는 한 일반적인 스타트업 페이지 구조를 피하세요.

피해야 할 것

• 일반적인 AI 미학
• 보라색-흰색 그라데이션 기본값
• 실제 디자인 방향을 대체하는 남용된 글꼴
• 상호 교환 가능한 SaaS 히어로 섹션
• 전체 시각적 아이디어로서의 기본 글꼴 스택
• 명확성이 아닌 노이즈를 추가하는 모션
• 계층 구조 없는 장식적 혼란
• 다르게 보이기 위해 기존 제품 언어를 깨는 것

매번 같은 글꼴, 팔레트 또는 레이아웃 클리셰로 수렴하지 마세요.

구현 지침

• 저장소의 기존 프론트엔드 스택과 패턴을 선호하세요.
• 색상, 간격, 반경, 그림자 및 모션 값에 CSS 변수 또는 기존 토큰을 사용하세요.
• 사용자가 승인하지 않는 한 새 종속성을 피하세요.
• 마크업과 스타일링을 유지 관리 가능하게 유지하세요. 표현력이 있다고 지저분함을 의미하지는 않습니다.
• 디자인 효과가 핵심이라면, 플레이스홀더 코드로 암시하지 말고 제대로 구현하세요.
• Claude에게 위임할 때는 다음과 같은 집중된 프롬프트 블록을 사용하세요:

작업: <사용자가 원하는 것>
저장소: <현재 작업 디렉토리>
관련 경로: <주요 파일 또는 폴더>
제약 조건: <디자인 시스템, 스택, 반응형, 새 종속성 금지 등>
필요한 것: 코드 검사, 디자인 변경 사항 직접 구현, 가장 작은 관련 검증 실행

표면이 shadcn 기반인 경우 제약 조건을 다음으로 확장하세요:

기존 시스템: shadcn/ui, 현재 토큰, 이미 사용 중인 주요 프리미티브
제약 조건: 컴포넌트 API 일관성 유지, 시각적 드리프트 금지, 승인되지 않은 새 종속성 금지

검증

완료하기 전에:

• 관련된 경우 데스크톱 및 모바일 너비에서 결과를 확인하세요.
• 정적 모양뿐만 아니라 주요 상호 작용을 확인하세요.
• 가장 작은 관련 테스트, 린트 또는 빌드 검사를 실행하세요.
• 작업이 시각적으로 민감한 경우 브라우저 검사 또는 스크린샷을 사용하여 레이아웃 회귀를 잡아내세요.
• Claude가 첫 번째 패스를 처리한 경우, 최종 diff를 검사하고 변경 사항이 특히 디자인에 민감한 경우 선택적으로 후속 claude-design-bridge fd --plan 비평을 완성된 표면에 대해 실행하세요.

마무리

최종 응답을 다음에 집중하세요:

• 선택된 방향
• 시각적 및 구조적으로 변경된 사항
• 실행된 검증
• 남은 미해결 문제 또는 트레이드오프