justesse은(는) 무엇을 하나요?
간략한 내용, 저장소, 또는 시각적 참조를 일관된 프로덕션 UI로 전환하세요. 취향을 선호하는 프레임워크, 미학, 또는 컴포넌트 레시피가 아닌, 제약 조건 아래의 맥락적 판단으로 취급하세요.
이것은 선언적이며 참조 전용 기능입니다. 그 디자인 추론, 규칙, 수용 기준은 이를 실행하는 모델, 에이전트 런타임, 명령줄 도구, 벤더, 호스팅 환경과 무관해야 합니다. 런타임별 검색이 이 디렉토리를 노출할 수 있지만, 스킬의 의미를 변경하거나 워크플로에서 요구해서는 안 됩니다.
운영 모드 고정
디자인 결정을 내리기 전에 하나의 기본 모드를 선택하세요. 디자인 리드에 명시하고, 조용히 모드를 전환하지 마세요. 두 모드가 실질적으로 다른 산출물을 암시하고 요청이 이를 해결하지 않으면, 하나의 집중된 질문을 하세요. 태스크가 보조 모드를 명명할 수 있지만, 기본 모드가 워크플로와 수용 기준을 제어합니다.
| 모드 | 기본 산출물 | 필수 참조 |
|---|---|---|
| 마케팅 / 전환 | 가치를 전달하고 청중을 하나의 측정 가능한 행동으로 이끌기 | marketing-surfaces.md |
| 제품 / 태스크 | 사용자가 상태를 이해하고 반복 작업(대시보드 포함)을 완료하도록 돕기 | product-and-transaction.md |
| 거래 흐름 | 중요하거나 다단계 작업을 안전하고 복구 가능하게 완료 | product-and-transaction.md |
| 리디자인: 보존 | 인식 가능한 브랜드와 제품 계약을 유지하면서 품질 개선 | redesign-preservation.md |
| 리디자인: 전면 개편 | 변경 승인되지 않은 계약을 유지하면서 새로운 시각적 언어 구축 | redesign-preservation.md |
| 참조 → 코드 | 제공된 시각적 증거를 대상 프로젝트의 네이티브 구현으로 변환 | reference-to-code.md |
| 시각적 리뷰 | 계층, 일관성, 사용성, 반응형, 프로덕션 위험 진단 | interface-quality.md |
| 읽기 / 문서화 | 문서, 가이드, 기사, 도움말, 변경 로그를 통해 독자가 무언가를 이해하도록 돕기 | reading-surfaces.md |
| 경험 / 쇼케이스 | 방문자를 포트폴리오, 갤러리, 전시 작업 안에 두면서 인터페이스는 뒤로 물러나게 | experience-surfaces.md |
| 이미지 컨셉 | 인터페이스를 위한 아트 디렉션 정의 또는 생성 | image-concepts.md |
| 데이터 시각화 | 측정값, 비교, 분포, 관계, 불확실성을 검사 가능한 증거로 전환 | data-visualization.md |
| 경영진 결정 메모 | 제한된 증거를 결정권자를 위한 결론 중심 프레젠테이션으로 전환 | decision-memo.md |
기본 모드를 선택한 후, 프로필을 별도로 설정하세요. 이 스킬은 프로필 메커니즘을 제공하며 프로필 자체는 포함하지 않습니다. personal:<이름>은 요청이나 프로젝트 지침에 해당 플래그가 명시적으로 있을 때만 활성화하세요. 사람 이름, 아티팩트 유형, 또는 이 스킬의 가용성에서 추론하지 마세요. 플래그가 없으면 시각적 언어, 음성, 팔레트, 물질성, 표면 색상을 브랜드 중립적으로 유지하세요. 밝은 종이 캔버스는 기본값이 아닙니다.
활성 플래그는 시각적 시스템을 부여하는 것이 아니라 필수 선언을 엽니다. profile-declaration.md의 10개 필드 모두에 대한 구체적인 답변을 얻은 후에 프로필 아래에서 디자인 결정을 내리세요. 답변되지 않은 필드를 추론이나 다른 프로필, 이 스킬의 예제, 또는 하네스 픽스처에서 값을 빌려 채우지 마세요. 각 필드에 대해 해당 필드의 답변 형태로 작업 예제를 첨부하여 질문하세요. 맨 질문은 양식에 측정이 필요한 분위기를 반환합니다.
핵심 워크플로
- 제안하기 전에 검사하세요. 관련 프로젝트 파일, 대표적인 화면과 컴포넌트, 패키지 및 빌드 구성, 디자인 토큰, 데이터 형태, 라우트, 테스트, 제공된 참조를 읽으세요. 실제인 것, 추론된 것, 알려지지 않은 것을 식별하세요.
- 브리프를 구성하세요. brief-and-direction.md를 읽으세요. 청중, 사용자 작업, 비즈니스 목표, 콘텐츠 및 브랜드 증거, 제약 조건, 기본 모드, 성공 신호를 기록하세요. 구현 전에 요청된 모든 산출물을 열거하세요. 트렌드의 콜라주보다 하나의 방어 가능한 해석을 선호하세요.
- 디자인 리드를 선언하세요. 하나의 간결한 진술로 모드, 청중, 제품 작업, 시각적 방향, 밀도, 모션 포스처를 명명하세요. 결정과 가정을 구분하세요.
- 제품 계약을 보존하세요. 사용자가 명시적으로 변경을 승인하지 않는 한, 기존 프레임워크, 패키지 관리자, 컴포넌트 규칙, 디자인 시스템, 데이터 및 API 계약, 상태 의미론, 라우트, 폼, 분석, 동의 및 법적 동작, 접근성, SEO, 콘텐츠 의미, 테스트, 성능 예산을 유지하세요. 전면 개편 모드가 이를 깨는 허가가 아닙니다.
- 네이티브로 구현하세요. 설치된 의존성과 확립된 프리미티브를 재사용하세요. 방향을 프로젝트 자체 프레임워크와 스타일링 모델로 표현하세요. 이 스킬이 시각적 가능성을 언급했다는 이유만으로 React, Tailwind, GSAP, 다른 디자인 시스템, 다크 모드, 폰트, 또는 어떤 의존성도 도입하지 마세요.
- 전체 상태 공간을 해결하세요. 반응형 레이아웃과 함께 적용 가능한 로딩, 빈 상태, 부분 상태, 오류, 성공, 비활성화, 권한, 오프라인, 검증, 파괴적 작업 상태를 디자인하세요. 대시보드와 흐름의 경우 데이터 가독성, 작업 연속성, 복구를 보호하세요.
- 경계 패스에서 렌더링하고 검증하세요. 먼저 완전히 빌드하세요. 그런 다음 미리보기 도구가 있을 때 한 번에 일괄적으로 대표적인 좁은/넓은 뷰포트와 실제 콘텐츠 극단을 검사하고, 계층, 읽기 순서, 오버플로, 대비, 포커스, 상호작용 피드백, 계약 보존을 비교하세요. 해당 라운드에서 보여진 모든 것을 한 배치로 수정하고, 최대 한 라운드 더 확인한 후 다듬기를 중단하세요. 개방형 자체 QA 루프는 수렴 없이 예산을 소비하며, 경계는 전체 사이클, 스크린샷, 결함 스캔, 미세 편집, 리빌드를 모두 포함합니다. 비례적인 빌드, 테스트, 시각적 증거 없이 목업을 프로덕션 준비 완료라고 부르지 마세요.
- 전달 전 점검. production-preflight.md를 읽고, 적용 가능한 실패를 수정하고, 요청된 모든 산출물을 상호 확인하며, 실행할 수 없었던 검사를 보고하세요.
참조 라우팅
활성 모드에 필요한 것만 로드하세요. 모든 참조는 여기에 직접 링크됩니다.
- 항상 brief-and-direction.md, interface-quality.md, production-preflight.md를 읽으세요.
- 마케팅, 캠페인, 편집-전환, 가격, 출시, 또는 기타 획득 표면에 대해 marketing-surfaces.md를 읽으세요.
- 문서, 가이드, 기사, 도움말, 변경 로그, 이해가 주요 작업인 긴 페이지에 대해 reading-surfaces.md를 읽으세요.
- 포트폴리오, 갤러리, 쇼케이스, 작업 자체가 이끄는 전시 페이지에 대해 experience-surfaces.md를 읽으세요.
- 애플리케이션 UI, 대시보드, 데이터가 많은 작업 공간, 폼, 체크아웃, 온보딩, 설정, 다단계 흐름에 대해 product-and-transaction.md를 읽으세요.
- KPI, 차트, 분석적 그림, 메트릭 비교, 숫자 표, 날짜/기간 표시가 포함된 표면에 대해 data-visualization.md를 읽으세요.
- 보존 또는 전면 개편 모드에서 기존 표면이 변경될 때마다 redesign-preservation.md를 읽으세요.
- 스크린샷, 목업, 웹사이트 또는 기타 시각적 예제가 구현 입력일 때 reference-to-code.md를 읽으세요.
- 이미지가 브리프의 일부이거나 이미지 컨셉이 선택된 모드일 때만 image-concepts.md를 읽으세요.
- 브리프에 시각적 어휘가 부족하거나 경쟁 방향을 분리해야 할 때 style-lenses.md를 읽으세요.
- finishing.md는 마지막에, 인터페이스 품질 검사가 통과된 후에만 읽어 전달 등급 세분화와 거의 동일한 후보 판단을 위해 사용하세요. 마무리는 계층, 진실성, 상태를 대체하지 않습니다.
- 검사된 프로젝트가 이미 React, Next.js 또는 Tailwind를 사용하거나 사용자가 명시적으로 해당 스택을 그린필드 작업에 승인한 경우에만 react-next-tailwind.md를 읽으세요. 이식 가능한 기본값이 아닙니다.
- 경영진 메모, 결정 데크, 또는 결론 중심 슬라이드 시퀀스에 대해 decision-memo.md를 읽으세요.
- 산출물이 페이지가 아닌 편집 가능한 프레젠테이션 파일일 때 첫 슬라이드를 배치하기 전에 pptx-safe-html.md를 읽으세요.
- 하나의 세계관이 대시보드, 저작된 랜딩 페이지, 사례 연구, 보고서, 프레젠테이션에 걸쳐 전달되어야 할 때 surface-translation.md를 읽으세요.
- 정확한
personal:<이름>플래그와 함께 먼저 profile-activation.md와 profile-declaration.md를 읽은 후, 선언이 완료되면 profile-data-semantics.md를 읽으세요. 그렇지 않으면 로드하거나 적용하지 마세요. - 통제된 프로필 비교, 음성 대조군, 블라인드 리뷰, 승진 결정을 실행할 때만 profile-calibration.md를 읽으세요.
- 저작자 표시, 감사, 재배포, 업스트림 비교를 위해서만 upstream-provenance.md를 읽으세요.
참조에서 관련 없는 파일을 재귀적으로 로드하지 마세요.
조건부 기능
이미지 생성, 이미지 검색, 또는 브라우징은 사용 가능하고, 승인되었으며, 필요한 경우에만 사용하세요. 이미지 작업의 경우 기존 저장소 자산, 그 다음 사용자 제공 자산, 그 다음 승인된 도구를 선호하세요. 그렇지 않으면 구체적인 컨셉 브리프나 명확하게 레이블이 지정된 플레이스홀더를 최종 아트라고 주장하지 않고 전달하세요. 플레이스홀더는 진정으로 누락된 외부 자산이나 의존성에만 사용하고, 각 플레이스홀더의 크기, 역할, 교체 다음 단계를 지정하세요. 제품 스크린샷, 고객, 메트릭, 로고, 또는 보증을 조작하지 마세요.
모션은 계층, 피드백, 연속성, 내러티브를 명확히 할 때만 사용하세요. 프로젝트의 기존 메커니즘과 가장 가벼운 적절한 기술을 선호하세요. 모션 없이 콘텐츠를 보존하고, 축소된 모션 환경설정을 존중하며, 스크롤 캡처를 피하고, 옵저버, 리스너, 타임라인을 정리하세요. 모션 라이브러리는 조건부 구현 선택 사항이지 요구 사항이 아닙니다. 네이티브 CSS 전환으로 더 이상 충분하지 않고 레이어드 코레오그래피, 스크롤 스토리텔링, 또는 전용 애니메이션 엔진이 필요한 경우에만 motion-patterns.md로 업스케일하세요.
전달 계약
구현되거나 리뷰된 표면을 모드 및 디자인 리드, 보존되고 의도적으로 변경된 계약, 검증 증거, 플레이스홀더 및 해결되지 않은 위험과 함께 전달하세요. 리뷰 전용 요청의 경우 사용자 영향에 따라 결과를 우선순위로 정하고 영향을 받은 화면이나 컴포넌트를 인용하세요. 요청받지 않는 한 프로젝트를 변경하지 마세요.