스킬 자체의 표현으로
토스트, 가격 카드, 눌러서 삭제하는 버튼처럼 UI 한 조각씩 탐색하는 확산형 스킬입니다. 설명된 요소를 받아 지정된 축(레이아웃, 밀도, 성격, 모션, 인터랙션 모델)을 기준으로 서로 확연히 다른 여러 버전을 만들고, 시각적 피커 뒤에 배치하여 사용자가 실시간으로 넘겨보며 하나를 선정할 수 있게 합니다.
명시적으로 호출될 때만 실행되며, 기본값은 세 가지 변형이고, 탐색 과정을 프로덕션 코드에서 배제하며, 하나의 변형이 통합되면 prototype 화면을 삭제합니다.
산출물
- 변형들을 담고 있는 실시간 시각적 피커로, 넘겨보며 하나를 선정할 수 있습니다.
- 각 변형의 축, 적합한 상황, 비용을 명시하는 비교 표입니다.
- 선택된 변형에 대한 프로덕션 코드로, 코드베이스에 통합되고 prototype 화면은 삭제된 상태입니다.
- 브라우저 도구가 사용 가능한 경우 각 변형의 스크린샷입니다.
작동 방식
- 01한 요소로 범위 좁히기
brief가 여러 컴포넌트에 걸쳐 있으면, 스킬은 가장 영향력이 큰 단 하나의 요소를 선택하고 그 이유를 밝히며, 나머지는 후속 실행으로 제안합니다.
- 02현장 파악하기
프레임워크, 스타일링 시스템, 모션 라이브러리, 토큰, 제품 성격, 그리고 해당 요소가 렌더링되는 맥락을 파악하여 변형들이 제품에 자연스럽게 어울리도록 합니다.
- 03방향을 먼저 명명하기
기본값은 세 가지 변형이며, 요청이 있거나 탐색 범위가 실제로 넓을 경우 최대 다섯 가지까지 늘어납니다. 각 변형은 코드를 작성하기 전에 이름과 축이 정해집니다.
- 04피커 하니스 구축하기
프로젝트 내에서 격리된 라우트가 변형별 파일 하나와 작은 하니스 파일을 담습니다. 피커 자체는 직접 디자인하지 않고 PICKER.md에서 복사합니다.
- 05보여주기 전에 검증하기
하니스를 실행하고 모든 변형을 넘겨보며 렌더링과 인터랙션의 정확성을 확인하며, 브라우저 도구가 있으면 스크린샷도 함께 확인합니다.
- 06선정된 결과 통합하기
사용자가 선택한 후, 해당 변형은 프로젝트의 파일 구조, 명명 규칙, 토큰 사용 방식에 따라 통합되며, prototype 화면은 제거됩니다.